diff --git a/server/app/__init__.py b/server/app/__init__.py
index fca109f..d579843 100644
--- a/server/app/__init__.py
+++ b/server/app/__init__.py
@@ -1,12 +1,11 @@
 from flask import Flask
 from flask_cors import CORS
 from .config import Config
-from .api.auth_routes import auth_bp
 
 def create_app(config_class=Config):
     app = Flask(__name__, 
-                static_folder='../../src/static',  # Points to frontend files
-                template_folder='../../src/templates')  # Points to frontend files
+                static_folder='../../src/static',
+                template_folder='../../src/templates')
     
     # Load config
     app.config.from_object(config_class)
@@ -15,15 +14,18 @@ def create_app(config_class=Config):
     CORS(app)
 
     # Register blueprints
-    from .api.character_routes import character_bp
+    from .api.aiagent_routes import ai_agent_bp
     from .api.dataset_routes import dataset_bp
     from .api.evaluation_routes import evaluation_bp
+    from .api.config_routes import config_bp
     from .api.main import main_bp
+    from .api.auth_routes import auth_bp
 
     app.register_blueprint(main_bp)
-    app.register_blueprint(character_bp, url_prefix='/api')
+    app.register_blueprint(ai_agent_bp, url_prefix='/api')
     app.register_blueprint(dataset_bp, url_prefix='/api')
     app.register_blueprint(evaluation_bp, url_prefix='/api')
+    app.register_blueprint(config_bp, url_prefix='/api/config')
     app.register_blueprint(auth_bp, url_prefix='/api')
 
     return app
diff --git a/server/app/api/aiagent_routes.py b/server/app/api/aiagent_routes.py
new file mode 100644
index 0000000..b6e2345
--- /dev/null
+++ b/server/app/api/aiagent_routes.py
@@ -0,0 +1,66 @@
+from flask import Blueprint, request, jsonify, session
+from ..core.aiagents import (
+    get_all_agents, save_agent, delete_agent, get_agent,
+    add_variant, delete_variant
+)
+from ..core.models import AiAgent
+from ..auth.decorators import login_required
+
+ai_agent_bp = Blueprint('ai_agents', __name__)
+
+@ai_agent_bp.route('/ai-agents', methods=['GET'])
+@login_required
+def get_agents():
+    user_id = session['user']['uid']
+    return jsonify(get_all_agents(user_id))
+
+@ai_agent_bp.route('/ai-agents', methods=['POST'])
+@login_required
+def create_agent():
+    data = request.json
+    user_id = session['user']['uid']
+    
+    agent = AiAgent(
+        name=data['name'],
+        prompt=data['prompt'],
+        config=data['config'],
+        included_variables=data.get('included_variables', [])
+    )
+    
+    agent_id = save_agent(agent, user_id)
+    return jsonify({
+        "message": f"AI Agent '{data['name']}' created successfully",
+        "id": agent_id
+    }), 201
+
+@ai_agent_bp.route('/ai-agents/<agent_id>', methods=['DELETE'])
+@login_required
+def remove_agent(agent_id):
+    user_id = session['user']['uid']
+    if delete_agent(agent_id, user_id):
+        return jsonify({"message": "AI Agent deleted successfully"})
+    return jsonify({"message": "AI Agent not found"}), 404
+
+@ai_agent_bp.route('/ai-agents/<agent_id>/variants', methods=['POST'])
+@login_required
+def create_variant(agent_id):
+    data = request.json
+    user_id = session['user']['uid']
+    variant_name = data['variant_name']
+    variables = data['variables']
+    
+    variant_id = add_variant(agent_id, user_id, variant_name, variables)
+    if variant_id:
+        return jsonify({
+            "message": f"Variant '{variant_name}' added successfully",
+            "variant_id": variant_id
+        })
+    return jsonify({"message": "Failed to add variant"}), 404
+
+@ai_agent_bp.route('/ai-agents/<agent_id>/variants/<variant_name>', methods=['DELETE'])
+@login_required
+def remove_variant(agent_id, variant_name):
+    user_id = session['user']['uid']
+    if delete_variant(agent_id, user_id, variant_name):
+        return jsonify({"message": "Variant deleted successfully"})
+    return jsonify({"message": "Variant not found"}), 404
\ No newline at end of file
diff --git a/server/app/api/character_routes.py b/server/app/api/character_routes.py
deleted file mode 100644
index ba3ed24..0000000
--- a/server/app/api/character_routes.py
+++ /dev/null
@@ -1,54 +0,0 @@
-from flask import Blueprint, request, jsonify, session
-from ..core.characters import (
-    get_all_characters, save_character, delete_character, 
-    get_character, update_character
-)
-from ..auth.decorators import login_required
-
-character_bp = Blueprint('characters', __name__)
-
-@character_bp.route('/characters', methods=['GET'])
-@login_required
-def get_characters():
-    user_id = session['user']['uid']
-    return jsonify(get_all_characters(user_id))
-
-@character_bp.route('/characters', methods=['POST'])
-@login_required
-def create_character():
-    data = request.json
-    user_id = session['user']['uid']
-    character_id = save_character(
-        name=data['name'],
-        backstory=data['backstory'],
-        model=data['model'],
-        temperature=float(data['temperature']),
-        max_tokens=int(data['max_tokens']),
-        user_id=user_id
-    )
-    return jsonify({"message": f"Character '{data['name']}' created successfully", "id": character_id}), 201
-
-@character_bp.route('/characters/<character_id>', methods=['PUT'])
-@login_required
-def update_character_route(character_id):
-    data = request.json
-    user_id = session['user']['uid']
-    if update_character(
-        character_id=character_id,
-        name=data['name'],
-        backstory=data['backstory'],
-        model=data['model'],
-        temperature=float(data['temperature']),
-        max_tokens=int(data['max_tokens']),
-        user_id=user_id
-    ):
-        return jsonify({"message": f"Character '{data['name']}' updated successfully"})
-    return jsonify({"message": "Character not found"}), 404
-
-@character_bp.route('/characters/<character_id>', methods=['DELETE'])
-@login_required
-def remove_character(character_id):
-    user_id = session['user']['uid']
-    if delete_character(character_id, user_id):
-        return jsonify({"message": "Character deleted successfully"})
-    return jsonify({"message": "Character not found"}), 404
\ No newline at end of file
diff --git a/server/app/api/config_routes.py b/server/app/api/config_routes.py
new file mode 100644
index 0000000..d4eff01
--- /dev/null
+++ b/server/app/api/config_routes.py
@@ -0,0 +1,8 @@
+from flask import Blueprint, jsonify
+from ..utils.model_map import MODELS
+
+config_bp = Blueprint('config', __name__)
+
+@config_bp.route('/models', methods=['GET'])
+def get_models():
+    return jsonify(MODELS)
\ No newline at end of file
diff --git a/server/app/api/dataset_routes.py b/server/app/api/dataset_routes.py
index 1f821fc..b6ac093 100644
--- a/server/app/api/dataset_routes.py
+++ b/server/app/api/dataset_routes.py
@@ -1,7 +1,7 @@
 from flask import Blueprint, request, jsonify, session
 from ..core.datasets import (
     get_all_datasets, save_dataset, delete_dataset,
-    get_dataset, update_dataset
+    get_dataset, update_dataset, SubjectiveDataset, ObjectiveDataset
 )
 from ..auth.decorators import login_required
 
@@ -49,4 +49,26 @@ def remove_dataset(dataset_id):
     user_id = session['user']['uid']
     if delete_dataset(dataset_id, user_id):
         return jsonify({"message": "Dataset deleted successfully"})
-    return jsonify({"message": "Dataset not found"}), 404
\ No newline at end of file
+    return jsonify({"message": "Dataset not found"}), 404
+
+@dataset_bp.route('/datasets/generate_questions', methods=['POST'])
+@login_required
+def generate_questions():
+    try:
+        data = request.json
+        dataset_class = SubjectiveDataset if data['datasetType'] == 'subjective' else ObjectiveDataset
+        dataset = dataset_class(name="temp", id="temp")
+        
+        questions = dataset.generate_questions(
+            agent_data=data['agent'],
+            guidelines=data['guidelines'],
+            num_questions=int(data['numQuestions']),
+            inputs=data.get('inputs', {})
+        )
+        return jsonify({"questions": questions})
+        
+    except ValueError as e:
+        return jsonify({"message": str(e)}), 400
+    except Exception as e:
+        print(f"Error in generate_questions endpoint: {str(e)}")
+        return jsonify({"message": "Failed to generate questions"}), 500
\ No newline at end of file
diff --git a/server/app/api/evaluation_routes.py b/server/app/api/evaluation_routes.py
index 50e7e03..e74a04d 100644
--- a/server/app/api/evaluation_routes.py
+++ b/server/app/api/evaluation_routes.py
@@ -1,7 +1,7 @@
 from flask import Blueprint, request, jsonify, session
-from ..core.characters import get_character
+from ..core.aiagents import get_agent
 from ..core.datasets import get_dataset
-from ..core.models import Character, Evaluator
+from ..core.models import Evaluator
 from ..auth.decorators import login_required
 
 evaluation_bp = Blueprint('evaluation', __name__)
diff --git a/server/app/core/aiagents.py b/server/app/core/aiagents.py
new file mode 100644
index 0000000..7ddfbc6
--- /dev/null
+++ b/server/app/core/aiagents.py
@@ -0,0 +1,55 @@
+from typing import Dict, Optional, Tuple
+from ..firebase import aiagent_dao
+from .models import AiAgent
+
+def get_all_agents(user_id: str) -> Dict:
+    """Get all AI agents for a user"""
+    return aiagent_dao.get_all(user_id)
+
+def save_agent(agent: AiAgent, user_id: str) -> str:
+    """Create new AI agent"""
+    return aiagent_dao.save(agent, user_id)
+
+def get_agent(agent_id: str, user_id: str, variant_name: str = None) -> Optional[AiAgent]:
+    """Get a specific AI agent and optionally a specific variant"""
+    data = aiagent_dao.get_by_id(agent_id, user_id, variant_name)
+    if data:
+        agent = AiAgent(
+            name=data['name'],
+            prompt=data['prompt'],
+            config=data['config']
+        )
+        
+        # Add variants if they exist
+        if 'variants' in data:
+            for var_name, var_data in data['variants'].items():
+                agent.add_variant(var_name, var_data['variables'])
+                
+        return agent
+    return None
+
+def add_variant(agent_id: str, user_id: str, variant_name: str, variables: Dict[str, str]) -> bool:
+    """Add a new variant to an existing agent"""
+    # Get the base agent first
+    agent_data = aiagent_dao.get_by_id(agent_id, user_id)
+    if not agent_data:
+        return False
+        
+    # Validate that all variables are in included_variables
+    included_vars = set(agent_data.get('included_variables', []))
+    if not included_vars:
+        return False
+        
+    variant_vars = set(variables.keys())
+    if not variant_vars.issubset(included_vars):
+        return False
+        
+    return aiagent_dao.add_variant(agent_id, user_id, variant_name, variables)
+
+def delete_variant(agent_id: str, user_id: str, variant_name: str) -> bool:
+    """Delete a specific variant"""
+    return aiagent_dao.delete_variant(agent_id, user_id, variant_name)
+
+def delete_agent(agent_id: str, user_id: str) -> bool:
+    """Delete an AI agent"""
+    return aiagent_dao.delete(agent_id, user_id)
\ No newline at end of file
diff --git a/server/app/core/characters.py b/server/app/core/characters.py
deleted file mode 100644
index 3ec2320..0000000
--- a/server/app/core/characters.py
+++ /dev/null
@@ -1,22 +0,0 @@
-from typing import Dict, Optional
-from ..firebase import character_dao
-
-def get_all_characters(user_id: str) -> Dict:
-    """Get all characters for a user"""
-    return character_dao.get_all(user_id)
-
-def save_character(name: str, backstory: str, model: str, temperature: float, max_tokens: int, user_id: str) -> str:
-    """Create new character"""
-    return character_dao.save(name, backstory, model, temperature, max_tokens, user_id)
-
-def delete_character(character_id: str, user_id: str) -> bool:
-    """Delete a character"""
-    return character_dao.delete(character_id, user_id)
-
-def get_character(character_id: str, user_id: str) -> Optional[Dict]:
-    """Get a specific character"""
-    return character_dao.get_by_id(character_id, user_id)
-
-def update_character(character_id: str, name: str, backstory: str, model: str, temperature: float, max_tokens: int, user_id: str) -> bool:
-    """Update existing character"""
-    return character_dao.update(character_id, name, backstory, model, temperature, max_tokens, user_id)
\ No newline at end of file
diff --git a/server/app/core/datasets.py b/server/app/core/datasets.py
index ada0f3c..56245ef 100644
--- a/server/app/core/datasets.py
+++ b/server/app/core/datasets.py
@@ -33,10 +33,37 @@ def load(self, inputs):
 
         self.inputs = inputs 
     
-    def generate_samples(self):
-
-        '''Implement a way to generate samples in the dataset'''
-        return
+    def format_prompt(self, prompt: str, inputs: dict) -> str:
+        """Format prompt with input variables"""
+        try:
+            return prompt.format(**inputs)
+        except KeyError as e:
+            raise ValueError(f"Missing required input variable: {str(e)}")
+    
+    def generate_questions(self, agent_data: dict, guidelines: str, num_questions: int, inputs: dict) -> list:
+        """Base method for generating questions"""
+        try:
+            formatted_prompt = self.format_prompt(agent_data['prompt'], inputs)
+            
+            questions = self.generate_samples(
+                model=agent_data['config']['model'],
+                agent_prompt=formatted_prompt,
+                user_request=guidelines,
+                num_q=num_questions
+            )
+            
+            if not questions:
+                raise ValueError("No questions were generated")
+                
+            return questions
+            
+        except Exception as e:
+            print(f"Error generating questions: {str(e)}")
+            raise
+    
+    def generate_samples(self) -> list:
+        """Abstract method to be implemented by subclasses"""
+        raise NotImplementedError("Subclasses must implement generate_samples")
     
     def generate_input_testcases(self,model,prompt_template,num_test_cases,input_descriptions) -> list:
 
@@ -62,7 +89,7 @@ def generate_input_testcases(self,model,prompt_template,num_test_cases,input_des
         )
 
         service = LLMResponseService(
-            model_name = model,
+            model = model,
             system_prompt = ""
         )
         
