diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..8bf3ad1
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,379 @@
+# Contributing to EvoViz
+
+Thank you for your interest in contributing to EvoViz! This guide will help you add new evolutionary algorithms to the platform.
+
+## Table of Contents
+
+- [Architecture Overview](#architecture-overview)
+- [Adding a New Algorithm](#adding-a-new-algorithm)
+  - [Step 1: Create Algorithm Implementation](#step-1-create-algorithm-implementation)
+  - [Step 2: Register Algorithm Configuration](#step-2-register-algorithm-configuration)
+  - [Step 3: Register Algorithm Functions](#step-3-register-algorithm-functions)
+  - [Step 4: Add Log Types (Optional)](#step-4-add-log-types-optional)
+- [Configuration Options](#configuration-options)
+- [Testing Your Algorithm](#testing-your-algorithm)
+- [Example: Adding a Simple Algorithm](#example-adding-a-simple-algorithm)
+
+## Architecture Overview
+
+EvoViz uses a centralized configuration system that makes adding new algorithms straightforward. The architecture consists of:
+
+1. **Algorithm Configuration** (`src/config/algorithms.ts`): Defines metadata, UI properties, and visualization settings
+2. **Algorithm Registry** (`src/config/algorithmRegistry.ts`): Maps algorithm IDs to their implementation functions
+3. **Algorithm Implementation** (`src/algorithms/`): Contains the actual algorithm logic (init and step functions)
+4. **Log Types** (`src/utils/internal-algo-logs.ts`): Defines logging structures for step-by-step visualization
+
+The UI components automatically discover and render algorithms based on the configuration, so you don't need to modify any component files.
+
+## Adding a New Algorithm
+
+### Step 1: Create Algorithm Implementation
+
+Create a new file in `src/algorithms/` (e.g., `src/algorithms/youralgo.ts`).
+
+Your algorithm file must export two functions:
+
+```typescript
+import { Population, EAConfig } from '../utils/common';
+import { StepLog } from '../utils/internal-algo-logs';
+
+// Initialize the population
+export const initYourAlgo = (config: EAConfig): Population => {
+  // Create initial population
+  // Each individual must have: { id, genes, fitness }
+  return Array.from({ length: config.populationSize }, (_, i) => {
+    const genes = /* generate initial genes */;
+    const fitness = /* calculate fitness */;
+    return { id: i, genes, fitness };
+  });
+};
+
+// Execute one generation/step
+export const stepYourAlgo = (
+  pop: Population, 
+  config: EAConfig
+): { nextPop: Population; logs: StepLog } => {
+  // Implement one generation of your algorithm
+  const nextPop: Population = /* new population */;
+  const logs: StepLog = /* log entries for visualization */;
+  
+  return { nextPop, logs };
+};
+```
+
+**Key Requirements:**
+- `Population` is an array of `Individual` objects
+- Each `Individual` must have: `id: number`, `genes: number[]`, `fitness: number`
+- You can add optional fields like `bestPosition`, `velocity`, etc. (see `src/utils/common.ts`)
+- `logs` should be an array of log entries matching your algorithm's log type
+
+### Step 2: Register Algorithm Configuration
+
+Add your algorithm to the `ALGORITHMS` array in `src/config/algorithms.ts`:
+
+```typescript
+import { YourIcon } from 'lucide-react'; // Choose an icon from lucide-react
+
+export const ALGORITHMS: readonly AlgorithmConfig[] = [
+  // ... existing algorithms
+  {
+    id: 'YOURALGO',                    // Unique ID (uppercase, short)
+    name: 'YOURALGO',                   // Short name for UI
+    fullName: 'Your Algorithm Name',    // Full display name
+    description: 'Description of your algorithm...',
+    icon: YourIcon,                      // Icon from lucide-react
+    color: 'blue',                      // 'blue' | 'amber' | 'emerald' | 'purple' | 'fuchsia'
+    visualizationType: 'real-valued',   // 'knapsack' | 'real-valued' | 'gp-linear' | 'gp-sine'
+    problemType: 'sphere',              // 'knapsack' | 'sphere' | 'ackley' | 'gp-linear' | 'gp-sine'
+    fitnessDirection: 'minimize',        // 'maximize' | 'minimize'
+    supports3D: true,                   // Whether to show 3D visualization (ignored if force2DOnly is true)
+    force2DOnly: false,                 // Set true to always use 2D only (e.g. GP with Linear/Sine)
+    defaultGenesCount: 2,               // Default number of genes/dimensions
+    hasProblemSelector: false,           // Show Sphere/Ackley selector (for real-valued)
+    hasGPProblemSelector: false,         // Show Linear/Sine selector (for GP)
+    configSections: {
+      evolutionParams: false,           // Show mutation/crossover rate controls
+      deParams: false,                   // Show DE-specific params (F)
+      psoParams: false,                  // Show PSO-specific params (w, c1, c2)
+      esParams: false,                   // Show ES-specific params (offspringSize, sigma)
+      gaParams: false,                   // Show GA-specific params (tournamentSize)
+      gpParams: false,                   // Show GP-specific params (gpProblem, gpOperations)
+      knapsackParams: false,             // Show knapsack editor
+    },
+  },
+];
+```
+
+**Configuration Options Explained:**
+
+- **visualizationType**: Determines how the algorithm is visualized
+  - `'knapsack'`: For binary/knapsack problems (like GA)
+  - `'real-valued'`: For continuous optimization (like DE, PSO, ES); can show 3D if `supports3D` is true and `force2DOnly` is not set
+  - `'gp-linear'` or `'gp-sine'`: For genetic programming. The effective type is chosen at runtime from the GP problem selector (Linear → 2D projection of genes; Sine → function fit target vs best). GP uses 2D only (Error History + one of those charts); set `force2DOnly: true` for such algorithms
+
+- **problemType**: The default problem your algorithm solves
+  - For real-valued algorithms, set `hasProblemSelector: true` to allow users to choose between Sphere/Ackley
+
+- **configSections**: Controls which parameter panels appear in the UI
+  - Only enable sections relevant to your algorithm
+  - If you need custom parameters, you may need to extend `EAConfig` in `src/utils/common.ts`
+
+- **supports3D**: Set to `true` if your algorithm works with 2D continuous problems (genes.length === 2) and you want 3D visualization. The UI uses a helper `supports3DVisualization(algoId, gpProblem)` which respects this and the next option.
+
+- **force2DOnly** (optional): Set to `true` to always use 2D visualizations only (no 3D scatter). Use this for algorithms like GP that have problem sub-types (e.g. Linear vs Sine) and show Error History plus either a 2D projection or a function-fit chart. When `force2DOnly` is true, `supports3D` is ignored for the 3D panel.
+
+### Step 3: Register Algorithm Functions
+
+Add your algorithm's functions to the registry in `src/config/algorithmRegistry.ts`:
+
+```typescript
+import { initYourAlgo, stepYourAlgo } from '../algorithms/youralgo';
+
+export const ALGORITHM_REGISTRY: Record<AlgorithmId, AlgorithmFunctions> = {
+  // ... existing algorithms
+  YOURALGO: {
+    init: initYourAlgo,
+    step: stepYourAlgo,
+  },
+};
+```
+
+### Step 4: Add Log Types (Optional)
+
+If you want detailed step-by-step logs (like the existing algorithms), add log types to `src/utils/internal-algo-logs.ts`:
+
+```typescript
+export interface YourAlgoLogEntry extends BaseLogEntry {
+  // Define fields that capture your algorithm's internal operations
+  // Example:
+  parentId: number;
+  operation: string;
+  result: number[];
+}
+
+// Update StepLog type to include your log type
+export type StepLog = 
+  | GALogEntry[] 
+  | DELogEntry[] 
+  | PSOLogEntry[] 
+  | GPLogEntry[] 
+  | ESLogEntry[]
+  | YourAlgoLogEntry[];  // Add your type
+```
+
+Then create a log table component in `src/components/StepLogView.tsx`:
+
+```typescript
+const YourAlgoLogTable: React.FC<{logs: YourAlgoLogEntry[]}> = ({ logs }) => (
+  <table className="w-full text-xs text-left text-slate-300 font-mono">
+    {/* Your table structure */}
+  </table>
+);
+
+// Add to StepLogView component:
+{algo === 'YOURALGO' && logs[0] && 'yourField' in logs[0] && (
+  <YourAlgoLogTable logs={logs as YourAlgoLogEntry[]} />
+)}
+```
+
+## Configuration Options
+
+### Extending EAConfig
+
+If your algorithm needs custom configuration parameters, add them to `EAConfig` in `src/utils/common.ts`:
+
+```typescript
+export interface EAConfig {
+  // ... existing fields
+  yourAlgoParam: number;  // Add your custom parameter
+}
+
+export const DEFAULT_CONFIG: EAConfig = {
+  // ... existing defaults
+  yourAlgoParam: 0.5,  // Add default value
+};
+```
+
+Then add UI controls in `src/components/ConfigPanel.tsx`:
+
+```typescript
+{algoConfig.configSections.yourAlgoParams && (
+  <div className="space-y-2">
+    <label>Your Parameter</label>
+    <input 
+      type="number"
+      value={config.yourAlgoParam}
+      onChange={(e) => handleChange('yourAlgoParam', parseFloat(e.target.value))}
+    />
+  </div>
+)}
+```
+
+Don't forget to add `yourAlgoParams: true` to your algorithm's `configSections`!
+
+## Testing Your Algorithm
+
+1. **Start the development server:**
+   ```bash
+   npm run dev
+   ```
+
+2. **Navigate to your algorithm:**
+   - Your algorithm should appear on the landing page
+   - Click on it to open the visualizer
+
+3. **Test basic functionality:**
+   - Click "Start" and verify the algorithm runs
+   - Check that fitness values update correctly
+   - Verify visualizations render properly
+
+4. **Test configuration:**
+   - Adjust parameters and verify they affect the algorithm
+   - Test reset functionality
+
+5. **Test edge cases:**
+   - Very small/large population sizes
+   - Extreme parameter values
+   - Maximum generations reached
+
+## Example: Adding a Simple Algorithm
+
+Here's a minimal example of adding a simple random search algorithm:
+
+**1. Create `src/algorithms/randomsearch.ts`:**
+
+```typescript
+import { Population, EAConfig } from '../utils/common';
+import { StepLog } from '../utils/internal-algo-logs';
+import { calcSphereFitness } from '../utils/functions';
+
+export const initRandomSearch = (config: EAConfig): Population => {
+  return Array.from({ length: config.populationSize }, (_, i) => {
+    const genes = Array.from({ length: config.genesCount }, () => 
+      Math.random() * 10 - 5  // Random value in [-5, 5]
+    );
+    const fitness = calcSphereFitness(genes);
+    return { id: i, genes, fitness };
+  });
+};
+
+export const stepRandomSearch = (
+  pop: Population,
+  config: EAConfig
+): { nextPop: Population; logs: StepLog } => {
+  // Simple random search: generate new random solutions
+  const nextPop = Array.from({ length: config.populationSize }, (_, i) => {
+    const genes = Array.from({ length: config.genesCount }, () => 
+      Math.random() * 10 - 5
+    );
+    const fitness = calcSphereFitness(genes);
+    return { id: i, genes, fitness };
+  });
+  
+  return { nextPop, logs: [] }; // No detailed logs for this simple example
+};
+```
+
+**2. Add to `src/config/algorithms.ts`:**
+
+```typescript
+import { Shuffle } from 'lucide-react';
+
+// In ALGORITHMS array:
+{
+  id: 'RS',
+  name: 'RS',
+  fullName: 'Random Search',
+  description: 'A simple baseline algorithm that generates random solutions.',
+  icon: Shuffle,
+  color: 'blue',
+  visualizationType: 'real-valued',
+  problemType: 'sphere',
+  fitnessDirection: 'minimize',
+  supports3D: true,
+  defaultGenesCount: 2,
+  hasProblemSelector: true,
+  configSections: {
+    // No special parameters needed
+  },
+}
+```
+
+**3. Add to `src/config/algorithmRegistry.ts`:**
+
+```typescript
+import { initRandomSearch, stepRandomSearch } from '../algorithms/randomsearch';
+
+// In ALGORITHM_REGISTRY:
+RS: {
+  init: initRandomSearch,
+  step: stepRandomSearch,
+},
+```
+
+That's it! Your algorithm will now appear in the UI automatically.
+
+## Important Notes
+
+### Algorithm ID Format
+- Use **uppercase** letters (e.g., `'GA'`, `'DE'`, `'PSO'`)
+- Keep it short (2-4 characters recommended)
+- Make it unique and descriptive
+
+### Icon Selection
+- Icons are imported from `lucide-react`
+- Choose an icon that represents your algorithm well
+- Available icons: `Cpu`, `Zap`, `Globe`, `GitBranch`, `Activity`, `Shuffle`, `TrendingUp`, `Flame`, `Bug`, `List`, `Target`, and many more
+- Browse all icons at: https://lucide.dev/icons/
+
+### Color Options
+Available colors: `'blue'`, `'amber'`, `'emerald'`, `'purple'`, `'fuchsia'`
+- Each color has a matching theme for borders, shadows, and hover effects
+- Choose a color that's not already heavily used for visual variety
+
+### Algorithms with problem sub-types (e.g. GP Linear vs Sine)
+- Gene count can depend on the selected sub-type. GP enforces 2 genes for Linear and 5 for Sine in `VisualizerPage.tsx`. If you add an algorithm with a similar selector, you may need to add matching gene-count logic there so the UI and visualizations stay consistent.
+
+### Layout Considerations
+- The landing page automatically displays all algorithms in a responsive grid
+- 3 columns on tablet/PC (900px+), 1 column on mobile
+- Incomplete rows (1-2 items) are automatically centered
+- All cards maintain consistent sizing
+
+### Type Safety
+- The `AlgorithmId` type is automatically generated from the `ALGORITHMS` array
+- TypeScript will catch errors if you reference a non-existent algorithm ID
+- Always use the `AlgorithmId` type when working with algorithm IDs
+
+## Need Help?
+
+- Check existing algorithm implementations in `src/algorithms/` for reference
+- Review the configuration of similar algorithms in `src/config/algorithms.ts`
+- Look at how visualizations are handled in `src/components/Visualizer.tsx`
+- Examine `src/components/ConfigPanel.tsx` to see how config sections are rendered
+- Check `src/components/LandingPage.tsx` to understand how algorithms are displayed
+
+## Troubleshooting
+
+### Algorithm doesn't appear on landing page
+- Verify the algorithm is in the `ALGORITHMS` array in `src/config/algorithms.ts`
+- Check that the array export is correct
+- Ensure there are no TypeScript errors
+
+### Algorithm functions not found
+- Verify the algorithm is registered in `ALGORITHM_REGISTRY` in `src/config/algorithmRegistry.ts`
+- Check that import paths are correct
+- Ensure function names match between implementation and registry
+
+### Configuration panel not showing
+- Check that `configSections` flags are set correctly
+- Verify the relevant section is implemented in `ConfigPanel.tsx` (if using custom params)
+- For standard params (evolutionParams, etc.), they should work automatically
+
+### Type errors
+- Ensure `AlgorithmId` type includes your new algorithm (it's auto-generated from `ALGORITHMS`)
+- Check that all required fields in `AlgorithmConfig` are provided
+- Verify function signatures match `AlgorithmInit` and `AlgorithmStep` types
+
+Happy coding!
+
diff --git a/README.md b/README.md
index d75b8fc..9f640ca 100644
--- a/README.md
+++ b/README.md
@@ -94,3 +94,7 @@ The project also contains a CLI entry point (`main_cli.ts`) for running algorith
 ```bash
 npm start
 ```
+
+## Contributing
+
+Interested in adding a new evolutionary algorithm to EvoViz? Check out our [Contributing Guide](CONTRIBUTING.md) for detailed instructions on how to add new algorithms to the platform.
\ No newline at end of file
diff --git a/index.html b/index.html
index b62f465..c3f970e 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/png" href="/favicon-evoviz.png" />
+    <link rel="icon" type="image/png" href="/public/favicon-evoviz.png" />
     <title>EvoViz</title>
     <style>
       body {
diff --git a/public/favicon-evoviz.png b/public/favicon-evoviz.png
index b9985d6..af21236 100644
Binary files a/public/favicon-evoviz.png and b/public/favicon-evoviz.png differ
diff --git a/src/components/ConfigPanel.tsx b/src/components/ConfigPanel.tsx
index 83b3301..4c6baee 100644
--- a/src/components/ConfigPanel.tsx
+++ b/src/components/ConfigPanel.tsx
@@ -3,12 +3,13 @@ import { EAConfig } from '../utils/common';
 import { KnapsackItem } from '../data/knapsack';
 import { GPOpType, GPOperation } from '../data/gp-ops';
 import { Settings, Plus, Trash2 } from 'lucide-react';
+import { getAlgorithmConfig, AlgorithmId } from '../config/algorithms';
 
 interface Props {
   config: EAConfig;
   setConfig: React.Dispatch<React.SetStateAction<EAConfig>>;
   disabled: boolean;
-  algo: string;
+  algo: AlgorithmId;
 }
 
 const AVAILABLE_OPS: { type: GPOpType; label: string }[] = [
@@ -24,6 +25,7 @@ const AVAILABLE_OPS: { type: GPOpType; label: string }[] = [
 ];
 
 const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) => {
+  const algoConfig = getAlgorithmConfig(algo)!;
   const [newItemName, setNewItemName] = useState('New');
   const [newItemWeight, setNewItemWeight] = useState(2);
   const [newItemValue, setNewItemValue] = useState(10);
@@ -121,9 +123,9 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
             <label className="block text-xs font-semibold text-slate-500 uppercase">Genes / Items</label>
             <input 
                 type="number" 
-                value={algo === 'GA' ? config.knapsackItems.length : config.genesCount}
+                value={algoConfig.configSections.knapsackParams ? config.knapsackItems.length : config.genesCount}
                 disabled={true} 
-                title={algo === 'GA' ? "Determined by Item Count" : "Fixed for Sphere/GP"}
+                title={algoConfig.configSections.knapsackParams ? "Determined by Item Count" : "Fixed for Sphere/GP"}
                 className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-500 cursor-not-allowed"
             />
         </div>
@@ -143,7 +145,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         </div>
 
         {/* Problem Selection for Real-Valued Algos */}
-        {(algo === 'DE' || algo === 'PSO' || algo === 'ES') && (
+        {algoConfig.hasProblemSelector && (
             <div className="space-y-2">
                 <label className={`block text-xs font-semibold uppercase ${disabled ? 'text-slate-600' : 'text-slate-500'}`}>Problem Function</label>
                 <div className={`flex p-1 rounded ${disabled ? 'bg-slate-900/50 opacity-50 cursor-not-allowed' : 'bg-slate-900'}`}>
@@ -168,12 +170,12 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         )}
 
         {/* GA/DE/GP Params */}
-        {(algo === 'GA' || algo === 'DE' || algo === 'GP') && (
+        {algoConfig.configSections.evolutionParams && (
             <>
                 <div className="col-span-2 border-t border-slate-700 pt-2 mt-2">
                     <p className={`text-xs mb-2 font-bold ${disabled ? 'text-blue-400/50' : 'text-blue-400'}`}>Evolution Parameters</p>
                 </div>
-                {algo === 'DE' && (
+                {algoConfig.configSections.deParams && (
                     <div className="space-y-2">
                         <label className={`block text-xs font-semibold uppercase ${disabled ? 'text-slate-600' : 'text-slate-500'}`}>Diff Weight (F)</label>
                         <input 
@@ -189,7 +191,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
                         />
                     </div>
                 )}
-                {algo === 'GP' && (
+                {algoConfig.configSections.gpParams && (
                     <div className="col-span-2 space-y-2">
                         <label className={`block text-xs font-semibold uppercase ${disabled ? 'text-slate-600' : 'text-slate-500'}`}>GP Problem</label>
                         <div className={`flex p-1 rounded ${disabled ? 'bg-slate-900/50 opacity-50 cursor-not-allowed' : 'bg-slate-900'}`}>
@@ -260,7 +262,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         )}
 
         {/* GP Operation Editor */}
-        {algo === 'GP' && (
+        {algoConfig.configSections.gpParams && (
              <div className="col-span-2 border-t border-slate-700 pt-2 mt-2">
                 <div className="flex justify-between items-center mb-2">
                     <p className="text-xs text-purple-400 font-bold">GP Operations ({config.gpOperations.length}/5)</p>
@@ -309,7 +311,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         )}
 
         {/* PSO Params */}
-        {algo === 'PSO' && (
+        {algoConfig.configSections.psoParams && (
             <>
                 <div className="col-span-2 border-t border-slate-700 pt-2 mt-2">
                     <p className={`text-xs mb-2 font-bold ${disabled ? 'text-emerald-400/50' : 'text-emerald-400'}`}>PSO Parameters</p>
@@ -360,7 +362,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         )}
 
         {/* ES Params */}
-        {algo === 'ES' && (
+        {algoConfig.configSections.esParams && (
             <>
                 <div className="col-span-2 border-t border-slate-700 pt-2 mt-2">
                     <p className={`text-xs mb-2 font-bold ${disabled ? 'text-fuchsia-400/50' : 'text-fuchsia-400'}`}>ES Parameters</p>
@@ -397,7 +399,7 @@ const ConfigPanel: React.FC<Props> = ({ config, setConfig, disabled, algo }) =>
         )}
 
         {/* Knapsack Editor */}
-        {algo === 'GA' && (
+        {algoConfig.configSections.knapsackParams && (
             <div className="col-span-2 border-t border-slate-700 pt-2 mt-2">
                 <div className="flex justify-between items-center mb-2">
                     <p className="text-xs text-amber-400 font-bold">Knapsack Items ({config.knapsackItems.length}/15)</p>
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 38d827a..7541980 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,8 +1,9 @@
-import { ArrowDown, Cpu, GitBranch, Globe, Zap, Activity, Dna, Search, Network, Github } from 'lucide-react';
+import { ArrowDown, Dna, Search, Network, Github, Activity } from 'lucide-react';
 import BackgroundEffect from './BackgroundEffect';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/Evo-Viz-Logo.png';
+import { ALGORITHMS } from '../config/algorithms';
 
 const LandingPage: React.FC = () => {
   const scrollToSection = (id: string) => {
@@ -12,6 +13,12 @@ const LandingPage: React.FC = () => {
     }
   };
 
+  // Calculate layout for incomplete rows
+  const totalAlgorithms = ALGORITHMS.length;
+  const itemsPerRow = 3; // 3 items per row for tablet/PC
+  const remaining = totalAlgorithms % itemsPerRow;
+  const startIncompleteRow = remaining > 0 ? totalAlgorithms - remaining : -1;
+
   return (
     <div className="relative bg-[#0b1121] text-slate-200 font-sans selection:bg-blue-500/30 selection:text-blue-200">
 
@@ -118,67 +125,61 @@ const LandingPage: React.FC = () => {
             <span className="overflow-visible">Select Your Algorithm</span>
           </h2>
 
-          {/* Responsive grid that adapts beautifully to all screen sizes */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 text-left justify-items-stretch sm:justify-items-center">
-            <AlgoCard
-              id="GA"
-              title="Genetic Algorithm"
-              desc="The OG of evolution. Uses binary genes, crossover (mating), and mutation to pack the perfect backpack. It's Darwinism, but for math problems."
-              icon={<Cpu />}
-              color="blue"
-            />
-            <AlgoCard
-              id="DE"
-              title="Differential Evolution"
-              desc="Vector calculus meets survival. It uses differences between agents to drive mutation. Excellent for continuous functions and impressing your math professor."
-              icon={<Zap />}
-              color="amber"
-            />
-            <AlgoCard
-              id="PSO"
-              title="Particle Swarm"
-              desc="Bird flocking simulator. Particles fly through search space, remembering their best spots and gossiping with neighbors about theirs. No actual birds harmed."
-              icon={<Globe />}
-              color="emerald"
-            />
-            {/* GP: Natural flow on tablets, repositioned on desktop */}
-            <div className="lg:hidden">
-              <AlgoCard
-                id="GP"
-                title="Genetic Programming"
-                desc="Evolution writing code. We breed syntax trees that eventually (hopefully) solve the equation. It's like infinite monkeys with typewriters, but optimized."
-                icon={<GitBranch />}
-                color="purple"
-              />
-            </div>
-            {/* ES: Centered on tablets, repositioned on desktop */}
-            <div className="col-span-1 sm:col-span-2 sm:flex sm:justify-center lg:hidden">
-              <AlgoCard
-                id="ES"
-                title="Evolution Strategies"
-                desc="The self-optimizing optimizer. It adapts its own mutation rates (Sigma) on the fly. It learns how to learn. Meta, right?"
-                icon={<Activity />}
-                color="fuchsia"
-                className="sm:max-w-sm"
-              />
-            </div>
-            {/* Desktop: GP and ES centered together */}
-            <div className="hidden lg:col-span-3 lg:flex lg:justify-center lg:gap-6 md:gap-8">
-              <AlgoCard
-                id="GP"
-                title="Genetic Programming"
-                desc="Evolution writing code. We breed syntax trees that eventually (hopefully) solve the equation. It's like infinite monkeys with typewriters, but optimized."
-                icon={<GitBranch />}
-                color="purple"
-              />
-              <AlgoCard
-                id="ES"
-                title="Evolution Strategies"
-                desc="The self-optimizing optimizer. It adapts its own mutation rates (Sigma) on the fly. It learns how to learn. Meta, right?"
-                icon={<Activity />}
-                color="fuchsia"
-              />
-            </div>
+          {/* Responsive grid: Mobile/Tablet (1 col below 900px), PC (3 cols above 900px with centered incomplete row) */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 justify-items-center items-stretch">
+            {/* Render all algorithms */}
+            {ALGORITHMS.map((algo, index) => {
+              const IconComponent = algo.icon;
+              
+              // Check if we're starting an incomplete row (1 or 2 items remaining)
+              const isStartOfIncompleteRow = remaining > 0 && remaining < 3 && index === startIncompleteRow;
+              const isInIncompleteRow = remaining > 0 && remaining < 3 && index >= startIncompleteRow;
+              
+              if (isStartOfIncompleteRow) {
+                // Render incomplete row items together in a centered container
+                // On mobile: stack vertically and center, On tablet/PC: keep side-by-side
+                const incompleteItems = ALGORITHMS.slice(index);
+                return (
+                  <div 
+                    key={`incomplete-row-${index}`}
+                    className="col-span-1 md:col-span-3 flex flex-col md:flex-row justify-center items-stretch gap-4 sm:gap-6 md:gap-8 w-full h-full"
+                  >
+                    {incompleteItems.map((incompleteAlgo) => {
+                      const IncompleteIconComponent = incompleteAlgo.icon;
+                      return (
+                        <AlgoCard
+                          key={incompleteAlgo.id}
+                          id={incompleteAlgo.id}
+                          title={incompleteAlgo.fullName}
+                          desc={incompleteAlgo.description}
+                          icon={<IncompleteIconComponent />}
+                          color={incompleteAlgo.color}
+                          className="w-full max-w-sm md:w-[calc((100%-2*2rem)/3)] md:max-w-none mx-auto md:mx-0 h-full"
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              }
+              
+              // Skip items that are part of incomplete row (they're rendered above)
+              if (isInIncompleteRow) {
+                return null;
+              }
+              
+              // Render normal grid items (complete rows of 3)
+              return (
+                <AlgoCard
+                  key={algo.id}
+                  id={algo.id}
+                  title={algo.fullName}
+                  desc={algo.description}
+                  icon={<IconComponent />}
+                  color={algo.color}
+                  className="w-full max-w-sm md:w-full md:max-w-none mx-auto md:mx-0 h-full"
+                />
+              );
+            })}
           </div>
 
           <footer className="mt-32 text-slate-600 text-sm font-medium border-t border-slate-800/50 pt-8">
@@ -253,7 +254,7 @@ const AlgoCard = ({ id, title, desc, icon, color, className = "" }: any) => {
   return (
     <Link
       to={`/visualizer/${id.toLowerCase()}`}
-      className={`group text-left p-6 sm:p-8 rounded-2xl sm:rounded-3xl bg-slate-900/40 border border-slate-800 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 sm:hover:-translate-y-3 relative overflow-hidden w-full max-w-sm ${c.border} ${c.bg} ${c.shadow} block ${className}`}
+      className={`group text-left p-6 sm:p-8 rounded-2xl sm:rounded-3xl bg-slate-900/40 border border-slate-800 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 sm:hover:-translate-y-3 relative overflow-hidden flex flex-col min-h-[280px] sm:min-h-[320px] ${c.border} ${c.bg} ${c.shadow} ${className}`}
     >
       {/* Inner Glow Gradient */}
       <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
@@ -267,7 +268,7 @@ const AlgoCard = ({ id, title, desc, icon, color, className = "" }: any) => {
         </div>
       </div>
 
-      <div className="relative z-10">
+      <div className="relative z-10 flex-grow">
         <h3 className={`text-xl sm:text-2xl font-bold text-slate-200 mb-2 sm:mb-3 transition-colors duration-300 ${c.text}`}>
           {title}
         </h3>
@@ -276,7 +277,7 @@ const AlgoCard = ({ id, title, desc, icon, color, className = "" }: any) => {
         </p>
       </div>
 
-      <div className="mt-8 flex items-center text-xs font-bold uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0 text-slate-400 group-hover:text-white">
+      <div className="mt-auto flex items-center text-xs font-bold uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0 text-slate-400 group-hover:text-white">
         
       </div>
     </Link>
diff --git a/src/components/PopulationTable.tsx b/src/components/PopulationTable.tsx
index 46af043..977cc57 100644
--- a/src/components/PopulationTable.tsx
+++ b/src/components/PopulationTable.tsx
@@ -2,18 +2,20 @@ import React from 'react';
 import { Individual, EAConfig } from '../utils/common';
 import { KnapsackItem } from '../data/knapsack';
 import { decodeGP } from '../algorithms/gp';
+import { getAlgorithmConfig, AlgorithmId } from '../config/algorithms';
 
 interface Props {
   population: Individual[];
-  algo: string;
+  algo: AlgorithmId;
   knapsackItems: KnapsackItem[];
   knapsackCapacity: number;
   config?: EAConfig;
 }
 
 const PopulationTable: React.FC<Props> = ({ population, algo, knapsackItems, knapsackCapacity, config }) => {
+  const algoConfig = getAlgorithmConfig(algo)!;
   const isGP = algo === 'GP';
-  const isGA = algo === 'GA'; // Knapsack
+  const isGA = algoConfig.visualizationType === 'knapsack';
 
   const getKnapsackDetails = (genes: number[]) => {
       let w = 0;
diff --git a/src/components/StepLogView.tsx b/src/components/StepLogView.tsx
index d52a4b2..f6274f5 100644
--- a/src/components/StepLogView.tsx
+++ b/src/components/StepLogView.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { StepLog, GALogEntry, DELogEntry, PSOLogEntry, GPLogEntry, ESLogEntry } from '../utils/internal-algo-logs';
+import { AlgorithmId } from '../config/algorithms';
 
 interface Props {
   logs: StepLog;
-  algo: string;
+  algo: AlgorithmId;
 }
 
 const StepLogView: React.FC<Props> = ({ logs, algo }) => {
diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx
index a9c2d74..2d11183 100644
--- a/src/components/Visualizer.tsx
+++ b/src/components/Visualizer.tsx
@@ -4,6 +4,8 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { Individual, EAConfig } from '../utils/common';
 import { evaluateGP } from '../utils/functions';
 import ThreeDScatter from './ThreeDScatter';
+import { getAlgorithmConfig, getVisualizationType, supports3DVisualization } from '../config/algorithms';
+import { AlgorithmId } from '../config/algorithms';
 
 interface HistoryPoint {
   generation: number;
@@ -14,7 +16,7 @@ interface HistoryPoint {
 interface Props {
   history: HistoryPoint[];
   currentPop: Individual[];
-  algo: string;
+  algo: AlgorithmId;
   config: EAConfig;
   errorHistoryMaximized?: boolean;
   scatter2DMaximized?: boolean;
@@ -36,9 +38,12 @@ const Visualizer: React.FC<Props> = ({
   onToggleScatter2D,
   onToggleScatter3D
 }) => {
-  const isKnapsack = algo === 'GA';
+  const algoConfig = getAlgorithmConfig(algo)!;
+  const visualizationType = getVisualizationType(algo, config.gpProblem);
+  const isKnapsack = visualizationType === 'knapsack';
   const isGP = algo === 'GP';
   const isGPSine = isGP && config.gpProblem === 'Sine';
+  const isRealValued = visualizationType === 'real-valued';
   
   const scatterData = useMemo(() => {
     if (isKnapsack) {
@@ -87,10 +92,9 @@ const Visualizer: React.FC<Props> = ({
       return data;
   }, [currentPop, isGPSine, config]);
 
-  const isRealValued = !isKnapsack && !isGP;
-
-  // Grid layout - always use same column count
-  const gridCols = isRealValued ? 'xl:grid-cols-3 lg:grid-cols-2' : 'lg:grid-cols-2';
+  // Grid layout: 3 columns only when 3D panel is shown (DE, PSO, ES, RS3D); otherwise 2 columns like GP
+  const show3D = supports3DVisualization(algo, config.gpProblem);
+  const gridCols = (isRealValued && show3D) ? 'xl:grid-cols-3 lg:grid-cols-2' : 'lg:grid-cols-2';
 
   // Height classes based on maximized state
   const normalHeightClass = 'h-64';
@@ -117,7 +121,7 @@ const Visualizer: React.FC<Props> = ({
               </button>
             )}
             <h3 className="text-xs uppercase text-slate-400 mb-2">
-              {isKnapsack ? 'Value History (Higher is Better)' : 'Error History (Lower is Better)'}
+              {algoConfig.fitnessDirection === 'maximize' ? 'Value History (Higher is Better)' : 'Error History (Lower is Better)'}
             </h3>
             <div style={{ width: '100%', height: '85%' }}>
               <ResponsiveContainer>
@@ -196,7 +200,7 @@ const Visualizer: React.FC<Props> = ({
         )}
 
         {/* 3D Scatter (Only for Real Valued) - render first if not maximized, last if maximized */}
-        {isRealValued && !scatter3DMaximized && (
+        {supports3DVisualization(algo, config.gpProblem) && !scatter3DMaximized && (
           <div className={`relative ${normalHeightClass}`}>
             {onToggleScatter3D && (
               <button 
@@ -229,7 +233,7 @@ const Visualizer: React.FC<Props> = ({
               </button>
             )}
             <h3 className="text-xs uppercase text-slate-400 mb-2">
-              {isKnapsack ? 'Value History (Higher is Better)' : 'Error History (Lower is Better)'}
+              {algoConfig.fitnessDirection === 'maximize' ? 'Value History (Higher is Better)' : 'Error History (Lower is Better)'}
             </h3>
             <div style={{ width: '100%', height: '85%' }}>
               <ResponsiveContainer>
@@ -302,7 +306,7 @@ const Visualizer: React.FC<Props> = ({
           </div>
         )}
 
-        {isRealValued && scatter3DMaximized && (
+        {supports3DVisualization(algo, config.gpProblem) && scatter3DMaximized && (
           <div className={`relative ${maximizedHeightClass} col-span-full`}>
             {onToggleScatter3D && (
               <button 
diff --git a/src/config/algorithmRegistry.ts b/src/config/algorithmRegistry.ts
new file mode 100644
index 0000000..9708a8a
--- /dev/null
+++ b/src/config/algorithmRegistry.ts
@@ -0,0 +1,45 @@
+import { Population, EAConfig } from '../utils/common';
+import { StepLog } from '../utils/internal-algo-logs';
+import { initGA, stepGA } from '../algorithms/ga';
+import { initDE, stepDE } from '../algorithms/de';
+import { initPSO, stepPSO } from '../algorithms/pso';
+import { initGP, stepGP } from '../algorithms/gp';
+import { initES, stepES } from '../algorithms/es';
+import { AlgorithmId } from './algorithms';
+
+export type AlgorithmInit = (config: EAConfig) => Population;
+export type AlgorithmStep = (pop: Population, config: EAConfig) => { nextPop: Population; logs: StepLog };
+
+export interface AlgorithmFunctions {
+  init: AlgorithmInit;
+  step: AlgorithmStep;
+}
+
+export const ALGORITHM_REGISTRY: Record<AlgorithmId, AlgorithmFunctions> = {
+  GA: {
+    init: initGA,
+    step: stepGA,
+  },
+  DE: {
+    init: initDE,
+    step: stepDE,
+  },
+  PSO: {
+    init: initPSO,
+    step: stepPSO,
+  },
+  GP: {
+    init: initGP,
+    step: stepGP,
+  },
+  ES: {
+    init: initES,
+    step: stepES,
+  },
+};
+
+// Helper function to get algorithm functions
+export const getAlgorithmFunctions = (id: AlgorithmId): AlgorithmFunctions => {
+  return ALGORITHM_REGISTRY[id];
+};
+
diff --git a/src/config/algorithms.ts b/src/config/algorithms.ts
new file mode 100644
index 0000000..258afa9
--- /dev/null
+++ b/src/config/algorithms.ts
@@ -0,0 +1,153 @@
+import { Cpu, Zap, Globe, GitBranch, Activity, LucideIcon } from 'lucide-react';
+
+export type VisualizationType = 'knapsack' | 'real-valued' | 'gp-linear' | 'gp-sine';
+export type ProblemType = 'knapsack' | 'sphere' | 'ackley' | 'gp-linear' | 'gp-sine';
+export type FitnessDirection = 'maximize' | 'minimize';
+
+export interface AlgorithmConfig {
+  id: string;
+  name: string;
+  fullName: string;
+  description: string;
+  icon: LucideIcon;
+  color: 'blue' | 'amber' | 'emerald' | 'purple' | 'fuchsia';
+  visualizationType: VisualizationType;
+  problemType: ProblemType;
+  fitnessDirection: FitnessDirection;
+  supports3D: boolean;
+  /** If true, only 2D visualizations are shown (no 3D scatter). Use for e.g. GP (Linear/Sine). */
+  force2DOnly?: boolean;
+  defaultGenesCount: number;
+  hasProblemSelector?: boolean; // For DE, PSO, ES (Sphere vs Ackley)
+  hasGPProblemSelector?: boolean; // For GP (Linear vs Sine)
+  configSections: {
+    evolutionParams?: boolean; // mutationRate, crossoverRate
+    deParams?: boolean; // F (differential weight)
+    psoParams?: boolean; // w, c1, c2
+    esParams?: boolean; // offspringSize, sigma
+    gaParams?: boolean; // tournamentSize
+    gpParams?: boolean; // gpProblem, gpOperations
+    knapsackParams?: boolean; // knapsackItems, knapsackCapacity
+  };
+}
+
+export const ALGORITHMS: readonly AlgorithmConfig[] = [
+  {
+    id: 'GA',
+    name: 'GA',
+    fullName: 'Genetic Algorithm',
+    description: 'The OG of evolution. Uses binary genes, crossover (mating), and mutation to pack the perfect backpack. It\'s Darwinism, but for math problems.',
+    icon: Cpu,
+    color: 'blue',
+    visualizationType: 'knapsack',
+    problemType: 'knapsack',
+    fitnessDirection: 'maximize',
+    supports3D: false,
+    defaultGenesCount: 0, // Determined by knapsack items count
+    configSections: {
+      evolutionParams: true,
+      gaParams: true,
+      knapsackParams: true,
+    },
+  },
+  {
+    id: 'DE',
+    name: 'DE',
+    fullName: 'Differential Evolution',
+    description: 'Vector calculus meets survival. It uses differences between agents to drive mutation. Excellent for continuous functions and impressing your math professor.',
+    icon: Zap,
+    color: 'amber',
+    visualizationType: 'real-valued',
+    problemType: 'sphere',
+    fitnessDirection: 'minimize',
+    supports3D: true,
+    defaultGenesCount: 2,
+    hasProblemSelector: true,
+    configSections: {
+      evolutionParams: true,
+      deParams: true,
+    },
+  },
+  {
+    id: 'PSO',
+    name: 'PSO',
+    fullName: 'Particle Swarm Optimization',
+    description: 'Bird flocking simulator. Particles fly through search space, remembering their best spots and gossiping with neighbors about theirs. No actual birds harmed.',
+    icon: Globe,
+    color: 'emerald',
+    visualizationType: 'real-valued',
+    problemType: 'sphere',
+    fitnessDirection: 'minimize',
+    supports3D: true,
+    defaultGenesCount: 2,
+    hasProblemSelector: true,
+    configSections: {
+      psoParams: true,
+    },
+  },
+  {
+    id: 'GP',
+    name: 'GP',
+    fullName: 'Genetic Programming',
+    description: 'Evolution writing code. We breed syntax trees that eventually (hopefully) solve the equation. It\'s like infinite monkeys with typewriters, but optimized.',
+    icon: GitBranch,
+    color: 'purple',
+    visualizationType: 'gp-linear', // Will change based on gpProblem
+    problemType: 'gp-linear',
+    fitnessDirection: 'minimize',
+    supports3D: false,
+    force2DOnly: true, // GP uses Error History + 2D Projection (Linear) or Function Fit (Sine) only
+    defaultGenesCount: 5, // For Sine, 2 for Linear
+    hasGPProblemSelector: true,
+    configSections: {
+      evolutionParams: true,
+      gpParams: true,
+    },
+  },
+  {
+    id: 'ES',
+    name: 'ES',
+    fullName: 'Evolution Strategies',
+    description: 'The self-optimizing optimizer. It adapts its own mutation rates (Sigma) on the fly. It learns how to learn. Meta, right?',
+    icon: Activity,
+    color: 'fuchsia',
+    visualizationType: 'real-valued',
+    problemType: 'sphere',
+    fitnessDirection: 'minimize',
+    supports3D: true,
+    defaultGenesCount: 2,
+    hasProblemSelector: true,
+    configSections: {
+      esParams: true,
+    },
+  },
+] as const;
+
+// Type helper to get algorithm IDs
+export type AlgorithmId = typeof ALGORITHMS[number]['id'];
+
+// Helper function to get algorithm config by ID
+export const getAlgorithmConfig = (id: string): AlgorithmConfig | undefined => {
+  return ALGORITHMS.find(algo => algo.id === id);
+};
+
+// Helper function to check if algorithm supports 3D visualization
+export const supports3DVisualization = (algoId: string, gpProblem?: 'Linear' | 'Sine'): boolean => {
+  const config = getAlgorithmConfig(algoId);
+  if (!config) return false;
+  if (config.force2DOnly) return false;
+  return config.supports3D;
+};
+
+// Helper function to get visualization type
+export const getVisualizationType = (algoId: string, gpProblem?: 'Linear' | 'Sine'): VisualizationType => {
+  const config = getAlgorithmConfig(algoId);
+  if (!config) return 'real-valued';
+  
+  if (config.id === 'GP') {
+    return gpProblem === 'Sine' ? 'gp-sine' : 'gp-linear';
+  }
+  
+  return config.visualizationType;
+};
+
diff --git a/src/pages/VisualizerPage.tsx b/src/pages/VisualizerPage.tsx
index 456ede8..07b474e 100644
--- a/src/pages/VisualizerPage.tsx
+++ b/src/pages/VisualizerPage.tsx
@@ -2,38 +2,34 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { Population, EAConfig, DEFAULT_CONFIG } from '../utils/common';
 import { StepLog } from '../utils/internal-algo-logs';
-import { initGA, stepGA } from '../algorithms/ga';
-import { initDE, stepDE } from '../algorithms/de';
-import { initPSO, stepPSO } from '../algorithms/pso';
-import { initGP, stepGP } from '../algorithms/gp';
-import { initES, stepES } from '../algorithms/es';
 import PopulationTable from '../components/PopulationTable';
 import Visualizer from '../components/Visualizer';
 import ConfigPanel from '../components/ConfigPanel';
 import StepLogView from '../components/StepLogView';
 import { Github, ArrowLeft } from 'lucide-react';
-
-type Algorithm = 'GA' | 'DE' | 'PSO' | 'GP' | 'ES';
+import { ALGORITHMS, AlgorithmId, getAlgorithmConfig, supports3DVisualization } from '../config/algorithms';
+import { getAlgorithmFunctions } from '../config/algorithmRegistry';
 
 const VisualizerPage: React.FC = () => {
     const { algo: algoParam } = useParams<{ algo: string }>();
     const navigate = useNavigate();
     
-    // Validate algo param
-    const validAlgos: Algorithm[] = ['GA', 'DE', 'PSO', 'GP', 'ES'];
-    const algo = (validAlgos.find(a => a === algoParam?.toUpperCase()) || 'GA') as Algorithm;
+    // Validate algo param using config
+    const validAlgoIds = ALGORITHMS.map(a => a.id);
+    const algoId = (validAlgoIds.find(a => a === algoParam?.toUpperCase()) || 'GA') as AlgorithmId;
+    const algoConfig = getAlgorithmConfig(algoId)!;
 
     // Scroll to top when component mounts or algo changes
     useEffect(() => {
         window.scrollTo(0, 0);
-    }, [algo]);
+    }, [algoId]);
 
     // Redirect if param was invalid (optional, but keeps URL clean)
     useEffect(() => {
-        if (algoParam?.toUpperCase() !== algo) {
-            navigate(`/visualizer/${algo.toLowerCase()}`, { replace: true });
+        if (algoParam?.toUpperCase() !== algoId) {
+            navigate(`/visualizer/${algoId.toLowerCase()}`, { replace: true });
         }
-    }, [algoParam, algo, navigate]);
+    }, [algoParam, algoId, navigate]);
 
     const [config, setConfig] = useState<EAConfig>(DEFAULT_CONFIG);
     const [pop, setPop] = useState<Population>([]);
@@ -45,16 +41,21 @@ const VisualizerPage: React.FC = () => {
     const [scatter2DMaximized, setScatter2DMaximized] = useState(false);
     const [scatter3DMaximized, setScatter3DMaximized] = useState(false);
 
-    // Enforce 2D genome for algorithms using 3D visualization to match plot dimensions
+    // Enforce genome count based on algorithm and problem type
     useEffect(() => {
         setConfig(prev => {
-            const is3DViz = algo === 'DE' || algo === 'PSO' || algo === 'ES' || (algo === 'GP' && prev.gpProblem === 'Linear');
+            const is3DViz = supports3DVisualization(algoId, prev.gpProblem);
             
             let targetGenes = prev.genesCount;
-            if (is3DViz) {
+            if (algoId === 'GP') {
+                targetGenes = prev.gpProblem === 'Linear' ? 2 : 5;
+            } else if (is3DViz) {
                 targetGenes = 2;
-            } else if (algo === 'GP' && prev.gpProblem === 'Sine') {
-                targetGenes = 5;
+            } else if (algoId === 'GA') {
+                // GA uses knapsack items count, handled elsewhere
+                return prev;
+            } else {
+                targetGenes = algoConfig.defaultGenesCount;
             }
             
             if (prev.genesCount !== targetGenes) {
@@ -62,23 +63,20 @@ const VisualizerPage: React.FC = () => {
             }
             return prev;
         });
-    }, [algo, config.gpProblem]);
+    }, [algoId, config.gpProblem, algoConfig]);
 
     // Initialize function
     const reset = useCallback(() => {
-        let initialPop: Population = [];
-
-        if (algo === 'GA') initialPop = initGA(config);
-        if (algo === 'DE') initialPop = initDE(config);
-        if (algo === 'PSO') initialPop = initPSO(config);
-        if (algo === 'GP') initialPop = initGP(config);
-        if (algo === 'ES') initialPop = initES(config);
+        const algoFunctions = getAlgorithmFunctions(algoId);
+        const initialPop = algoFunctions.init(config);
 
         setPop(initialPop);
         setGen(0);
 
         const fits = initialPop.map(p => p.fitness);
-        const best = algo === 'GA' ? Math.max(...fits) : Math.min(...fits);
+        const best = algoConfig.fitnessDirection === 'maximize' 
+            ? Math.max(...fits) 
+            : Math.min(...fits);
         const avg = fits.reduce((a, b) => a + b, 0) / fits.length;
 
         setHistory([{
@@ -88,7 +86,7 @@ const VisualizerPage: React.FC = () => {
         }]);
         setStepLogs([]);
         setRunning(false);
-    }, [algo, config]);
+    }, [algoId, config, algoConfig]);
 
     // Initial load & when algo changes
     useEffect(() => {
@@ -102,18 +100,15 @@ const VisualizerPage: React.FC = () => {
         }
 
         setPop(prev => {
-            let result: { nextPop: Population; logs: StepLog } = { nextPop: [], logs: [] };
-
-            if (algo === 'GA') result = stepGA(prev, config);
-            else if (algo === 'DE') result = stepDE(prev, config);
-            else if (algo === 'PSO') result = stepPSO(prev, config);
-            else if (algo === 'GP') result = stepGP(prev, config);
-            else if (algo === 'ES') result = stepES(prev, config);
+            const algoFunctions = getAlgorithmFunctions(algoId);
+            const result = algoFunctions.step(prev, config);
 
             const { nextPop, logs } = result;
 
             const fits = nextPop.map(p => p.fitness);
-            const best = algo === 'GA' ? Math.max(...fits) : Math.min(...fits);
+            const best = algoConfig.fitnessDirection === 'maximize'
+                ? Math.max(...fits)
+                : Math.min(...fits);
             const avg = fits.reduce((a, b) => a + b, 0) / fits.length;
 
             setHistory(h => {
@@ -125,7 +120,7 @@ const VisualizerPage: React.FC = () => {
             return nextPop;
         });
         setGen(g => g + 1);
-    }, [algo, gen, config]);
+    }, [algoId, gen, config, algoConfig]);
 
     useEffect(() => {
         let interval: any;
@@ -144,8 +139,8 @@ const VisualizerPage: React.FC = () => {
         }
     }, [gen, config.maxGenerations, running]);
 
-    const handleAlgoChange = (newAlgo: Algorithm) => {
-        navigate(`/visualizer/${newAlgo.toLowerCase()}`);
+    const handleAlgoChange = (newAlgoId: AlgorithmId) => {
+        navigate(`/visualizer/${newAlgoId.toLowerCase()}`);
     };
 
     return (
@@ -189,30 +184,23 @@ const VisualizerPage: React.FC = () => {
 
                  {/* Center: Navigation Tabs - Grouped as single component */}
                  <div className="relative z-10 flex gap-1.5 sm:gap-2 overflow-x-auto w-full sm:w-auto justify-center sm:justify-start scrollbar-hide">
-                    {validAlgos.map((a, index) => {
-                        const algoNames: Record<Algorithm, string> = {
-                            'GA': 'Genetic Algorithm',
-                            'DE': 'Differential Evolution',
-                            'PSO': 'Particle Swarm Optimization',
-                            'GP': 'Genetic Programming',
-                            'ES': 'Evolution Strategies'
-                        };
+                    {ALGORITHMS.map((algo, index) => {
                         // Show tooltip above for last 2 buttons (GP, ES) to prevent overflow
                         const showTooltipAbove = index >= 3;
                         return (
                             <button
-                                key={a}
-                                onClick={() => handleAlgoChange(a)}
-                                title={algoNames[a]}
+                                key={algo.id}
+                                onClick={() => handleAlgoChange(algo.id)}
+                                title={algo.fullName}
                                 className={`px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg font-bold text-xs sm:text-sm transition-all relative group whitespace-nowrap flex-shrink-0 ${
-                                    algo === a 
+                                    algoId === algo.id 
                                     ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' 
                                     : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200'
                                 }`}
                             >
-                                {a}
+                                {algo.name}
                                 <span className={`hidden sm:block absolute ${showTooltipAbove ? 'bottom-full mb-2' : 'top-full mt-2'} left-1/2 transform -translate-x-1/2 px-3 py-1.5 bg-slate-900 text-slate-200 text-xs rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap border border-slate-700 shadow-lg z-50`}>
-                                    {algoNames[a]}
+                                    {algo.fullName}
                                 </span>
                             </button>
                         );
@@ -240,18 +228,20 @@ const VisualizerPage: React.FC = () => {
                         {/* Problem Context - Separate Section */}
                         <div className="bg-slate-800 p-6 rounded-xl border border-slate-700 shadow-lg">
                             <h4 className="text-sm font-bold uppercase text-slate-300 mb-4">Problem Context</h4>
-                            {algo === 'GA' && (
+                            {algoConfig.visualizationType === 'knapsack' && (
                                 <div className="text-sm space-y-2">
                                     <p className="text-amber-400 font-semibold text-base">Knapsack Problem</p>
                                     <p className="text-slate-300">Capacity: <span className="text-amber-400 font-semibold">{config.knapsackCapacity}</span></p>
                                     <p className="text-slate-400 mt-3 italic text-xs">See item list in configuration above.</p>
                                 </div>
                             )}
-                            {(algo === 'DE' || algo === 'PSO' || algo === 'ES') && (
+                            {algoConfig.visualizationType === 'real-valued' && (
                                 <div className="text-sm space-y-2">
-                                    {algo === 'ES' && <p className="text-fuchsia-400 font-semibold text-base">Evolution Strategy (ES)</p>}
-                                    {algo === 'PSO' && <p className="text-emerald-400 font-semibold text-base">Particle Swarm (PSO)</p>}
-                                    {algo === 'DE' && <p className="text-blue-400 font-semibold text-base">Differential Evolution (DE)</p>}
+                                    <p className={`font-semibold text-base ${
+                                        algoConfig.color === 'fuchsia' ? 'text-fuchsia-400' :
+                                        algoConfig.color === 'emerald' ? 'text-emerald-400' :
+                                        'text-blue-400'
+                                    }`}>{algoConfig.fullName}</p>
                                     
                                     <p className="text-white font-bold mt-3 text-base">{config.problemType || 'Sphere'} Function</p>
                                     
@@ -264,7 +254,7 @@ const VisualizerPage: React.FC = () => {
                                     <p className="text-slate-300">Target: <span className="text-emerald-400 font-semibold">0</span></p>
                                 </div>
                             )}
-                            {algo === 'GP' && (
+                            {(algoConfig.visualizationType === 'gp-linear' || algoConfig.visualizationType === 'gp-sine') && (
                                 <div className="text-sm space-y-2">
                                     <p className="text-purple-400 font-semibold text-base">Genetic Programming</p>
                                     {config.gpProblem === 'Linear' ? (
@@ -325,7 +315,7 @@ const VisualizerPage: React.FC = () => {
                             </button>
                         </div>
 
-                        <ConfigPanel config={config} setConfig={setConfig} disabled={running || gen > 0} algo={algo} />
+                        <ConfigPanel config={config} setConfig={setConfig} disabled={running || gen > 0} algo={algoId} />
                         </div>
                     </div>
                 </div>
@@ -335,7 +325,7 @@ const VisualizerPage: React.FC = () => {
                     <Visualizer 
                         history={history} 
                         currentPop={pop} 
-                        algo={algo} 
+                        algo={algoId} 
                         config={config} 
                         errorHistoryMaximized={errorHistoryMaximized}
                         scatter2DMaximized={scatter2DMaximized}
@@ -372,12 +362,12 @@ const VisualizerPage: React.FC = () => {
                         <>
                             <PopulationTable
                                 population={pop}
-                                algo={algo}
+                                algo={algoId}
                                 knapsackItems={config.knapsackItems}
                                 knapsackCapacity={config.knapsackCapacity}
                                 config={config}
                             />
-                            <StepLogView logs={stepLogs} algo={algo} />
+                            <StepLogView logs={stepLogs} algo={algoId} />
                         </>
                     )}
                 </div>
diff --git a/src/utils/internal-algo-logs.ts b/src/utils/internal-algo-logs.ts
index 44c53a7..f4c3114 100644
--- a/src/utils/internal-algo-logs.ts
+++ b/src/utils/internal-algo-logs.ts
@@ -1,4 +1,6 @@
-export type LogType = 'GA' | 'DE' | 'PSO' | 'GP' | 'ES';
+import { AlgorithmId } from '../config/algorithms';
+
+export type LogType = AlgorithmId;
 
 export interface BaseLogEntry {
   id: number;
diff --git a/tailwind.config.js b/tailwind.config.js
index e4ede5e..0f90fc2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,13 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    screens: {
+      'sm': '640px',
+      'md': '900px', // Override md breakpoint to 900px for tablet/PC transition
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       animation: {
         'fade-in-up': 'fadeInUp 0.8s ease-out forwards',