diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
index abdf1eb..8dd43b9 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,11 @@
     <meta property="twitter:description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
     <meta property="twitter:image" content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png" />
 
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" />
   </head>
   <body>
@@ -27,6 +32,19 @@
       <aside id="sidebar" class="sidebar">
         <h2>Equations</h2>
         <nav id="equation-selector" class="equation-selector"></nav>
+
+        <footer class="sidebar-footer">
+          <p>
+            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a>
+          </p>
+          <p>
+            Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a>
+          </p>
+          <p>
+            For more on interactive explanations, see:
+            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
+          </p>
+        </footer>
       </aside>
 
       <main id="main-content" class="main-content">
@@ -40,17 +58,6 @@ <h1 id="equation-title">Interactive Equations</h1>
         <div id="static-description" class="static-description"></div>
 
         <div id="hover-explanation" class="hover-explanation"></div>
-
-        <footer class="footer">
-          <p>
-            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
-            <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
-          </p>
-          <p>
-            For more on interactive explanations, see:
-            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
-          </p>
-        </footer>
       </main>
 
       <aside id="editor-sidebar" class="editor-sidebar">
@@ -58,17 +65,16 @@ <h1 id="equation-title">Interactive Equations</h1>
           <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
             <span class="icon">◀</span>
           </button>
-          <div class="export-dropdown">
-            <button id="export-btn" class="toolbar-btn" title="Export">Export as...</button>
-            <div id="export-menu" class="export-menu" style="display: none;">
-              <button class="export-option" data-format="html">HTML</button>
-              <button class="export-option" data-format="latex">LaTeX</button>
-              <button class="export-option" data-format="beamer">Beamer</button>
-              <button class="export-option" data-format="typst">Typst</button>
-            </div>
+          <div class="export-controls">
+            <select id="export-format" class="toolbar-select" title="Export as...">
+              <option value="" disabled selected>Export as...</option>
+              <option value="html">HTML</option>
+              <option value="latex">LaTeX</option>
+              <option value="beamer">Beamer</option>
+              <option value="typst">Typst</option>
+            </select>
           </div>
           <button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>
-          <button id="download-btn" class="toolbar-btn" title="Download file">Download</button>
           <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
         </div>
         <div id="editor-container" class="editor-container"></div>
diff --git a/public/examples/equations.json b/public/examples/equations.json
deleted file mode 100644
index 567f0d2..0000000
--- a/public/examples/equations.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "id": "new",
-    "title": "New Equation",
-    "category": "Template",
-    "file": "new.md"
-  },
-  {
-    "id": "schrodinger",
-    "title": "Schrödinger Equation",
-    "category": "Quantum Mechanics",
-    "file": "schrodinger.md"
-  },
-  {
-    "id": "maxwell",
-    "title": "Maxwell's Equations",
-    "category": "Electromagnetism",
-    "file": "maxwell.md"
-  },
-  {
-    "id": "navier-stokes",
-    "title": "Navier-Stokes Equation",
-    "category": "Fluid Dynamics",
-    "file": "navier-stokes.md"
-  },
-  {
-    "id": "euler",
-    "title": "Euler's Identity",
-    "category": "Mathematics",
-    "file": "euler.md"
-  }
-]
\ No newline at end of file
diff --git a/public/examples/navier-stokes.md b/public/examples/navier-stokes.md
deleted file mode 100644
index ce76e17..0000000
--- a/public/examples/navier-stokes.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Navier-Stokes Equation
-
-## Equation
-
-$$
-\mark[density]{\rho}\left(\mark[timederiv]{\frac{\partial \vec{v}}{\partial t}} + \mark[convection]{\vec{v} \cdot \nabla \vec{v}}\right) = -\mark[pressure]{\nabla p} + \mark[viscosity]{\mu} \mark[laplacian]{\nabla^2 \vec{v}} + \mark[force]{\vec{f}}
-$$
-
-## Description
-
-[Fluid density]{.density} times ([velocity change with time]{.timederiv} plus [convective acceleration]{.convection}) equals negative [pressure gradient]{.pressure} plus [viscosity]{.viscosity} times [Laplacian]{.laplacian} of velocity plus [external forces]{.force}.
-
-## .density
-
-The fluid density $\rho$ represents mass per unit volume.
-
-For incompressible fluids like water, density is constant. For gases, it can vary significantly with pressure and temperature.
-
-## .timederiv
-
-The partial time derivative $\frac{\partial \vec{v}}{\partial t}$ captures how velocity changes at a fixed point in space.
-
-This represents local acceleration - how fast the fluid speeds up or slows down at a specific location.
-
-## .convection
-
-The convective term $\vec{v} \cdot \nabla \vec{v}$ represents acceleration due to fluid being carried from one place to another.
-
-Even in steady flow, particles accelerate as they move from regions of low to high velocity.
-
-## .pressure
-
-The pressure gradient $\nabla p$ represents the force due to pressure differences.
-
-Fluid flows from high pressure to low pressure regions, like air flowing out of a balloon.
-
-## .viscosity
-
-The dynamic viscosity $\mu$ measures a fluid's resistance to flow.
-
-Honey has high viscosity (flows slowly), while water has low viscosity (flows easily). Units: Pa·s (Pascal-seconds).
-
-## .laplacian
-
-The Laplacian $\nabla^2 = \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2}$ measures the difference between a point's value and its neighbors' average.
-
-In the viscous term, it captures how velocity differences between neighboring fluid parcels create internal friction forces.
-
-## .force
-
-External body forces $\vec{f}$ include gravity, electromagnetic forces, or any other forces acting throughout the fluid volume.
-
-For example, gravity causes water to flow downhill.
\ No newline at end of file
diff --git a/public/examples/schrodinger.md b/public/examples/schrodinger.md
deleted file mode 100644
index 2410d28..0000000
--- a/public/examples/schrodinger.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Schrödinger Equation
-
-## Equation
-
-$$
-\mark[imaginary]{i}\mark[planck]{\hbar}\mark[timederiv]{\frac{\partial\psi}{\partial t}} = \mark[kinetic]{-\frac{\hbar^2}{2m}}\mark[spatial]{\frac{\partial^2\psi}{\partial x^2}} + \mark[potential]{V(x)}\mark[wavefunction]{\psi}
-$$
-
-## Description
-
-[How the wave changes]{.timederiv}, scaled by the [imaginary unit]{.imaginary} and the [Planck constant]{.planck}, equals ([energy from motion]{.kinetic} from [spatial curvature]{.spatial} + [energy from position]{.potential}) acting on [the quantum wave]{.wavefunction}.
-
-## .imaginary
-
-Indicates the quantum nature of the equation and ensures unitary time evolution. The imaginary unit $i$ is fundamental to quantum mechanics, distinguishing it from classical physics.
-
-## .planck
-
-Fundamental constant connecting energy and frequency.
-
-**Value:** $\hbar \approx 1.055 \times 10^{-34}$ J·s
-
-This reduced Planck constant sets the scale for quantum effects.
-
-## .timederiv
-
-Rate of change of the wavefunction with respect to time.
-
-This derivative tells us how the quantum state evolves as time progresses.
-
-## .kinetic
-
-Kinetic energy operator coefficient, where $m$ is the particle mass.
-
-The factor $-\frac{\hbar^2}{2m}$ appears in the kinetic energy term of the Hamiltonian.
-
-## .spatial
-
-Second derivative describing spatial curvature of the wavefunction (Laplacian).
-
-Higher curvature corresponds to higher kinetic energy, reflecting the wave-like nature of quantum particles.
-
-## .potential
-
-External potential energy as a function of position.
-
-$V(x)$ represents forces acting on the particle, such as electromagnetic fields or gravitational wells.
-
-## .wavefunction
-
-Complex-valued quantum state describing the particle.
-
-The wavefunction $\psi$ contains all information about the quantum system's state. Its absolute square gives the probability density.
diff --git a/scripts/validate-content.ts b/scripts/validate-content.ts
index 08a4d79..1a2a517 100644
--- a/scripts/validate-content.ts
+++ b/scripts/validate-content.ts
@@ -7,19 +7,31 @@ console.log('Validating equation files...');
 
 let hasErrors = false;
 
-// Load equations list
-const equationsJson = readFileSync('./public/examples/equations.json', 'utf-8');
-const equations = JSON.parse(equationsJson);
+// Scan src/examples directory for markdown files
+const examplesDir = './src/examples';
+const files = readdirSync(examplesDir).filter(f => f.endsWith('.md'));
+
+console.log(`Found ${files.length} equation files`);
 
 // Validate each equation file