@@ -75,7 +102,6 @@ def generate_input_testcases(self,model,prompt_template,num_test_cases,input_des
         except Exception as e:
             print(e)
             print("The LLM is probably not returning a valid JSON object, retry it probably")
-            print("The LLM response was: ", response)
 
 class SubjectiveDataset(Dataset):
 
@@ -87,7 +113,7 @@ def generate_samples(self,model: str,agent_prompt: str ,user_request: str, num_q
 
 
         service = LLMResponseService(
-            model_name=model,
+            model=model,
             system_prompt="",
             persist_history=False
         )
@@ -120,7 +146,7 @@ def generate_samples(self,model: str,agent_prompt: str ,user_request: str, num_q
 
 
         service = LLMResponseService(
-            model_name=model,
+            model=model,
             system_prompt="",
             persist_history=False
         )
@@ -140,12 +166,6 @@ def generate_samples(self,model: str,agent_prompt: str ,user_request: str, num_q
 
             return questions_list
         except Exception as e:
+            print(response)
             print(e)
             print("the LLM is probably not returning a valid list object, need to retry")
-
-
-
-
-
-
-
diff --git a/server/app/core/models.py b/server/app/core/models.py
index 1d31795..ab366db 100644
--- a/server/app/core/models.py
+++ b/server/app/core/models.py
@@ -1,53 +1,85 @@
-from ..utils import (
-    get_response_claude, 
-    get_response_openai, 
-    system_metric, 
-    system_score
-)
-from datasets import Dataset, SubjectiveDataset, ObjectiveDataset
+from ..utils import system_score
+from .datasets import Dataset, SubjectiveDataset, ObjectiveDataset
 from ..utils.api_clients import LLMResponseService
 from ..utils.prompts import system_score
+from typing import Dict, Optional
 
-class AiAgent:
-
-    def __init__(self, name: str, prompt: list[dict], config: dict, inputs: dict = None, persist_history: bool = True) -> None:
+class AgentVariant:
+    def __init__(self, id: str, name: str, variables: Dict[str, str]) -> None:
+        self.id = id
+        self.name = name
+        self.variables = variables
 
-        self.name = name 
+class AiAgent:
+    def __init__(self, name: str, prompt: list[dict], config: dict, 
+                 inputs: dict = None, persist_history: bool = True,
+                 variants: Dict[str, AgentVariant] = None,
+                 included_variables: list[str] = None) -> None:
+        
+        self.name = name
+        self.raw_prompt = prompt
+        self.config = config
+        self.variants = variants or {}
+        self.included_variables = included_variables or []
+        
+        # Process prompt with inputs if provided
+        self.process_prompt(inputs)
+        
+        # Initialize LLM service
+        self.service = LLMResponseService(
+            system_prompt=self.prompt[0]["content"],
+            persist_history=persist_history,
+            **self.config
+        )
+    
+    def process_prompt(self, inputs: dict = None) -> None:
+        """Process prompt with given inputs"""
         prompt_final = []
-        for mess in prompt:
+        inputs = inputs or {}
+
+        for mess in self.raw_prompt:
             if mess["role"] == "system":
                 system = mess["content"]
-            
                 if "system" in inputs:
                     system = system.format(**inputs["system"])
-                
-                prompt_final.append({"role":"system", "content":system})
+                prompt_final.append({"role": "system", "content": system})
 
             if mess["role"] == "user":
                 user = mess["content"]
-            
                 if "user" in inputs:
                     user = user.format(**inputs["user"])
-                
-                prompt_final.append({"role":"user", "content":user})
-        
+                prompt_final.append({"role": "user", "content": user})
         
-        self.prompt = prompt_final 
-        self.config = config 
+        self.prompt = prompt_final
+
+    def add_variant(self, variant_id: str, name: str, variables: Dict[str, str]) -> None:
+        """Add a new variant with specific variable values"""
+        self.variants[variant_id] = AgentVariant(
+            id=variant_id,
+            name=name,
+            variables=variables
+        )
+
+    def get_variant(self, variant_id: str) -> Optional[AgentVariant]:
+        """Get a specific variant by ID"""
+        return self.variants.get(variant_id)
+
+    def load_variant(self, variant_name: str) -> bool:
+        """Load a specific variant's inputs"""
+        variant = self.get_variant(variant_name)
+        if variant:
+            self.process_prompt(variant.variables)
+            return True
+        return False
 
-        self.service = LLMResponseService(system_prompt=self.prompt[0]["content"],persist_history=persist_history,**self.config)
-    
     def send_message(self, user_query: str = ""):
-
         service = self.service
         if self.prompt[-1]["role"] == "user":
-
-            response =  service.send_message(self.prompt[-1])
+            response = service.send_message(self.prompt[-1])
         else:
-            response =  service.send_message(user_query)
+            response = service.send_message(user_query)
         
         self.prompt = service.prompt
-
         return response
 
 class LLMJudge(AiAgent):
diff --git a/server/app/firebase/aiagent_dao.py b/server/app/firebase/aiagent_dao.py
new file mode 100644
index 0000000..63de421
--- /dev/null
+++ b/server/app/firebase/aiagent_dao.py
@@ -0,0 +1,120 @@
+from typing import Dict, Optional
+from uuid import uuid4
+from . import db
+from ..core.models import AiAgent, AgentVariant
+from firebase_admin.firestore import SERVER_TIMESTAMP
+
+def get_all(user_id: str) -> Dict:
+    """Get all AI agents for a specific user"""
+    agents = {}
+    query = db.collection('ai_agents').where('user_id', '==', user_id).stream()
+    for doc in query:
+        agents[doc.id] = doc.to_dict()
+    return agents
+
+def get_by_id(agent_id: str, user_id: str, variant_id: str = None) -> Optional[Dict]:
+    """
+    Get a specific AI agent if it belongs to the user
+    Optionally retrieve a specific variant
+    """
+    doc_ref = db.collection('ai_agents').document(agent_id)
+    doc = doc_ref.get()
+    
+    if not doc.exists or doc.to_dict().get('user_id') != user_id:
+        return None
+
+    agent_data = doc.to_dict()
+    
+    if variant_id and 'variants' in agent_data:
+        variant = agent_data['variants'].get(variant_id)
+        if variant:
+            # Merge variant data with base agent data
+            agent_data = {**agent_data, 'variables': variant['variables']}
+    
+    return agent_data
+
+def save(agent: AiAgent, user_id: str) -> str:
+    """Save new AI agent with user_id"""
+    doc_ref = db.collection('ai_agents').document()
+    
+    # Convert variants to proper structure with IDs
+    variants_dict = {}
+    for variant_id, variant in agent.variants.items():
+        variants_dict[variant_id] = {
+            'id': variant_id,
+            'name': variant.name,
+            'variables': variant.variables
+        }
+    
+    agent_data = {
+        "name": agent.name,
+        "prompt": agent.prompt,
+        "config": agent.config,
+        "user_id": user_id,
+        "created_at": SERVER_TIMESTAMP,
+        "included_variables": agent.included_variables,
+        "variants": variants_dict
+    }
+    
+    doc_ref.set(agent_data)
+    return doc_ref.id
+
+def add_variant(agent_id: str, user_id: str, variant_name: str, variables: Dict[str, str]) -> Optional[str]:
+    """
+    Add a variant to an existing agent
+    Returns: variant_id if successful, None if failed
+    """
+    doc_ref = db.collection('ai_agents').document(agent_id)
+    doc = doc_ref.get()
+    
+    if not doc.exists or doc.to_dict().get('user_id') != user_id:
+        return None
+    
+    # Get current variants to check for duplicate names
+    agent_data = doc.to_dict()
+    existing_variants = agent_data.get('variants', {})
+    
+    # Check if variant name already exists
+    for variant in existing_variants.values():
+        if variant['name'] == variant_name:
+            return None
+    
+    # Generate new variant ID
+    variant_id = str(uuid4())
+    
+    doc_ref.update({
+        f'variants.{variant_id}': {
+            'id': variant_id,
+            'name': variant_name,
+            'variables': variables
+        }
+    })
+    return variant_id
+
+def delete_variant(agent_id: str, user_id: str, variant_id: str) -> bool:
+    """Delete a specific variant from an agent"""
+    doc_ref = db.collection('ai_agents').document(agent_id)
+    doc = doc_ref.get()
+    
+    if not doc.exists or doc.to_dict().get('user_id') != user_id:
+        return False
+    
+    # Verify variant exists before deleting
+    agent_data = doc.to_dict()
+    if variant_id not in agent_data.get('variants', {}):
+        return False
+    
+    doc_ref.update({
+        f'variants.{variant_id}': db.DELETE_FIELD
+    })
+    return True
+
+def delete(agent_id: str, user_id: str) -> bool:
+    """Delete an AI agent if it belongs to the user"""
+    agent_ref = db.collection('ai_agents').document(agent_id)
+    doc = agent_ref.get()
+    
+    if doc.exists and doc.to_dict().get('user_id') == user_id:
+        agent_ref.delete()
+        return True
+    return False
\ No newline at end of file
diff --git a/server/app/firebase/character_dao.py b/server/app/firebase/character_dao.py
deleted file mode 100644
index 60016c3..0000000
--- a/server/app/firebase/character_dao.py
+++ /dev/null
@@ -1,61 +0,0 @@
-from typing import Dict, Optional
-from . import db
-
-def get_all(user_id: str) -> Dict:
-    """Get all characters for a specific user"""
-    characters = {}
-    query = db.collection('characters').where('user_id', '==', user_id).stream()
-    for doc in query:
-        characters[doc.id] = doc.to_dict()
-    return characters
-
-def get_by_id(char_id: str, user_id: str) -> Optional[Dict]:
-    """Get a specific character if it belongs to the user"""
-    doc_ref = db.collection('characters').document(char_id)
-    doc = doc_ref.get()
-    
-    if doc.exists and doc.to_dict().get('user_id') == user_id:
-        return doc.to_dict()
-    return None
-
-def save(name: str, backstory: str, model: str, temperature: float, max_tokens: int, user_id: str) -> str:
-    """Save new character with user_id"""
-    doc_ref = db.collection('characters').document()
-    
-    character_data = {
-        "name": name,
-        "backstory": backstory,
-        "model": model,
-        "temperature": float(temperature),
-        "max_tokens": int(max_tokens),
-        "user_id": user_id
-    }
-    
-    doc_ref.set(character_data)
-    return doc_ref.id
-
-def update(char_id: str, name: str, backstory: str, model: str, temperature: float, max_tokens: int, user_id: str) -> bool:
-    """Update existing character if it belongs to the user"""
-    char_ref = db.collection('characters').document(char_id)
-    doc = char_ref.get()
-    
-    if doc.exists and doc.to_dict().get('user_id') == user_id:
-        char_ref.update({
-            "name": name,
-            "backstory": backstory,
-            "model": model,
-            "temperature": float(temperature),
-            "max_tokens": int(max_tokens)
-        })
-        return True
-    return False
-
-def delete(char_id: str, user_id: str) -> bool:
-    """Delete a character if it belongs to the user"""
-    char_ref = db.collection('characters').document(char_id)
-    doc = char_ref.get()
-    
-    if doc.exists and doc.to_dict().get('user_id') == user_id:
-        char_ref.delete()
-        return True
-    return False
\ No newline at end of file
diff --git a/server/app/utils/__init__.py b/server/app/utils/__init__.py
index 9fb35b5..0904a4d 100644
--- a/server/app/utils/__init__.py
+++ b/server/app/utils/__init__.py
@@ -1,9 +1,8 @@
 from .api_clients import get_response_claude, get_response_openai
-from .prompts import system_metric, system_score
+from .prompts import system_score
 
 __all__ = [
     'get_response_claude',
     'get_response_openai',
-    'system_metric',
     'system_score'
 ]
\ No newline at end of file
diff --git a/server/app/utils/api_clients.py b/server/app/utils/api_clients.py
index e849eee..fb1de85 100644
--- a/server/app/utils/api_clients.py
+++ b/server/app/utils/api_clients.py
@@ -17,7 +17,6 @@ def get_response_claude(
     stream: bool = False
 ):
     client = Anthropic(api_key=Config.CLAUDE_API_KEY)
-
     message = client.messages.create(
         model=model,
         max_tokens=max_tokens,
@@ -68,16 +67,16 @@ class LLMResponseService():
 
     def __init__(
         self,
-        model_name: str,
+        model: str,
         system_prompt: str,
         max_tokens: int = Config.DEFAULT_MAX_TOKENS,
         temperature: float = Config.DEFAULT_TEMPERATURE,
         persist_history: bool = True,
         stream: bool = False
     ) -> None:
-        self.model_type = get_model_type(model_name)
+        self.model_type = get_model_type(model)
         self.response_function = response_function_map[self.model_type]
-        self.model = model_name
+        self.model = model
         self.system_prompt = system_prompt
         self.max_tokens = max_tokens
         self.temperature = temperature
@@ -86,55 +85,55 @@ def __init__(
         
         # Initialize prompt with system message
         self.prompt = [{"role": "system", "content": system_prompt}]
+        if self.stream:
+            self.send_message = self._send_message_stream
+        else:
+            self.send_message = self._send_message_normal
     
-    def send_message(self, user_query: str):
-
-        print("Starting send message")
+    def _send_message_stream(self, user_query: str):
         prompt = self.prompt.copy()
+        query_object = {"role": "user", "content": user_query}
+        prompt.append(query_object)
 
-        query_object = (
-            {
-                "role":"user",
-                "content":user_query
-            }
+        response = self.response_function(
+            prompt=prompt,
+            model=self.model,
+            temp=self.temperature,
+            max_tokens=self.max_tokens,
+            stream=True
         )
 
+        full_response = ""
+        for chunk in response:
+            full_response += chunk
+            yield chunk
+
+        if self.persist_history:
+            self.prompt.append(query_object)
+            self.prompt.append({
+                "role": "assistant",
+                "content": full_response
+            })
+            
+
+    def _send_message_normal(self, user_query: str):
+        prompt = self.prompt.copy()
+        query_object = {"role": "user", "content": user_query}
         prompt.append(query_object)
 
-        print("stream", self.stream)
         response = self.response_function(
-            prompt = prompt,
-            model = self.model,
-            temp = self.temperature,
-            max_tokens = self.max_tokens,
-            stream = self.stream
+            prompt=prompt,
+            model=self.model,
+            temp=self.temperature,
+            max_tokens=self.max_tokens,
+            stream=False
         )
 
-        if self.stream:
-
-            full_response = ""
-            for resp in response:
-                full_response += resp or ""
-                yield resp or "" 
-            
-            if self.persist_history:
-
-                self.prompt.append(query_object)
-                self.prompt.append(
-                    {
-                        "role":"assistant",
-                        "content": full_response
-                    }
-                )
-        else:
-            
-            if self.persist_history:
-                self.prompt.append(query_object)
-                self.prompt.append(
-                    {
-                        "role":"assistant",
-                        "content": response
-                    }
-                )
-            
-            return response
\ No newline at end of file
+        if self.persist_history:
+            self.prompt.append(query_object)
+            self.prompt.append({
+                "role": "assistant",
+                "content": response
+            })
+        
+        return response
\ No newline at end of file
diff --git a/server/app/utils/model_map.py b/server/app/utils/model_map.py
index 82844b0..5296020 100644
--- a/server/app/utils/model_map.py
+++ b/server/app/utils/model_map.py
@@ -1,20 +1,40 @@
-model_map = {
-    "OpenAI":[
-        "gpt-4o",
-        "gpt-4-turbo",
-        "gpt-3.5-turbo",
-        "gpt-4o-mini",
-        "gpt-4-1106-preview"
+MODELS = {
+    "OpenAI": [
+        {
+            "id": "gpt-4o",
+            "name": "GPT-4"
+        },
+        {
+            "id": "gpt-4-turbo",
+            "name": "GPT-4 Turbo"
+        },
+        {
+            "id": "gpt-3.5-turbo",
+            "name": "GPT-3.5 Turbo"
+        },
+        {
+            "id": "gpt-4o-mini",
+            "name": "GPT-4 Mini"
+        },
+        {
+            "id": "gpt-4-1106-preview",
+            "name": "GPT-4 Preview"
+        }
     ],
-
-    "Anthropic":[
-        "claude-3-5-sonnet-20241022",
-        "claude-3-5-haiku-20241022"
+    "Anthropic": [
+        {
+            "id": "claude-3-5-sonnet-20241022",
+            "name": "Claude 3 Sonnet"
+        },
+        {
+            "id": "claude-3-5-haiku-20241022",
+            "name": "Claude 3 Haiku"
+        }
     ]
 }
 
 def get_model_type(model):
-
-    for model_type in model_map:
-        if model in model_map[model_type]:
-            return model_type
\ No newline at end of file
+    for provider, models in MODELS.items():
+        if any(m['id'] == model for m in models):
+            return provider
+    return None
\ No newline at end of file
diff --git a/src/static/css/base/_variables.css b/src/static/css/base/_variables.css
index d81b0ec..079297f 100644
--- a/src/static/css/base/_variables.css
+++ b/src/static/css/base/_variables.css
@@ -11,8 +11,7 @@
 
     /* Layout-specific */
     --sidenav-width: 280px;            
-    --header-height: 60px;             
-    --panel-width: 400px;              
+    --header-height: 60px;           
 
     /* Typography */
     --heading-font: 'Poppins', sans-serif;  
@@ -40,4 +39,13 @@
     /* Border Colors */
     --border-color: #eee;         
     --border-color-hover: #ddd;
+
+    /* Form specific */
+    --input-padding: 10px;
+    --input-margin: 10px;
+    --input-height-default: 38px;
+    --input-height-large: 42px;
+    --range-height: 4px;
+    --range-thumb-size: 16px;
+    --font-size-small: 0.9em;
 }
\ No newline at end of file
diff --git a/src/static/css/components/_aiagents.css b/src/static/css/components/_aiagents.css
new file mode 100644
index 0000000..7b239e6
--- /dev/null
+++ b/src/static/css/components/_aiagents.css
@@ -0,0 +1,173 @@
+/* Agent Card */
+.agent-card {
+    background: #FFFFFF;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    transition: box-shadow 0.2s;
+    padding: var(--spacing-large);
+}
+
+.agent-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Card Header */
+.card__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-large);
+}
+
+.card__title {
+    margin: 0;
+    font-size: 1.25em;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+/* Prompt Section */
+.prompt-section {
+    margin-bottom: var(--spacing-large);
+}
+
+.section-title {
+    margin: 0;
+    color: var(--text-color);
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.prompt-preview {
+    background: var(--background-color-dark);
+    padding: var(--spacing-medium);
+    border-radius: var(--border-radius-small);
+    font-size: 0.9em;
+    max-height: 120px;
+    overflow-y: auto;
+    color: var(--text-color-secondary);
+    font-family: monospace;
+    line-height: 1.5;
+    white-space: pre-wrap;
+}
+
+/* Variants Section */
+.variants-section {
+    margin-top: var(--spacing-large);
+}
+
+.variants-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-medium);
+    gap: var(--spacing-medium)
+}
+
+.variants-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+}
+
+.variant-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-small) var(--spacing-medium);
+    background: var(--background-color-light);
+    border-radius: var(--border-radius-small);
+    border: 1px solid var(--border-color);
+}
+
+.variant-item__name {
+    font-size: 0.95em;
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+/* Buttons */
+.button--icon {
+    padding: var(--spacing-small);
+    min-width: unset;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+}
+
+.button--icon.button--danger {
+    color: var(--danger-color);
+}
+
+.button--icon.button--danger:hover {
+    background: var(--danger-color-light);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: var(--spacing-medium);
+}
+
+.modal .card {
+    width: 100%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px #00000026;
+}
+
+.modal .card__title {
+    padding: var(--spacing-medium);
+    border-bottom: 1px solid var(--border-color);
+    margin: 0;
+    background: #FFFFFF;
+    font-size: 1.1em;
+    font-weight: 500;
+}
+
+.modal .card__content {
+    padding: var(--spacing-medium);
+    background: #FFFFFF;
+}
+
+.modal .form__input-group {
+    margin-bottom: var(--spacing-medium);
+}
+
+.modal .card__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-small);
+    padding: var(--spacing-medium);
+    border-top: 1px solid var(--border-color);
+    background: #FFFFFF;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: var(--spacing-large);
+    color: var(--text-color-secondary);
+}
+
+.empty-state i {
+    font-size: 48px;
+    margin-bottom: var(--spacing-medium);
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/src/static/css/components/_dataset.css b/src/static/css/components/_dataset.css
new file mode 100644
index 0000000..d9f151d
--- /dev/null
+++ b/src/static/css/components/_dataset.css
@@ -0,0 +1,118 @@
+.dataset-editor {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.editor-row {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.dataset-type,
+.agent-select {
+    flex: 1;
+}
+
+.dataset-type select,
+.agent-select select {
+    width: 100%;
+    height: var(--input-height-default);
+    padding: var(--input-padding);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-small);
+    background-color: var(--card-background);
+    font-family: var(--body-font);
+}
+
+.testcase-controls {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    align-items: center;
+    background: var(--card-background);
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+}
+
+.testcase-card {
+    background: var(--card-background);
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-default);
+    border: 1px solid var(--border-color);
+}
+
+.testcase-header {
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--background-secondary);
+    border-bottom: 1px solid var(--border-color);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.testcase-content {
+    padding: 1.5rem;
+}
+
+.questions-section {
+    margin-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    padding-top: 1.5rem;
+}
+
+.questions-area {
+    width: 100%;
+    margin-bottom: 1rem;
+    min-height: 100px;
+    resize: vertical;
+    padding: var(--input-padding);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-small);
+    font-family: var(--body-font);
+}
+
+.input-variables {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+#testcaseCount {
+    width: 150px;
+    height: auto;
+    padding: var(--input-padding);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-small);
+    font-family: var(--body-font);
+}
+
+#addTestcase {
+    margin-left: auto;
+}
+
+.testcase-controls input,
+.testcase-controls .button {
+    height: var(--input-height-default);;
+    display: flex;
+    align-items: center;
+}
+
+.testcase-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.5rem;
+}
\ No newline at end of file
diff --git a/src/static/css/components/_forms.css b/src/static/css/components/_forms.css
index bd61163..16970e5 100644
--- a/src/static/css/components/_forms.css
+++ b/src/static/css/components/_forms.css
@@ -1,105 +1,92 @@
-/* Form Elements */
 .form__input {
     width: 100%;
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #bdc3c7;
-    border-radius: 4px;
+    padding: var(--input-padding);
+    margin-bottom: var(--input-margin);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-small);
     box-sizing: border-box;
     font-family: var(--body-font);
 }
 
 .form__label {
     display: block;
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-small);
     font-family: var(--body-font);
 }
 
 .form__range-container {
     display: flex;
     align-items: center;
-    margin-top: 5px;
+    margin-top: var(--spacing-small);
 }
 
 .form__range {
     -webkit-appearance: none;
     appearance: none;
     width: calc(100% - 60px);
-    margin-right: 10px;
+    margin-right: var(--spacing-small);
     vertical-align: middle;
-    height: 4px;
+    height: var(--range-height);
     background: var(--primary-color);
-    border-radius: 2px;
+    border-radius: calc(var(--range-height) / 2);
 }
 
