diff --git a/crates/frontend/src/api.rs b/crates/frontend/src/api.rs
index 421d3fc0..cc7e90f0 100644
--- a/crates/frontend/src/api.rs
+++ b/crates/frontend/src/api.rs
@@ -4,7 +4,7 @@ use superposition_types::Config;
 use crate::{
     types::{
         ConfigVersionListResponse, DefaultConfig, Dimension, ExperimentResponse,
-        ExperimentsResponse, FetchTypeTemplateResponse, FunctionResponse, ListFilters, TypeTemplate,
+        ExperimentsResponse, FetchTypeTemplateResponse, FunctionResponse, ListFilters, TypeTemplate, Context,
     },
     utils::{
         construct_request_headers, get_host, parse_json_response, request,
@@ -297,3 +297,23 @@ pub async fn fetch_type(
         .await
         .map_err(err_handler)
 }
+
+pub async fn fetch_context(
+    tenant: &str,
+    id: &str,
+) -> Result<Context, ServerFnError> {
+    let host = use_host_server();
+    let url = format!("{host}/context/{id}");
+    let err_handler = |e: String| ServerFnError::new(e.to_string());
+    let response = request::<()>(
+        url,
+        reqwest::Method::GET,
+        None,
+        construct_request_headers(&[("x-tenant", &tenant)]).map_err(err_handler)?,
+    )
+    .await
+    .map_err(err_handler)?;
+    parse_json_response::<Context>(response)
+        .await
+        .map_err(err_handler)
+}
diff --git a/crates/frontend/src/components.rs b/crates/frontend/src/components.rs
index 0be4071d..d9f43b8f 100644
--- a/crates/frontend/src/components.rs
+++ b/crates/frontend/src/components.rs
@@ -27,3 +27,4 @@ pub mod table;
 pub mod toast;
 pub mod type_template_form;
 pub mod variant_form;
+pub mod contextual_override_form;
diff --git a/crates/frontend/src/components/context_card.rs b/crates/frontend/src/components/context_card.rs
index e6104442..df3c15a0 100644
--- a/crates/frontend/src/components/context_card.rs
+++ b/crates/frontend/src/components/context_card.rs
@@ -1,4 +1,5 @@
 use leptos::*;
+use leptos_router::A;
 use serde_json::{Map, Value};
 use superposition_types::Context;
 
@@ -15,14 +16,6 @@ pub fn context_card(
     context: Context,
     overrides: Map<String, Value>,
     #[prop(default = true)] show_actions: bool,
-    #[prop(default=Callback::new(|_| {}))] handle_edit: Callback<
-        (Context, Map<String, Value>),
-        (),
-    >,
-    #[prop(default=Callback::new(|_| {}))] handle_clone: Callback<
-        (Context, Map<String, Value>),
-        (),
-    >,
     #[prop(default=Callback::new(|_| {}))] handle_delete: Callback<String, ()>,
 ) -> impl IntoView {
     let conditions: Conditions = (&context).try_into().unwrap_or_default();
@@ -38,10 +31,7 @@ pub fn context_card(
         })
         .collect::<Vec<Map<String, Value>>>();
 
-    // Clone context and overrides for use in event handlers
     let context_id = store_value(context.id.clone());
-    let context = store_value(context);
-    let overrides = store_value(overrides);
 
     let table_columns = vec![
         Column::default("KEY".to_string()),
@@ -68,21 +58,15 @@ pub fn context_card(
                 <Show when=move || actions_supported>
                     <div class="h-fit text-right space-x-4">
                         <Show when=move || !edit_unsupported>
-                            <i
-                                class="ri-pencil-line ri-lg text-blue-500 cursor-pointer"
-                                on:click=move |_| {
-                                    handle_edit.call((context.get_value(), overrides.get_value()));
-                                }
-                            >
-                            </i>
+                            <A href=format!("{}/update", context_id.get_value())>
+                                <i class="ri-pencil-line ri-lg text-blue-500 cursor-pointer"></i>
+                            </A>
 
+                            <A href=format!("new?clone_from={}", context_id.get_value())>
                             <i
                                 class="ri-file-copy-line ri-lg text-blue-500 cursor-pointer"
-                                on:click=move |_| {
-                                    handle_clone.call((context.get_value(), overrides.get_value()));
-                                }
-                            >
-                            </i>
+                            ></i>
+                            </A>
 
                         </Show>
                         <Show when=move || edit_unsupported>
@@ -96,8 +80,7 @@ pub fn context_card(
                                 let context_id = context_id.get_value();
                                 handle_delete.call(context_id);
                             }
-                        >
-                        </i>
+                        ></i>
 
                     </div>
                 </Show>
@@ -110,7 +93,6 @@ pub fn context_card(
 
             <div class="pl-5">
                 <ConditionComponent
-                    // Clone only once before reusing in multiple closures
                     conditions=conditions
                     id=context_id.get_value()
                     class="xl:w-[400px] h-fit"
diff --git a/crates/frontend/src/components/context_form.rs b/crates/frontend/src/components/context_form.rs
index 45e0d420..8015cdab 100644
--- a/crates/frontend/src/components/context_form.rs
+++ b/crates/frontend/src/components/context_form.rs
@@ -141,7 +141,7 @@ pub fn context_form<NF>(
     #[prop(default = false)] disabled: bool,
     #[prop(default = false)] resolve_mode: bool,
     #[prop(default = String::new())] heading_sub_text: String,
-    #[prop(default = DropdownDirection::Right)] dropdown_direction: DropdownDirection,
+    #[prop(default = DropdownDirection::Left)] dropdown_direction: DropdownDirection,
 ) -> impl IntoView
 where
     NF: Fn(Conditions) + 'static,
@@ -255,6 +255,7 @@ where
                             <Dropdown
                                 dropdown_icon="ri-add-line".to_string()
                                 dropdown_text="Add Context".to_string()
+                                dropdown_width="w-fit"
                                 dropdown_btn_type=DropdownBtnType::Link
                                 dropdown_options=dimensions
                                 disabled=disabled
@@ -270,9 +271,10 @@ where
                     <Show when=move || context_rs.get().is_empty()>
                         <div class="flex justify-center">
                             <Dropdown
-                                dropdown_width="w-80"
+                                dropdown_width="w-fit"
                                 dropdown_icon="ri-add-line".to_string()
                                 dropdown_text="Add Context".to_string()
+                                dropdown_btn_type=DropdownBtnType::Link
                                 dropdown_direction
                                 dropdown_options=dimensions.get_value()
                                 disabled=disabled
diff --git a/crates/frontend/src/components/contextual_override_form.rs b/crates/frontend/src/components/contextual_override_form.rs
new file mode 100644
index 00000000..7c408d61
--- /dev/null
+++ b/crates/frontend/src/components/contextual_override_form.rs
@@ -0,0 +1,104 @@
+use leptos::*;
+use serde_json::{Map, Value};
+
+use crate::{
+    components::{
+        button::Button,
+        context_form::{
+            utils::{create_context, update_context},
+            ContextForm,
+        },
+        override_form::OverrideForm,
+    },
+    logic::Conditions,
+    types::{DefaultConfig, Dimension},
+};
+
+#[component]
+pub fn contextual_override_form(
+    edit: bool,
+    #[prop(into, default=String::new())] class: String,
+    #[prop(into, default=String::new())] width: String,
+    context: Conditions,
+    overrides: Vec<(String, Value)>,
+    dimensions: Vec<Dimension>,
+    default_config: Vec<DefaultConfig>,
+    on_submit: Callback<(), ()>,
+) -> impl IntoView {
+    let tenant_rs = use_context::<Signal<String>>().unwrap();
+    let (context, set_context) = create_signal(context);
+    let (overrides, set_overrides) = create_signal(overrides);
+    let dimensions = StoredValue::new(dimensions);
+    let (req_inprogess_rs, req_inprogress_ws) = create_signal(false);
+
+    let on_submit = move |_| {
+        req_inprogress_ws.set(true);
+        spawn_local(async move {
+            let f_context = context.get();
+            let f_overrides = overrides.get();
+            let result = if edit {
+                update_context(
+                    tenant_rs.get().clone(),
+                    Map::from_iter(f_overrides),
+                    f_context,
+                )
+                .await
+            } else {
+                create_context(
+                    tenant_rs.get().clone(),
+                    Map::from_iter(f_overrides),
+                    f_context,
+                )
+                .await
+            };
+
+            match result {
+                Ok(_) => {
+                    logging::log!("Context and overrides submitted successfully");
+                    on_submit.call(());
+                }
+                Err(e) => {
+                    logging::log!("Error submitting context and overrides: {:?}", e);
+                }
+            }
+            req_inprogress_ws.set(false);
+        });
+    };
+    view! {
+        <div class=format!("relative {}", width)>
+            <div class=format!("flex flex-col gap-8 pb-20 {}", class)>
+                <ContextForm
+                    dimensions=dimensions.get_value()
+                    context=context.get_untracked()
+                    handle_change=move |new_context| {
+                        set_context
+                            .update(|value| {
+                                *value = new_context;
+                            });
+                    }
+
+                    disabled=edit
+                />
+                <OverrideForm
+                    overrides=overrides.get_untracked()
+                    default_config=default_config
+                    handle_change=move |new_overrides| {
+                        set_overrides
+                            .update(|value| {
+                                *value = new_overrides;
+                            });
+                    }
+                />
+            </div>
+            <div class="w-full absolute bottom-0 right-0 p-4 flex justify-end items-end bg-white border-r border-b border-l rounded-2xl rounded-t-none">
+                {move || {
+                    let loading = req_inprogess_rs.get();
+                    view! {
+                        <Button text="Submit".to_string() on_click=on_submit.clone() loading />
+                    }
+                }}
+
+            </div>
+        </div>
+    }
+}
diff --git a/crates/frontend/src/components/dropdown.rs b/crates/frontend/src/components/dropdown.rs
index a5efd2a2..abd5ae22 100644
--- a/crates/frontend/src/components/dropdown.rs
+++ b/crates/frontend/src/components/dropdown.rs
@@ -61,7 +61,7 @@ where
     view! {
         <div
             id=id
-            class=format!("dropdown {}", dropdown_width)
+            class=format!("relative dropdown {}", dropdown_width)
             class=("disable-click", disabled)
             class=("dropdown-right", dropdown_direction == DropdownDirection::Right)
             class=("dropdown-left", dropdown_direction == DropdownDirection::Left)
@@ -83,9 +83,7 @@ where
             </label>
             <ul
                 tabindex="0"
-                class=format!(
-                    "w-full min-w-[16rem] dropdown-content z-[1] menu flex-nowrap p-2 shadow bg-base-100 rounded-box max-h-96 overflow-y-scroll overflow-x-hidden",
-                )
+                class="w-64 dropdown-content z-[1] menu flex-nowrap p-2 shadow bg-base-100 rounded-box max-h-96 overflow-y-scroll overflow-x-hidden"
             >
 
                 {if searchable {
diff --git a/crates/frontend/src/components/experiment_form.rs b/crates/frontend/src/components/experiment_form.rs
index 292a424c..d8aa58e4 100644
--- a/crates/frontend/src/components/experiment_form.rs
+++ b/crates/frontend/src/components/experiment_form.rs
@@ -4,6 +4,7 @@ pub mod utils;
 use self::utils::{create_experiment, update_experiment};
 use crate::components::button::Button;
 use crate::components::context_form::ContextForm;
+use crate::components::dropdown::DropdownDirection;
 use crate::components::variant_form::VariantForm;
 use crate::types::{DefaultConfig, Dimension, VariantFormT, VariantType};
 use leptos::*;
@@ -149,6 +150,7 @@ pub fn experiment_form(
                                 context=context
                                 handle_change=handle_context_form_change
                                 disabled=edit
+                                dropdown_direction=DropdownDirection::Down
                                 heading_sub_text=String::from(
                                     "Define rules under which this experiment would run",
                                 )
diff --git a/crates/frontend/src/components/override_form.rs b/crates/frontend/src/components/override_form.rs
index fe9e995e..5d0a1a8f 100644
--- a/crates/frontend/src/components/override_form.rs
+++ b/crates/frontend/src/components/override_form.rs
@@ -2,7 +2,7 @@ use std::collections::{HashMap, HashSet};
 
 use crate::{
     components::{
-        dropdown::{Dropdown, DropdownDirection},
+        dropdown::{Dropdown, DropdownDirection, DropdownBtnType},
         input::{Input, InputType},
     },
     schema::{EnumVariants, SchemaType},
@@ -58,8 +58,8 @@ fn override_input(
     view! {
         <div class="flex flex-col">
             <div class="form-control">
-                <label class="label justify-start font-mono text-sm gap-2">
-                    <span class="label-text font-bold text-gray-500">{key.get_value()} ":"</span>
+                <label class="label justify-start font-mono text-sm gap-2 w-full ">
+                    <span class="label-text font-bold text-gray-500 word-break-break">{key.get_value()} ":"</span>
                     <div class="flex gap-1">
                         <TypeBadge r#type=r#type.clone() />
                     </div>
@@ -177,96 +177,78 @@ where
     });
 
     view! {
-        <div class="pt-3">
-            <div class="form-control space-y-4">
-                <div class="flex items-center justify-between gap-4">
-                    <label class="label">
-                        <span class="label-text font-semibold text-base">Overrides</span>
-                    </label>
-                </div>
-                <div class="card w-full bg-slate-50">
-                    <div class="card-body gap-4">
-                        <Show when=move || { overrides.get().is_empty() && show_add_override }>
-                            <div class="flex justify-center">
-                                <Dropdown
-                                    dropdown_direction=DropdownDirection::Left
-                                    dropdown_text=String::from("Add Override")
-                                    dropdown_icon=String::from("ri-add-line")
-                                    dropdown_options=default_config.get_value()
-                                    on_select=handle_config_key_select
-                                />
-                            </div>
-                        </Show>
+        <div class="form-control w-full space-y-4">
+            <div class="flex items-center justify-between gap-4">
+                <label class="label">
+                    <span class="label-text font-semibold text-base">Overrides</span>
+                </label>
+            </div>
+            <div class="card w-full bg-slate-50">
+                <div class="card-body gap-4">
+                    <Show when=move || { overrides.get().is_empty() && show_add_override }>
+                        <div class="flex justify-center">
+                            <Dropdown
+                                dropdown_btn_type=DropdownBtnType::Link
+                                dropdown_direction=DropdownDirection::Left
+                                dropdown_text=String::from("Add Override")
+                                dropdown_icon=String::from("ri-add-line")
+                                dropdown_options=default_config.get_value()
+                                on_select=handle_config_key_select
+                            />
+                        </div>
+                    </Show>
 
-                        <Show when=move || overrides.get().is_empty()>
-                            <div class="p-4 text-gray-400 flex flex-col justify-center items-center">
-                                <div>
-                                    <i class="ri-add-circle-line text-xl"></i>
-                                </div>
-                                <div>
-                                    <span class="text-semibold text-sm">Add Override</span>
-                                </div>
-                            </div>
-                        </Show>
-                        <For
-                            each=move || {
-                                overrides.get().into_iter().collect::<Vec<(String, Value)>>()
+                    <For
+                        each=move || {
+                            overrides.get().into_iter().collect::<Vec<(String, Value)>>()
+                        }
+
+                        key=|(config_key, _)| config_key.to_string()
+                        children=move |(config_key, config_value)| {
+                            let schema_type = SchemaType::try_from(
+                                default_config_map.get(&config_key.clone()).unwrap().schema.clone(),
+                            );
+                            let enum_variants = EnumVariants::try_from(
+                                default_config_map.get(&config_key.clone()).unwrap().schema.clone(),
+                            );
+                            view! {
+                                <OverrideInput
+                                    id=format!("{}-{}", id.get_value(), config_key)
+                                    key=config_key
+                                    value=config_value
+                                    r#type=schema_type.ok()
+                                    variants=enum_variants.ok()
+                                    on_change=on_change
+                                    on_remove=on_remove
+                                    allow_remove=!disable_remove
+                                />
                             }
+                        }
+                    />
+
+                    <Show when=move || { !overrides.get().is_empty() && show_add_override }>
+                        <div class="mt-4">
 
-                            key=|(config_key, _)| config_key.to_string()
-                            children=move |(config_key, config_value)| {
-                                let schema_type = SchemaType::try_from(
-                                    default_config_map
-                                        .get(&config_key.clone())
-                                        .unwrap()
-                                        .schema
-                                        .clone(),
-                                );
-                                let enum_variants = EnumVariants::try_from(
-                                    default_config_map
-                                        .get(&config_key.clone())
-                                        .unwrap()
-                                        .schema
-                                        .clone(),
-                                );
+                            {move || {
+                                let unused_config_keys = default_config
+                                    .get_value()
+                                    .into_iter()
+                                    .filter(|config| !override_keys.get().contains(&config.key))
+                                    .collect::<Vec<DefaultConfig>>();
                                 view! {
-                                    <OverrideInput
-                                        id=format!("{}-{}", id.get_value(), config_key)
-                                        key=config_key
-                                        value=config_value
-                                        r#type=schema_type.ok()
-                                        variants=enum_variants.ok()
-                                        on_change=on_change
-                                        on_remove=on_remove
-                                        allow_remove=!disable_remove
+                                    <Dropdown
+                                        dropdown_btn_type=DropdownBtnType::Link
+                                        dropdown_direction=DropdownDirection::Top
+                                        dropdown_text=String::from("Add Override")
+                                        dropdown_icon=String::from("ri-add-line")
+                                        dropdown_options=unused_config_keys.clone()
+                                        on_select=handle_config_key_select
                                     />
                                 }
-                            }
-                        />
+                            }}
 
-                        <Show when=move || { !overrides.get().is_empty() && show_add_override }>
-                            <div class="mt-4">
-
-                                {move || {
-                                    let unused_config_keys = default_config
-                                        .get_value()
-                                        .into_iter()
-                                        .filter(|config| !override_keys.get().contains(&config.key))
-                                        .collect::<Vec<DefaultConfig>>();
-                                    view! {
-                                        <Dropdown
-                                            dropdown_direction=DropdownDirection::Down
-                                            dropdown_text=String::from("Add Override")
-                                            dropdown_icon=String::from("ri-add-line")
-                                            dropdown_options=unused_config_keys.clone()
-                                            on_select=handle_config_key_select
-                                        />
-                                    }
-                                }}
-
-                            </div>
-                        </Show>
-                    </div>
+                        </div>
+                    </Show>
                 </div>
             </div>
         </div>
diff --git a/crates/frontend/src/hoc/nav_breadcrums.rs b/crates/frontend/src/hoc/nav_breadcrums.rs
index 6f1c8f7c..7249d345 100644
--- a/crates/frontend/src/hoc/nav_breadcrums.rs
+++ b/crates/frontend/src/hoc/nav_breadcrums.rs
@@ -118,6 +118,31 @@ static BREADCRUMB_STORE: Lazy<HashMap<String, RouteMetadata>> = Lazy::new(|| {
             dynamic_label: None,
         },
     );
+
+    routes.insert(
+        "/overrides/new".to_string(),
+        RouteMetadata {
+            default_label: "New".to_string(),
+            parent: Some("/overrides".to_string()),
+            icon: None,
+            dynamic_label: None,
+        },
+    );
+
+    routes.insert(
+        "/overrides/:id/update".to_string(),
+        RouteMetadata {
+            default_label: "Update".to_string(),
+            parent: Some("/overrides".to_string()),
+            icon: None,
+            dynamic_label: Some(Box::new(Arc::new(|params| {
+                params
+                    .get("id")
+                    .map(|name| format!("Update {}", name))
+            }))),
+        },
+    );
+
     routes.insert(
         "/resolve".to_string(),
         RouteMetadata {
diff --git a/crates/frontend/src/pages.rs b/crates/frontend/src/pages.rs
index 1e022c27..8dd47e1c 100644
--- a/crates/frontend/src/pages.rs
+++ b/crates/frontend/src/pages.rs
@@ -12,3 +12,5 @@ pub mod not_found;
 pub mod new_experiment;
 pub mod new_template_type;
 pub mod update_template_type;
+pub mod new_contextual_override;
+pub mod update_contextual_override;
diff --git a/crates/frontend/src/pages/context_override.rs b/crates/frontend/src/pages/context_override.rs
index 90b4823a..d5c59779 100644
--- a/crates/frontend/src/pages/context_override.rs
+++ b/crates/frontend/src/pages/context_override.rs
@@ -1,25 +1,21 @@
 use futures::join;
 use leptos::*;
+use leptos_router::A;
 use serde::{Deserialize, Serialize};
 use serde_json::{Map, Value};
 use superposition_types::{Config, Context};
 
 use crate::api::fetch_config;
 use crate::api::{delete_context, fetch_default_config, fetch_dimensions};
-use crate::components::alert::AlertType;
 use crate::components::button::Button;
 use crate::components::context_card::ContextCard;
 use crate::components::context_form::utils::{create_context, update_context};
 use crate::components::context_form::ContextForm;
 use crate::components::delete_modal::DeleteModal;
-use crate::components::drawer::{close_drawer, open_drawer, Drawer, DrawerBtn};
 use crate::components::override_form::OverrideForm;
 use crate::components::skeleton::{Skeleton, SkeletonVariant};
-use crate::logic::{Condition, Conditions, Operator};
-use crate::providers::alert_provider::enqueue_alert;
+use crate::logic::Conditions;
 use crate::providers::condition_collapse_provider::ConditionCollapseProvider;
-use crate::providers::editor_provider::EditorProvider;
-use crate::schema::SchemaType;
 use crate::types::{DefaultConfig, Dimension};
 
 #[derive(Clone, Debug, Default)]
@@ -35,12 +31,6 @@ struct PageResource {
     default_config: Vec<DefaultConfig>,
 }
 
-#[derive(Debug, Clone)]
-enum FormMode {
-    Edit,
-    Create,
-}
-
 #[component]
 fn form(
     context: Conditions,
@@ -50,7 +40,7 @@ fn form(
     default_config: Vec<DefaultConfig>,
     handle_submit: Callback<(), ()>,
 ) -> impl IntoView {
-    let tenant_rs = use_context::<ReadSignal<String>>().unwrap();
+    let tenant_rs = use_context::<Signal<String>>().unwrap();
     let (context, set_context) = create_signal(context);
     let (overrides, set_overrides) = create_signal(overrides);
     let dimensions = StoredValue::new(dimensions);
@@ -135,8 +125,6 @@ pub fn context_override() -> impl IntoView {
     // TODO: check if all use_context try to get Signal<String>
     let tenant_rs = use_context::<Signal<String>>().unwrap();
 
-    let (selected_context_rs, selected_context_ws) = create_signal::<Option<Data>>(None);
-    let (form_mode, set_form_mode) = create_signal::<Option<FormMode>>(None);
     let (modal_visible, set_modal_visible) = create_signal(false);
     let (delete_id, set_delete_id) = create_signal::<Option<String>>(None);
 
@@ -160,72 +148,6 @@ pub fn context_override() -> impl IntoView {
         },
     );
 
-    let on_create_context_click = Callback::new(move |_| {
-        set_form_mode.set(Some(FormMode::Create));
-        let PageResource { dimensions, .. } = page_resource.get().unwrap_or_default();
-        let mut default_ctx: Conditions = Conditions(vec![]);
-        for dim in dimensions.iter().filter(|v| v.mandatory) {
-            let r#type = SchemaType::try_from(dim.schema.clone());
-            if let Err(_) = r#type {
-                //TODO emit an alert and return
-                return;
-            }
-
-            let condition = Condition::try_from((
-                Operator::Is,
-                dim.dimension.clone(),
-                r#type.unwrap(),
-            ));
-            if let Err(_) = condition {
-                //TODO emit and alert and return
-                return;
-            }
-
-            default_ctx.push(condition.unwrap());
-        }
-
-        selected_context_ws.set(Some(Data {
-            context: default_ctx,
-            overrides: vec![],
-        }));
-        open_drawer("context_and_override_drawer");
-    });
-
-    let on_submit = Callback::new(move |_| {
-        close_drawer("context_and_override_drawer");
-        set_form_mode.set(None);
-        selected_context_ws.set(None);
-        page_resource.refetch();
-    });
-
-    let on_context_edit = Callback::new(move |data: (Context, Map<String, Value>)| {
-        let (context, overrides) = data;
-        let conditions =
-            Conditions::from_context_json(&context.condition.into()).unwrap();
-
-        selected_context_ws.set(Some(Data {
-            context: conditions,
-            overrides: overrides.into_iter().collect::<Vec<(String, Value)>>(),
-        }));
-        set_form_mode.set(Some(FormMode::Edit));
-
-        open_drawer("context_and_override_drawer");
-    });
-
-    let on_context_clone = Callback::new(move |data: (Context, Map<String, Value>)| {
-        let (context, overrides) = data;
-        let conditions =
-            Conditions::from_context_json(&context.condition.into()).unwrap();
-
-        selected_context_ws.set(Some(Data {
-            context: conditions,
-            overrides: overrides.into_iter().collect::<Vec<(String, Value)>>(),
-        }));
-        set_form_mode.set(Some(FormMode::Create));
-
-        open_drawer("context_and_override_drawer");
-    });
-
     let on_context_delete = Callback::new(move |id: String| {
         set_delete_id.set(Some(id.clone()));
         set_modal_visible.set(true);
@@ -252,152 +174,81 @@ pub fn context_override() -> impl IntoView {
     });
 
     view! {
-            <div class="flex justify-between">
-                <h2 class="card-title">Overrides</h2>
-                <DrawerBtn
-                    drawer_id="context_and_override_drawer".to_string()
-                    on_click=on_create_context_click
-                >
-                    Create Override
-                    <i class="ri-edit-2-line ml-2"></i>
-                </DrawerBtn>
-            </div>
-
-            <Suspense fallback=move || {
-                view! { <Skeleton variant=SkeletonVariant::Block/> }
-            }>
-                <div class="space-y-6">
+        <div class="flex justify-between">
+            <h2 class="card-title">Overrides</h2>
 
-                    {move || {
-                        let PageResource { config: _, dimensions, default_config } = page_resource
-                            .get()
-                            .unwrap_or_default();
-                        let data = selected_context_rs.get();
-                        let drawer_header = match form_mode.get() {
-                            Some(FormMode::Edit) => "Update Overrides",
-                            Some(FormMode::Create) => "Create Overrides",
-                            None => "",
-                        };
-                        view! {
-                            <Drawer
-                                id="context_and_override_drawer".to_string()
-                                header=drawer_header
-                                handle_close=move || {
-                                    close_drawer("context_and_override_drawer");
-                                    set_form_mode.set(None);
-                                    selected_context_ws.set(None);
-                                }
-                            >
-
-                                <EditorProvider>
-                                    {match (form_mode.get_untracked(), data) {
-                                        (Some(FormMode::Edit), Some(data)) => {
-                                            view! {
-                                                <Form
-                                                    context=data.context
-                                                    overrides=data.overrides
-                                                    dimensions=dimensions
-                                                    default_config=default_config
-                                                    handle_submit=on_submit
-                                                    edit=true
-                                                />
-                                            }
-                                                .into_view()
-                                        }
-                                        (Some(FormMode::Create), data) => {
-                                            let Data { context, overrides } = data.unwrap_or_default();
-                                            view! {
-                                                <Form
-                                                    context=context
-                                                    overrides=overrides
-                                                    dimensions=dimensions
-                                                    default_config=default_config
-                                                    handle_submit=on_submit
-                                                    edit=false
-                                                />
-                                            }
-                                                .into_view()
-                                        }
-                                        (Some(FormMode::Edit), None) => {
-                                            enqueue_alert(
-                                                String::from("Something went wrong, failed to load form"),
-                                                AlertType::Error,
-                                                5000,
-                                            );
-                                            view! {}.into_view()
-                                        }
-                                        (None, _) => view! {}.into_view(),
-                                    }}
+            <A href="new">
+                <Button text="Create Override" on_click=move |_| {} />
+            </A>
+        </div>
 
-                                </EditorProvider>
-                            </Drawer>
-                        }
-                    }}
-                    {move || {
-                        let config = page_resource.get().map(|v| v.config).unwrap_or_default();
-                        let ctx_n_overrides = config
-                            .contexts
-                            .into_iter()
-                            .map(|context| {
-                                let overrides = context
-                                    .override_with_keys
-                                    .iter()
-                                    .flat_map(|id| {
-                                        config
-                                            .overrides
-                                            .get(id)
-                                            .cloned()
-                                            .map_or(Map::new(), |overrides| overrides.into())
-                                            .into_iter()
-                                            .collect::<Vec<(String, Value)>>()
-                                    })
-                                    .collect::<Map<String, Value>>();
-                                (context.clone(), overrides)
-                            })
-                            .collect::<Vec<(Context, Map<String, Value>)>>();
-                        let is_empty = ctx_n_overrides.is_empty();
-                        view! {
-                            <Show when=move || is_empty>
-                                <div class="flex-row" style="margin-top:20rem;">
-                                    <div class="flex justify-center text-gray-400">
-                                        <i class="ri-file-add-line ri-xl"></i>
-                                    </div>
-                                    <div class="flex mt-4 font-semibold items-center text-gray-400 text-xl justify-center">
-                                        "Start with creating an override"
-                                    </div>
+        <Suspense fallback=move || {
+            view! { <Skeleton variant=SkeletonVariant::Block /> }
+        }>
+            <div class="space-y-6">
+                {move || {
+                    let config = page_resource.get().map(|v| v.config).unwrap_or_default();
+                    let ctx_n_overrides = config
+                        .contexts
+                        .into_iter()
+                        .map(|context| {
+                            let overrides = context
+                                .override_with_keys
+                                .iter()
+                                .flat_map(|id| {
+                                    config
+                                        .overrides
+                                        .get(id)
+                                        .cloned()
+                                        .map_or(Map::new(), |overrides| overrides.into())
+                                        .into_iter()
+                                        .collect::<Vec<(String, Value)>>()
+                                })
+                                .collect::<Map<String, Value>>();
+                            (context.clone(), overrides)
+                        })
+                        .collect::<Vec<(Context, Map<String, Value>)>>();
+                    let is_empty = ctx_n_overrides.is_empty();
+                    view! {
+                        <Show when=move || is_empty>
+                            <div class="flex-row" style="margin-top:20rem;">
+                                <div class="flex justify-center text-gray-400">
+                                    <i class="ri-file-add-line ri-xl"></i>
                                 </div>
-                            </Show>
-                            <ConditionCollapseProvider>
-
-                                {ctx_n_overrides
-                                    .into_iter()
-                                    .map(|(context, overrides)| {
-                                        view! {
-                                            <ContextCard
-                                                context=context
-                                                overrides=overrides
-                                                handle_edit=on_context_edit
-                                                handle_clone=on_context_clone
-                                                handle_delete=on_context_delete
-                                            />
-                                        }
-                                    })
-                                    .collect_view()}
-
-                            </ConditionCollapseProvider>
-                        }
-                    }}
+                                <div class="flex mt-4 font-semibold items-center text-gray-400 text-xl justify-center">
+                                    "Start with creating an override"
+                                </div>
+                            </div>
+                        </Show>
+                        <ConditionCollapseProvider>
+
+                            {ctx_n_overrides
+                                .into_iter()
+                                .map(|(context, overrides)| {
+                                    view! {
+                                        <ContextCard
+                                            context=context
+                                            overrides=overrides
+                                            handle_delete=on_context_delete
+                                        />
+                                    }
+                                })
+                                .collect_view()}
+
+                        </ConditionCollapseProvider>
+                    }
+                }}
 
-                </div>
+            </div>
 
-                <DeleteModal
-                    modal_visible=modal_visible
-                    confirm_delete=on_delete_confirm
-                    set_modal_visible=set_modal_visible
-                    header_text="Are you sure you want to delete this context? Action is irreversible."
-                        .to_string()
-                />
+            <DeleteModal
+                modal_visible=modal_visible
+                confirm_delete=on_delete_confirm
+                set_modal_visible=set_modal_visible
+                header_text="Are you sure you want to delete this context? Action is irreversible."
+                    .to_string()
+            />
 
-            </Suspense>
+        </Suspense>
     }
 }
diff --git a/crates/frontend/src/pages/new_contextual_override.rs b/crates/frontend/src/pages/new_contextual_override.rs
new file mode 100644
index 00000000..01e90f6e
--- /dev/null
+++ b/crates/frontend/src/pages/new_contextual_override.rs
@@ -0,0 +1,120 @@
+use futures::join;
+
+use leptos::*;
+use leptos_router::{use_navigate, use_query_map, ParamsMap};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+
+use crate::{
+    api::{fetch_context, fetch_default_config, fetch_dimensions},
+    components::{
+        contextual_override_form::ContextualOverrideForm,
+        skeleton::{Skeleton, SkeletonVariant},
+    },
+    logic::Conditions,
+    providers::editor_provider::EditorProvider,
+    types::{DefaultConfig, Dimension},
+    utils::{add_prefix, use_service_prefix},
+};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct PageResource {
+    dimensions: Vec<Dimension>,
+    default_config: Vec<DefaultConfig>,
+    condition: Option<Conditions>,
+    overrides: Option<Vec<(String, Value)>>,
+}
+
+#[component]
+pub fn new_contextual_override() -> impl IntoView {
+    let tenant_rs = use_context::<Signal<String>>().unwrap();
+    let navigate = use_navigate();
+    let service_prefix = use_service_prefix();
+    let query_map = use_query_map();
+
+    let page_resource: Resource<(String, ParamsMap), PageResource> =
+        create_blocking_resource(
+            move || (tenant_rs.get(), query_map.get()),
+            |(tenant, query_map)| async move {
+                let context_id = query_map.get("clone_from");
+                let context = if let Some(id) = context_id {
+                    let fut_result = fetch_context(&tenant, &id).await;
+                    if fut_result.is_err() {
+                        // enqueue error, ask to reload
+                    }
+                    fut_result.ok()
+                } else {
+                    None
+                };
+                let dimensions_future = fetch_dimensions(&tenant);
+                let config_future = fetch_default_config(&tenant);
+
+                let (dimensions_result, config_result) =
+                    join!(dimensions_future, config_future);
+
+                if dimensions_result.is_err() || config_result.is_err() {
+                    // enqueue error, ask to reload
+                }
+
+                // Construct the combined result, handling errors as needed
+                PageResource {
+                    dimensions: dimensions_result
+                        .unwrap_or(vec![])
+                        .into_iter()
+                        .filter(|d| d.dimension != "variantIds")
+                        .collect(),
+                    default_config: config_result.unwrap_or(vec![]),
+                    condition: context
+                        .as_ref()
+                        .and_then(|v| Conditions::from_context_json(&v.value).ok()),
+                    overrides: context.map(|v| {
+                        v.override_.into_iter().collect::<Vec<(String, Value)>>()
+                    }),
+                }
+            },
+        );
+
+    let on_submit = Callback::new(move |_| {
+        let url_prefix = add_prefix("", &service_prefix);
+        let tenant = tenant_rs.get();
+        navigate(
+            format!("{url_prefix}/admin/{tenant}/overrides").as_str(),
+            Default::default(),
+        );
+    });
+
+    view! {
+        <Suspense fallback=move || {
+            view! { <Skeleton variant=SkeletonVariant::DetailPage /> }
+        }>
+            {move || {
+                let resources = page_resource.get();
+                if resources.is_none() {
+                    return view! { <p>"Reload"</p> }.into_view();
+                }
+                let PageResource { dimensions, default_config, condition, overrides } = resources
+                    .unwrap();
+                let (condition, overrides) = match (condition, overrides) {
+                    (Some(condition), Some(overrides)) => (condition, overrides),
+                    _ => (Conditions::default(), vec![]),
+                };
+                view! {
+                    <EditorProvider>
+                        <ContextualOverrideForm
+                            edit=false
+                            context=condition
+                            overrides=overrides
+                            width="w-full xl:w-[60%]"
+                            class="h-main-content p-8 rounded-2xl border bg-white overflow-y-auto mx-auto"
+                            on_submit
+                            dimensions
+                            default_config
+                        />
+                    </EditorProvider>
+                }
+            }}
+        </Suspense>
+    }
+}
+/***
+ */
diff --git a/crates/frontend/src/pages/new_template_type.rs b/crates/frontend/src/pages/new_template_type.rs
index 3db18b62..75c45c2e 100644
--- a/crates/frontend/src/pages/new_template_type.rs
+++ b/crates/frontend/src/pages/new_template_type.rs
@@ -6,7 +6,7 @@ use crate::components::type_template_form::TypeTemplateForm;
 pub fn new_template_type() -> impl IntoView {
     view! {
         <TypeTemplateForm
-            class="mx-auto w-1/2 h-main-content p-8 rounded-2xl border bg-white overflow-y-auto"
+            class="w-1/2 h-main-content p-8 rounded-2xl border bg-white overflow-y-auto"
             handle_submit=move || {}
         />
     }
diff --git a/crates/frontend/src/pages/update_contextual_override.rs b/crates/frontend/src/pages/update_contextual_override.rs
new file mode 100644
index 00000000..e86183e0
--- /dev/null
+++ b/crates/frontend/src/pages/update_contextual_override.rs
@@ -0,0 +1,115 @@
+use futures::join;
+
+use leptos::*;
+use leptos_router::{use_navigate, use_params_map, ParamsMap};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+
+use crate::{
+    api::{fetch_context, fetch_default_config, fetch_dimensions},
+    components::{
+        contextual_override_form::ContextualOverrideForm,
+        skeleton::{Skeleton, SkeletonVariant},
+    },
+    logic::Conditions,
+    providers::editor_provider::EditorProvider,
+    types::{Context, DefaultConfig, Dimension},
+    utils::{add_prefix, use_service_prefix},
+};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct PageResource {
+    dimensions: Vec<Dimension>,
+    default_config: Vec<DefaultConfig>,
+    condition: Conditions,
+    overrides: Vec<(String, Value)>,
+}
+
+#[component]
+pub fn update_contextual_override() -> impl IntoView {
+    let tenant_rs = use_context::<Signal<String>>().unwrap();
+    let navigate = use_navigate();
+    let path_params = use_params_map();
+    let service_prefix = use_service_prefix();
+
+    let page_resource: Resource<(String, ParamsMap), PageResource> =
+        create_blocking_resource(
+            move || (tenant_rs.get(), path_params.get()),
+            |(tenant, params)| async move {
+                let id = params.get("id");
+
+                if id.is_none() {
+                    // enqueue error
+                }
+
+                let dimensions_future = fetch_dimensions(&tenant);
+                let config_future = fetch_default_config(&tenant);
+                let context_future = fetch_context(&tenant, &id.unwrap());
+
+                let (dimensions_result, config_result, context_result) =
+                    join!(dimensions_future, config_future, context_future);
+
+                if dimensions_result.is_err()
+                    || config_result.is_err()
+                    || context_result.is_err()
+                {
+                    // enqueue error, ask to reload
+                }
+
+                let Context {
+                    value, override_, ..
+                } = context_result.unwrap();
+
+                // Construct the combined result, handling errors as needed
+                PageResource {
+                    dimensions: dimensions_result
+                        .unwrap_or(vec![])
+                        .into_iter()
+                        .filter(|d| d.dimension != "variantIds")
+                        .collect(),
+                    default_config: config_result.unwrap_or(vec![]),
+                    condition: Conditions::from_context_json(&value).unwrap_or_default(),
+                    overrides: override_.into_iter().collect::<Vec<(String, Value)>>(),
+                }
+            },
+        );
+
+    let on_submit = Callback::new(move |_| {
+        let url_prefix = add_prefix("", &service_prefix);
+        let tenant = tenant_rs.get();
+        navigate(
+            format!("{url_prefix}/admin/{tenant}/overrides").as_str(),
+            Default::default(),
+        );
+    });
+
+    view! {
+        <Suspense fallback=move || {
+            view! { <Skeleton variant=SkeletonVariant::DetailPage /> }
+        }>
+            {move || {
+                let resources = page_resource.get();
+                if resources.is_none() {
+                    return view! { <p>"Reload"</p> }.into_view();
+                }
+                let PageResource { dimensions, default_config, condition, overrides } = resources
+                    .unwrap();
+                view! {
+                    <EditorProvider>
+                        <ContextualOverrideForm
+                            edit=true
+                            context=condition
+                            overrides=overrides
+                            width="w-[60%]"
+                            class="h-main-content p-8 rounded-2xl border bg-white overflow-y-auto mx-auto"
+                            on_submit
+                            dimensions
+                            default_config
+                        />
+                    </EditorProvider>
+                }
+                    .into_view()
+            }}
+        </Suspense>
+    }
+}
diff --git a/crates/frontend/src/routes.rs b/crates/frontend/src/routes.rs
index 0cd0e4db..e9b33e6e 100644
--- a/crates/frontend/src/routes.rs
+++ b/crates/frontend/src/routes.rs
@@ -19,7 +19,7 @@ use crate::{
         new_experiment::NewExperiment,
         new_template_type::NewTemplateType,
         template_types::TypesPage,
-        update_template_type::UpdateTemplateType,
+        update_template_type::UpdateTemplateType, new_contextual_override::NewContextualOverride, update_contextual_override::UpdateContextualOverride,
     },
 };
 
@@ -200,6 +200,28 @@ pub fn app_routes() -> impl IntoView {
                     }
                 }
             />
+            <Route
+                ssr=SsrMode::Async
+                path="/overrides/new"
+                view=move || {
+                    view! {
+                        <Page>
+                            <NewContextualOverride />
+                        </Page>
+                    }
+                }
+            />
+            <Route
+                ssr=SsrMode::Async
+                path="/overrides/:id/update"
+                view=move || {
+                    view! {
+                        <Page>
+                            <UpdateContextualOverride />
+                        </Page>
+                    }
+                }
+            />
 
             <Route
                 ssr=SsrMode::Async
diff --git a/crates/frontend/src/types.rs b/crates/frontend/src/types.rs
index 30bfd6f0..4da24407 100644
--- a/crates/frontend/src/types.rs
+++ b/crates/frontend/src/types.rs
@@ -225,6 +225,21 @@ impl From<ExperimentResponse> for Experiment {
 
 /*************************** Context-Override types ********************************/
 
+
+#[derive(Clone, Serialize, Deserialize, Debug, Default)]
+pub struct Context {
+    pub id: String,
+    pub value: Map<String, Value>,
+    pub override_id: String,
+    pub created_at: DateTime<Utc>,
+    pub created_by: String,
+    pub priority: i32,
+    #[serde(rename(deserialize = "override"))]
+    pub override_: Map<String, Value>,
+    pub last_modified_at: NaiveDateTime,
+    pub last_modified_by: String,
+}
+
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct Dimension {
     pub dimension: String,