diff --git a/crates/frontend/src/components/context_card.rs b/crates/frontend/src/components/context_card.rs
index 06162cec..e75f5ac1 100644
--- a/crates/frontend/src/components/context_card.rs
+++ b/crates/frontend/src/components/context_card.rs
@@ -31,9 +31,10 @@ pub fn context_card(
         .clone()
         .into_iter()
         .map(|(k, v)| {
-            let k = Value::String(k.trim_matches('"').to_string());
-            let v = Value::String(format!("{}", v).trim_matches('"').to_string());
-            Map::from_iter(vec![(String::from("KEY"), k), (String::from("VALUE"), v)])
+            Map::from_iter(vec![
+                (String::from("KEY"), Value::String(k.clone())),
+                (String::from("VALUE"), v),
+            ])
         })
         .collect::<Vec<Map<String, Value>>>();
 
diff --git a/crates/frontend/src/components/dropdown.rs b/crates/frontend/src/components/dropdown.rs
index 5fbd7c64..7ed950a5 100644
--- a/crates/frontend/src/components/dropdown.rs
+++ b/crates/frontend/src/components/dropdown.rs
@@ -56,6 +56,8 @@ where
         DropdownBtnType::Select => "select select-bordered w-[28rem] items-center",
     };
 
+    let node_ref = create_node_ref::<html::Input>();
+
     view! {
         <div
             id=id
@@ -66,7 +68,16 @@ where
             class=("dropdown-top", dropdown_direction == DropdownDirection::Top)
             class=("dropdown-down", dropdown_direction == DropdownDirection::Down)
         >
-            <label tabindex="0" class=format!("{} {}", class, btn_class)>
+            <label
+                tabindex="0"
+                class=format!("{} {}", class, btn_class)
+                on:click:undelegated=move |_| {
+                    if let Some(element) = node_ref.get() {
+                        let _ = element.focus();
+                    }
+                }
+            >
+
                 <i class=format!("{dropdown_icon}")></i>
                 {dropdown_text}
             </label>
@@ -86,7 +97,8 @@ where
                                     type="text"
                                     class="grow"
                                     placeholder="Search"
-                                    name=name
+                                    ref_=node_ref
+                                    name=name.clone()
                                     value=search_term.get_untracked()
                                     on:input=move |event| {
                                         set_search_term.set(event_target_value(&event));
diff --git a/crates/frontend/src/components/experiment.rs b/crates/frontend/src/components/experiment.rs
index f6ee6637..11717f01 100644
--- a/crates/frontend/src/components/experiment.rs
+++ b/crates/frontend/src/components/experiment.rs
@@ -1,14 +1,45 @@
-pub mod utils;
-
-use std::rc::Rc;
-
 use leptos::*;
-use serde_json::Value;
+use serde_json::{Map, Value};
+use std::collections::HashMap;
 
 use crate::components::table::Table;
-
-use self::utils::gen_variant_table;
+use crate::schema::HtmlDisplay;
 use crate::types::{Experiment, ExperimentStatusType};
+use crate::{
+    components::table::types::Column,
+    types::{Variant, VariantType},
+};
+
+pub fn gen_variant_table(
+    variants: &[Variant],
+) -> Result<(Vec<Map<String, Value>>, Vec<Column>), String> {
+    let mut columns = vec![Column::default("Config Key".into())];
+    let mut row_map: HashMap<&String, Map<String, Value>> = HashMap::new();
+    for (i, variant) in variants.iter().enumerate() {
+        let name = match variant.variant_type {
+            VariantType::CONTROL => format!("{}", variant.variant_type),
+            VariantType::EXPERIMENTAL => format!("Variant-{}", i),
+        };
+        columns.push(Column::new(name.clone(), None, |value: &str, _| {
+            view! { <span>{value.to_string()}</span> }.into_view()
+        }));
+        for (config, value) in variant.overrides.iter() {
+            match row_map.get_mut(config) {
+                Some(c) => {
+                    c.insert(name.clone(), value.clone());
+                }
+                None => {
+                    let mut m = Map::new();
+                    m.insert("Config Key".into(), Value::String(config.clone()));
+                    m.insert(name.clone(), value.clone());
+                    row_map.insert(config, m);
+                }
+            }
+        }
+    }
+    let rows = row_map.into_values().collect();
+    Ok((rows, columns))
+}
 
 #[component]
 pub fn experiment<HS, HR, HC, HE>(
@@ -24,136 +55,131 @@ where
     HC: Fn() + 'static + Clone,
     HE: Fn() + 'static + Clone,
 {
-    let experiment_rc = Rc::new(experiment.clone());
-    let contexts = Rc::clone(&experiment_rc).context.clone();
+    let experiment = store_value(experiment);
+    let contexts = experiment.with_value(|v| v.context.clone());
+    let badge_class = match experiment.with_value(|v| v.status) {
+        ExperimentStatusType::CREATED => "badge text-white ml-3 mb-1 badge-xl badge-info",
+        ExperimentStatusType::INPROGRESS => {
+            "badge text-white ml-3 mb-1 badge-xl badge-warning"
+        }
+        ExperimentStatusType::CONCLUDED => {
+            "badge text-white ml-3 mb-1 badge-xl badge-success"
+        }
+    };
+    let (variant_rows, variant_col) =
+        gen_variant_table(&experiment.with_value(|v| v.variants.clone())).unwrap();
 
     view! {
         <div class="flex flex-col overflow-x-auto p-2 bg-transparent">
+            <h1 class="text-2xl pt-4 font-extrabold">
+                {experiment.with_value(|v| v.name.clone())}
+                <span class=badge_class>{experiment.with_value(|v| v.status.to_string())}</span>
+            </h1>
+            <div class="divider"></div>
+            <div class="flex flex-row justify-end join m-5">
 
-            {
-                let experiment_clone = experiment_rc.clone();
-                move || {
-                    let exp = experiment_clone.clone();
-                    let class_name = match exp.status {
+                {move || {
+                    let handle_start = handle_start.clone();
+                    let handle_conclude = handle_conclude.clone();
+                    let handle_ramp = handle_ramp.clone();
+                    let handle_edit = handle_edit.clone();
+                    match experiment.with_value(|v| v.status) {
                         ExperimentStatusType::CREATED => {
-                            "badge text-white ml-3 mb-1 badge-xl badge-info"
+                            view! {
+                                <button
+                                    class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                                    on:click=move |_| { handle_edit() }
+                                >
+
+                                    <i class="ri-edit-line"></i>
+                                    Edit
+                                </button>
+                                <button
+                                    class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                                    on:click=move |_| {
+                                        handle_start(experiment.with_value(|v| v.id.clone()))
+                                    }
+                                >
+
+                                    <i class="ri-guide-line"></i>
+                                    Start
+                                </button>
+                            }
+                                .into_view()
                         }
                         ExperimentStatusType::INPROGRESS => {
-                            "badge text-white ml-3 mb-1 badge-xl badge-warning"
+                            view! {
+                                <button
+                                    class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                                    on:click=move |_| { handle_conclude() }
+                                >
+
+                                    <i class="ri-stop-circle-line"></i>
+                                    Conclude
+                                </button>
+                                <button
+                                    class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                                    on:click=move |_| { handle_ramp() }
+                                >
+
+                                    <i class="ri-flight-takeoff-line"></i>
+                                    Ramp
+                                </button>
+                            }
+                                .into_view()
                         }
                         ExperimentStatusType::CONCLUDED => {
-                            "badge text-white ml-3 mb-1 badge-xl badge-success"
-                        }
-                    };
-                    view! {
-                        <h1 class="text-2xl pt-4 font-extrabold">
-                            {&exp.name} <span class=class_name>{exp.status.to_string()}</span>
-                        </h1>
-                    }
-                }
-            }
-            <div class="divider"></div>
-            <div class="flex flex-row justify-end join m-5">
-
-                {
-                    let experiment_clone = experiment_rc.clone();
-                    move || {
-                        let exp = experiment_clone.clone();
-                        let handle_start = handle_start.clone();
-                        let handle_conclude = handle_conclude.clone();
-                        let handle_ramp = handle_ramp.clone();
-                        let handle_edit = handle_edit.clone();
-                        match exp.status {
-                            ExperimentStatusType::CREATED => {
-                                view! {
-                                    <button
-                                        class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
-                                        on:click=move |_| { handle_edit() }
-                                    >
-
-                                        <i class="ri-edit-line"></i>
-                                        Edit
-                                    </button>
-                                    <button
-                                        class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
-                                        on:click=move |_| { handle_start(exp.id.to_string()) }
-                                    >
-
-                                        <i class="ri-guide-line"></i>
-                                        Start
-                                    </button>
-                                }
-                                    .into_view()
-                            }
-                            ExperimentStatusType::INPROGRESS => {
-                                view! {
-                                    <button
-                                        class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
-                                        on:click=move |_| { handle_conclude() }
-                                    >
-
-                                        <i class="ri-stop-circle-line"></i>
-                                        Conclude
-                                    </button>
-                                    <button
-                                        class="btn join-item text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 shadow-lgont-medium rounded-lg text-sm px-5 py-2.5 text-center"
-                                        on:click=move |_| { handle_ramp() }
-                                    >
-
-                                        <i class="ri-flight-takeoff-line"></i>
-                                        Ramp
-                                    </button>
-                                }
-                                    .into_view()
-                            }
-                            ExperimentStatusType::CONCLUDED => {
-                                view! {
-                                    <div class="stat">
-                                        <div class="stat-title">Chosen Variant</div>
-                                        <div class="stat-value">
-                                            {match exp.chosen_variant {
-                                                Some(ref v) => v.to_string(),
-                                                None => String::new(),
-                                            }}
+                            view! {
+                                <div class="stat">
+                                    <div class="stat-title">Chosen Variant</div>
+                                    <div class="stat-value">
+                                        {match experiment.with_value(|v| v.chosen_variant.clone()) {
+                                            Some(ref v) => v.to_string(),
+                                            None => String::new(),
+                                        }}
 
-                                        </div>
                                     </div>
-                                }
-                                    .into_view()
+                                </div>
                             }
+                                .into_view()
                         }
                     }
-                }
+                }}
 
             </div>
             <div class="flex bg-base-100 flex-row gap-2 justify-between flex-wrap shadow m-5">
                 <div class="stat w-2/12">
                     <div class="stat-title">Experiment ID</div>
-                    <div class="stat-value text-sm">{experiment.id}</div>
+                    <div class="stat-value text-sm">{experiment.with_value(|v| v.id.clone())}</div>
                 </div>
                 <div class="stat w-2/12">
                     <div class="stat-title">Current Traffic Percentage</div>
-                    <div class="stat-value text-sm">{experiment.traffic_percentage}</div>
+                    <div class="stat-value text-sm">
+                        {experiment.with_value(|v| v.traffic_percentage)}
+                    </div>
                 </div>
                 <div class="stat w-2/12">
                     <div class="stat-title">Created by</div>
-                    <div class="stat-value text-sm">{experiment.created_by}</div>
+                    <div class="stat-value text-sm">
+                        {experiment.with_value(|v| v.created_by.clone())}
+                    </div>
                 </div>
                 <div class="stat w-2/12">
                     <div class="stat-title">Created at</div>
                     <div class="stat-value text-sm">
-                        {format!("{}", experiment.created_at.format("%v"))}
+                        {format!("{}", experiment.with_value(|v| v.created_at.format("%v")))}
                     </div>
                 </div>
                 <div class="stat w-2/12">
                     <div class="stat-title">Last Modified</div>
                     <div class="stat-value text-sm">
 
-                        {format!("{}", experiment.last_modified.format("%v"))}
+                        {format!("{}", experiment.with_value(|v| v.last_modified.format("%v")))}
 
                     </div>
                 </div>
-            </div> <div class="card bg-base-100 max-w-screen shadow m-5">
+            </div>
+            <div class="card bg-base-100 max-w-screen shadow m-5">
                 <div class="card-body">
                     <h2 class="card-title">Context</h2>
                     <div class="flex flex-row flex-wrap gap-2">
@@ -162,64 +188,46 @@ where
                             for token in contexts.clone() {
                                 let (dimension, values) = (token.left_operand, token.right_operand);
                                 let mut value_views = Vec::new();
-
                                 for value in values.iter() {
                                     if value.is_object() && value.get("var").is_some() {
                                         continue;
                                     }
-
-                                    let value_str = match value {
-                                        Value::String(s) => s.clone(),
-                                        Value::Number(n) => n.to_string(),
-                                        Value::Bool(b) => b.to_string(),
-                                        Value::Null => String::from("null"),
-                                        _ => format!("{}", value),
-                                    };
-
-                                    value_views.push(
-                                        view! {
+                                    value_views
+                                        .push(
+                                            view! {
                                                 <div class="stat-value text-base">
-                                                    {&value_str.replace('"', "")}
+                                                    {value.html_display()}
                                                 </div>
-                                        },
-                                    );
-
+                                            },
+                                        );
                                 }
-                                view.push(view! {
-                                    <div class="stat w-3/12">
-                                        <div class="stat-title">{dimension}</div>
-                                        {value_views}
-                                    </div>
-                                });
-
+                                view.push(
+                                    view! {
+                                        <div class="stat w-3/12">
+                                            <div class="stat-title">{dimension}</div>
+                                            {value_views}
+                                        </div>
+                                    },
+                                );
                             }
                             view
                         }}
 
                     </div>
                 </div>
-            </div> <div class="card bg-base-100 max-w-screen shadow m-5">
+            </div>
+            <div class="card bg-base-100 max-w-screen shadow m-5">
                 <div class="card-body">
                     <h2 class="card-title">Variants</h2>
-                    <div class="overflow-x-auto overflow-y-auto">
-
-                        {
-                            let experiment_clone = experiment_rc.clone();
-                            move || {
-                                let exp = experiment_clone.clone();
-                                let (rows, columns) = gen_variant_table(&exp.variants).unwrap();
-                                view! {
-                                    <Table
-                                        cell_class="min-w-48 font-mono".to_string()
-                                        rows=rows
-                                        key_column="overrides".to_string()
-                                        columns=columns
-                                    />
-                                }
-                            }
-                        }
 
-                    </div>
+                    <Table
+                        cell_class="min-w-48 font-mono".to_string()
+                        rows=variant_rows
+                        key_column="overrides".to_string()
+                        columns=variant_col
+                        class="overflow-y-auto"
+                    />
+
                 </div>
             </div>
         </div>
diff --git a/crates/frontend/src/components/experiment/utils.rs b/crates/frontend/src/components/experiment/utils.rs
deleted file mode 100644
index 47d3d091..00000000
--- a/crates/frontend/src/components/experiment/utils.rs
+++ /dev/null
@@ -1,39 +0,0 @@
-use std::collections::HashMap;
-
-use crate::{
-    components::table::types::Column,
-    types::{Variant, VariantType},
-};
-use leptos::{view, IntoView};
-use serde_json::{Map, Value};
-
-pub fn gen_variant_table(
-    variants: &[Variant],
-) -> Result<(Vec<Map<String, Value>>, Vec<Column>), String> {
-    let mut columns = vec![Column::default("Config Key".into())];
-    let mut row_map: HashMap<&String, Map<String, Value>> = HashMap::new();
-    for (i, variant) in variants.iter().enumerate() {
-        let name = match variant.variant_type {
-            VariantType::CONTROL => format!("{}", variant.variant_type),
-            VariantType::EXPERIMENTAL => format!("Variant-{}", i),
-        };
-        columns.push(Column::new(name.clone(), None, |value: &str, _| {
-            view! { <span>{value.to_string()}</span> }.into_view()
-        }));
-        for (config, value) in variant.overrides.iter() {
-            match row_map.get_mut(config) {
-                Some(c) => {
-                    c.insert(name.clone(), value.clone());
-                }
-                None => {
-                    let mut m = Map::new();
-                    m.insert("Config Key".into(), Value::String(config.clone()));
-                    m.insert(name.clone(), value.clone());
-                    row_map.insert(config, m);
-                }
-            }
-        }
-    }
-    let rows = row_map.into_values().collect();
-    Ok((rows, columns))
-}
diff --git a/crates/frontend/src/components/table.rs b/crates/frontend/src/components/table.rs
index 59d9f9e9..1f4f8715 100644
--- a/crates/frontend/src/components/table.rs
+++ b/crates/frontend/src/components/table.rs
@@ -1,26 +1,11 @@
 pub mod types;
 
-use crate::components::pagination::Pagination;
+use crate::{components::pagination::Pagination, schema::HtmlDisplay};
 
 use self::types::{Column, TablePaginationProps};
 use leptos::*;
 use serde_json::{json, Map, Value};
 
-fn generate_table_row_str(row: &Value) -> String {
-    match row {
-        Value::Null => "null".to_string(),
-        Value::String(rstr) => rstr.to_string(),
-        Value::Number(rnum) => rnum.to_string(),
-        Value::Bool(rbool) => rbool.to_string(),
-        Value::Array(rarr) => rarr
-            .iter()
-            .map(generate_table_row_str)
-            .collect::<Vec<String>>()
-            .join(","),
-        Value::Object(robj) => json!(robj).to_string(),
-    }
-}
-
 #[component]
 pub fn table(
     key_column: String,
@@ -80,9 +65,8 @@ pub fn table(
                                         .filter(|column| !column.hidden)
                                         .map(|column| {
                                             let cname = &column.name;
-                                            let value: String = generate_table_row_str(
-                                                row.get(cname).unwrap_or(&Value::String("".to_string())),
-                                            );
+                                            let value: String =
+                                                row.get(cname).unwrap_or(&Value::String(String::new())).html_display();
                                             view! {
                                                 <td class=cell_class
                                                     .to_string()>{(column.formatter)(&value, row)}</td>