-/* Track styling */
 .form__range::-webkit-slider-runnable-track {
-    height: 4px;
-    border-radius: 2px;
+    height: var(--range-height);
+    border-radius: calc(var(--range-height) / 2);
 }
 
 .form__range::-moz-range-track {
-    height: 4px;
-    border-radius: 2px;
+    height: var(--range-height);
+    border-radius: calc(var(--range-height) / 2);
 }
 
-/* Thumb styling */
 .form__range::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 16px;
-    height: 16px;
-    margin-top: -6px;
+    width: var(--range-thumb-size);
+    height: var(--range-thumb-size);
+    margin-top: calc((var(--range-height) - var(--range-thumb-size)) / 2);
     background: var(--primary-color);
     border-radius: 50%;
     cursor: pointer;
-    transition: background-color var(--transition-speed) ease;
+    transition: background-color var(--transition-speed) var(--transition-timing);
 }
 
 .form__range::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
+    width: var(--range-thumb-size);
+    height: var(--range-thumb-size);
     background: var(--primary-color);
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    transition: background-color var(--transition-speed) ease;
-}
-
-/* Hover states */
-.form__range::-webkit-slider-thumb:hover {
-    background: var(--accent-color);
-}
-
-.form__range::-moz-range-thumb:hover {
-    background: var(--accent-color);
+    transition: background-color var(--transition-speed) var(--transition-timing);
 }
 
 .form__range-value {
     display: inline-block;
-    width: 50px;
+    width: 50px; /* Specific to this element */
     text-align: center;
     background: var(--card-background);
-    padding: 5px;
-    border-radius: 4px;
-    font-size: 0.9em;
+    padding: var(--spacing-small);
+    border-radius: var(--border-radius-small);
+    font-size: var(--font-size-small);
     border: 1px solid var(--border-color);
     color: var(--text-color);
 }
 
-/* Buttons */
 .button {
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius-small);
     cursor: pointer;
-    transition: all var(--transition-speed) ease;
+    transition: all var(--transition-speed) var(--transition-timing);
 }
 
 .button--primary {
     background-color: var(--primary-color);
-    color: white;
-    padding: 10px 15px;
-    font-size: 0.9em;
+    color: var(--card-background);
+    padding: var(--input-padding) var(--spacing-small);
+    font-size: var(--font-size-small);
 }
 
 .button--primary:hover {
@@ -107,43 +94,41 @@
     transform: translateY(-2px);
 }
 
-/* Evaluation Controls */
 .eval-controls {
     display: flex;
     gap: var(--spacing-small);
     align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-small);
 }
 
 .eval-controls .form__input {
     flex: 1;
     margin-bottom: 0;
-    height: 38px;
+    height: var(--input-height-default);
 }
 
 .eval-controls .button {
     white-space: nowrap;
-    height: 38px;
-    padding: 10px 15px;
-    font-size: 0.9em;
+    height: var(--input-height-default);
+    padding: var(--input-padding) var(--spacing-small);
+    font-size: var(--font-size-small);
 }
 
-/* Update select styling to match inputs */
 select.form__input {
     appearance: none;
     background-image: url("data:image/svg+xml,...");
     background-repeat: no-repeat;
-    background-position: right 8px center;
-    padding-right: 30px;
-    height: 42px;
+    background-position: right var(--spacing-small) center;
+    padding-right: 30px; /* Specific to accommodate the dropdown arrow */
+    height: var(--input-height-large);
 }
 
 .evaluation-result {
     background-color: var(--card-background);
     border-left: 4px solid var(--primary-color);
-    padding: 15px;
-    margin-bottom: 15px;
-    border-radius: 4px;
+    padding: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
+    border-radius: var(--border-radius-small);
     box-shadow: var(--shadow-default);
 }
 