-for (const equation of equations) {
-  const filePath = `./public/examples/${equation.file}`;
-  console.log(`\nChecking ${equation.title} (${equation.file})...`);
+for (const file of files) {
+  const filePath = `${examplesDir}/${file}`;
+  console.log(`\nChecking ${file}...`);
 
   try {
     const content = readFileSync(filePath, 'utf-8');
     const parsed = parseContent(content);
+    console.log(`  ✓ Title: ${parsed.title || '(no title)'}`);
     console.log(`  ✓ ${parsed.termOrder.length} terms found`);
+
+    if (parsed.errors.length > 0) {
+      console.error(`  ✗ Validation errors:`);
+      parsed.errors.forEach(err => console.error(`    - ${err}`));
+      hasErrors = true;
+    }
+    if (parsed.warnings.length > 0) {
+      parsed.warnings.forEach(warn => console.warn(`  ⚠ ${warn}`));
+    }
   } catch (error) {
     console.error(`  ✗ Validation failed:`);
     if (error instanceof Error) {
diff --git a/src/examples/bayes.md b/src/examples/bayes.md
new file mode 100644
index 0000000..80daca5
--- /dev/null
+++ b/src/examples/bayes.md
@@ -0,0 +1,36 @@
+# Bayes' Theorem
+
+## Equation
+
+$$
+\mark[posterior]{P(H|E)} = \frac{\mark[likelihood]{P(E|H)} \mark[prior]{P(H)}}{\mark[evidence]{P(E)}}
+$$
+
+## Description
+
+Your [updated belief]{.posterior} is your [prior view]{.prior} re-weighted by its [predictive power]{.likelihood} and normalized by the [total probability of the evidence]{.evidence}.
+
+## .posterior
+
+Posterior Probability $P(H|E)$.
+
+What you believe *after* seeing the data. It is the probability of the Hypothesis ($H$) being true given the Evidence ($E$). This is the output of the learning process.
+
+## .likelihood
+
+Likelihood $P(E|H)$.
+
+How well the hypothesis explains the data. It asks: "If my theory were true, how likely would this outcome be?" High likelihood means the theory strongly predicts the observed evidence.
+
+## .prior
+
+Prior Probability $P(H)$.
+
+Your starting assumption *before* seeing new data. It represents base rates or previous knowledge. Strong priors are hard to shift; weak priors change easily with new evidence.
+
+## .evidence
+
+Marginal Likelihood $P(E)$.
+
+The total probability of seeing the evidence under *all* possible hypotheses. It acts as a normalization factor. If the evidence is surprising (low $P(E)$), it has a stronger effect on updating your beliefs.
+
diff --git a/src/examples/dft.md b/src/examples/dft.md
new file mode 100644
index 0000000..320dfd7
--- /dev/null
+++ b/src/examples/dft.md
@@ -0,0 +1,47 @@
+# Discrete Fourier Transform
+
+## Equation
+
+$$
+\mark[amplitude]{X}_{\mark[freq]{k}} = \mark[average]{\frac{1}{N}} \mark[average]{\sum_{n=0}^{N-1}} \mark[signal]{x_n} \mark[spin]{e}^{\mark[spin]{i} \mark[circle]{2\pi} \mark[freq]{k} \mark[average]{\frac{n}{N}}}
+$$
+
+## Description
+
+To find [the amplitude]{.amplitude} [at a particular frequency]{.freq}, [spin]{.spin} [your signal]{.signal} [around a circle]{.circle} [at that frequency]{.freq}, and [average a bunch of points along that path]{.average}.
+
+## .amplitude
+
+The transform output $X_k$.
+
+Represents the **complex amplitude** (magnitude and phase) of the signal at a specific frequency. Its magnitude tells you "how much" of that frequency is present.
+
+## .freq
+
+The frequency index $k$.
+
+Determines which frequency we are analyzing. It appears both in the output index (which bin?) and in the rotation term (how fast do we spin?).
+
+## .average
+
+The averaging operation.
+
+Combines the summation ($\sum$) and the division by $N$ (and the time index term $\frac{n}{N}$). It turns the sum into an average value over the signal's duration.
+
+## .signal
+
+The input signal $x_n$.
+
+Your raw data points (audio, image, stock prices) sampled over time.
+
+## .spin
+
+The exponential term $e^i$.
+
+This is the rotation operator basis.
+
+## .circle
+
+The full circle constant $2\pi$.
+
+Represents one full rotation in radians.
diff --git a/src/examples/einstein.md b/src/examples/einstein.md
new file mode 100644
index 0000000..515f6e8
--- /dev/null
+++ b/src/examples/einstein.md
@@ -0,0 +1,41 @@
+# Einstein Field Equations
+
+## Equation
+
+$$
+\mark[ricci]{R_{\mu\nu}} \mark[scalar]{- \frac{1}{2}R g_{\mu\nu}} + \mark[dark-energy]{\Lambda g_{\mu\nu}} = \mark[coupling]{\frac{8\pi G}{c^4}} \mark[matter]{T_{\mu\nu}}
+$$
+
+## Description
+
+The [Ricci curvature]{.ricci} and [scalar curvature]{.scalar} combined with [dark energy]{.dark-energy} are determined by the [matter distribution]{.matter} scaled by the [gravitational constant]{.coupling}.
+
+## .ricci
+
+Ricci Curvature Tensor ($R_{\mu\nu}$).
+
+This describes how the volume of a shape changes as it moves through spacetime. It represents the part of curvature that causes matter to converge or diverge, directly corresponding to the presence of mass and energy.
+
+## .scalar
+
+Scalar Curvature Term ($-\frac{1}{2}R g_{\mu\nu}$).
+
+This geometric correction involves the Ricci scalar $R$ and metric tensor $g_{\mu\nu}$. It ensures that the geometry side of the equation mathematically conserves energy and momentum, matching the physics of the matter side.
+
+## .dark-energy
+
+The Cosmological Constant ($\Lambda$).
+
+An intrinsic energy of empty space that pushes the universe apart. It opposes gravity and is responsible for the accelerating expansion of the universe.
+
+## .coupling
+
+Gravitational Coupling.
+
+This tiny factor ($\approx 2 \times 10^{-43}$) describes how "stiff" spacetime is. It explains why gravity is so weak: it takes a massive amount of matter (like the Earth) to produce even a modest curvature.
+
+## .matter
+
+Stress-Energy Tensor ($T_{\mu\nu}$).
+
+The source of gravity. It tells space how to curve using mass density ($\rho$), pressure ($p$), and momentum flux. In General Relativity, all energy gravitates, not just mass.
diff --git a/src/examples/entropy.md b/src/examples/entropy.md
new file mode 100644
index 0000000..8c1e0ef
--- /dev/null
+++ b/src/examples/entropy.md
@@ -0,0 +1,36 @@
+# Shannon Entropy
+
+## Equation
+
+$$
+\mark[entropy]{H} = - \mark[average]{\sum_{i}} \mark[prob]{p(x_i)} \mark[bits]{\log_2 p(x_i)}
+$$
+
+## Description
+
+[Entropy]{.entropy} is the [average]{.average} [information content]{.bits} generated by a source, weighted by the [probability]{.prob} of each outcome. It measures "surprise" or "uncertainty".
+
+## .entropy
+
+Shannon Entropy ($H$).
+
+Quantifies the uncertainty in a system. It represents the theoretical minimum average number of bits needed to encode a message from this source. High entropy = pure randomness (maximum surprise). Low entropy = predictability.
+
+## .average
+
+Expected Value ($-\sum$).
+
+We calculate the weighted average over all possible outcomes. The negative sign is necessary because $\log(p)$ is negative for probabilities $p < 1$; it ensures the resulting entropy is positive.
+
+## .prob
+
+Probability ($p(x_i)$).
+
+The likelihood of a specific event occurring. Common events have high probability (and low information). Rare events have low probability (and high information).
+
+## .bits
+
+Log-probability ($\log_2 p$).
+
+Measures the "length" or information content of a specific event in bits. An event with $p=1/2$ provides 1 bit of information ($-\log_2 0.5 = 1$). An event with $p=1/8$ provides 3 bits. We learn more when a rare event happens.
+
diff --git a/public/examples/euler.md b/src/examples/euler.md
similarity index 100%
rename from public/examples/euler.md
rename to src/examples/euler.md
diff --git a/src/examples/grand-canonical.md b/src/examples/grand-canonical.md
new file mode 100644
index 0000000..b28e7e5
--- /dev/null
+++ b/src/examples/grand-canonical.md
@@ -0,0 +1,53 @@
+# Grand Canonical Ensemble
+
+## Equation
+
+$$
+\mark[prob]{P_i} = \frac{1}{\mark[partition]{\mathcal{Z}}} \mark[weight]{e}^{-\frac{\mark[energy]{E_i} - \mark[chempot]{\mu}\mark[particles]{N_i}}{\mark[temp]{k_B T}}}
+$$
+
+## Description
+
+The [probability]{.prob} is determined by the [Boltzmann weight]{.weight}: states with lower [energy]{.energy} are more likely, while the [chemical potential]{.chempot} encourages adding [particles]{.particles}. The [temperature]{.temp} scales these effects, and the [partition function]{.partition} normalizes the result.
+
+## .prob
+
+Probability ($P_i$).
+
+The fraction of time the system spends in this specific microstate.
+
+## .partition
+
+Grand Partition Function ($\mathcal{Z}$).
+
+The sum of weights over all possible states. It ensures that all probabilities add up to exactly 1.
+
+## .weight
+
+Boltzmann Factor.
+
+The relative likelihood of the state. The negative sign in the exponent means that states with higher effective energy are exponentially less probable.
+
+## .energy
+
+State Energy ($E_i$).
+
+The mechanical energy of the specific configuration (e.g., kinetic + potential).
+
+## .chempot
+
+Chemical Potential ($\mu$).
+
+The change in energy when adding a particle. It acts like a "voltage" for matter—particles flow from high $\mu$ to low $\mu$.
+
+## .particles
+
+Particle Number ($N_i$).
+
+The number of atoms or molecules in the current state. In this ensemble, this number fluctuates as the system exchanges matter with a reservoir.
+
+## .temp
+
+Thermal Energy ($k_B T$).
+
+The average energy of random thermal motion. It acts as the denominator, meaning high temperatures "wash out" the differences between energy states.
diff --git a/public/examples/maxwell.md b/src/examples/maxwell.md
similarity index 100%
rename from public/examples/maxwell.md
rename to src/examples/maxwell.md
diff --git a/src/examples/navier-stokes.md b/src/examples/navier-stokes.md
new file mode 100644
index 0000000..3130467
--- /dev/null
+++ b/src/examples/navier-stokes.md
@@ -0,0 +1,47 @@
+# Navier-Stokes Equation
+
+## Equation
+
+$$
+\mark[density]{\rho} \left( \mark[timederiv]{\frac{\partial \vec{v}}{\partial t}} + \mark[convection]{(\vec{v} \cdot \nabla) \vec{v}} \right) = \mark[pressure]{-\nabla p} + \mark[viscosity]{\mu \nabla^2 \vec{v}} + \mark[force]{\vec{f}}
+$$
+
+## Description
+
+The [fluid mass]{.density} accelerates ([over time]{.timederiv} and [along paths]{.convection}) due to forces. These include [pressure]{.pressure}, [viscosity]{.viscosity}, and [external fields]{.force}.
+
+## .density
+
+Fluid density $\rho$ (mass per unit volume).
+
+It acts as the "mass" term in $F=ma$. Heavier fluids (like water) carry more momentum and are harder to accelerate than lighter fluids (like air).
+
+## .timederiv
+
+Unsteady acceleration (local change).
+
+Measures how the velocity changes at a fixed point in space over time. If the flow is "steady" (like a calm river), this term is zero, even if the water is moving fast.
+
+## .convection
+
+Convective acceleration (change due to movement).
+
+This non-linear term captures how fluid particles accelerate as they move to a region with different velocity (e.g., water speeding up as it enters a narrow pipe). It is responsible for turbulence and the complex behavior of fluids.
+
+## .pressure
+
+Pressure gradient force.
+
+Fluids naturally flow from high pressure to low pressure (down the gradient). This term drives the flow, pushing fluid parcels toward lower pressure zones. The negative sign ensures the force points _against_ the increase in pressure.
+
+## .viscosity
+
+Viscous diffusion (internal friction).
+
+Describes how the fluid resists flow due to internal friction. The term $\mu \nabla^2 \vec{v}$ acts like diffusion for momentum, smoothing out velocity differences between neighboring layers of fluid. High viscosity (honey) suppresses turbulence; low viscosity (water) allows it.
+
+## .force
+
+External body forces.
+
+Forces that act on the bulk of the fluid, such as gravity ($\rho \vec{g}$), magnetic forces, or Coriolis forces in atmospheric flows.
diff --git a/public/examples/new.md b/src/examples/new.md
similarity index 100%
rename from public/examples/new.md
rename to src/examples/new.md
diff --git a/src/examples/schrodinger.md b/src/examples/schrodinger.md
new file mode 100644
index 0000000..d9c5d0a
--- /dev/null
+++ b/src/examples/schrodinger.md
@@ -0,0 +1,48 @@
+# Schrödinger Equation
+
+## Equation
+
+$$
+\mark[imaginary]{i}\mark[planck]{\hbar} \mark[timederiv]{\frac{\partial}{\partial t}} \mark[wavefunction]{\psi(x,t)} = \mark[kinetic]{-\frac{\hbar^2}{2m} \frac{\partial^2}{\partial x^2}} \mark[wavefunction]{\psi(x,t)} + \mark[potential]{V(x)} \mark[wavefunction]{\psi(x,t)}
+$$
+
+## Description
+
+The [time evolution]{.timederiv} of the [quantum state]{.wavefunction} is determined by its total energy: the [kinetic energy]{.kinetic} (derived from spatial curvature) plus the [potential energy]{.potential}. The [imaginary unit]{.imaginary} drives the wave's oscillation, while [Planck's constant]{.planck} sets the scale of quantum action.
+
+## .imaginary
+
+The imaginary unit $i = \sqrt{-1}$ is essential to quantum mechanics.
+
+It causes the wavefunction to rotate in the complex plane rather than just grow or shrink. This rotation manifests as wave-like interference and ensures that the total probability remains conserved (unitary evolution).
+
+## .planck
+
+The reduced Planck constant $\hbar = h/2\pi$.
+
+It represents the fundamental quantum of action, setting the scale at which quantum effects become significant. It connects energy to frequency ($E = \hbar\omega$) and momentum to wavenumber ($p = \hbar k$).
+**Value:** $\approx 1.055 \times 10^{-34}$ J·s.
+
+## .timederiv
+
+The rate of change of the wavefunction over time.
+
+This derivative describes how the state evolves. The $i\hbar$ factor turns this rate of change into an energy term (the Hamiltonian), linking time evolution directly to the system's total energy.
+
+## .kinetic
+
+The kinetic energy operator.
+
+In classical mechanics, $E_k = p^2 / 2m$. In quantum mechanics, momentum is an operator $\hat{p} = -i\hbar \frac{\partial}{\partial x}$. Squaring this gives the term $-\frac{\hbar^2}{2m} \frac{\partial^2}{\partial x^2}$. It measures the curvature of the wave: sharper curves mean higher momentum and higher kinetic energy.
+
+## .potential
+
+The potential energy function $V(x)$.
+
+This represents the environment the particle moves in, such as an electron in an electric field or a particle in a box. It acts as a simple multiplicative factor at each point in space.
+
+## .wavefunction
+
+The wavefunction $\psi(x,t)$, a complex-valued probability amplitude.
+
+It contains all measurable information about the particle. The probability of finding the particle at position $x$ is given by the Born rule: $P(x) = |\psi(x,t)|^2$.
diff --git a/src/parser.ts b/src/parser.ts
index 722332b..5043462 100644
--- a/src/parser.ts
+++ b/src/parser.ts
@@ -85,132 +85,137 @@ function convertMarkToHtmlClass(line: string, equationTerms: Set<string>, termOr
  * - Definitions: ## .classname
  */
 export function parseContent(markdown: string): ParsedContent {
-  const lines = markdown.split('\n');
-  let title: string | undefined = undefined;
-  let latex = '';
-  let description = '';
-  const definitions = new Map<string, string>();
-  const termOrder: string[] = [];
-  const equationTerms = new Set<string>(); // Terms marked in equation with \mark
-  const descriptionTerms = new Set<string>(); // Terms used in description with [text]{.class}
-  const seenTerms = new Set<string>(); // All terms seen (for color ordering)
-
-  let inEquation = false;
-  let inDescription = false;
-  let currentDefClass = '';
-  let currentDefContent: string[] = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    // Parse title from # heading (only first one)
-    if (!title && line.match(/^#\s+[^#]/)) {
-      title = line.substring(2).trim(); // Remove "# "
-      continue;
-    }
-
-    // Detect equation block
-    if (line.trim() === '$$') {
-      if (!inEquation) {
-        inEquation = true;
+  try {
+    const lines = markdown.split('\n');
+    let title: string | undefined = undefined;
+    let latex = '';
+    let description = '';
+    const definitions = new Map<string, string>();
+    const termOrder: string[] = [];
+    const equationTerms = new Set<string>(); // Terms marked in equation with \mark
+    const descriptionTerms = new Set<string>(); // Terms used in description with [text]{.class}
+    const seenTerms = new Set<string>(); // All terms seen (for color ordering)
+
+    let inEquation = false;
+    let inDescription = false;
+    let currentDefClass = '';
+    let currentDefContent: string[] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Parse title from # heading (only first one)
+      if (!title && line.match(/^#\s+[^#]/)) {
+        title = line.substring(2).trim(); // Remove "# "
         continue;
-      } else {
-        inEquation = false;
+      }
+
+      // Detect equation block
+      if (line.trim() === '$$') {
+        if (!inEquation) {
+          inEquation = true;
+          continue;
+        } else {
+          inEquation = false;
+          continue;
+        }
+      }
+
+      // Parse equation content
+      if (inEquation) {
+        // Convert \mark[class]{latex} to \htmlClass{term-class}{latex}
+        // Use helper function to handle nested braces correctly
+        const converted = convertMarkToHtmlClass(line, equationTerms, termOrder, seenTerms);
+        latex += converted + '\n';
         continue;
       }
-    }
 
-    // Parse equation content
-    if (inEquation) {
-      // Convert \mark[class]{latex} to \htmlClass{term-class}{latex}
-      // Use helper function to handle nested braces correctly
-      const converted = convertMarkToHtmlClass(line, equationTerms, termOrder, seenTerms);
-      latex += converted + '\n';
-      continue;
-    }
+      // Detect description section
+      if (line.trim() === '## Description') {
+        inDescription = true;
+        continue;
+      }
 
-    // Detect description section
-    if (line.trim() === '## Description') {
-      inDescription = true;
-      continue;
-    }
+      // Detect definition section
+      if (line.match(/^## \./)) {
+        // Save previous definition if any
+        if (currentDefClass) {
+          definitions.set(currentDefClass, currentDefContent.join('\n').trim());
+        }
 
-    // Detect definition section
-    if (line.match(/^## \./)) {
-      // Save previous definition if any
-      if (currentDefClass) {
-        definitions.set(currentDefClass, currentDefContent.join('\n').trim());
+        currentDefClass = line.substring(4).trim(); // Remove "## ."
+        currentDefContent = [];
+        inDescription = false;
+        continue;
       }
 
-      currentDefClass = line.substring(4).trim(); // Remove "## ."
-      currentDefContent = [];
-      inDescription = false;
-      continue;
-    }
+      // Parse description content
+      if (inDescription && line.trim() && !line.startsWith('#')) {
+        // Convert [text]{.class} to <span class="term-class">text</span>
+        const converted = line.replace(/\[([^\]]+)\]\{\.([^\}]+)\}/g, (_match, text, className) => {
+          const termClass = `term-${className}`;
+          descriptionTerms.add(className); // Track description terms
+          // NOTE: Do NOT add to termOrder here - only equation marks define termOrder
+          return `<span class="${termClass}">${text}</span>`;
+        });
+        description += converted + ' ';
+        continue;
+      }
 
-    // Parse description content
-    if (inDescription && line.trim() && !line.startsWith('#')) {
-      // Convert [text]{.class} to <span class="term-class">text</span>
-      const converted = line.replace(/\[([^\]]+)\]\{\.([^\}]+)\}/g, (_match, text, className) => {
-        const termClass = `term-${className}`;
-        descriptionTerms.add(className); // Track description terms
-        // NOTE: Do NOT add to termOrder here - only equation marks define termOrder
-        return `<span class="${termClass}">${text}</span>`;
-      });
-      description += converted + ' ';
-      continue;
+      // Collect definition content
+      if (currentDefClass && line.trim() && !line.startsWith('#')) {
+        currentDefContent.push(line);
+      }
     }
 
-    // Collect definition content
-    if (currentDefClass && line.trim() && !line.startsWith('#')) {
-      currentDefContent.push(line);
+    // Save last definition
+    if (currentDefClass) {
+      definitions.set(currentDefClass, currentDefContent.join('\n').trim());
     }
-  }
 
-  // Save last definition
-  if (currentDefClass) {
-    definitions.set(currentDefClass, currentDefContent.join('\n').trim());
+    // VALIDATION: Build-time checks
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    // Helper to validate term relationships
+    const validateTerms = (
+      sourceTerms: Iterable<string>,
+      targetTerms: Set<string> | Map<string, string>,
+      getMessage: (term: string) => string,
+      target: string[]
+    ) => {
+      for (const term of sourceTerms) {
+        if (!targetTerms.has(term)) target.push(getMessage(term));
+      }
+    };
+
+    // Run all validation checks
+    validateTerms(descriptionTerms, equationTerms,
+      term => `Term "${term}" is used in description [text]{.${term}} but not marked in equation with \\mark[${term}]{...}`, errors);
+    validateTerms(equationTerms, definitions,
+      term => `Term "${term}" is marked in equation with \\mark[${term}]{...} but has no definition (## .${term})`, errors);
+    validateTerms(equationTerms, descriptionTerms,
+      term => `Term "${term}" is marked in equation but not used in description`, warnings);
+    validateTerms(definitions.keys(), equationTerms,
+      term => `Definition "## .${term}" exists but term is never marked in equation`, warnings);
+
+    // Log validation results
+    if (errors.length > 0) console.error('Content validation errors:', errors);
+    if (warnings.length > 0) console.warn('Content validation warnings:', warnings);
+
+    return {
+      title,
+      latex: latex.trim(),
+      description: description.trim(),
+      definitions,
+      termOrder,
+      errors,
+      warnings,
+    };
+  } catch (e) {
+    console.error("Error in parseContent", e);
+    throw e;
   }
-
-  // VALIDATION: Build-time checks
-  const errors: string[] = [];
-  const warnings: string[] = [];
-
-  // Helper to validate term relationships
-  const validateTerms = (
-    sourceTerms: Iterable<string>,
-    targetTerms: Set<string> | Map<string, string>,
-    getMessage: (term: string) => string,
-    target: string[]
-  ) => {
-    for (const term of sourceTerms) {
-      if (!targetTerms.has(term)) target.push(getMessage(term));
-    }
-  };
-
-  // Run all validation checks
-  validateTerms(descriptionTerms, equationTerms,
-    term => `Term "${term}" is used in description [text]{.${term}} but not marked in equation with \\mark[${term}]{...}`, errors);
-  validateTerms(equationTerms, definitions,
-    term => `Term "${term}" is marked in equation with \\mark[${term}]{...} but has no definition (## .${term})`, errors);
-  validateTerms(equationTerms, descriptionTerms,
-    term => `Term "${term}" is marked in equation but not used in description`, warnings);
-  validateTerms(definitions.keys(), equationTerms,
-    term => `Definition "## .${term}" exists but term is never marked in equation`, warnings);
-
-  // Log validation results
-  if (errors.length > 0) console.error('Content validation errors:', errors);
-  if (warnings.length > 0) console.warn('Content validation warnings:', warnings);
-
-  return {
-    title,
-    latex: latex.trim(),
-    description: description.trim(),
-    definitions,
-    termOrder,
-    errors,
-    warnings,
-  };
 }
 
 /**
diff --git a/src/style.css b/src/style.css
index 55a1600..f94b1e3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,8 +1,36 @@
 :root {
-  /* Layout and theme colors */
-  --bg-color: #ffffff;
-  --text-color: #1f2937;
-  --border-color: #d1d5db;
+  /* Modern Color Palette */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f3f4f6; /* Light gray for sidebars/backgrounds */
+  --bg-tertiary: #e5e7eb;
+
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-tertiary: #9ca3af;
+
+  --accent-color: #2563eb; /* Royal Blue */
+  --accent-hover: #1d4ed8;
+  --accent-light: #eff6ff;
+
+  --border-color: #e5e7eb;
+  --border-hover: #d1d5db;
+
+  --success: #10b981;
+  --danger: #ef4444;
+
+  /* Typography */
+  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  --font-math: "Crimson Pro", "ETBembo", "Palatino Linotype", "Book Antiqua",
+    Palatino, Georgia, serif;
+  --font-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New",
+    monospace;
+
+  /* Spacing */
+  --sidebar-width: 280px;
+  --editor-width: 500px;
+  --header-height: 60px;
 }
 
 * {
@@ -12,314 +40,382 @@
 }
 
 body {
-  font-family: 'ETBembo', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
-  background-color: var(--bg-color);
-  color: var(--text-color);
+  font-family: var(--font-math);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
   line-height: 1.6;
-  margin: 0;
-  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  height: 100vh;
+  overflow: hidden;
 }
 
 #app {
   display: flex;
-  min-height: 100vh;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
 
-/* Sidebar */
+/* Sidebar Navigation */
 .sidebar {
-  width: 250px;
-  min-width: 250px;
-  background-color: #f9fafb;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background-color: var(--bg-secondary);
   border-right: 1px solid var(--border-color);
-  padding: 2rem 1.5rem;
+  padding: 2rem 1rem;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar h2 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  margin-bottom: 1.5rem;
-  color: var(--text-color);
-}
-
-/* Main content */
-.main-content {
-  flex: 1;
-  padding: 2rem;
-  max-width: 900px;
-  margin: 0 auto;
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  margin-bottom: 1rem;
+  padding-left: 0.75rem;
 }
 
-h1 {
-  font-size: 2rem;
-  font-weight: 400;
-  color: var(--text-color);
-  margin: 0;
-  margin-bottom: 0.5rem;
+/* Equation Selector Buttons */
+.equation-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
-.subtitle {
-  font-size: 1rem;
-  color: #6b7280;
-  margin-bottom: 2rem;
+.equation-selector button {
+  font-family: var(--font-ui);
+  padding: 0.625rem 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.9375rem;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  font-weight: 500;
 }
 
-#equation-container {
-  padding: 2rem 0;
-  margin-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 10;
+.equation-selector button:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: var(--text-primary);
 }
 
-#equation-container .katex {
-  font-size: 1.6rem;
+.equation-selector button.active {
+  background-color: #fff;
+  color: var(--accent-color);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-weight: 600;
 }
 
-/* Color-coded terms - generic for any class name */
-[class*="term-"] {
-  transition: opacity 0.2s ease;
+.equation-selector button.new-equation {
+  margin-bottom: 0.5rem;
+  border: 1px dashed var(--border-color);
+  color: var(--text-secondary);
 }
 
-/* Ensure child elements don't block hover events */
-[class*="term-"] * {
-  pointer-events: none !important;
+.equation-selector button.new-equation:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  background-color: var(--accent-light);
 }
 
-/* Hover effects - generic for all term classes */
-[class*="term-"]:hover,
-.term-active {
-  opacity: 0.6;
-  cursor: pointer;
+.equation-selector button.new-equation.active {
+  border-style: solid;
+  border-color: transparent;
 }
 
-/* Equation selector */
-.equation-selector {
+/* Main Content */
+.main-content {
+  flex: 1;
+  padding: 3rem 4rem;
+  max-width: 100%;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  align-items: center; /* Center content */
 }
 
-.equation-selector button {
-  padding: 0.5rem 0;
-  border: none;
-  background: none;
-  color: #6b7280;
-  font-size: 0.9375rem;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: left;
-  transition: color 0.2s ease;
+.content-wrapper {
+  width: 100%;
+  max-width: 800px;
 }
 
-.equation-selector button:hover {
-  color: var(--text-color);
+h1 {
+  font-family: var(--font-math);
+  font-size: 2.5rem;
+  font-weight: 400;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+  text-align: center;
+  letter-spacing: -0.02em;
 }
 
-.equation-selector button.active {
-  color: var(--text-color);
-  font-weight: 500;
+.subtitle {
+  font-family: var(--font-ui);
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 2.5rem;
+  text-align: center;
+  opacity: 0.8;
 }
 
-/* Color scheme switcher */
+/* Color Scheme Switcher */
 .color-scheme-switcher {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  justify-content: flex-start;
+  justify-content: center;
+  background-color: var(--bg-secondary);
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  margin: 0 auto 3rem auto; /* Center it */
+  width: fit-content;
 }
 
 .color-scheme-switcher button {
-  padding: 0.25rem 0.75rem;
-  border: 1px solid var(--border-color);
+  font-family: var(--font-ui);
+  padding: 0.375rem 1rem;
+  border: none;
   background-color: transparent;
-  color: var(--text-color);
+  color: var(--text-secondary);
   font-size: 0.875rem;
   cursor: pointer;
-  font-family: inherit;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.color-scheme-switcher button:hover {
+  color: var(--text-primary);
 }
 
 .color-scheme-switcher button.active {
-  background-color: var(--text-color);
-  color: var(--bg-color);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-weight: 600;
+}
+
+/* Equation Display */
+#equation-container {
+  padding: 3rem 2rem;
+  margin-bottom: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  background: var(--bg-primary);
+  /* Optional: subtle card look */
+  /* border: 1px solid var(--border-color); */
+  /* border-radius: 1rem; */
+}
+
+#equation-container .katex {
+  font-size: 2rem; /* Larger equation */
+  line-height: 1.2;
+  position: relative;
+  z-index: 1;
 }
 
-/* Static description with colored terms */
+/* Removed old .selection-rect style as it's now inline in SVG */
+
+/* Term Interaction */
+[class*="term-"] {
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+}
+
+/* Ensure child elements don't block hover events */
+[class*="term-"] * {
+  pointer-events: none !important;
+}
+
+/* Description Text */
 .static-description {
   border-top: 1px solid var(--border-color);
-  padding-top: 1.5rem;
-  margin-bottom: 1rem;
-  font-size: 1rem;
-  line-height: 1.6;
+  padding-top: 2rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.7;
   position: relative;
   z-index: 1;
+  text-align: left; /* Keep text left-aligned for readability */
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .static-description p {
   margin: 0;
-  color: var(--text-color);
+  color: var(--text-primary);
 }
 
 .static-description span {
   font-weight: 600;
+  padding: 0 2px;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+
+.static-description span.active {
+  background-color: var(--accent-light);
+  color: var(--accent-color);
 }
 
-/* Hover explanation */
+/* Hover Explanation (Dynamic) */
 .hover-explanation {
-  border-top: 1px solid var(--border-color);
-  padding-top: 1rem;
   min-height: 3rem;
   opacity: 0;
-  pointer-events: none;
+  transition: opacity 0.3s ease;
   font-size: 1rem;
   line-height: 1.6;
-  color: var(--text-color);
+  color: var(--text-secondary);
+  text-align: left; /* Left aligned */
+  font-family: var(--font-ui);
+  margin: 1rem auto 0 auto;
+
+  /* Frame style */
+  border: 1px solid var(--accent-color); /* Relevant color */
+  background-color: #fff;
+  padding: 1rem;
+  border-radius: 4px;
+
+  /* Full width of text column */
+  width: 100%;
+  max-width: 700px; /* Match static-description max-width */
 }
 
 .hover-explanation.visible {
   opacity: 1;
 }
 
-/* Clicked/selected term indication */
-.term-clicked {
-  opacity: 0.6;
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-/* Footer */
-.footer {
-  margin-top: 3rem;
+/* Sidebar Footer */
+.sidebar-footer {
+  margin-top: auto;
   padding-top: 2rem;
-  border-top: 1px solid var(--border-color);
-  font-size: 0.875rem;
-  color: #6b7280;
-  text-align: center;
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  color: var(--text-secondary); /* Darker text */
+  /* text-align: center; */
 }
 
-.footer p {
+.sidebar-footer p {
   margin: 0.5rem 0;
+  line-height: 1.5;
 }
 
-.footer a {
-  color: #6b7280;
+.sidebar-footer a {
+  color: var(--accent-color);
   text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.2s ease;
+  border-bottom: none;
+  transition: all 0.2s ease;
 }
 
-.footer a:hover {
-  border-bottom-color: #6b7280;
+.sidebar-footer a:hover {
+  text-decoration: underline;
 }
 
-/* Editor sidebar */
+/* Editor Sidebar */
 .editor-sidebar {
-  width: 500px;
-  min-width: 500px;
-  background-color: #f9fafb;
+  width: var(--editor-width);
+  min-width: var(--editor-width);
+  background-color: var(--bg-primary);
   border-left: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
-  transition: transform 0.3s ease, width 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
+  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.03);
+  z-index: 20;
 }
 
 .editor-sidebar.collapsed {
-  width: 50px;
-  min-width: 50px;
+  width: 48px; /* Narrower collapsed state */
+  min-width: 48px;
 }
 
 .editor-toolbar {
   display: flex;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 0.75rem;
+  padding: 0.75rem;
   border-bottom: 1px solid var(--border-color);
-  background-color: #f9fafb;
-  flex-shrink: 0;
+  background-color: var(--bg-secondary);
   align-items: center;
+  height: 48px;
 }
 
 .editor-sidebar.collapsed .editor-toolbar {
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 0.25rem;
+  padding: 0.75rem 0;
+  height: 100%;
+  gap: 1rem;
 }
 
 .toolbar-btn {
-  padding: 0;
+  font-family: var(--font-ui);
+  padding: 0.25rem 0.5rem;
   border: none;
-  background: none;
-  color: #6b7280;
-  font-size: 0.875rem;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
   cursor: pointer;
-  font-family: inherit;
-  transition: color 0.2s ease;
-  white-space: nowrap;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .toolbar-btn:hover {
-  color: var(--text-color);
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--text-primary);
 }
 
 .toolbar-link {
-  font-size: 0.875rem;
-  color: #6b7280;
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
   text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-  white-space: nowrap;
-}
-
-.toolbar-link:hover {
-  color: var(--text-color);
-  border-bottom-color: #6b7280;
+  padding: 0.25rem 0.5rem;
 }
 
-.editor-sidebar.collapsed .toolbar-btn,
+.editor-sidebar.collapsed .toolbar-btn span:not(.icon),
 .editor-sidebar.collapsed .toolbar-link {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  font-size: 0.875rem;
+  display: none;
 }
 
 #toggle-editor-btn .icon {
-  display: inline-block;
-  transition: transform 0.3s ease;
-}
-
-.editor-sidebar.collapsed #toggle-editor-btn .icon {
-  transform: rotate(180deg);
+  font-size: 0.75rem;
 }
 
 .editor-container {
   flex: 1;
   overflow: auto;
-  padding: 1rem;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  padding: 1.5rem;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.6;
+  background-color: var(--bg-primary);
 }
 
-.editor-sidebar.collapsed .editor-container {
-  display: none;
-}
-
-/* Prism.js syntax highlighting styles */
+/* Prism Customization */
 .editor-container code {
   display: block;
   white-space: pre-wrap;
   word-wrap: break-word;
-  color: var(--text-color);
+  color: var(--text-primary);
   outline: none;
-  padding: 0;
-  margin: 0;
 }
 
-/* Syntax highlighting - minimal, term colors applied via JS */
 .token.heading {
   font-weight: 600;
+  color: var(--accent-color);
 }
 
 .token.bold {
@@ -331,69 +427,110 @@ h1 {
 }
 
 .token.punctuation {
-  color: #6a737d;
+  color: var(--text-tertiary);
+}
+
+.token.latex-mark {
+  /* Base color handled by JS, but ensuring visibility */
+  color: inherit;
+}
+
+.token.keyword {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.token.md-ref {
+  /* Base color handled by JS */
+  color: inherit;
+}
+
+/* Child tokens inside colored parents should inherit the color */
+.token.latex-mark .token.keyword,
+.token.latex-mark .token.punctuation,
+.token.latex-mark .token.mark-class,
+.token.latex-mark .token.mark-content,
+.token.md-ref .token.ref-text,
+.token.md-ref .token.ref-class,
+.token.md-ref .token.punctuation,
+.token.heading-class .token.punctuation,
+.token.heading-class .token.class-name {
+  color: inherit;
 }
 
 /* Error highlighting - subtle, only in editor */
 .token.has-error {
-  text-decoration: underline dotted rgba(239, 68, 68, 0.4);
+  text-decoration: underline dotted var(--danger);
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 }
 
-/* Export dropdown */
-.export-dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.export-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: #ffffff;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  min-width: 120px;
-  margin-top: 0.25rem;
+/* Export Controls */
+.export-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }
 
-.export-option {
-  display: block;
-  width: 100%;
-  padding: 0.5rem 1rem;
-  border: none;
-  background: none;
-  color: var(--text-color);
-  font-size: 0.875rem;
+.toolbar-select {
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  background-color: transparent;
+  color: var(--text-secondary);
   cursor: pointer;
-  font-family: inherit;
-  text-align: left;
-  transition: background-color 0.2s ease;
+  outline: none;
+  transition: all 0.2s ease;
 }
 
-.export-option:hover {
-  background-color: #f9fafb;
+.toolbar-select:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--text-primary);
 }
 
-/* Editor in export mode */
-.editor-container.export-mode code {
-  color: #6a737d;
-  font-size: 0.75rem;
+.toolbar-select:focus {
+  border-color: var(--border-color);
+  background-color: #fff;
 }
 
-/* Responsive design */
-@media (max-width: 1200px) {
+/* Responsive */
+@media (max-width: 1024px) {
   .editor-sidebar {
-    width: 400px;
-    min-width: 400px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 500px;
+    transform: translateX(100%);
+  }
+
+  .editor-sidebar:not(.collapsed) {
+    transform: translateX(0);
+  }
+
+  .editor-sidebar.collapsed {
+    width: 48px;
+    min-width: 48px;
+    transform: translateX(0);
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  .editor-sidebar.collapsed .editor-toolbar {
+    background: transparent;
+    border: none;
   }
 }
 
 @media (max-width: 768px) {
   #app {
     flex-direction: column;
+    height: auto;
+    overflow-y: auto;
   }
 
   .sidebar {
@@ -401,40 +538,26 @@ h1 {
     min-width: 100%;
     border-right: none;
     border-bottom: 1px solid var(--border-color);
-    padding: 1.5rem 1rem;
+    height: auto;
+    max-height: 200px;
   }
 
   .main-content {
-    padding: 1.5rem 1rem;
-  }
-
-  h1 {
-    font-size: 1.5rem;
-  }
-
-  #equation-container .katex {
-    font-size: 1.2rem;
+    padding: 2rem 1rem;
+    overflow: visible;
   }
 
   .editor-sidebar {
+    position: relative;
     width: 100%;
-    min-width: 100%;
-    border-left: none;
-    border-top: 1px solid var(--border-color);
-    max-height: 50vh;
+    max-width: 100%;
+    height: 500px;
+    transform: none;
   }
 
   .editor-sidebar.collapsed {
+    height: 50px;
     width: 100%;
     min-width: 100%;
-    max-height: 50px;
-  }
-
-  .editor-sidebar.collapsed .editor-toolbar {
-    flex-direction: row;
-  }
-
-  .editor-sidebar.collapsed .toolbar-btn {
-    writing-mode: horizontal-tb;
   }
 }
diff --git a/src/ui/app.ts b/src/ui/app.ts
index c30c28c..1171602 100644
--- a/src/ui/app.ts
+++ b/src/ui/app.ts
@@ -102,18 +102,34 @@ async function handleEquationSelected(equationId: string) {
 // Handle preview update from editor
 async function handlePreviewUpdate(code: string) {
   const content = await updatePreview(code, async (parsed) => {
-    parsedContent = parsed;
-    doRefreshDisplay();
-
-    // Update editor highlighting with new colors
-    const codeElement = document.querySelector('#editor-container code') as HTMLElement;
-    if (codeElement) {
-      updateEditorHighlighting(
-        codeElement,
-        code,
-        colorSchemes[currentScheme].colors,
-        parsedContent
-      );
+    try {
+      parsedContent = parsed;
+      doRefreshDisplay();
+
+      // Update editor highlighting
+      // We DON'T call updateCode here anymore because it causes crashes (error1) when recursive.
+      // Instead, we rely on CodeJar's natural input event to trigger highlighting.
+      //
+      // BUT, if we need to show *new* errors/colors immediately after parsing, we can
+      // manually trigger highlighting if we are sure it's safe.
+      // The safest way is to do NOTHING here and let the user keep typing.
+      // The colors will update on the NEXT keystroke.
+      //
+      // However, if we want immediate feedback, we can try to manually update the class names
+      // on the EXISTING DOM nodes without touching innerHTML or restore().
+      //
+      // Let's just update the parsedContent reference (done above).
+      // The highlightEditor callback inside editor.ts calls getParsedContent().
+      // So the NEXT time highlightEditor runs, it will see the new content.
+      //
+      // Can we trigger highlightEditor manually?
+      // editor.ts exports updateEditorHighlighting.
+      //
+      // Let's try to NOT update the editor at all here.
+      // This is the "Rewrite" strategy: stop fighting CodeJar.
+      
+    } catch (e) {
+      console.error('Error during UI update after parse:', e);
     }
   });
 
@@ -142,9 +158,10 @@ export async function initializeApp() {
     createColorSchemeSwitcher(currentScheme, handleSchemeChange);
 
     // Initialize editor
+    // Note: We must initialize editor BEFORE loading the equation so that loadEquation can populate it
     initializeEditor(
       editorState,
-      colorSchemes[currentScheme].colors,
+      () => colorSchemes[currentScheme].colors,
       () => parsedContent,
       handlePreviewUpdate
     );
@@ -172,7 +189,11 @@ export async function initializeApp() {
 
     // Load equation from URL hash or default
     const initialEquation = getEquationFromHash(currentEquationId);
-    await handleEquationSelected(initialEquation);
+    // If the initial equation from hash doesn't exist (e.g. we deleted it or it's invalid), fallback to the first available one
+    const equationExists = equations.some(eq => eq.id === initialEquation);
+    const equationToLoad = equationExists ? initialEquation : (equations.length > 0 ? equations[0].id : currentEquationId);
+    
+    await handleEquationSelected(equationToLoad);
 
     // Expose test helpers for automated testing
     (window as any).__testHelpers = {
diff --git a/src/ui/editor.ts b/src/ui/editor.ts
index 69035d6..2808d0c 100644
--- a/src/ui/editor.ts
+++ b/src/ui/editor.ts
@@ -1,8 +1,8 @@
-import { CodeJar } from 'codejar';
-import Prism from 'prismjs';
-import '../prism-custom';
-import { applyTermColors, markErrors } from '../prism-custom';
-import { loadContent, type ParsedContent } from '../parser';
+import { CodeJar } from "codejar";
+import Prism from "prismjs";
+import "../prism-custom";
+import { applyTermColors, markErrors } from "../prism-custom";
+import { loadContent, type ParsedContent } from "../parser";
 
 export interface EditorState {
   editor: CodeJar | null;
@@ -14,7 +14,7 @@ export interface EditorState {
 export function createEditorState(): EditorState {
   return {
     editor: null,
-    currentMarkdown: '',
+    currentMarkdown: "",
     previewTimeout: null,
     isExportMode: false,
   };
@@ -30,12 +30,19 @@ function highlightEditor(
   editorElement.innerHTML = Prism.highlight(
     markdown,
     Prism.languages.eqmd,
-    'eqmd'
+    "eqmd"
   );
 
   // Apply term colors dynamically based on current markdown
   applyTermColors(editorElement, markdown, colors);
 
+  // Re-apply colors after a short delay to handle browser/CodeJar DOM normalization
+  // On initial page load, the browser may re-render the contenteditable element,
+  // which strips our inline styles. This ensures colors persist.
+  setTimeout(() => {
+    applyTermColors(editorElement, markdown, colors);
+  }, 50);
+
   // Mark errors with red underlines if parsed content has errors
   if (parsedContent && parsedContent.errors.length > 0) {
     markErrors(editorElement, markdown, parsedContent.errors);
@@ -44,24 +51,26 @@ function highlightEditor(
 
 export function initializeEditor(
   state: EditorState,
-  colors: string[],
+  getColors: () => string[],
   getParsedContent: () => ParsedContent | null,
   onUpdate: (code: string) => void
 ) {
-  const editorContainer = document.getElementById('editor-container');
+  const editorContainer = document.getElementById("editor-container");
   if (!editorContainer) return;
 
   // Create code element for CodeJar
-  const codeElement = document.createElement('code');
-  codeElement.className = 'language-eqmd';
+  const codeElement = document.createElement("code");
+  codeElement.className = "language-eqmd";
   editorContainer.appendChild(codeElement);
 
   // Initialize CodeJar with Prism highlighting
+  // Note: getColors() is called each time to get current colors (not stale closure)
   state.editor = CodeJar(
     codeElement,
-    (el) => highlightEditor(el, el.textContent || '', colors, getParsedContent()),
+    (el) =>
+      highlightEditor(el, el.textContent || "", getColors(), getParsedContent()),
     {
-      tab: '  ', // 2 spaces for tab
+      tab: "  ", // 2 spaces for tab
       indentOn: /[({[]$/,
     }
   );
@@ -99,7 +108,7 @@ export async function updatePreview(
 
     // Update title if present in markdown
     if (parsedContent.title) {
-      const titleElement = document.getElementById('equation-title');
+      const titleElement = document.getElementById("equation-title");
       if (titleElement) {
         titleElement.textContent = parsedContent.title;
       }
@@ -109,7 +118,11 @@ export async function updatePreview(
 
     return parsedContent;
   } catch (error) {
-    console.error('Failed to parse markdown:', error);
+    console.error("Failed to parse markdown or update UI:", error);
+    if (error instanceof Error) {
+      console.error("Stack trace:", error.stack);
+    }
+    // Don't leave the error unhandled, return null so the caller knows parsing failed
     return null;
   }
 }
@@ -125,12 +138,12 @@ export function updateEditorHighlighting(
 
 export function setupEditorControls() {
   // Toggle editor collapse/expand
-  const toggleBtn = document.getElementById('toggle-editor-btn');
-  const editorSidebar = document.getElementById('editor-sidebar');
+  const toggleBtn = document.getElementById("toggle-editor-btn");
+  const editorSidebar = document.getElementById("editor-sidebar");
 
   if (toggleBtn && editorSidebar) {
-    toggleBtn.addEventListener('click', () => {
-      editorSidebar.classList.toggle('collapsed');
+    toggleBtn.addEventListener("click", () => {
+      editorSidebar.classList.toggle("collapsed");
     });
   }
 }
diff --git a/src/ui/equation-renderer.ts b/src/ui/equation-renderer.ts
index 8479dd5..7e44848 100644
--- a/src/ui/equation-renderer.ts
+++ b/src/ui/equation-renderer.ts
@@ -5,7 +5,12 @@ import { type ParsedContent } from '../parser';
 function renderLatexInText(text: string): string {
   return text.replace(/\$([^\$]+)\$/g, (_match, latex) => {
     try {
-      return katex.renderToString(latex, { displayMode: false, throwOnError: false, strict: false });
+      return katex.renderToString(latex, { 
+        displayMode: false, 
+        throwOnError: false, 
+        strict: false, // Disable strict mode to allow \htmlClass
+        trust: true // Enable \htmlClass even in inline mode if needed
+      });
     } catch (e) {
       return `$${latex}$`;
     }
@@ -16,11 +21,17 @@ export function renderEquation(parsedContent: ParsedContent) {
   const equationContainer = document.getElementById('equation-container');
   if (!equationContainer) return;
 
-  katex.render(parsedContent.latex, equationContainer, {
-    displayMode: true,
-    trust: true, // Enable \htmlClass
-    throwOnError: false,
-  });
+  try {
+    katex.render(parsedContent.latex, equationContainer, {
+      displayMode: true,
+      trust: true, // Enable \htmlClass
+      strict: false, // Disable strict mode to allow \htmlClass
+      throwOnError: false, // Don't throw on error, just render error message in red
+    });
+  } catch (error) {
+    console.error('KaTeX render error:', error);
+    equationContainer.innerHTML = `<span style="color: red;">Error rendering equation: ${error instanceof Error ? error.message : String(error)}</span>`;
+  }
 
   // Set pointer-events: none on KaTeX structural elements so they don't block term hover
   // But keep term elements interactive
diff --git a/src/ui/equation-selector.ts b/src/ui/equation-selector.ts
index a65e727..7e50b4b 100644
--- a/src/ui/equation-selector.ts
+++ b/src/ui/equation-selector.ts
@@ -1,17 +1,46 @@
-import { loadContent, type ParsedContent } from '../parser';
+import { loadContent, type ParsedContent } from "../parser";
+
+// Use Vite's glob import to load all markdown files
+// eager: true means they are bundled with the app (string content)
+const equationFiles = import.meta.glob('../examples/*.md', { query: '?raw', import: 'default', eager: true });
 
 // Equation metadata
 export interface EquationInfo {
   id: string;
   title: string;
-  category: string;
-  file: string;
+  file: string; // We keep this for link generation, though we load content directly
+  content: string; // Raw markdown content
 }
 
-// Load equations list
+// Load equations list from local files
 export async function loadEquationsList(): Promise<EquationInfo[]> {
-  const response = await fetch('./examples/equations.json');
-  return response.json();
+  const equations: EquationInfo[] = [];
+
+  for (const path in equationFiles) {
+    const content = equationFiles[path] as string;
+    const filename = path.split('/').pop() || '';
+    const id = filename.replace('.md', '');
+    
+    // Parse content to extract title
+    // We do a quick parse or use the full parser
+    // Let's use the full parser since it's robust
+    const parsed = await loadContent(content, true);
+    const title = parsed.title || id.charAt(0).toUpperCase() + id.slice(1);
+
+    equations.push({
+      id,
+      title,
+      file: filename,
+      content
+    });
+  }
+
+  // Sort alphabetically, but put "new" (New Equation) first
+  return equations.sort((a, b) => {
+    if (a.id === 'new') return -1;
+    if (b.id === 'new') return 1;
+    return a.title.localeCompare(b.title);
+  });
 }
 
 // Load and render a specific equation
@@ -19,9 +48,13 @@ export async function loadEquation(
   equationId: string,
   equations: EquationInfo[],
   updateHash = true,
-  onEquationLoaded?: (parsedContent: ParsedContent, equation: EquationInfo, markdown: string) => void | Promise<void>
+  onEquationLoaded?: (
+    parsedContent: ParsedContent,
+    equation: EquationInfo,
+    markdown: string
+  ) => void | Promise<void>
 ): Promise<ParsedContent | null> {
-  const equation = equations.find(eq => eq.id === equationId);
+  const equation = equations.find((eq) => eq.id === equationId);
   if (!equation) return null;
 
   // Update URL hash
@@ -29,39 +62,38 @@ export async function loadEquation(
     window.location.hash = equationId;
   }
 
-  // Load the markdown content
-  const parsedContent = await loadContent(`./examples/${equation.file}`);
+  // Load the markdown content (already loaded in memory)
+  const parsedContent = await loadContent(equation.content, true);
 
-  // Update title (prefer title from markdown, fallback to equations.json)
-  const titleElement = document.getElementById('equation-title');
+  // Update title (prefer title from markdown, fallback to equations.json metadata which came from markdown anyway)
+  const titleElement = document.getElementById("equation-title");
   if (titleElement) {
     titleElement.textContent = parsedContent.title || equation.title;
   }
 
-  // Update source link
-  const sourceLink = document.getElementById('source-link') as HTMLAnchorElement;
+  // Update source link - pointing to the new location (or public if we keep a copy?)
+  // Since we are moving to src, the GitHub link should point to src/examples/
+  const sourceLink = document.getElementById(
+    "source-link"
+  ) as HTMLAnchorElement;
   if (sourceLink) {
-    sourceLink.href = `https://github.com/stared/equations-explained-colorfully/blob/main/public/examples/${equation.file}`;
+    sourceLink.href = `https://github.com/stared/equations-explained-colorfully/blob/main/src/examples/${equation.file}`;
   }
 
   // Update active button
-  const selectorDiv = document.getElementById('equation-selector');
+  const selectorDiv = document.getElementById("equation-selector");
   if (selectorDiv) {
-    selectorDiv.querySelectorAll('button').forEach(btn => {
+    selectorDiv.querySelectorAll("button").forEach((btn) => {
       if (btn.dataset.equationId === equationId) {
-        btn.classList.add('active');
+        btn.classList.add("active");
       } else {
-        btn.classList.remove('active');
+        btn.classList.remove("active");
       }
     });
   }
 
-  // Load markdown file for editor
-  const response = await fetch(`./examples/${equation.file}`);
-  const markdown = await response.text();
-
   if (onEquationLoaded) {
-    await onEquationLoaded(parsedContent, equation, markdown);
+    await onEquationLoaded(parsedContent, equation, equation.content);
   }
 
   return parsedContent;
@@ -73,16 +105,26 @@ export function createEquationSelector(
   currentEquationId: string,
   onEquationSelected: (equationId: string) => void | Promise<void>
 ) {
-  const selectorDiv = document.getElementById('equation-selector');
+  const selectorDiv = document.getElementById("equation-selector");
   if (!selectorDiv) return;
 
-  equations.forEach(equation => {
-    const button = document.createElement('button');
+  selectorDiv.innerHTML = ""; // Clear existing content
+
+  equations.forEach((equation) => {
+    const button = document.createElement("button");
     button.textContent = equation.title;
     button.dataset.equationId = equation.id;
-    button.className = equation.id === currentEquationId ? 'active' : '';
-
-    button.addEventListener('click', async () => {
+    
+    let className = "";
+    if (equation.id === currentEquationId) {
+      className += "active ";
+    }
+    if (equation.id === 'new') {
+      className += "new-equation ";
+    }
+    button.className = className.trim();
+
+    button.addEventListener("click", async () => {
       await onEquationSelected(equation.id);
     });
 
diff --git a/src/ui/export-controls.ts b/src/ui/export-controls.ts
index 3e7c89b..072fcd8 100644
--- a/src/ui/export-controls.ts
+++ b/src/ui/export-controls.ts
@@ -6,98 +6,64 @@ export function setupExportUI(
   state: EditorState,
   getParsedContent: () => ParsedContent | null,
   getCurrentScheme: () => ColorScheme,
-  onExitExportMode: () => void
+  _onExitExportMode: () => void
 ) {
-  const exportBtn = document.getElementById('export-btn');
-  const exportMenu = document.getElementById('export-menu');
+  const exportSelect = document.getElementById('export-format') as HTMLSelectElement;
   const copyBtn = document.getElementById('copy-btn');
-  const downloadBtn = document.getElementById('download-btn');
-  const editorContainer = document.getElementById('editor-container');
 
-  let currentExport = '';
-  let currentFormat: ExportFormat = 'html';
-
-  // Toggle export menu
-  if (exportBtn && exportMenu) {
-    exportBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-
-      if (state.isExportMode) {
-        // Back to edit mode
-        state.isExportMode = false;
-        if (state.editor) {
-          state.editor.updateCode(state.currentMarkdown);
-          editorContainer?.classList.remove('export-mode');
-          // Make editor editable again
-          const codeElement = editorContainer?.querySelector('code');
-          if (codeElement) {
-            (codeElement as HTMLElement).contentEditable = 'true';
-          }
-        }
-        exportBtn.textContent = 'Export as...';
-        exportMenu.style.display = 'none';
-        onExitExportMode();
-      } else {
-        // Toggle menu
-        const isVisible = exportMenu.style.display === 'block';
-        exportMenu.style.display = isVisible ? 'none' : 'block';
+  const downloadExport = (format: ExportFormat) => {
+    try {
+      const parsedContent = getParsedContent();
+      if (!parsedContent) {
+        throw new Error('No content loaded');
       }
-    });
 
-    // Close menu when clicking outside
-    document.addEventListener('click', () => {
-      if (!state.isExportMode) {
-        exportMenu.style.display = 'none';
-      }
-    });
-
-    // Handle format selection
-    exportMenu.querySelectorAll('.export-option').forEach((option) => {
-      option.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const format = (option as HTMLElement).dataset.format as ExportFormat;
+      // Generate export content
+      const content = exportContent(format, parsedContent, getCurrentScheme());
+      const extension = getFileExtension(format);
+      const mimeType = format === 'html' ? 'text/html' : 'text/plain';
 
-        try {
-          const parsedContent = getParsedContent();
-          if (!parsedContent) {
-            throw new Error('No content loaded');
-          }
+      // Trigger download
+      const blob = new Blob([content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${parsedContent.title || 'equation'}.${extension}`.toLowerCase().replace(/[^a-z0-9.]+/g, '-');
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
 
-          // Generate export
-          currentFormat = format;
-          currentExport = exportContent(format, parsedContent, getCurrentScheme());
+    } catch (error) {
+      console.error('Export failed:', error);
+      alert(`Export failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
 
-          // Show export in editor (read-only)
-          if (state.editor) {
-            state.isExportMode = true;
-            state.editor.updateCode(currentExport);
-            editorContainer?.classList.add('export-mode');
-            // Make editor read-only
-            const codeElement = editorContainer?.querySelector('code');
-            if (codeElement) {
-              (codeElement as HTMLElement).contentEditable = 'false';
-            }
-            exportBtn.textContent = 'Back to Edit';
-            exportMenu.style.display = 'none';
-          }
-        } catch (error) {
-          console.error('Export failed:', error);
-          alert(`Export failed: ${error instanceof Error ? error.message : String(error)}`);
-        }
-      });
+  // Handle format selection (Trigger Download)
+  if (exportSelect) {
+    exportSelect.addEventListener('change', () => {
+      const format = exportSelect.value;
+      if (format) {
+        downloadExport(format as ExportFormat);
+        
+        // Reset selector to default "Export as..."
+        exportSelect.value = ""; 
+      }
     });
   }
 
   if (copyBtn) {
     copyBtn.addEventListener('click', async () => {
       try {
-        const contentToCopy = state.isExportMode ? currentExport : state.currentMarkdown;
+        // Always copy the markdown source since we don't have a preview mode anymore
+        const contentToCopy = state.currentMarkdown;
         await navigator.clipboard.writeText(contentToCopy);
 
         const originalText = copyBtn.textContent;
         copyBtn.textContent = 'Copied!';
         setTimeout(() => {
-          copyBtn.textContent = originalText;
+          if (copyBtn) copyBtn.textContent = originalText;
         }, 2000);
       } catch (error) {
         console.error('Copy failed:', error);
@@ -105,28 +71,4 @@ export function setupExportUI(
       }
     });
   }
-
-  if (downloadBtn) {
-    downloadBtn.addEventListener('click', () => {
-      try {
-        const parsedContent = getParsedContent();
-        const content = state.isExportMode ? currentExport : state.currentMarkdown;
-        const extension = state.isExportMode ? getFileExtension(currentFormat) : 'md';
-        const mimeType = state.isExportMode ? 'text/html' : 'text/markdown';
-
-        const blob = new Blob([content], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${parsedContent?.title || 'equation'}.${extension}`.toLowerCase().replace(/[^a-z0-9.]+/g, '-');
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-      } catch (error) {
-        console.error('Download failed:', error);
-        alert('Failed to download file');
-      }
-    });
-  }
 }
diff --git a/src/ui/hover-effects.ts b/src/ui/hover-effects.ts
index b062da5..2337d34 100644
--- a/src/ui/hover-effects.ts
+++ b/src/ui/hover-effects.ts
@@ -1,51 +1,123 @@
-import { type ParsedContent } from '../parser';
-import { renderLatexInText } from './equation-renderer';
+import { type ParsedContent } from "../parser";
+import { renderLatexInText } from "./equation-renderer";
+import { SelectionOverlay } from "./selection-overlay";
 
 export function setupHoverEffects(parsedContent: ParsedContent) {
-  const hoverDiv = document.getElementById('hover-explanation');
-  if (!hoverDiv) return;
+  const hoverDiv = document.getElementById("hover-explanation");
+  const equationContainer = document.getElementById("equation-container");
 
-  let clicked: { element: HTMLElement; termClass: string; definition: string } | null = null;
+  if (!hoverDiv || !equationContainer) return;
 
-  const updateTerms = (termClass: string, classList: string, action: 'add' | 'remove') => {
-    document.querySelectorAll(`.${termClass}`).forEach((el) => el.classList[action](classList));
+  const selectionOverlay = new SelectionOverlay(equationContainer);
+
+  let clicked: {
+    element: HTMLElement;
+    termClass: string;
+    definition: string;
+  } | null = null;
+
+  const getTermElements = (termClass: string) => {
+    return Array.from(document.querySelectorAll(`.${termClass}`));
+  };
+
+  const updateOverlay = () => {
+    if (clicked) {
+      const elements = getTermElements(clicked.termClass);
+      selectionOverlay.highlight(elements);
+
+      // Highlight corresponding description terms
+      document.querySelectorAll(".static-description span").forEach((el) => {
+        if (el.classList.contains(clicked!.termClass)) {
+          el.classList.add("active");
+        } else {
+          el.classList.remove("active");
+        }
+      });
+    } else {
+      selectionOverlay.clear();
+      document
+        .querySelectorAll(".static-description span")
+        .forEach((el) => el.classList.remove("active"));
+    }
   };
 
-  const showDefinition = (definition: string) => {
+  const showDefinition = (definition: string, color: string = '') => {
     hoverDiv.innerHTML = renderLatexInText(definition);
-    hoverDiv.classList.add('visible');
+    hoverDiv.classList.add("visible");
+    if (color) {
+        hoverDiv.style.borderColor = color;
+    } else {
+        hoverDiv.style.borderColor = 'var(--border-color)'; // Fallback
+    }
   };
 
   document.querySelectorAll('[class*="term-"]').forEach((element) => {
-    const termClass = Array.from(element.classList).find((c) => c.startsWith('term-'));
+    const termClass = Array.from(element.classList).find((c) =>
+      c.startsWith("term-")
+    );
     if (!termClass) return;
 
-    const definition = parsedContent.definitions.get(termClass.replace('term-', ''));
-    if (!definition) return;
+    const definition = parsedContent.definitions.get(
+      termClass.replace("term-", "")
+    );
+    
+    // Pre-calculate color
+    const computedStyle = window.getComputedStyle(element);
+    const termColor = computedStyle.color;
 
-    (element as HTMLElement).style.cursor = 'pointer';
+    (element as HTMLElement).style.cursor = "pointer";
 
-    element.addEventListener('click', () => {
-      if (clicked?.element === element) {
-        updateTerms(termClass, 'term-clicked', 'remove');
+    element.addEventListener("click", (e) => {
+      e.stopPropagation(); // Prevent clearing on container click
+      if (clicked?.termClass === termClass) {
         clicked = null;
-        hoverDiv.classList.remove('visible');
+        hoverDiv.classList.remove("visible");
       } else {
-        if (clicked) updateTerms(clicked.termClass, 'term-clicked', 'remove');
-        updateTerms(termClass, 'term-clicked', 'add');
-        clicked = { element: element as HTMLElement, termClass, definition };
-        showDefinition(definition);
+        // If clicked from description, we need to find a definition if possible or just highlight
+        if (definition) {
+          clicked = { element: element as HTMLElement, termClass, definition };
+          showDefinition(definition, termColor);
+        } else {
+          // Just highlight for visual feedback if no definition?
+          // Assuming definitions exist for all valid term classes
+          // Fallback if needed
+          clicked = {
+            element: element as HTMLElement,
+            termClass,
+            definition: "",
+          };
+        }
       }
+      updateOverlay();
     });
 
-    element.addEventListener('mouseenter', () => {
-      updateTerms(termClass, 'term-active', 'add');
-      showDefinition(definition);
+    element.addEventListener("mouseenter", () => {
+      const elements = getTermElements(termClass);
+      selectionOverlay.highlight(elements); // Highlight hovered temporarily
+
+      // Highlight description terms on hover too
+      document
+        .querySelectorAll(`.static-description .${termClass}`)
+        .forEach((el) => el.classList.add("active"));
+
+      if (definition) showDefinition(definition, termColor);
     });
 
-    element.addEventListener('mouseleave', () => {
-      updateTerms(termClass, 'term-active', 'remove');
-      clicked ? showDefinition(clicked.definition) : hoverDiv.classList.remove('visible');
+    element.addEventListener("mouseleave", () => {
+      // Remove temporary hover class from description
+      document
+        .querySelectorAll(`.static-description .${termClass}`)
+        .forEach((el) => el.classList.remove("active"));
+
+      updateOverlay(); // Restore clicked state or clear
+      if (clicked) {
+          // Re-apply color for clicked element
+          const clickedEl = document.querySelector(`.${clicked.termClass}`);
+          const clickedColor = clickedEl ? window.getComputedStyle(clickedEl).color : '';
+          showDefinition(clicked.definition, clickedColor);
+      } else {
+          hoverDiv.classList.remove("visible");
+      }
     });
   });
 }
diff --git a/src/ui/selection-overlay.ts b/src/ui/selection-overlay.ts
new file mode 100644
index 0000000..2297c1e
--- /dev/null
+++ b/src/ui/selection-overlay.ts
@@ -0,0 +1,138 @@
+export class SelectionOverlay {
+  private svg: SVGSVGElement;
+  private container: HTMLElement;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    // Check if SVG already exists to avoid duplicates on re-init
+    const existingSvg = container.querySelector("svg.selection-overlay");
+    if (existingSvg) {
+      this.svg = existingSvg as SVGSVGElement;
+      this.clear();
+    } else {
+      this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      this.svg.classList.add("selection-overlay");
+      this.svg.style.position = "absolute";
+      this.svg.style.top = "0";
+      this.svg.style.left = "0";
+      this.svg.style.width = "100%";
+      this.svg.style.height = "100%";
+      this.svg.style.pointerEvents = "none";
+      this.svg.style.zIndex = "0";
+      this.container.appendChild(this.svg);
+    }
+  }
+
+  highlight(elements: Element[]) {
+    this.clear();
+    if (elements.length === 0) return;
+
+    const containerRect = this.container.getBoundingClientRect();
+    const containerStyle = window.getComputedStyle(this.container);
+    const borderLeft = parseFloat(containerStyle.borderLeftWidth) || 0;
+    const borderTop = parseFloat(containerStyle.borderTopWidth) || 0;
+
+    const padding = 2; // px
+
+    elements.forEach((el) => {
+      const visualRect = this.getVisualBoundingRect(el);
+      if (!visualRect) return;
+
+      // Get color from the element to match the term's color
+      const computedStyle = window.getComputedStyle(el);
+      const color = computedStyle.color;
+
+      const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+
+      const x = visualRect.left - containerRect.left - borderLeft - padding;
+      const y = visualRect.top - containerRect.top - borderTop - padding;
+      const width = visualRect.width + padding * 2;
+      const height = visualRect.height + padding * 2;
+
+      r.setAttribute("x", String(x));
+      r.setAttribute("y", String(y));
+      r.setAttribute("width", String(width));
+      r.setAttribute("height", String(height));
+      r.setAttribute("rx", "4");
+      r.setAttribute("ry", "4");
+
+      // Use the term's color for the highlight
+      // Use CSS variable if available, otherwise fallback to parsed color
+      r.style.color = color; // SetcurrentColor context
+      r.style.fill = `color-mix(in srgb, ${color} 10%, transparent)`;
+      // r.style.stroke = color;
+      // r.style.strokeWidth = "1.5px";
+      // r.style.strokeOpacity = "0.5";
+
+      // Subtle animation
+      r.style.opacity = "0";
+      r.style.transition = "opacity 0.15s ease-out";
+
+      this.svg.appendChild(r);
+
+      // Trigger animation
+      requestAnimationFrame(() => {
+        r.style.opacity = "1";
+      });
+    });
+  }
+
+  clear() {
+    while (this.svg.firstChild) {
+      this.svg.removeChild(this.svg.firstChild);
+    }
+  }
+
+  /**
+   * Calculates the bounding rectangle of all visible content within an element.
+   * This is more robust than getBoundingClientRect() for complex nested structures like KaTeX.
+   */
+  private getVisualBoundingRect(element: Element): DOMRect | null {
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity;
+    let found = false;
+
+    const processRect = (r: DOMRect) => {
+      // Filter out empty or zero-size rects (often purely structural or invisible)
+      if (r.width > 0.1 && r.height > 0.1) {
+        minX = Math.min(minX, r.left);
+        minY = Math.min(minY, r.top);
+        maxX = Math.max(maxX, r.right);
+        maxY = Math.max(maxY, r.bottom);
+        found = true;
+      }
+    };
+
+    // KaTeX specific: We want to capture the bounding box of all the "ink".
+    // The wrapper span often has weird dimensions.
+    // We iterate over all descendants to find the true visual extent.
+    const descendants = element.querySelectorAll("*");
+
+    // KaTeX specific: Exclude zero-width spaces or other invisible layout hacks if possible
+    // Or just trust the size check in processRect
+
+    // Important: also include the element itself if it has visual presence
+    const selfRects = element.getClientRects();
+    for (let i = 0; i < selfRects.length; i++) processRect(selfRects[i]);
+
+    if (descendants.length > 0) {
+      descendants.forEach((child) => {
+        const rects = child.getClientRects();
+        for (let i = 0; i < rects.length; i++) processRect(rects[i]);
+      });
+    }
+
+    // Also check the element itself (e.g. borders, background)
+    // const rects = element.getClientRects();
+    // for (let i = 0; i < rects.length; i++) processRect(rects[i]);
+
+    if (!found) {
+      // Fallback
+      return element.getBoundingClientRect();
+    }
+
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+  }
+}
diff --git a/src/utils/color-schemes.ts b/src/utils/color-schemes.ts
index 463ac95..fed6221 100644
--- a/src/utils/color-schemes.ts
+++ b/src/utils/color-schemes.ts
@@ -6,21 +6,41 @@ export const colorSchemes: Record<string, ColorScheme> = {
   vibrant: {
     name: 'Vibrant',
     colors: [
-      '#8b5cf6', '#10b981', '#ec4899', '#3b82f6', '#06b6d4', '#f59e0b', '#ef4444',
-      '#a855f7', '#14b8a6', '#84cc16', '#6366f1', '#f97316'
+      '#8b5cf6', // 0: Purple (Energy)
+      '#10b981', // 1: Green (Freq) - distinct from Purple
+      '#ec4899', // 2: Pink (Average) - distinct from Green
+      '#3b82f6', // 3: Blue (Signal) - distinct from Pink
+      '#ef4444', // 4: Red (Spin) - HIGH contrast to Blue (was Cyan)
+      '#06b6d4', // 5: Cyan (Circle) - contrast to Red (was Amber)
+      '#f59e0b', // 6: Amber - contrast to Cyan
+      '#a855f7', 
+      '#14b8a6', 
+      '#84cc16', 
+      '#6366f1', 
+      '#f97316'
     ],
   },
   accessible: {
     name: 'Accessible',
     colors: [
-      '#0072B2', '#E69F00', '#009E73', '#56B4E9', '#CC79A7', '#F0E442', '#D55E00',
-      '#000000', '#999999', '#4B0082', '#8B4513', '#2F4F4F'
+      '#0072B2', // 0: Blue
+      '#D55E00', // 1: Vermillion
+      '#009E73', // 2: Bluish Green
+      '#882255', // 3: Wine/Red-Purple (was Orange) - distinct from Green
+      '#E69F00', // 4: Orange (was Sky Blue) - distinct from Wine
+      '#56B4E9', // 5: Sky Blue (was Pink) - distinct from Orange
+      '#F0E442', // 6: Yellow
+      '#000000', 
+      '#999999', 
+      '#4B0082', 
+      '#8B4513', 
+      '#2F4F4F'
     ],
   },
   contrast: {
     name: 'High Contrast',
     colors: [
-      '#0066CC', '#FF6600', '#9933CC', '#00AA88', '#CC0066', '#CCAA00', '#CC3300',
+      '#0066CC', '#CC3300', '#00AA88', '#9933CC', '#CC0066', '#CCAA00', '#FF6600',
       '#006600', '#660099', '#996633', '#336699', '#663366'
     ],
   },
@@ -86,6 +106,8 @@ export function createColorSchemeSwitcher(
   const switcherDiv = document.getElementById('color-scheme-switcher');
   if (!switcherDiv) return;
 
+  switcherDiv.innerHTML = ''; // Clear existing buttons first to prevent duplicates
+
   Object.keys(colorSchemes).forEach((schemeKey) => {
     const button = document.createElement('button');
     button.textContent = colorSchemes[schemeKey].name;
diff --git a/tests/export/test-all-exports.ts b/tests/export/test-all-exports.ts
index 1a672f0..2a0cf8d 100644
--- a/tests/export/test-all-exports.ts
+++ b/tests/export/test-all-exports.ts
@@ -7,7 +7,7 @@ import { readFileSync } from 'fs';
 async function smokeTest() {
   console.log('Quick smoke test: All export formats...\n');
 
-  const markdown = readFileSync('./public/examples/euler.md', 'utf-8');
+  const markdown = readFileSync('./src/examples/euler.md', 'utf-8');
   const parsed = await parseContent(markdown);
 
   const exports = {
diff --git a/tests/export/test-beamer-exports.ts b/tests/export/test-beamer-exports.ts
index 6524389..8bac9d2 100644
--- a/tests/export/test-beamer-exports.ts
+++ b/tests/export/test-beamer-exports.ts
@@ -16,13 +16,13 @@ interface BeamerTestFixture {
 const fixtures: BeamerTestFixture[] = [
   {
     name: "Euler's Identity",
-    file: './public/examples/euler.md',
+    file: './src/examples/euler.md',
     colorScheme: vibrantScheme,
     outputFile: './test-output/test-euler-beamer.tex',
   },
   {
     name: "Maxwell's Equations",
-    file: './public/examples/maxwell.md',
+    file: './src/examples/maxwell.md',
     colorScheme: vibrant10Scheme,
     outputFile: './test-output/test-maxwell-beamer.tex',
   },
diff --git a/tests/export/test-export.ts b/tests/export/test-export.ts
index 3518233..7541fa6 100644
--- a/tests/export/test-export.ts
+++ b/tests/export/test-export.ts
@@ -7,7 +7,7 @@ import { exportToHTML } from '../../src/export/index.js';
 import { vibrantScheme, writeTestFile, runChecks, reportTestResults } from '../test-utils.js';
 
 // Load test equation
-const markdown = readFileSync('./public/examples/euler.md', 'utf-8');
+const markdown = readFileSync('./src/examples/euler.md', 'utf-8');
 const parsed = parseContent(markdown);
 
 console.log('Parsed content:');
diff --git a/tests/export/test-html-export.ts b/tests/export/test-html-export.ts
index 2b16a76..3926c2d 100644
--- a/tests/export/test-html-export.ts
+++ b/tests/export/test-html-export.ts
@@ -7,7 +7,7 @@ import { readFileSync } from 'fs';
 async function testHTMLExport() {
   console.log('Testing HTML export with CSS custom properties...\n');
 
-  const markdown = readFileSync('./public/examples/euler.md', 'utf-8');
+  const markdown = readFileSync('./src/examples/euler.md', 'utf-8');
   const parsed = await parseContent(markdown);
 
   const html = exportToHTML(parsed, vibrantScheme);
diff --git a/tests/export/test-latex-exports.ts b/tests/export/test-latex-exports.ts
index eda2852..eaf82e6 100644
--- a/tests/export/test-latex-exports.ts
+++ b/tests/export/test-latex-exports.ts
@@ -40,13 +40,13 @@ Speed of light in vacuum ($c \\approx 3 \\times 10^8$ m/s)
   },
   {
     name: "Euler's Identity",
-    markdown: () => readFileSync('./public/examples/euler.md', 'utf-8'),
+    markdown: () => readFileSync('./src/examples/euler.md', 'utf-8'),
     colorScheme: viridisScheme,
     outputFile: './test-output/test-euler.tex',
   },
   {
     name: "Maxwell's Equations",
-    markdown: () => readFileSync('./public/examples/maxwell.md', 'utf-8'),
+    markdown: () => readFileSync('./src/examples/maxwell.md', 'utf-8'),
     colorScheme: viridis10Scheme,
     outputFile: './test-output/test-maxwell.tex',
   },
diff --git a/tests/export/test-typst-export.ts b/tests/export/test-typst-export.ts
index 4a826bd..144927b 100644
--- a/tests/export/test-typst-export.ts
+++ b/tests/export/test-typst-export.ts
@@ -8,7 +8,7 @@ async function testTypstExport() {
   console.log('Testing Typst export with tex2typst...\n');
 
   // Load Euler's identity equation
-  const markdown = readFileSync('./public/examples/euler.md', 'utf-8');
+  const markdown = readFileSync('./src/examples/euler.md', 'utf-8');
   const parsed = await parseContent(markdown);
   console.log('✓ Content loaded successfully');
   console.log(`  Title: ${parsed.title}`);