@@ -157,7 +142,7 @@ select.form__input {
 .error {
     color: var(--accent-color);
     font-weight: bold;
-    padding: 10px;
-    background-color: #fadbd8;
-    border-radius: 4px;
+    padding: var(--input-padding);
+    background-color: #fadbd8; /* Specific error color */
+    border-radius: var(--border-radius-small);
 }
\ No newline at end of file
diff --git a/src/static/css/components/_layout.css b/src/static/css/components/_layout.css
index 99037f0..215d527 100644
--- a/src/static/css/components/_layout.css
+++ b/src/static/css/components/_layout.css
@@ -9,6 +9,7 @@
     padding: var(--spacing-large);
     width: calc(100% - var(--sidenav-width));
     background: var(--background-color);
+    overflow-x: hidden;
 }
 
 .content-header {
@@ -46,6 +47,7 @@
 .tab-content {
     display: none;
     width: 100%;
+    overflow-x: hidden;
 }
 
 .tab-content.active {
diff --git a/src/static/css/components/_panel.css b/src/static/css/components/_panel.css
deleted file mode 100644
index 917a74d..0000000
--- a/src/static/css/components/_panel.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* Sliding Panel */
-.panel {
-    position: fixed;
-    top: 0;
-    right: -100%;
-    width: var(--panel-width, 400px);
-    height: 100%;
-    background-color: var(--card-background);
-    box-shadow: -2px 0 5px var(--shadow-color);
-    z-index: 1000;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 40px;
-    visibility: hidden;
-}
-
-.panel--open {
-    right: 0;
-    visibility: visible;
-    transition: right var(--transition-speed) ease-in-out;
-}
-
-.panel__title {
-    font-family: var(--heading-font);
-    margin-bottom: var(--spacing-medium);
-    padding-bottom: 10px;
-    border-bottom: 2px solid var(--primary-color);
-}
-
-.panel__close-btn {
-    position: absolute;
-    top: var(--spacing-medium);
-    right: var(--spacing-medium);
-    background: none;
-    border: none;
-    font-size: 1.5em;
-    cursor: pointer;
-    color: var(--text-color);
-}
-
-.panel__save-btn {
-    margin-bottom: 50px;
-}
-
-/* Overlay */
-.overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    z-index: 999;
-    display: none;
-}
-
-.overlay--active {
-    display: block;
-}
-
-/* Body modifier when panel is open */
-.body--panel-open {
-    overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/static/css/components/_playground.css b/src/static/css/components/_playground.css
new file mode 100644
index 0000000..3fa5553
--- /dev/null
+++ b/src/static/css/components/_playground.css
@@ -0,0 +1,401 @@
+/* Existing Container Styles */
+.playground-container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: calc(100vh - var(--spacing-large) * 2 - 60px);
+    overflow-y: auto;
+    width: 100%;
+    overflow-x: hidden;
+}
+
+/* Prompts Section */
+.prompts-scroll-container {
+    width: 100%;
+    overflow-x: auto;
+    max-width: calc(100vw - var(--sidenav-width) - var(--spacing-large) * 2 - 40px);
+    margin-bottom: 20px;
+}
+
+.prompts-container {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+}
+
+/* Prompt Card Styles */
+.prompt-card {
+    flex: 1 0 330px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 1rem;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+.save-prompt {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.save-prompt i {
+    font-size: 1.2rem;
+}
+
+.prompts-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.prompt-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
+}
+
+.prompt-header:not(:first-child) {
+    margin-top: var(--spacing-medium);
+}
+
+.prompt-header label {
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.prompt-header select {
+    flex: 0 1 140px;
+    font-size: 0.8rem;
+    padding: 2px 4px;
+    height: 24px;
+    margin-left: auto;
+    margin-bottom: 0;
+    text-align: center;
+}
+
+.prompt-card__footer {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+    align-items: center;
+}
+
+.agent-name {
+    flex: 1;
+    max-width: 300px;
+    margin-bottom: 0;
+}
+
+.prompt-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin: var(--spacing-medium) 0;
+}
+
+.user-prompt-template {
+    width: 100%;
+    min-height: var(--input-height-large);
+    resize: vertical;
+}
+
+/* Button Styles */
+.button--icon {
+    padding: 4px;
+    min-width: auto;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #666;
+}
+
+.button--icon:hover {
+    color: #ff4444;
+}
+
+.button--icon.settings-prompt:hover {
+    color: var(--color-primary);
+}
+
+/* Prompt Template */
+.prompt-template {
+    min-height: 100px;
+    font-family: monospace;
+    padding: 10px;
+    resize: vertical;
+    width: 100%;
+}
+
+/* Dynamic Inputs Section */
+.dynamic-inputs-section {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
+}
+
+.input-group label {
+    min-width: 100px;
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.input-group__content {
+    display: flex;
+    flex: 1;
+    gap: var(--spacing-small);
+    align-items: center;
+}
+
+.input-group__content .form__input {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 4px;
+}
+
+.variable-persistence {
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.checkbox-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    margin: 0;
+    user-select: none;
+}
+
+/* Controls Section */
+.controls-section {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+/* Evaluation Results */
+.evaluation-result {
+    background: #f5f5f5;
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 20px;
+}
+
+.evaluation-result pre {
+    background: #fff;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+/* Settings Popup Styles */
+.settings-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.settings-content {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    width: 400px;
+    max-width: 90vw;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.settings-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+/* Range Input Styling */
+.range-with-value {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.temperature-value {
+    min-width: 2.5em;
+    text-align: right;
+    color: var(--text-secondary);
+}
+
+/* Settings Actions */
+.settings-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    padding-top: 1.5rem;
+}
+
+.chat-container {
+    margin-top: var(--spacing-medium);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-small);
+}
+
+.chat-messages {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: var(--spacing-medium);
+}
+
+.chat-message {
+    display: flex;
+    gap: var(--spacing-small);
+    margin-bottom: var(--spacing-medium);
+    align-items: center;
+}
+
+.chat-message__avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--secondary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 2px solid var(--secondary-color);
+}
+
+.chat-message__avatar i {
+    font-size: 18px;
+    color: var(--secondary-color);
+}
+
+.chat-message__content {
+    background: var(--background-color);
+    padding: var(--spacing-small);
+    border-radius: var(--border-radius-small);
+    flex: 1;
+    line-height: 1.4;
+}
+
+.chat-input-container {
+    display: flex;
+    gap: var(--spacing-small);
+    padding: var(--spacing-medium);
+    border-top: 1px solid var(--border-color);
+    align-items: flex-start;
+}
+
+.chat-input-container .user-prompt {
+    flex: 1;
+    resize: none;
+    min-height: var(--input-height-default);
+    padding: var(--input-padding);
+    border-radius: var(--border-radius-small);
+    font-family: var(--body-font);
+}
+
+.chat-input-container .button--primary {
+    height: var(--input-height-default);
+    width: var(--input-height-default);
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-small);
+}
+
+.chat-message--user .chat-message__avatar {
+    border-color: var(--primary-color);
+}
+
+.chat-message--assistant .chat-message__avatar {
+    border-color: var(--accent-color);
+}
+
+.chat-message--user .chat-message__avatar i {
+    color: var(--primary-color);
+}
+
+.chat-message--assistant .chat-message__avatar i {
+    color: var(--accent-color);
+}
+
+.agent-selector {
+    position: relative;
+    display: inline-block;
+    margin-left: auto;
+}
+
+.agent-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1000;
+    min-width: 200px;
+}
+
+.agent-item {
+    padding: 8px 12px;
+    cursor: pointer;
+}
+
+.agent-item:hover {
+    background: #f5f5f5;
+}
+
+.agent-submenu {
+    margin-top: 4px;
+    border-left: 2px solid #eee;
+}
+
+.agent-action {
+    padding: 8px 12px 8px 24px;
+    cursor: pointer;
+}
+
+.agent-action:hover {
+    background: #f0f0f0;
+}
\ No newline at end of file
diff --git a/src/static/css/components/_toast.css b/src/static/css/components/_toast.css
new file mode 100644
index 0000000..88531ab
--- /dev/null
+++ b/src/static/css/components/_toast.css
@@ -0,0 +1,26 @@
+.toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 12px 24px;
+    background: #4CAF50;
+    color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all 0.3s ease;
+}
+
+.toast--visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toast--success {
+    background: #4CAF50;
+}
+
+.toast--error {
+    background: #f44336;
+}
\ No newline at end of file
diff --git a/src/static/css/main.css b/src/static/css/main.css
index 7f7faa2..a147449 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -2,7 +2,10 @@
 @import 'base/_global.css';
 @import 'components/_cards.css';
 @import 'components/_forms.css';
-@import 'components/_panel.css';
 @import 'components/_layout.css';
 @import 'components/_sidenav.css';
-@import 'components/_button.css'
\ No newline at end of file
+@import 'components/_button.css';
+@import 'components/_playground.css';
+@import 'components/_dataset.css';
+@import 'components/_toast.css';
+@import 'components/_aiagents.css';
\ No newline at end of file
diff --git a/src/static/js/api/aiAgents.js b/src/static/js/api/aiAgents.js
new file mode 100644
index 0000000..5c20a3d
--- /dev/null
+++ b/src/static/js/api/aiAgents.js
@@ -0,0 +1,38 @@
+export const AiAgentAPI = {
+    fetchAll: async () => {
+        const response = await fetch('/api/ai-agents');
+        return response.json();
+    },
+
+    create: async (agentData) => {
+        const response = await fetch('/api/ai-agents', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(agentData)
+        });
+        return response.json();
+    },
+
+    delete: async (id) => {
+        const response = await fetch(`/api/ai-agents/${id}`, {
+            method: 'DELETE'
+        });
+        return response.json();
+    },
+
+    addVariant: async (agentId, variantData) => {
+        const response = await fetch(`/api/ai-agents/${agentId}/variants`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(variantData)
+        });
+        return response.json();
+    },
+
+    deleteVariant: async (agentId, variantId) => {
+        const response = await fetch(`/api/ai-agents/${agentId}/variants/${variantId}`, {
+            method: 'DELETE'
+        });
+        return response.json();
+    }
+};
\ No newline at end of file
diff --git a/src/static/js/api/characters.js b/src/static/js/api/characters.js
deleted file mode 100644
index 9dc90a4..0000000
--- a/src/static/js/api/characters.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const CharacterAPI = {
-    fetchAll: async () => {
-        const response = await fetch('/api/characters');
-        return response.json();
-    },
-
-    create: async (characterData) => {
-        const response = await fetch('/api/characters', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(characterData)
-        });
-        return response.json();
-    },
-
-    delete: async (id) => {
-        const response = await fetch(`/api/characters/${id}`, {
-            method: 'DELETE'
-        });
-        return response.json();
-    }
-};
\ No newline at end of file
diff --git a/src/static/js/api/datasets.js b/src/static/js/api/datasets.js
index 808bed1..f18ccd9 100644
--- a/src/static/js/api/datasets.js
+++ b/src/static/js/api/datasets.js
@@ -21,11 +21,14 @@ export const DatasetAPI = {
     },
 
     generateQuestions: async (data) => {
-        const response = await fetch('/api/generate_questions', {
+        const response = await fetch('/api/datasets/generate_questions', {
             method: 'POST',
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify(data)
         });
+        if (!response.ok) {
+            throw new Error('Failed to generate questions');
+        }
         const result = await response.json();
         return result.questions;
     }
diff --git a/src/static/js/components/agents/agentCard.js b/src/static/js/components/agents/agentCard.js
new file mode 100644
index 0000000..5a4f443
--- /dev/null
+++ b/src/static/js/components/agents/agentCard.js
@@ -0,0 +1,159 @@
+import { UIHelper } from '../../utils/uiHelper.js';
+
+export class AgentCardRenderer {
+    constructor(onVariantCreate, onAgentDelete, onVariantDelete) {
+        this.onVariantCreate = onVariantCreate;
+        this.onAgentDelete = onAgentDelete;
+        this.onVariantDelete = onVariantDelete;
+    }
+
+    createCard(id, data) {
+        const card = document.createElement('div');
+        card.className = 'card agent-card';
+        
+        card.innerHTML = this.generateCardHTML(id, data);
+        this.attachEventListeners(card, id, data);
+        
+        return card;
+    }
+
+    generateCardHTML(id, data) {
+        return `
+            <div class="card__header">
+                <h3 class="card__title">${data.name}</h3>
+                <button class="button button--icon button--danger" data-id="${id}" title="Delete Agent">
+                    <i class="material-icons">delete</i>
+                </button>
+            </div>
+            
+            <div class="card__content">
+                ${this.generatePromptSection(data)}
+                ${this.generateVariantsSection(id, data)}
+            </div>
+        `;
+    }
+
+    generatePromptSection(data) {
+        return `
+            <div class="prompt-section">
+                <h4 class="section-title">Prompt Template</h4>
+                <pre class="prompt-preview">${data.prompt[0].content}</pre>
+            </div>
+        `;
+    }
+
+    generateVariantsSection(id, data) {
+        const variantsList = this.generateVariantsList(data.variants);
+        
+        return `
+            <div class="variants-section">
+                <div class="variants-header">
+                    <h4 class="section-title">Variants</h4>
+                    <button class="button button--secondary create-variant" data-id="${id}">
+                        <i class="material-icons">add</i> New Variant
+                    </button>
+                </div>
+                <div class="variants-list">
+                    ${variantsList}
+                </div>
+            </div>
+        `;
+    }
+
+    generateVariantsList(variants) {
+        if (!variants) return '';
+        
+        return Object.entries(variants)
+            .map(([variantId, variant]) => `
+                <div class="variant-item">
+                    <span class="variant-item__name">${variant.name}</span>
+                    <button class="button button--icon button--danger" 
+                        data-variant-id="${variantId}" 
+                        title="Delete Variant">
+                        <i class="material-icons">delete</i>
+                    </button>
+                </div>
+            `).join('');
+    }
+
+    attachEventListeners(card, id, data) {
+        card.querySelector('.create-variant').onclick = () => this.showVariantForm(id, data);
+        card.querySelector('[data-id]').onclick = () => this.onAgentDelete(id);
+        
+        card.querySelectorAll('[data-variant-id]').forEach(btn => {
+            btn.onclick = (e) => {
+                e.stopPropagation();
+                this.onVariantDelete(id, btn.dataset.variantId);
+            };
+        });
+    }
+
+    showVariantForm(agentId, agentData) {
+        if (!this.validateVariantCreation(agentData)) return;
+        
+        const modal = this.createVariantModal(agentData.included_variables);
+        document.body.appendChild(modal);
+        
+        this.setupModalEventListeners(modal, agentId);
+    }
+
+    validateVariantCreation(agentData) {
+        if (!agentData.included_variables?.length) {
+            UIHelper.showAlert('No variables are marked for inclusion in variants. Please edit the base agent and mark variables to include.');
+            return false;
+        }
+        return true;
+    }
+
+    createVariantModal(includedVariables) {
+        const modal = document.createElement('div');
+        modal.className = 'modal';
+        modal.innerHTML = `
+            <div class="card">
+                <h3 class="card__title">Create Variant</h3>
+                <form class="card__content">
+                    <div class="form__input-group">
+                        <label class="form__label">Variant Name</label>
+                        <input type="text" class="form__input" placeholder="Enter variant name" required>
+                    </div>
+                    ${this.generateVariableInputs(includedVariables)}
+                    <div class="card__actions">
+                        <button type="button" class="button button--secondary modal-close">Cancel</button>
+                        <button type="submit" class="button button--primary">Save Variant</button>
+                    </div>
+                </form>
+            </div>
+        `;
+        return modal;
+    }
+
+    generateVariableInputs(variables) {
+        return variables.map(variable => `
+            <div class="form__input-group">
+                <label class="form__label">${variable}</label>
+                <input type="text" class="form__input" name="${variable}" required>
+            </div>
+        `).join('');
+    }
+
+    setupModalEventListeners(modal, agentId) {
+        const form = modal.querySelector('form');
+        
+        form.onsubmit = async (e) => {
+            e.preventDefault();
+            const variantName = form.querySelector('input').value;
+            const variables = {};
+            form.querySelectorAll('[name]').forEach(input => {
+                variables[input.name] = input.value;
+            });
+            
+            await this.onVariantCreate(agentId, variantName, variables);
+            modal.remove();
+        };
+
+        modal.querySelector('.modal-close').onclick = () => modal.remove();
+        modal.onclick = (e) => {
+            if (e.target === modal) modal.remove();
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/agents/agentMenu.js b/src/static/js/components/agents/agentMenu.js
new file mode 100644
index 0000000..32f9d32
--- /dev/null
+++ b/src/static/js/components/agents/agentMenu.js
@@ -0,0 +1,46 @@
+export class AgentMenu {
+    constructor(parentElement, onAgentSelect) {
+        this.element = parentElement.querySelector('.agent-menu');
+        this.onAgentSelect = onAgentSelect;
+    }
+
+    updateAgentSelect(agents) {
+        this.element.innerHTML = Object.entries(agents).map(([id, agent]) => `
+            <div class="agent-item" data-id="${id}">
+                <span>${agent.name}</span>
+                <div class="agent-submenu" style="display: none;">
+                    <div class="agent-action" data-action="load:${id}">Load Base Agent</div>
+                    ${agent.variants ? Object.entries(agent.variants).map(([vId, variant]) => 
+                        `<div class="agent-action" data-action="variant:${id}:${vId}">${variant.name}</div>`
+                    ).join('') : ''}
+                </div>
+            </div>
+        `).join('');
+    }
+
+    toggle() {
+        this.element.style.display = this.element.style.display === 'none' ? 'block' : 'none';
+    }
+
+    close() {
+        this.element.style.display = 'none';
+        this.element.querySelectorAll('.agent-submenu').forEach(submenu => {
+            submenu.style.display = 'none';
+        });
+    }
+
+    async handleClick(e) {
+        const agentItem = e.target.closest('.agent-item');
+        const actionItem = e.target.closest('.agent-action');
+
+        if (agentItem && !actionItem) {
+            const submenu = agentItem.querySelector('.agent-submenu');
+            submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
+            return;
+        }
+
+        if (actionItem && this.onAgentSelect) {
+            await this.onAgentSelect(actionItem.dataset.action);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/agents/aiAgentManager.js b/src/static/js/components/agents/aiAgentManager.js
new file mode 100644
index 0000000..61b9369
--- /dev/null
+++ b/src/static/js/components/agents/aiAgentManager.js
@@ -0,0 +1,120 @@
+import { AiAgentAPI } from '../../api/aiAgents.js';
+import { UIHelper } from '../../utils/uiHelper.js';
+import { AgentCardRenderer } from './agentCard.js';
+
+export class AiAgentManager {
+    constructor() {
+        this.list = document.getElementById('agentList');
+        this.agents = {};
+        this.cardRenderer = new AgentCardRenderer(
+            this.handleVariantCreate.bind(this),
+            this.handleAgentDelete.bind(this),
+            this.handleVariantDelete.bind(this)
+        );
+        
+        this.initializeEventListeners();
+        this.fetchAndRender();
+    }
+
+    initializeEventListeners() {
+        document.addEventListener('save-agent', async (e) => this.handleAgentSave(e.detail.agent));
+        document.addEventListener('select-agent', async (e) => this.handleAgentSelect(e.detail));
+    }
+
+    // Agent Selection Handlers
+    async handleAgentSelect({ type, agentId, variantId }) {
+        const agent = this.agents[agentId];
+        if (!agent) return;
+
+        const eventType = type === 'base' ? 'load-agent' : 'load-variant';
+        const eventDetail = type === 'base' 
+            ? { agent }
+            : { agent, variant: agent.variants?.[variantId] };
+
+        if (type === 'variant' && !agent.variants?.[variantId]) return;
+
+        document.dispatchEvent(new CustomEvent(eventType, { detail: eventDetail }));
+    }
+
+    // CRUD Operations
+    async handleAgentSave(agentData) {
+        try {
+            await AiAgentAPI.create(agentData);
+            await this.refreshAgents();
+            UIHelper.showToast('Agent saved successfully');
+        } catch (error) {
+            console.error('Failed to save agent:', error);
+            UIHelper.showAlert('Failed to save agent');
+        }
+    }
+
+    async handleAgentDelete(id) {
+        try {
+            await AiAgentAPI.delete(id);
+            await this.refreshAgents();
+            UIHelper.showToast('Agent deleted successfully');
+        } catch (error) {
+            console.error('Failed to delete agent:', error);
+            UIHelper.showAlert('Failed to delete agent');
+        }
+    }
+
+    async handleVariantCreate(agentId, variantName, variables) {
+        try {
+            await AiAgentAPI.addVariant(agentId, {
+                variant_name: variantName,
+                variables
+            });
+            await this.refreshAgents();
+            UIHelper.showToast('Variant created successfully');
+        } catch (error) {
+            console.error('Failed to save variant:', error);
+            UIHelper.showAlert('Failed to save variant');
+        }
+    }
+
+    async handleVariantDelete(agentId, variantId) {
+        try {
+            await AiAgentAPI.deleteVariant(agentId, variantId);
+            await this.refreshAgents();
+            UIHelper.showToast('Variant deleted successfully');
+        } catch (error) {
+            console.error('Failed to delete variant:', error);
+            UIHelper.showAlert('Failed to delete variant');
+        }
+    }
+
+    // Data Management
+    async fetchAndRender() {
+        try {
+            await this.refreshAgents();
+        } catch (error) {
+            console.error('Failed to fetch agents:', error);
+            UIHelper.showAlert('Failed to load agents');
+        }
+    }
+
+    async refreshAgents() {
+        this.agents = await AiAgentAPI.fetchAll();
+        this.render();
+        this.notifyAgentsUpdated();
+    }
+
+    notifyAgentsUpdated() {
+        document.dispatchEvent(new CustomEvent('agents-updated', {
+            detail: { 
+                agents: this.agents,
+                source: 'aiAgentManager'
+            }
+        }));
+    }
+
+    // Rendering
+    render() {
+        this.list.innerHTML = '';
+        Object.entries(this.agents).forEach(([id, data]) => {
+            const card = this.cardRenderer.createCard(id, data);
+            this.list.appendChild(card);
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/characterManager.js b/src/static/js/components/characterManager.js
deleted file mode 100644
index 426e9e5..0000000
--- a/src/static/js/components/characterManager.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { CharacterAPI } from '../api/characters.js';
-import { Panel } from './panel.js';
-
-export class CharacterManager {
-    constructor() {
-        this.list = document.getElementById('characterList');
-        this.addBtn = document.getElementById('addCharacterBtn');
-        this.panel = new Panel();
-        
-        this.addBtn.onclick = () => this.showAddPanel();
-        this.init();
-    }
-
-    async init() {
-        await this.fetchAndRender();
-    }
-
-    async fetchAndRender() {
-        const characters = await CharacterAPI.fetchAll();
-        this.render(characters);
-
-        document.dispatchEvent(new CustomEvent('characters-updated', {
-            detail: { characters }
-        }));
-    }
-
-    render(characters) {
-        this.list.innerHTML = '';
-        for (const [id, data] of Object.entries(characters)) {
-            const card = this.createCharacterCard(id, data);
-            this.list.appendChild(card);
-        }
-    }
-
-    createCharacterCard(id, data) {
-        const card = document.createElement('div');
-        card.className = 'card';
-        card.innerHTML = `
-            <h3 class="card__title">${data.name}</h3>
-            <p class="card__backstory">${data.backstory}</p>
-            <button class="card__button--delete" data-id="${id}">
-                <i class="material-icons">delete</i> Delete
-            </button>
-        `;
-
-        card.querySelector('.card__button--delete').onclick = () => this.deleteCharacter(id);
-        return card;
-    }
-
-    async deleteCharacter(id) {
-        await CharacterAPI.delete(id);
-        await this.fetchAndRender();
-    }
-
-    showAddPanel() {
-        this.panel.show('Add Character', [
-            {label: 'Name', type: 'text', name: 'name'},
-            {label: 'Backstory', type: 'textarea', name: 'backstory'},
-            {label: 'Model', type: 'select', name: 'model', 
-             options: ['gpt-4', 'claude-3-5-sonnet-20240620']},
-            {label: 'Temperature', type: 'range', name: 'temperature', 
-             min: 0, max: 1, step: 0.1},
-            {label: 'Max Tokens', type: 'number', name: 'max_tokens'}
-        ], async (data) => {
-            await CharacterAPI.create(data);
-            await this.fetchAndRender();
-        });
-    }
-}
\ No newline at end of file
diff --git a/src/static/js/components/dataset/datasetEditor.js b/src/static/js/components/dataset/datasetEditor.js
new file mode 100644
index 0000000..59313b6
--- /dev/null
+++ b/src/static/js/components/dataset/datasetEditor.js
@@ -0,0 +1,268 @@
+import { DatasetAPI } from "../../api/datasets.js";
+
+export class DatasetEditor {
+    constructor() {
+        this.container = document.getElementById('datasetEditor');
+        this.testcaseCount = 1;
+        this.currentAgent = null;
+        this.promptVariables = new Set();
+        this.agents = new Map();
+        this.init();
+    }
+
+    init() {
+        this.render();
+        this.attachEventListeners();
+    }
+
+    render() {
+        this.container.innerHTML = `
+            <div class="editor-header">
+                <h2>Create Dataset</h2>
+                <button class="button button--secondary" id="backToList">Back to List</button>
+            </div>
+            <div class="editor-content">
+                <div class="editor-row">
+                    <div class="dataset-type">
+                        <label class="form__label">Dataset Type</label>
+                        <select id="datasetType" class="form__input">
+                            <option value="objective">Objective Dataset</option>
+                            <option value="subjective">Subjective Dataset</option>
+                        </select>
+                    </div>
+                    <div class="agent-select">
+                        <label class="form__label">Select Agent</label>
+                        <select id="agentSelect" class="form__input">
+                            <option value="">Select an agent...</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="testcases-container">
+                    <div class="testcase-controls">
+                        <input type="number" id="testcaseCount" placeholder="No. of testcases" min="1">
+                        <button class="button button--primary" id="generateTestcases">Generate Testcases</button>
+                        <button class="button button--secondary" id="addTestcase" disabled>Add Testcase</button>
+                    </div>
+                    <div id="testcasesList">
+                        ${this.createTestcaseCard(1)}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    createTestcaseCard(index) {
+        return `
+            <div class="testcase-card">
+                <div class="testcase-header" data-testcase="${index}">
+                    <span>Testcase #${index}</span>
+                    <i class="material-icons">expand_more</i>
+                </div>
+                <div class="testcase-content">
+                    <div class="input-variables">
+                        ${this.currentAgent ? 
+                            Array.from(this.promptVariables).map(variable => `
+                                <div class="form-group">
+                                    <label class="form__label">${variable}</label>
+                                    <input type="text" 
+                                           name="${variable}" 
+                                           class="form__input" 
+                                           placeholder="Enter ${variable}">
+                                </div>
+                            `).join('') : 
+                            '<p class="no-agent-message">Please select an agent first</p>'
+                        }
+                    </div>
+                    <div class="questions-section">
+                        <h4>Questions</h4>
+                        <div class="form-group">
+                            <label class="form__label">Number of Questions</label>
+                            <input type="number" 
+                                   class="form__input question-count" 
+                                   min="1" 
+                                   value="3">
+                        </div>
+                        <div class="form-group">
+                            <label class="form__label">Generation Guidelines</label>
+                            <textarea class="form__input generation-guidelines" 
+                                     placeholder="Enter guidelines for question generation..."
+                                     rows="2"></textarea>
+                        </div>
+                        <textarea class="questions-area form__input" rows="4"></textarea>
+                        <div class="testcase-actions">
+                            <button class="button button--secondary generate-questions">Generate Questions</button>
+                            ${index > 1 ? '<button class="button button--danger remove-testcase">Remove Testcase</button>' : ''}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    attachEventListeners() {
+        document.addEventListener('agents-updated', (event) => {
+            this.agents.clear();
+            Object.entries(event.detail.agents).forEach(([id, agent]) => {
+                this.agents.set(id, agent);
+            });
+            this.updateAgentDropdown();
+        });
+
+        const backBtn = document.getElementById('backToList');
+        backBtn.onclick = () => {
+            window.location.hash = '#datasets';
+        };
+
+        const agentSelect = document.getElementById('agentSelect');
+        agentSelect.addEventListener('change', (e) => this.handleAgentSelection(e.target.value));
+
+        const addTestcaseBtn = document.getElementById('addTestcase');
+        addTestcaseBtn.onclick = () => {
+            this.testcaseCount++;
+            const testcasesList = document.getElementById('testcasesList');
+            testcasesList.insertAdjacentHTML('beforeend', this.createTestcaseCard(this.testcaseCount));
+        };
+
+        // Toggle testcase content
+        this.container.addEventListener('click', (e) => {
+            const header = e.target.closest('.testcase-header');
+            if (header) {
+                const content = header.nextElementSibling;
+                content.style.display = content.style.display === 'none' ? 'block' : 'none';
+                const icon = header.querySelector('.material-icons');
+                icon.textContent = content.style.display === 'none' ? 'expand_more' : 'expand_less';
+            }
+
+            // Handle remove testcase
+            if (e.target.classList.contains('remove-testcase')) {
+                const card = e.target.closest('.testcase-card');
+                card.remove();
+                this.testcaseCount--;
+            }
+        });
+
+        // Handle generate testcases
+        const generateTestcasesBtn = document.getElementById('generateTestcases');
+        generateTestcasesBtn.onclick = () => {
+            const count = parseInt(document.getElementById('testcaseCount').value);
+            if (count && count > 0) {
+                const testcasesList = document.getElementById('testcasesList');
+                testcasesList.innerHTML = '';
+                this.testcaseCount = count;
+                
+                for (let i = 1; i <= count; i++) {
+                    testcasesList.insertAdjacentHTML('beforeend', this.createTestcaseCard(i));
+                }
+            }
+        };
+
+        this.container.addEventListener('click', async (e) => {
+            if (e.target.classList.contains('generate-questions')) {
+                const card = e.target.closest('.testcase-card');
+                await this.handleGenerateQuestions(card);
+            }
+        });
+    }
+    
+    async handleGenerateQuestions(card) {
+        const questionsArea = card.querySelector('.questions-area');
+        if (questionsArea.value.trim()) {
+            alert('Questions area must be empty to generate new questions');
+            return;
+        }
+    
+        // Get all input values
+        const inputValues = {};
+        const inputs = card.querySelectorAll('.input-variables input');
+        let allFilled = true;
+        
+        inputs.forEach(input => {
+            if (!input.value.trim()) {
+                allFilled = false;
+            }
+            inputValues[input.name] = input.value.trim();
+        });
+    
+        if (!allFilled) {
+            alert('Please fill all input variables before generating questions');
+            return;
+        }
+    
+        const numQuestions = card.querySelector('.question-count').value;
+        const guidelines = card.querySelector('.generation-guidelines').value.trim();
+        const datasetType = document.getElementById('datasetType').value;
+    
+        try {
+            const response = await DatasetAPI.generateQuestions({
+                agent: {
+                    prompt: this.currentAgent.prompt[0].content,
+                    config: this.currentAgent.config
+                },
+                datasetType,
+                numQuestions,
+                guidelines,
+                inputs: inputValues
+            });
+    
+            questionsArea.value = response.join('\n');
+        } catch (error) {
+            console.error('Error generating questions:', error);
+            alert('Failed to generate questions. Please try again.');
+        }
+    }
+
+    handleAgentSelection(agentId) {
+        if (!agentId) {
+            this.currentAgent = null;
+            this.promptVariables.clear();
+            this.updateTestcaseInputs();
+            document.getElementById('addTestcase').disabled = true;
+            return;
+        }
+
+        const agent = this.agents.get(agentId);
+        if (agent) {
+            this.currentAgent = agent;
+            this.promptVariables = this.extractVariables(agent.prompt[0].content);
+            this.updateTestcaseInputs();
+            document.getElementById('addTestcase').disabled = false;
+        }
+    }
+
+    extractVariables(promptTemplate) {
+        const regex = /{([^}]+)}/g;
+        const matches = [...promptTemplate.matchAll(regex)];
+        return new Set(matches.map(match => match[1]));
+    }
+
+    updateTestcaseInputs() {
+        const inputContainers = document.querySelectorAll('.input-variables');
+        inputContainers.forEach(container => {
+            container.innerHTML = this.currentAgent ? 
+                Array.from(this.promptVariables).map(variable => `
+                    <div class="form-group">
+                        <label class="form__label">${variable}</label>
+                        <input type="text" 
+                               name="${variable}" 
+                               class="form__input" 
+                               placeholder="Enter ${variable}">
+                    </div>
+                `).join('') : 
+                '<p class="no-agent-message">Please select an agent first</p>';
+        });
+    }
+
+    updateAgentDropdown() {
+        const agentSelect = document.getElementById('agentSelect');
+        if (agentSelect) {
+            agentSelect.innerHTML = '<option value="">Select an agent...</option>';
+            this.agents.forEach((agent, id) => {
+                const option = document.createElement('option');
+                option.value = id;
+                option.textContent = agent.name;
+                agentSelect.appendChild(option);
+            });
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/datasetManager.js b/src/static/js/components/dataset/datasetManager.js
similarity index 69%
rename from src/static/js/components/datasetManager.js
rename to src/static/js/components/dataset/datasetManager.js
index 58e9076..29aa7d9 100644
--- a/src/static/js/components/datasetManager.js
+++ b/src/static/js/components/dataset/datasetManager.js
@@ -1,15 +1,43 @@
-import { DatasetAPI } from '../api/datasets.js';
-import { CharacterAPI } from '../api/characters.js';
-import { Panel } from './panel.js';
+import { DatasetAPI } from '../../api/datasets.js';
+import { DatasetEditor } from './datasetEditor.js';
 
 export class DatasetManager {
     constructor() {
         this.list = document.getElementById('datasetList');
         this.addBtn = document.getElementById('addDatasetBtn');
-        this.panel = new Panel();
+        this.editor = new DatasetEditor();
+
+        this.listView = document.getElementById('datasetsListView');
+        this.editorView = document.getElementById('datasetEditor');
+        
+        // Update add button click handler
+        this.addBtn.onclick = () => this.showEditor();
+        
+        // Handle hash changes for navigation
+        window.addEventListener('hashchange', () => this.handleNavigation());
+        this.handleNavigation();
+    }
+
+    handleNavigation() {
+        const hash = window.location.hash || '#datasets';
         
-        this.addBtn.onclick = () => this.showAddPanel();
-        this.init();
+        if (hash === '#datasets') {
+            this.listView.style.display = 'block';
+            this.editorView.style.display = 'none';
+            this.fetchAndRender();
+        } else if (hash.startsWith('#dataset/')) {
+            this.listView.style.display = 'none';
+            this.editorView.style.display = 'block';
+            const id = hash.split('/')[1];
+            if (id !== 'new') {
+                // Load existing dataset
+                this.loadDataset(id);
+            }
+        }
+    }
+
+    showEditor(datasetId = null) {
+        window.location.hash = datasetId ? `#dataset/${datasetId}` : '#dataset/new';
     }
 
     async init() {
@@ -54,25 +82,6 @@ export class DatasetManager {
         await this.fetchAndRender();
     }
 
-    async showAddPanel() {
-        const characters = await CharacterAPI.fetchAll();
-        const characterOptions = Object.entries(characters).map(([id, data]) => ({
-            value: id,
-            label: data.name
-        }));
-
-        this.panel.show('Add Dataset', [
-            {label: 'Name', type: 'text', name: 'name'},
-            {label: 'Metric Name', type: 'text', name: 'metric_name'},
-            {label: 'Metric Description', type: 'textarea', name: 'metric_description'},
-            {label: 'Number of Questions', type: 'number', name: 'num_questions'},
-            {label: 'Character', type: 'select', name: 'character', options: characterOptions}
-        ], async (data) => {
-            const questions = await DatasetAPI.generateQuestions(data);
-            this.showQuestionsPreview(data, questions);
-        }, false);
-    }
-
     showQuestionsPreview(data, questions) {
         // Clear previous questions and save button if they exist
         const form = this.panel.form;
diff --git a/src/static/js/components/evaluation/evaluationManager.js b/src/static/js/components/evaluation/evaluationManager.js
new file mode 100644
index 0000000..8d5c40a
--- /dev/null
+++ b/src/static/js/components/evaluation/evaluationManager.js
@@ -0,0 +1,71 @@
+import { UIHelper } from '../../utils/uiHelper.js';
+
+export class EvaluationManager {
+    constructor() {
+        this.initializeElements();
+        this.initializeEventListeners();
+    }
+
+    initializeElements() {
+        this.datasetSelect = document.getElementById('evalDatasetSelect');
+        this.evaluateBtn = document.getElementById('evaluateBtn');
+        this.results = document.getElementById('evaluationResults');
+        this.dynamicInputs = document.querySelector('.dynamic-inputs');
+    }
+
+    initializeEventListeners() {
+        this.evaluateBtn.onclick = () => this.evaluate();
+    }
+
+    evaluate() {
+        const prompts = Array.from(document.querySelectorAll('.prompt-template'))
+            .map(template => template.value);
+        const datasetId = this.datasetSelect.value;
+        
+        if (!this.validateEvaluation(prompts, datasetId)) {
+            return;
+        }
+
+        const inputs = this.collectVariables();
+        this.displayResults(prompts, inputs, datasetId);
+    }
+
+    validateEvaluation(prompts, datasetId) {
+        if (prompts.some(p => !p) || !datasetId) {
+            UIHelper.showAlert('Please provide all prompt templates and select a dataset.');
+            return false;
+        }
+        return true;
+    }
+
+    collectVariables() {
+        const inputs = {};
+        this.dynamicInputs.querySelectorAll('input').forEach(input => {
+            inputs[input.dataset.variable] = input.value;
+        });
+        return inputs;
+    }
+
+    displayResults(prompts, inputs, datasetId) {
+        this.results.innerHTML = `
+            <div class="evaluation-result">
+                <h3>Prompts:</h3>
+                ${prompts.map((p, i) => `
+                    <pre>Prompt ${i + 1}: ${p}</pre>
+                `).join('')}
+                <h3>Shared Variables:</h3>
+                <pre>${JSON.stringify(inputs, null, 2)}</pre>
+                <h3>Selected Dataset:</h3>
+                <pre>${datasetId}</pre>
+            </div>
+        `;
+    }
+
+    clear() {
+        if (this.dynamicInputs) {
+            this.dynamicInputs.innerHTML = '';
+        }
+        this.results.innerHTML = '';
+        this.datasetSelect.value = '';
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/evaluationManager.js b/src/static/js/components/evaluationManager.js
deleted file mode 100644
index 0ee9f71..0000000
--- a/src/static/js/components/evaluationManager.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { EvaluationAPI } from '../api/evaluation.js';
-import { FormHelper } from '../utils/formHelper.js';
-
-export class EvaluationManager {
-    constructor() {
-        this.characterSelect = document.getElementById('evalCharacterSelect');
-        this.datasetSelect = document.getElementById('evalDatasetSelect');
-        this.evaluateBtn = document.getElementById('evaluateBtn');
-        this.clearBtn = document.getElementById('clearEvaluationBtn');
-        this.results = document.getElementById('evaluationResults');
-
-        this.evaluateBtn.onclick = () => this.evaluate();
-        this.clearBtn.onclick = () => this.clear();
-
-        document.addEventListener('characters-updated', (event) => {
-            this.populateDropdown(this.characterSelect, event.detail.characters, "Select a character");
-        });
-
-        document.addEventListener('datasets-updated', (event) => {
-            this.populateDropdown(this.datasetSelect, event.detail.datasets, "Select a dataset");
-        });
-    }
-
-    populateDropdown(selectElement, data, defaultText = "Select an option") {
-        FormHelper.populateDropdown(selectElement, data, defaultText);
-    }
-
-    async evaluate() {
-        const characterId = this.characterSelect.value;
-        const datasetId = this.datasetSelect.value;
-
-        if (!characterId || !datasetId) {
-            alert('Please select both a character and a dataset.');
-            return;
-        }
-
-        this.showLoading();
-        try {
-            const data = await EvaluationAPI.evaluate(characterId, datasetId);
-            this.renderResults(data);
-        } catch (error) {
-            this.showError(error);
-        }
-    }
-
-    showLoading() {
-        this.evaluateBtn.disabled = true;
-        this.results.innerHTML = '<div class="loading-indicator">Evaluation in progress... Please wait.</div>';
-    }
-
-    renderResults(data) {
-        this.results.innerHTML = '';
-        
-        const totalScore = document.createElement('h3');
-        totalScore.textContent = `Total Score: ${data.total_score}/${data.max_score}`;
-        this.results.appendChild(totalScore);
-
-        data.results.forEach(result => {
-            const resultDiv = document.createElement('div');
-            resultDiv.className = 'evaluation-result';
-            resultDiv.innerHTML = `
-                <p><strong>Question:</strong> ${result.question}</p>
-                <p><strong>Response:</strong> ${result.response}</p>
-                <p><strong>Score:</strong> ${result.score}</p>
-            `;
-            this.results.appendChild(resultDiv);
-        });
-
-        this.evaluateBtn.disabled = false;
-    }
-
-    showError(error) {
-        this.results.innerHTML = `<div class="error">An error occurred: ${error.message}</div>`;
-        this.evaluateBtn.disabled = false;
-    }
-
-    clear() {
-        this.results.innerHTML = '';
-    }
-}
\ No newline at end of file
diff --git a/src/static/js/components/navigation.js b/src/static/js/components/navigation/navigation.js
similarity index 54%
rename from src/static/js/components/navigation.js
rename to src/static/js/components/navigation/navigation.js
index 8fb4469..a6b112b 100644
--- a/src/static/js/components/navigation.js
+++ b/src/static/js/components/navigation/navigation.js
@@ -1,5 +1,6 @@
-import { logout } from "../api/auth.js";
-import { getCurrentSession } from "../api/session.js";
+import { logout } from "../../api/auth.js";
+import { getCurrentSession } from "../../api/session.js";
+import { UIHelper } from "../../utils/uiHelper.js";
 
 export class Navigation {
     constructor() {
@@ -11,12 +12,20 @@ export class Navigation {
         this.menuToggle = document.getElementById('menuToggle');
         this.sidenav = document.querySelector('.sidenav');
         
+        // Map tabs to content IDs
+        this.tabMapping = {
+            'playground': 'evaluationTab',
+            'agents': 'aiAgentsTab',
+            'datasets': 'datasetsTab'
+        };
+        
         this.initializeNavigation();
     }
 
     async initializeNavigation() {
         await this.loadUserInfo();
         this.initializeEventListeners();
+        this.handleInitialRoute();
     }
 
     async loadUserInfo() {
@@ -27,11 +36,11 @@ export class Navigation {
                 const user = data.user;
                 this.updateUserInfo(user);
             } else {
-                // Redirect to login if session is not valid
                 window.location.href = '/login';
             }
         } catch (error) {
             console.error('Failed to load user info:', error);
+            UIHelper.showAlert('Failed to load user information');
             window.location.href = '/login';
         }
     }
@@ -49,10 +58,11 @@ export class Navigation {
                 if (response.ok) {
                     window.location.href = '/login';
                 } else {
-                    console.error('Logout failed');
+                    UIHelper.showAlert('Logout failed');
                 }
             } catch (error) {
                 console.error('Logout error:', error);
+                UIHelper.showAlert('Failed to logout');
             }
         });
 
@@ -71,23 +81,66 @@ export class Navigation {
                 }
             });
         }
+
+        // Handle browser back/forward
+        window.addEventListener('popstate', () => {
+            this.handleInitialRoute();
+        });
+    }
+
+    handleInitialRoute() {
+        // Get hash from URL or default to playground
+        const hash = window.location.hash.slice(1) || 'playground';
+        const tabId = this.tabMapping[hash];
+        
+        if (tabId) {
+            // Activate the correct tab
+            this.activateTab(tabId);
+            
+            // Update sidenav selection
+            const sidenavItem = document.querySelector(`.sidenav__item[data-tab="${hash}"]`);
+            if (sidenavItem) {
+                this.tabItems.forEach(tab => tab.classList.remove('active'));
+                sidenavItem.classList.add('active');
+            }
+        }
     }
 
     handleTabClick(e) {
         e.preventDefault();
         
-        this.tabItems.forEach(tab => tab.classList.remove('active'));
-        this.tabContents.forEach(content => content.classList.remove('active'));
-
         const clickedTab = e.currentTarget;
-        clickedTab.classList.add('active');
-        
-        const tabId = `${clickedTab.dataset.tab}Tab`;
-        document.getElementById(tabId).classList.add('active');
+        const tabName = clickedTab.dataset.tab;
+        const tabId = this.tabMapping[tabName];
+
+        if (tabId) {
+            // Update URL hash without triggering popstate
+            history.pushState(null, '', `#${tabName}`);
+            
+            // Activate the tab
+            this.activateTab(tabId);
+            
+            // Update sidenav selection
+            this.tabItems.forEach(tab => tab.classList.remove('active'));
+            clickedTab.classList.add('active');
+        }
+    }
+
+    activateTab(tabId) {
+        this.tabContents.forEach(content => content.classList.remove('active'));
+        const targetTab = document.getElementById(tabId);
+        if (targetTab) {
+            targetTab.classList.add('active');
+        }
     }
 
     updateUserInfo(user) {
-        this.userNameElement.textContent = user.name;
+        if (!user) {
+            UIHelper.showAlert('User information not available');
+            return;
+        }
+        
+        this.userNameElement.textContent = user.name || 'Unknown User';
         if (user.picture) {
             this.userAvatarElement.src = user.picture;
         }
diff --git a/src/static/js/components/panel.js b/src/static/js/components/panel.js
deleted file mode 100644
index 82d8877..0000000
--- a/src/static/js/components/panel.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { FormHelper } from '../utils/formHelper.js';
-
-export class Panel {
-    constructor() {
-        this.panel = document.getElementById('slidingPanel');
-        this.overlay = document.getElementById('overlay');
-        this.closeBtn = document.getElementById('closePanelBtn');
-        this.title = document.getElementById('panelTitle');
-        this.form = document.getElementById('panelForm');
-
-        this.closeBtn.onclick = () => this.close();
-        this.overlay.onclick = () => this.close();
-    }
-
-    show(title, fields, submitCallback, closeAfterSubmit = true) {
-        this.title.textContent = title;
-        this.form.innerHTML = '';
-        
-        fields.forEach(field => {
-            const label = document.createElement('label');
-            label.className = 'form__label';
-            label.textContent = field.label;
-            let input = FormHelper.createInput(field);
-            
-            label.appendChild(input);
-            this.form.appendChild(label);
-        });
-
-        const submitBtn = document.createElement('button');
-        submitBtn.className = 'button button--primary panel__save-btn';
-        submitBtn.textContent = title === 'Add Dataset' ? 'Generate Questions' : 'Save Character';
-        submitBtn.onclick = (e) => {
-            e.preventDefault();
-            const formData = new FormData(this.form);
-            const data = Object.fromEntries(formData.entries());
-            submitCallback(data);
-            if (closeAfterSubmit) {
-                this.close();
-            }
-        };
-        this.form.appendChild(submitBtn);
-
-        this.panel.classList.add('panel--open');
-        this.overlay.classList.add('overlay--active');
-        document.body.classList.add('body--panel-open');
-    }
-
-    close() {
-        this.panel.classList.remove('panel--open');
-        this.overlay.classList.remove('overlay--active');
-        document.body.classList.remove('body--panel-open');
-    }
-}
\ No newline at end of file
diff --git a/src/static/js/components/playground/chatManager.js b/src/static/js/components/playground/chatManager.js
new file mode 100644
index 0000000..d7cba86
--- /dev/null
+++ b/src/static/js/components/playground/chatManager.js
@@ -0,0 +1,41 @@
+export class ChatManager {
+    constructor(container) {
+        this.container = container;
+        this.messagesContainer = container.querySelector('.chat-messages');
+        this.chatHistory = [];
+        this.isChatStarted = false;
+    }
+
+    start(initialMessage) {
+        if (!initialMessage.trim()) {
+            throw new Error('Initial message is required');
+        }
+
+        this.container.style.display = 'block';
+        this.addMessage('user', initialMessage);
+        this.addMessage('assistant', 'This is a simulated AI response.');
+        this.isChatStarted = true;
+    }
+
+    addMessage(role, content) {
+        const messageElement = document.createElement('div');
+        messageElement.className = `chat-message chat-message--${role}`;
+        messageElement.innerHTML = `
+            <div class="chat-message__avatar">
+                <i class="material-icons">${role === 'user' ? 'person' : 'smart_toy'}</i>
+            </div>
+            <div class="chat-message__content">${content}</div>
+        `;
+        this.messagesContainer.appendChild(messageElement);
+        
+        this.chatHistory.push({ role, content });
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+
+    async handleNewMessage(message) {
+        if (!this.isChatStarted || !message.trim()) return;
+        
+        this.addMessage('user', message);
+        this.addMessage('assistant', 'This is a simulated AI response.');
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/playground/playground.js b/src/static/js/components/playground/playground.js
new file mode 100644
index 0000000..d4c963d
--- /dev/null
+++ b/src/static/js/components/playground/playground.js
@@ -0,0 +1,90 @@
+import { EvaluationManager } from '../evaluation/evaluationManager.js';
+import { PromptCard } from './promptCard.js';
+import { UIHelper } from '../../utils/uiHelper.js';
+
+export class Playground {
+    constructor() {
+        this.agents = new Map();
+        this.initializeElements();
+        this.initializeManagers();
+        this.initializeEventListeners();
+        this.addInitialPromptCard();
+    }
+
+    initializeElements() {
+        this.promptsContainer = document.getElementById('promptsContainer');
+        this.addPromptBtn = document.getElementById('addPromptBtn');
+        this.clearBtn = document.getElementById('clearEvaluationBtn');
+    }
+
+    initializeManagers() {
+        this.evaluationManager = new EvaluationManager();
+    }
+
+    initializeEventListeners() {
+        this.addPromptBtn.onclick = () => this.addPromptCard();
+        this.clearBtn.onclick = () => this.clear();
+        this.initializePromptListeners();
+        
+        // Listen for agents updates from AiAgentManager only
+        document.addEventListener('agents-updated', (event) => {
+            if (event.detail.source === 'aiAgentManager') {
+                this.updateAgents(event.detail.agents);
+            }
+        });
+    }
+
+    initializePromptListeners() {
+        this.promptsContainer.addEventListener('click', (e) => {
+            if (e.target.closest('.remove-prompt')) {
+                const card = e.target.closest('.prompt-card');
+                if (this.promptsContainer.children.length > 1) {
+                    card.remove();
+                }
+            }
+        });
+    }
+
+    addInitialPromptCard() {
+        this.addPromptCard();
+    }
+
+    addPromptCard() {
+        const promptCard = new PromptCard();
+        promptCard.element.__promptCard = promptCard;
+        this.promptsContainer.appendChild(promptCard.element);
+
+        if (this.agents.size > 0) {
+            this.notifyPromptCardAgents();
+        }
+    }
+
+    updateAgents(agents) {
+        this.agents.clear();
+        Object.entries(agents).forEach(([id, agent]) => {
+            this.agents.set(id, agent);
+        });
+        this.notifyPromptCardAgents();
+    }
+
+    notifyPromptCardAgents() {
+        const agentsObj = Object.fromEntries(this.agents);
+        // Add source to differentiate from AiAgentManager events
+        document.dispatchEvent(new CustomEvent('agents-updated', {
+            detail: { 
+                agents: agentsObj,
+                source: 'playground'
+            }
+        }));
+    }
+
+    clear() {
+        while (this.promptsContainer.children.length > 1) {
+            this.promptsContainer.lastChild.remove();
+        }
+        const firstPrompt = this.promptsContainer.querySelector('.prompt-template');
+        if (firstPrompt) firstPrompt.value = '';
+        
+        this.evaluationManager.clear();
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/playground/promptCard.js b/src/static/js/components/playground/promptCard.js
new file mode 100644
index 0000000..0c4aa66
--- /dev/null
+++ b/src/static/js/components/playground/promptCard.js
@@ -0,0 +1,282 @@
+import { PromptSettings } from "./promptSettings.js";
+import { AgentMenu } from "../agents/agentMenu.js";
+import { ChatManager } from "./chatManager.js";
+import { VariableHelper } from "../../utils/variableHelper.js";
+import { UIHelper } from "../../utils/uiHelper.js";
+
+export class PromptCard {
+    constructor() {
+        this.initializeElements();
+        this.initializeComponents();
+        this.initializeEventListeners();
+        this.variables = new Set();
+    }
+
+    initializeElements() {
+        this.element = document.createElement('div');
+        this.element.className = 'prompt-card';
+        this.render();
+        
+        this.dynamicInputs = this.element.querySelector('.dynamic-inputs');
+        this.systemPromptInput = this.element.querySelector('.prompt-template');
+        this.userPromptInput = this.element.querySelector('.user-prompt-template');
+        this.agentNameInput = this.element.querySelector('.agent-name');
+        this.chatContainer = this.element.querySelector('.chat-container');
+        this.userMessageInput = this.element.querySelector('.user-prompt');
+    }
+
+    initializeComponents() {
+        this.promptSettings = new PromptSettings();
+        this.agentMenu = new AgentMenu(this.element, this.handleAgentAction.bind(this));
+        this.chatManager = new ChatManager(this.chatContainer);
+        this.agents = {};
+    }
+
+    initializeEventListeners() {
+        // Button click handlers
+        this.element.querySelector('.save-prompt').onclick = () => this.handleSave();
+        this.element.querySelector('.load-agent').onclick = () => this.agentMenu.toggle();
+        this.element.querySelector('.settings-prompt').onclick = () => this.promptSettings.show();
+        this.element.querySelector('.start-chat').onclick = () => this.startChat();
+        this.element.querySelector('.run-prompt').onclick = () => this.handleRunPrompt();
+        
+        // Input change handlers
+        this.systemPromptInput.addEventListener('input', () => this.updateInputFields());
+        this.userPromptInput.addEventListener('input', () => this.updateInputFields());
+        
+        // Chat input handler
+        this.userMessageInput.addEventListener('keypress', async (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                await this.handleRunPrompt();
+            }
+        });
+
+        // Agent menu handlers
+        this.element.querySelector('.agent-menu').onclick = async (e) => await this.agentMenu.handleClick(e);
+        document.addEventListener('click', (e) => {
+            if (!this.element.querySelector('.agent-selector').contains(e.target)) {
+                this.agentMenu.close();
+            }
+        });
+
+        // Global event handlers
+        document.addEventListener('agents-updated', (e) => {
+            this.agents = e.detail.agents;
+            this.agentMenu.updateAgentSelect(this.agents);
+        });
+        document.addEventListener('load-agent', (e) => this.fillAgentData(e.detail.agent));
+        document.addEventListener('load-variant', (e) => this.fillVariantData(e.detail.agent, e.detail.variant));
+    }
+
+    async handleAgentAction(action) {
+        if (!action) return;
+
+        const [type, agentId, variantId] = action.split(':');
+        const agent = this.agents[agentId];
+        if (!agent) return;
+
+        if (type === 'load') {
+            this.fillAgentData(agent);
+        } else if (type === 'variant') {
+            this.fillVariantData(agent, agent.variants[variantId]);
+        }
+
+        this.agentMenu.close();
+    }
+
+    fillAgentData(agent) {
+        this.setContent(agent.prompt[0].content);
+        const userPrompt = agent.prompt.find(p => p.role === 'user');
+        this.setUserPrompt(userPrompt ? userPrompt.content : '');
+        
+        this.promptSettings.updateSettings(agent.config);
+        this.updateInputFields();
+        this.updateVariablePersistence(agent.included_variables);
+        this.agentNameInput.value = agent.name;
+    }
+
+    fillVariantData(agent, variant) {
+        this.fillAgentData(agent);
+        this.fillVariableValues(variant.variables);
+    }
+
+    updateVariablePersistence(includedVariables = []) {
+        const checkboxes = this.element.querySelectorAll('.variable-persistence');
+        checkboxes.forEach(checkbox => {
+            const variable = checkbox.dataset.variable;
+            checkbox.checked = includedVariables.includes(variable);
+        });
+    }
+
+    fillVariableValues(variables = {}) {
+        Object.entries(variables).forEach(([key, value]) => {
+            const input = this.element.querySelector(`#input_${key}`);
+            if (input) input.value = value;
+        });
+    }
+
+    generateInputFields() {
+        this.dynamicInputs.innerHTML = '';
+        
+        if (this.variables.size > 0) {
+            const inputsContainer = document.createElement('div');
+            inputsContainer.className = 'card-inputs';
+            
+            const systemVariables = VariableHelper.extractVariables(this.getContent());
+            
+            this.variables.forEach(variable => {
+                inputsContainer.appendChild(this.createInputGroup(variable, systemVariables.has(variable)));
+            });
+            
+            this.dynamicInputs.appendChild(inputsContainer);
+        }
+    }
+
+    createInputGroup(variable, isSystemVariable) {
+        const inputGroup = document.createElement('div');
+        inputGroup.className = 'input-group';
+        inputGroup.innerHTML = `
+            <label for="input_${variable}">${variable}:</label>
+            <div class="input-group__content">
+                <input type="text" 
+                    id="input_${variable}" 
+                    class="form__input" 
+                    placeholder="Enter value for ${variable}">
+                <div class="input-group__actions">
+                    <input type="checkbox" 
+                        id="save_${variable}" 
+                        class="variable-persistence"
+                        data-variable="${variable}"
+                        ${isSystemVariable ? 'checked' : ''}>
+                    <label for="save_${variable}" class="checkbox-label">Save</label>
+                </div>
+            </div>
+        `;
+        return inputGroup;
+    }
+
+    async handleSave() {
+        const name = this.agentNameInput.value.trim();
+        if (!name) {
+            UIHelper.showAlert('Please enter an agent name');
+            return;
+        }
+
+        const agentData = this.createAgentData(name);
+        document.dispatchEvent(new CustomEvent('save-agent', { detail: { agent: agentData } }));
+        UIHelper.showToast('Agent saved successfully');
+    }
+
+    createAgentData(name) {
+        const includedVariables = Array.from(
+            this.element.querySelectorAll('.variable-persistence:checked')
+        ).map(checkbox => checkbox.dataset.variable);
+
+        return {
+            name,
+            prompt: [
+                { role: 'system', content: this.getContent() },
+                { role: 'user', content: this.getUserPrompt() }
+            ],
+            config: this.promptSettings.getSettings(),
+            included_variables: includedVariables
+        };
+    }
+
+    updateInputFields() {
+        const systemVariables = VariableHelper.extractVariables(this.getContent());
+        const userVariables = VariableHelper.extractVariables(this.getUserPrompt());
+        this.variables = VariableHelper.combineVariables([...systemVariables], [...userVariables]);
+        this.generateInputFields();
+    }
+
+    startChat() {
+        const userPrompt = this.getUserPrompt();
+        if (!userPrompt) {
+            UIHelper.showAlert('Please enter a user prompt to start the chat');
+            return;
+        }
+
+        try {
+            this.chatManager.start(userPrompt);
+        } catch (error) {
+            UIHelper.showAlert(error.message);
+        }
+    }
+
+    async handleRunPrompt() {
+        const message = this.userMessageInput.value.trim();
+        await this.chatManager.handleNewMessage(message);
+        this.userMessageInput.value = '';
+    }
+
+    getContent() {
+        return this.systemPromptInput.value;
+    }
+
+    setContent(content) {
+        this.systemPromptInput.value = content;
+    }
+
+    getUserPrompt() {
+        return this.userPromptInput.value.trim();
+    }
+
+    setUserPrompt(content) {
+        this.userPromptInput.value = content;
+    }
+
+    // Keep the render method at the bottom as it's just template definition
+    render() {
+        this.element.innerHTML = `
+            <div class="prompt-header">
+                <label>System Prompt:</label>
+                <div class="agent-selector">
+                    <button class="button load-agent">Load Agent</button>
+                    <div class="agent-menu" style="display: none;"></div>
+                </div>
+                <button class="button button--icon settings-prompt" title="Prompt Settings">
+                    <i class="material-icons">settings</i>
+                </button>
+                <button class="button button--icon remove-prompt">
+                    <i class="material-icons">close</i>
+                </button>
+            </div>
+            <textarea class="form__input prompt-template" 
+                placeholder="Enter your system prompt. Use {variable_name} for dynamic inputs..."></textarea>
+            
+            <div class="prompt-header">
+                <label>User Prompt:</label>
+            </div>
+            <textarea class="form__input user-prompt-template" 
+                placeholder="Enter your initial message..."></textarea>
+            
+            <div class="dynamic-inputs"></div>
+
+            <div class="prompt-actions">
+                <button class="start-chat button button--primary">
+                    Start Chat
+                </button>
+            </div>
+
+            <div class="chat-container" style="display: none;">
+                <div class="chat-messages"></div>
+                <div class="chat-input-container">
+                    <textarea class="form__input user-prompt" 
+                        placeholder="Enter your message..."></textarea>
+                    <button class="run-prompt button button--primary">
+                        <i class="material-icons">send</i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="prompt-card__footer">
+                <input type="text" class="form__input agent-name" placeholder="Enter agent name">
+                <button class="save-prompt button button--secondary">
+                    <i class="material-icons">save</i> Save
+                </button>
+            </div>
+        `;
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/components/playground/promptSettings.js b/src/static/js/components/playground/promptSettings.js
new file mode 100644
index 0000000..76f0896
--- /dev/null
+++ b/src/static/js/components/playground/promptSettings.js
@@ -0,0 +1,117 @@
+import { FormHelper } from '../../utils/formHelper.js';
+
+export class PromptSettings {
+    constructor() {
+        this.createModal();
+        this.models = {};
+        this.fetchModels();
+        this.settings = {
+            model: 'gpt-4o',
+            temperature: 0.6,
+            max_tokens: 2000
+        };
+    }
+
+    async fetchModels() {
+        try {
+            const response = await fetch('/api/config/models');
+            this.models = await response.json();
+        } catch (error) {
+            console.error('Failed to fetch models:', error);
+        }
+    }
+
+    createModal() {
+        this.modal = document.createElement('div');
+        this.modal.className = 'settings-popup';
+        document.body.appendChild(this.modal);
+    }
+
+    getSettings() {
+        return { ...this.settings };
+    }
+
+    updateSettings(newSettings) {
+        this.settings = { ...newSettings };
+    }
+
+    show() {
+        const modelOptions = Object.entries(this.models).flatMap(([provider, models]) => 
+            models.map(model => ({
+                value: model.id,
+                label: `${model.name} (${provider})`
+            }))
+        );
+
+        const fields = [
+            {
+                label: 'Model',
+                type: 'select',
+                name: 'model',
+                options: modelOptions,
+                value: this.settings.model
+            },
+            {
+                label: 'Temperature',
+                type: 'range',
+                name: 'temperature',
+                min: 0,
+                max: 1,
+                step: 0.1,
+                value: this.settings.temperature
+            },
+            {
+                label: 'Max Tokens',
+                type: 'number',
+                name: 'max_tokens',
+                value: this.settings.max_tokens,
+                min: 1
+            }
+        ];
+
+        this.modal.innerHTML = `
+            <div class="settings-content">
+                <h3>Prompt Settings</h3>
+                <form class="settings-form"></form>
+                <div class="settings-actions">
+                    <button class="button button--secondary" onclick="this.closest('.settings-popup').style.display='none'">Close</button>
+                </div>
+            </div>
+        `;
+
+        const form = this.modal.querySelector('.settings-form');
+        fields.forEach(field => {
+            const formGroup = document.createElement('div');
+            formGroup.className = 'form-group';
+            
+            const label = document.createElement('label');
+            label.className = 'form__label';
+            label.textContent = field.label;
+            
+            const input = FormHelper.createInput(field);
+
+            // Set initial value
+            input.value = this.settings[field.name];
+
+            const inputElement = field.type === 'range' ? input.querySelector('input') : input;
+
+            inputElement.addEventListener('input', () => {
+                const newValue = field.type === 'range' ? parseFloat(inputElement.value) : 
+                            field.type === 'number' ? parseInt(inputElement.value) : 
+                            inputElement.value;
+                this.settings[field.name] = newValue;
+            });
+            
+            formGroup.appendChild(label);
+            formGroup.appendChild(input);
+            form.appendChild(formGroup);
+        });
+
+        this.modal.style.display = 'flex';
+        
+        // Close on outside click
+        this.modal.onclick = (e) => {
+            if (e.target === this.modal) this.modal.style.display = 'none';
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/main.js b/src/static/js/main.js
index 5a8cf68..40f877c 100644
--- a/src/static/js/main.js
+++ b/src/static/js/main.js
@@ -1,11 +1,11 @@
-import { CharacterManager } from './components/characterManager.js';
-import { DatasetManager } from './components/datasetManager.js';
-import { EvaluationManager } from './components/evaluationManager.js';
-import { Navigation } from './components/navigation.js'
+import { AiAgentManager } from './components/agents/aiAgentManager.js';
+import { DatasetManager } from './components/dataset/datasetManager.js';
+import { Playground } from './components/playground/playground.js';
+import { Navigation } from './components/navigation/navigation.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     new Navigation();
-    new CharacterManager();
+    new AiAgentManager();
     new DatasetManager();
-    new EvaluationManager();
+    new Playground();
 });
\ No newline at end of file
diff --git a/src/static/js/utils/formHelper.js b/src/static/js/utils/formHelper.js
index 61eabda..2b99f1e 100644
--- a/src/static/js/utils/formHelper.js
+++ b/src/static/js/utils/formHelper.js
@@ -48,7 +48,7 @@ export const FormHelper = {
         input.min = field.min;
         input.max = field.max;
         input.step = field.step;
-        input.value = (field.max - field.min) / 2;
+        input.value = field.value;
         input.className = 'form__range';
 
         const rangeValue = document.createElement('span');
diff --git a/src/static/js/utils/uiHelper.js b/src/static/js/utils/uiHelper.js
new file mode 100644
index 0000000..3d9a2b3
--- /dev/null
+++ b/src/static/js/utils/uiHelper.js
@@ -0,0 +1,19 @@
+export class UIHelper {
+    static showToast(message, type = 'success') {
+        const toast = document.createElement('div');
+        toast.className = `toast toast--${type}`;
+        toast.textContent = message;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => toast.classList.add('toast--visible'), 100);
+        setTimeout(() => {
+            toast.classList.remove('toast--visible');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+
+    static showAlert(message) {
+        alert(message); // Could be replaced with a custom modal later
+    }
+}
\ No newline at end of file
diff --git a/src/static/js/utils/variableHelper.js b/src/static/js/utils/variableHelper.js
new file mode 100644
index 0000000..89f2c25
--- /dev/null
+++ b/src/static/js/utils/variableHelper.js
@@ -0,0 +1,11 @@
+export class VariableHelper {
+    static extractVariables(template) {
+        const regex = /{([^}]+)}/g;
+        const matches = [...template.matchAll(regex)];
+        return new Set(matches.map(match => match[1]));
+    }
+
+    static combineVariables(...variableSets) {
+        return new Set([...variableSets].flat());
+    }
+}
\ No newline at end of file
diff --git a/src/templates/components/main-content.html b/src/templates/components/main-content.html
index a0e1b12..843f83a 100644
--- a/src/templates/components/main-content.html
+++ b/src/templates/components/main-content.html
@@ -3,42 +3,36 @@
 </button>
 
 <main class="main-content">
-    <!-- Characters Tab -->
-    <div id="charactersTab" class="tab-content active">
+    <!-- Evaluation Tab -->
+    <div id="evaluationTab" class="tab-content active">
         <div class="content-header">
-            <h1>Characters</h1>
-            <button id="addCharacterBtn" class="button button--primary">
-                <i class="material-icons">person_add</i>
-                Add Character
-            </button>
-        </div>
-        <div id="characterList" class="card-grid">
-            <!-- Characters will be loaded here -->
+            <h1>Playground</h1>
         </div>
-    </div>
-
-    <!-- Datasets Tab -->
-    <div id="datasetsTab" class="tab-content">
-        <div class="content-header">
-            <h1>Datasets</h1>
-            <button id="addDatasetBtn" class="button button--primary">
-                <i class="material-icons">add</i>
-                Add Dataset
+        
+        <!-- Prompts Section -->
+        <div class="prompts-header">
+            <h2>Prompts</h2>
+            <button id="addPromptBtn" class="button button--secondary">
+                <i class="material-icons">add</i> Add Prompt
             </button>
         </div>
-        <div id="datasetList" class="card-grid">
-            <!-- Datasets will be loaded here -->
+
+        <div class="prompts-scroll-container">
+            <div id="promptsContainer" class="prompts-container">
+                 <!-- PromptCards will appear here -->
+            </div>
         </div>
-    </div>
 
-    <!-- Evaluation Tab -->
-    <div id="evaluationTab" class="tab-content">
-        <div class="content-header">
-            <h1>Evaluation</h1>
+        <!-- Dynamic Inputs Section -->
+        <div id="dynamicInputs" class="dynamic-inputs-section">
+            <!-- Dynamic input fields will appear here -->
         </div>
-        <div class="eval-controls">
-            <select id="evalCharacterSelect" class="form__input"></select>
-            <select id="evalDatasetSelect" class="form__input"></select>
+
+        <!-- Controls Section -->
+        <div class="controls-section">
+            <select id="evalDatasetSelect" class="form__input">
+                <option value="">Select a dataset</option>
+            </select>
             <button id="evaluateBtn" class="button button--primary">
                 <i class="material-icons">play_arrow</i> Evaluate
             </button>
@@ -46,6 +40,39 @@ <h1>Evaluation</h1>
                 <i class="material-icons">delete</i> Clear
             </button>
         </div>
+
         <div id="evaluationResults"></div>
     </div>
-</main>
\ No newline at end of file
+    
+    <!-- Characters Tab -->
+    <div id="aiAgentsTab" class="tab-content">
+        <div class="content-header">
+            <h1>AI Agents</h1>
+        </div>
+        <div id="agentList" class="card-grid">
+            <!-- AI Agents will be loaded here -->
+        </div>
+    </div>
+
+    <!-- Datasets Tab -->
+    <div id="datasetsTab" class="tab-content">
+        <!-- This is the list view -->
+        <div id="datasetsListView">
+            <div class="content-header">
+                <h1>Datasets</h1>
+                <button id="addDatasetBtn" class="button button--primary">
+                    <i class="material-icons">add</i>
+                    Add Dataset
+                </button>
+            </div>
+            <div id="datasetList" class="card-grid">
+                <!-- Datasets will be loaded here -->
+            </div>
+        </div>
+    
+        <!-- This is the new editor view -->
+        <div id="datasetEditor" class="dataset-editor" style="display: none">
+            <!-- Editor content will be rendered by JavaScript -->
+        </div>
+    </div>
+</main>
diff --git a/src/templates/components/sidenav.html b/src/templates/components/sidenav.html
index 215f159..4431599 100644
--- a/src/templates/components/sidenav.html
+++ b/src/templates/components/sidenav.html
@@ -5,18 +5,18 @@
     </div>
     
     <div class="sidenav__menu">
-        <a href="#" class="sidenav__item active" data-tab="characters">
-            <i class="material-icons">account_circle</i>
-            Characters
+        <a href="#playground" class="sidenav__item active" data-tab="playground">
+            <i class="material-icons">extension</i>
+            Playground
         </a>
-        <a href="#" class="sidenav__item" data-tab="datasets">
+        <a href="#agents" class="sidenav__item" data-tab="agents">
+            <i class="material-icons">smart_toy</i>
+            AI Agents
+        </a>
+        <a href="#datasets" class="sidenav__item" data-tab="datasets">
             <i class="material-icons">dataset</i>
             Datasets
         </a>
-        <a href="#" class="sidenav__item" data-tab="evaluation">
-            <i class="material-icons">assessment</i>
-            Evaluation
-        </a>
     </div>
 
     <div class="sidenav__footer">
diff --git a/src/templates/components/sliding-panel.html b/src/templates/components/sliding-panel.html
deleted file mode 100644
index ffe2e65..0000000
--- a/src/templates/components/sliding-panel.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div id="overlay" class="overlay"></div>
-<div id="slidingPanel" class="panel">
-    <button class="panel__close-btn" id="closePanelBtn">
-        <i class="material-icons">close</i>
-    </button>
-    <h2 class="panel__title" id="panelTitle"></h2>
-    <form class="panel__form" id="panelForm"></form>
-</div>
\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
index fb0408f..8cbfbb3 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -17,8 +17,6 @@
         {% include 'components/main-content.html' %}
     </div>
 
-    {% include 'components/sliding-panel.html' %}
-
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </body>
 </html>
\ No newline at end of file