diff --git a/crates/context_aware_config/src/api/type_templates/handlers.rs b/crates/context_aware_config/src/api/type_templates/handlers.rs
index 0e1d3397..70835af8 100644
--- a/crates/context_aware_config/src/api/type_templates/handlers.rs
+++ b/crates/context_aware_config/src/api/type_templates/handlers.rs
@@ -22,6 +22,7 @@ pub fn endpoints() -> Scope {
         .service(create_type)
         .service(update_type)
         .service(delete_type)
+        .service(get_type)
 }
 
 #[post("")]
@@ -145,3 +146,17 @@ async fn list_types(
     "data": custom_types
     })))
 }
+
+#[get("/{type_name}")]
+async fn get_type(
+    db_conn: DbConnection,
+    path: Path<TypeTemplateName>,
+) -> superposition::Result<HttpResponse> {
+    let DbConnection(mut conn) = db_conn;
+    let type_name: String = path.into_inner().into();
+
+    let custom_type = dsl::type_templates
+        .find(type_name)
+        .get_result::<TypeTemplates>(&mut conn)?;
+    Ok(HttpResponse::Ok().json(custom_type))
+}
diff --git a/crates/frontend/src/api.rs b/crates/frontend/src/api.rs
index 88a9e2e7..421d3fc0 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,
+        ExperimentsResponse, FetchTypeTemplateResponse, FunctionResponse, ListFilters, TypeTemplate,
     },
     utils::{
         construct_request_headers, get_host, parse_json_response, request,
@@ -277,3 +277,23 @@ pub async fn fetch_types(
         .await
         .map_err(err_handler)
 }
+
+pub async fn fetch_type(
+    tenant: &str,
+    name: &str,
+) -> Result<TypeTemplate, ServerFnError> {
+    let host = use_host_server();
+    let url = format!("{host}/types/{name}");
+    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::<TypeTemplate>(response)
+        .await
+        .map_err(err_handler)
+}
diff --git a/crates/frontend/src/app.rs b/crates/frontend/src/app.rs
index 1b151072..dca4e892 100755
--- a/crates/frontend/src/app.rs
+++ b/crates/frontend/src/app.rs
@@ -6,12 +6,14 @@ use serde_json::json;
 use crate::hoc::layout::Layout;
 use crate::pages::config_version::ConfigVersion;
 use crate::pages::config_version_list::ConfigVersionList;
-use crate::pages::create_experiment::CreateExperiment;
 use crate::pages::dimensions::Dimensions;
 use crate::pages::experiment_list::ExperimentList;
 use crate::pages::function::{
     function_create::CreateFunctionView, function_list::FunctionList, FunctionPage,
 };
+use crate::pages::new_custom_types::NewCustomTypes;
+use crate::pages::new_experiment::NewExperiment;
+use crate::pages::update_custom_types::UpdateCustomTypes;
 use crate::pages::{
     context_override::ContextOverride, custom_types::TypesPage,
     default_config::DefaultConfig, experiment::ExperimentPage, home::Home,
@@ -105,6 +107,18 @@ pub fn app(app_envs: Envs) -> impl IntoView {
                                 }
                             />
 
+                            <Route
+                                ssr=SsrMode::Async
+                                path="/admin/:tenant/dimensions/new"
+                                view=move || {
+                                    view! {
+                                        <Layout>
+                                            <Dimensions />
+                                        </Layout>
+                                    }
+                                }
+                            />
+
                             <Route
                                 ssr=SsrMode::Async
                                 path="/admin/:tenant/function"
@@ -159,7 +173,7 @@ pub fn app(app_envs: Envs) -> impl IntoView {
                                 view=move || {
                                     view! {
                                         <Layout>
-                                            <CreateExperiment />
+                                            <NewExperiment />
                                         </Layout>
                                     }
                                 }
@@ -189,6 +203,18 @@ pub fn app(app_envs: Envs) -> impl IntoView {
                                 }
                             />
 
+                            <Route
+                                ssr=SsrMode::Async
+                                path="/admin/:tenant/default-config/new"
+                                view=move || {
+                                    view! {
+                                        <Layout>
+                                            <DefaultConfig />
+                                        </Layout>
+                                    }
+                                }
+                            />
+
                             <Route
                                 ssr=SsrMode::Async
                                 path="/admin/:tenant/overrides"
@@ -225,6 +251,30 @@ pub fn app(app_envs: Envs) -> impl IntoView {
                                 }
                             />
 
+                            <Route
+                                ssr=SsrMode::Async
+                                path="/admin/:tenant/types/new"
+                                view=move || {
+                                    view! {
+                                        <Layout>
+                                            <NewCustomTypes />
+                                        </Layout>
+                                    }
+                                }
+                            />
+
+                            <Route
+                                ssr=SsrMode::Async
+                                path="/admin/:tenant/types/:type_name/update"
+                                view=move || {
+                                    view! {
+                                        <Layout>
+                                            <UpdateCustomTypes />
+                                        </Layout>
+                                    }
+                                }
+                            />
+
                             <Route
                                 ssr=SsrMode::Async
                                 path="/admin/:tenant/config/versions"
diff --git a/crates/frontend/src/components/context_form.rs b/crates/frontend/src/components/context_form.rs
index 45446fab..45e0d420 100644
--- a/crates/frontend/src/components/context_form.rs
+++ b/crates/frontend/src/components/context_form.rs
@@ -32,17 +32,11 @@ pub fn condition_input(
     } = condition.get_value();
 
     view! {
-        <div class="flex gap-x-6">
-            <div class="form-control">
-                <label class="label font-mono text-sm">
-                    <span class="label-text">Dimension</span>
+        <div class="flex flex-wrap gap-y-2 gap-x-6">
+            <div class="form-control w-full">
+                <label class="label font-mono font-bold">
+                    <span class="label-text underline">{dimension}</span>
                 </label>
-                <input
-                    value=dimension.clone()
-                    class="input w-full max-w-xs"
-                    name="context-dimension-name"
-                    disabled=true
-                />
             </div>
             <div class="form-control w-20">
                 <label class="label font-medium font-mono text-sm">
@@ -80,7 +74,7 @@ pub fn condition_input(
                 </select>
 
             </div>
-            <div class="form-control">
+            <div class="form-control flex-1">
                 <label class="label font-mono text-sm">
                     <span class="label-text">Value</span>
                 </label>
@@ -104,6 +98,7 @@ pub fn condition_input(
                                             }
 
                                             r#type=input_type.get_value()
+                                            width="w-full"
                                             disabled=disabled
                                             id=format!(
                                                 "{}-{}",
@@ -112,7 +107,6 @@ pub fn condition_input(
                                                 idx,
                                             )
 
-                                            class="w-100"
                                             name=""
                                             operator=Some(condition.with_value(|v| v.operator.clone()))
                                         />
@@ -241,7 +235,7 @@ where
 
     view! {
         <div class="form-control w-full">
-            <div class="gap-1">
+            <div class="flex justify-between">
                 <label class="label flex-col justify-center items-start">
                     <span class="label-text font-semibold text-base">Context</span>
                     <span class="label-text text-slate-400">{heading_sub_text}</span>
diff --git a/crates/frontend/src/components/dropdown.rs b/crates/frontend/src/components/dropdown.rs
index 7ed950a5..a5efd2a2 100644
--- a/crates/frontend/src/components/dropdown.rs
+++ b/crates/frontend/src/components/dropdown.rs
@@ -28,7 +28,7 @@ pub fn dropdown<T>(
     #[prop(into, default = String::new())] dropdown_icon: String,
     #[prop(default = DropdownDirection::Right)] dropdown_direction: DropdownDirection,
     #[prop(default = DropdownBtnType::Outline)] dropdown_btn_type: DropdownBtnType,
-    #[prop(into, default = String::from("w-96"))] dropdown_width: String,
+    #[prop(into, default = String::new())] dropdown_width: String,
     #[prop(default = false)] disabled: bool,
     #[prop(default = true)] searchable: bool,
     #[prop(into, default = String::new())] name: String,
@@ -50,10 +50,10 @@ where
     });
 
     let btn_class = match dropdown_btn_type {
-        DropdownBtnType::Outline => "btn btn-sm text-xs m-1 w-full btn-purple-outline",
-        DropdownBtnType::Link => "btn btn-sm text-xs m-1 w-full btn-purple-link",
-        DropdownBtnType::Fill => "btn btn-sm text-xs m-1 w-full btn-purple-fill",
-        DropdownBtnType::Select => "select select-bordered w-[28rem] items-center",
+        DropdownBtnType::Outline => "btn btn-sm text-xs m-1 btn-purple-outline",
+        DropdownBtnType::Link => "btn btn-sm text-xs m-1 btn-purple-link",
+        DropdownBtnType::Fill => "btn btn-sm text-xs m-1 btn-purple-fill",
+        DropdownBtnType::Select => "select select-bordered items-center",
     };
 
     let node_ref = create_node_ref::<html::Input>();
@@ -61,7 +61,7 @@ where
     view! {
         <div
             id=id
-            class="dropdown"
+            class=format!("dropdown {}", dropdown_width)
             class=("disable-click", disabled)
             class=("dropdown-right", dropdown_direction == DropdownDirection::Right)
             class=("dropdown-left", dropdown_direction == DropdownDirection::Left)
@@ -70,7 +70,7 @@ where
         >
             <label
                 tabindex="0"
-                class=format!("{} {}", class, btn_class)
+                class=format!("w-full {} {}", class, btn_class)
                 on:click:undelegated=move |_| {
                     if let Some(element) = node_ref.get() {
                         let _ = element.focus();
@@ -84,7 +84,7 @@ where
             <ul
                 tabindex="0"
                 class=format!(
-                    "{dropdown_width} dropdown-content z-[1] menu flex-nowrap p-2 shadow bg-base-100 rounded-box max-h-96 overflow-y-scroll overflow-x-hidden",
+                    "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",
                 )
             >
 
diff --git a/crates/frontend/src/components/experiment_form.rs b/crates/frontend/src/components/experiment_form.rs
index 2a9a2318..292a424c 100644
--- a/crates/frontend/src/components/experiment_form.rs
+++ b/crates/frontend/src/components/experiment_form.rs
@@ -145,7 +145,6 @@ pub fn experiment_form(
                         let context = f_context.get();
                         view! {
                             <ContextForm
-                                // dimensions will now be a Vec<Dimension>
                                 dimensions=dimensions.get_value()
                                 context=context
                                 handle_change=handle_context_form_change
diff --git a/crates/frontend/src/components/input.rs b/crates/frontend/src/components/input.rs
index 5bb0ffef..7b77387d 100644
--- a/crates/frontend/src/components/input.rs
+++ b/crates/frontend/src/components/input.rs
@@ -199,6 +199,7 @@ pub fn select(
     id: String,
     name: String,
     class: String,
+    width: String,
     disabled: bool,
     value: Value,
     options: Vec<Value>,
@@ -220,7 +221,7 @@ pub fn select(
                     name=name.clone()
                     class=class.clone()
                     disabled=disabled
-                    dropdown_width="w-100"
+                    dropdown_width=width.clone()
                     dropdown_icon="".to_string()
                     dropdown_text=dropdown_text
                     dropdown_direction=DropdownDirection::Down
@@ -241,6 +242,7 @@ fn basic_input(
     id: String,
     name: String,
     class: String,
+    width: String,
     r#type: InputType,
     disabled: bool,
     required: bool,
@@ -261,11 +263,11 @@ fn basic_input(
     }
 
     view! {
-        <div class="flex flex-col gap-1">
+        <div class=format!("flex flex-col gap-y-1 {}", width)>
             <input
                 id=id
                 name=name
-                class=format!("input input-bordered  {}", class)
+                class=format!("input input-bordered {} w-full", class)
                 required=required
                 disabled=disabled
                 type=r#type.to_html_input_type()
@@ -306,6 +308,7 @@ fn basic_input(
 pub fn monaco_input(
     id: String,
     class: String,
+    width: String,
     value: Value,
     on_change: Callback<Value, ()>,
     schema_type: SchemaType,
@@ -366,7 +369,7 @@ pub fn monaco_input(
     });
 
     view! {
-        <div class=format!("relative border rounded-lg bg-white p-2 {}", class)>
+        <div class=format!("relative border rounded-lg bg-white p-2 {} {}", class, width)>
             <Show when=move || {
                 editor_rs.with(|v| v.id != id.get_value())
             }>
@@ -379,8 +382,7 @@ pub fn monaco_input(
                                 on:click=move |e| {
                                     on_edit_click.call(e);
                                 }
-                            >
-                            </i>
+                            ></i>
                         </div>
                         <andypf-json-viewer
                             indent="4"
@@ -492,20 +494,21 @@ pub fn input(
     #[prop(default = false)] disabled: bool,
     #[prop(into, default = String::new())] id: String,
     #[prop(into, default = String::new())] class: String,
+    #[prop(into, default = String::new())] width: String,
     #[prop(into, default = String::new())] name: String,
     #[prop(default = None)] operator: Option<Operator>,
 ) -> impl IntoView {
     match r#type {
         InputType::Toggle => match value.as_bool() {
             Some(ref v) => {
-                view! { <Toggle value=v.clone() on_change class name/> }.into_view()
+                view! { <Toggle value=v.clone() on_change class name /> }.into_view()
             }
             None => view! { <span>An error occured</span> }.into_view(),
         },
-        InputType::Select(ref options) => view! { <Select id name class value on_change disabled options=options.0.clone()/> }
+        InputType::Select(ref options) => view! { <Select id name class width value on_change disabled options=options.0.clone() /> }
         .into_view(),
         InputType::Monaco => {
-            view! { <MonacoInput id class value on_change schema_type operator/> }.into_view()
+            view! { <MonacoInput id class width value on_change schema_type operator /> }.into_view()
         }
         _ => {
             view! {
@@ -513,6 +516,7 @@ pub fn input(
                     id=id
                     name=name
                     class=class
+                    width=width
                     disabled=disabled
                     required=true
                     r#type=r#type
diff --git a/crates/frontend/src/components/override_form.rs b/crates/frontend/src/components/override_form.rs
index 3ee61885..fe9e995e 100644
--- a/crates/frontend/src/components/override_form.rs
+++ b/crates/frontend/src/components/override_form.rs
@@ -61,7 +61,7 @@ fn override_input(
                 <label class="label justify-start font-mono text-sm gap-2">
                     <span class="label-text font-bold text-gray-500">{key.get_value()} ":"</span>
                     <div class="flex gap-1">
-                        <TypeBadge r#type=r#type.clone()/>
+                        <TypeBadge r#type=r#type.clone() />
                     </div>
                 </label>
             </div>
@@ -72,6 +72,7 @@ fn override_input(
                         <Input
                             id=id
                             class=input_class
+                            width="w-full"
                             r#type=input_type.unwrap()
                             value=value
                             schema_type=r#type.unwrap()
@@ -83,21 +84,17 @@ fn override_input(
                         .into_view()
                 } else {
                     view! { <p>"An Error Occured"</p> }.into_view()
-                }}
-                <Show when=move || { allow_remove }>
-                    <div class="w-1/5">
-                        <button
-                            class="btn btn-ghost btn-circle btn-sm"
-                            on:click=move |ev| {
-                                ev.prevent_default();
-                                on_remove.call(key.get_value());
-                            }
-                        >
-
-                            <i class="ri-delete-bin-2-line text-2xl font-bold"></i>
-                        </button>
+                }} <Show when=move || { allow_remove }>
+                    <button
+                        class="btn btn-ghost btn-circle btn-sm"
+                        on:click=move |ev| {
+                            ev.prevent_default();
+                            on_remove.call(key.get_value());
+                        }
+                    >
 
-                    </div>
+                        <i class="ri-delete-bin-2-line text-2xl font-bold"></i>
+                    </button>
                 </Show>
             </div>
 
diff --git a/crates/frontend/src/components/type_template_form.rs b/crates/frontend/src/components/type_template_form.rs
index 482102d3..b3375501 100644
--- a/crates/frontend/src/components/type_template_form.rs
+++ b/crates/frontend/src/components/type_template_form.rs
@@ -15,6 +15,7 @@ use web_sys::MouseEvent;
 #[component]
 pub fn type_template_form<NF>(
     #[prop(default = false)] edit: bool,
+    #[prop(into, default = String::new())] class: String,
     #[prop(default = String::new())] type_name: String,
     #[prop(default = json!({"type": "number"}))] type_schema: Value,
     handle_submit: NF,
@@ -61,10 +62,10 @@ where
         });
     };
     view! {
-        <form class="form-control w-full space-y-4 bg-white text-gray-700 font-mono">
+        <form class=format!("relative form-control space-y-4 text-gray-700 font-mono {}", class)>
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">Type Name</span>
+                    <span class="label-text font-semibold">Type Name</span>
                 </label>
                 <input
                     disabled=edit
@@ -72,7 +73,7 @@ where
                     placeholder="Type name"
                     name="type_name"
                     id="type_name"
-                    class="input input-bordered w-full max-w-md"
+                    class="input input-bordered w-full"
                     value=move || type_name_rs.get()
                     on:change=move |ev| {
                         let value = event_target_value(&ev);
@@ -82,10 +83,9 @@ where
 
             </div>
 
-            <div class="divider"></div>
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">Type Schema</span>
+                    <span class="label-text font-semibold">Type Schema</span>
                 </label>
                 {move || {
                     let schem = type_schema_rs.get();
@@ -94,10 +94,12 @@ where
                         <EditorProvider>
                             <Input
                                 id="type-schema"
-                                class="mt-5 rounded-md resize-y w-full max-w-md pt-3"
+                                class="rounded-md resize-y w-full"
                                 schema_type
                                 value=schem
-                                on_change=Callback::new(move |new_type_schema| type_schema_ws.set(new_type_schema))
+                                on_change=Callback::new(move |new_type_schema| {
+                                    type_schema_ws.set(new_type_schema)
+                                })
                                 r#type=InputType::Monaco
                             />
                         </EditorProvider>
@@ -106,16 +108,11 @@ where
 
             </div>
 
-            <div class="form-control grid w-full mt-5 justify-start">
+            <div class="absolute bottom-0 right-0 p-4 flex justify-end items-end w-full bg-white">
                 {move || {
                     let loading = req_inprogess_rs.get();
                     view! {
-                        <Button
-                            class="pl-[70px] pr-[70px] w-48 h-12".to_string()
-                            text="Submit".to_string()
-                            on_click=on_submit.clone()
-                            loading
-                        />
+                        <Button text="Submit".to_string() on_click=on_submit.clone() loading />
                     }
                 }}
 
diff --git a/crates/frontend/src/components/type_template_form/utils.rs b/crates/frontend/src/components/type_template_form/utils.rs
index 8e7e2850..14380993 100755
--- a/crates/frontend/src/components/type_template_form/utils.rs
+++ b/crates/frontend/src/components/type_template_form/utils.rs
@@ -34,7 +34,7 @@ pub async fn update_type(
     response.json().await.map_err(|e| e.to_string())
 }
 
-pub async fn delete_type(tenant: String, type_name: String) -> Result<Value, String> {
+pub async fn delete_type(tenant: &str, type_name: &str) -> Result<Value, String> {
     let host = get_host();
     let url = format!("{host}/types/{type_name}");
 
diff --git a/crates/frontend/src/pages.rs b/crates/frontend/src/pages.rs
index a214f6c8..55fa39a9 100644
--- a/crates/frontend/src/pages.rs
+++ b/crates/frontend/src/pages.rs
@@ -9,4 +9,6 @@ pub mod experiment_list;
 pub mod function;
 pub mod home;
 pub mod not_found;
-pub mod create_experiment;
+pub mod new_experiment;
+pub mod new_custom_types;
+pub mod update_custom_types;
diff --git a/crates/frontend/src/pages/custom_types.rs b/crates/frontend/src/pages/custom_types.rs
index 205d15b0..3225b4a9 100644
--- a/crates/frontend/src/pages/custom_types.rs
+++ b/crates/frontend/src/pages/custom_types.rs
@@ -1,15 +1,10 @@
+use crate::components::button::Button;
 use crate::components::type_template_form::utils::delete_type;
-use crate::components::{
-    drawer::{close_drawer, open_drawer, Drawer, DrawerBtn},
-    skeleton::Skeleton,
-    stat::Stat,
-    table::Table,
-    type_template_form::TypeTemplateForm,
-};
+use crate::components::{skeleton::Skeleton, stat::Stat, table::Table};
 use crate::utils::unwrap_option_or_default_with_error;
 use crate::{api::fetch_types, components::table::types::Column};
 use leptos::*;
-use serde::Deserialize;
+use leptos_router::A;
 use serde_json::{json, Map, Value};
 
 #[derive(Debug, Clone, PartialEq)]
@@ -18,14 +13,6 @@ struct TypeFilter {
     pub count: i64,
 }
 
-#[derive(Debug, Clone, PartialEq, Deserialize)]
-struct TypeTemplateRow {
-    pub type_name: String,
-    pub type_schema: Value,
-}
-
-const TYPE_DRAWER_ID: &str = "type_template_drawer";
-
 #[component]
 pub fn types_page() -> impl IntoView {
     let tenant_rs = use_context::<Signal<String>>().unwrap();
@@ -42,7 +29,7 @@ pub fn types_page() -> impl IntoView {
             }
         },
     );
-    let selected_type = create_rw_signal::<Option<TypeTemplateRow>>(None);
+
     let table_columns = create_memo(move |_| {
         vec![
             Column::default("type_name".to_string()),
@@ -54,35 +41,28 @@ pub fn types_page() -> impl IntoView {
                 "actions".into(),
                 None,
                 move |_: &str, row: &Map<String, Value>| {
-                    let edit_row_json = json!(row);
-                    let delete_row_json = edit_row_json.clone();
-                    let edit_click = move |_| {
-                        let row_data = serde_json::from_value::<TypeTemplateRow>(
-                            edit_row_json.clone(),
-                        )
+                    let type_name = row
+                        .get("type_name")
+                        .map(|v| v.as_str().unwrap().to_string())
                         .unwrap();
-                        selected_type.set(Some(row_data));
-                        open_drawer(TYPE_DRAWER_ID);
-                    };
+
+                    let delete_type_name = type_name.clone();
                     let delete_click = move |_| {
-                        let row_data = serde_json::from_value::<TypeTemplateRow>(
-                            delete_row_json.clone(),
-                        )
-                        .unwrap();
+                        let type_name = delete_type_name.clone();
                         spawn_local({
                             async move {
                                 let tenant = tenant_rs.get();
-                                let _ =
-                                    delete_type(tenant, row_data.clone().type_name).await;
+                                let _ = delete_type(&tenant, &type_name).await;
                                 types_resource.refetch();
                             }
                         });
                     };
                     view! {
                         <div class="join">
-                            <span class="cursor-pointer" on:click=edit_click>
+                            <A href={format!("{}/update", type_name)}>
                                 <i class="ri-pencil-line ri-xl text-blue-500"></i>
-                            </span>
+                            </A>
+
                             <span class="cursor-pointer" on:click=delete_click>
                                 <i class="ri-delete-bin-line ri-xl text-red-500"></i>
                             </span>
@@ -95,49 +75,6 @@ pub fn types_page() -> impl IntoView {
     });
 
     view! {
-        {move || {
-            let handle_close = move || {
-                close_drawer(TYPE_DRAWER_ID);
-                selected_type.set(None);
-            };
-            if let Some(selected_type_data) = selected_type.get() {
-                view! {
-                    <Drawer
-                        id=TYPE_DRAWER_ID.to_string()
-                        header="Edit Type Template"
-                        handle_close=handle_close
-                    >
-                        <TypeTemplateForm
-                            edit=true
-                            type_name=selected_type_data.type_name
-                            type_schema=selected_type_data.type_schema
-                            handle_submit=move || {
-                                types_resource.refetch();
-                                selected_type.set(None);
-                                close_drawer(TYPE_DRAWER_ID);
-                            }
-                        />
-
-                    </Drawer>
-                }
-            } else {
-                view! {
-                    <Drawer
-                        id=TYPE_DRAWER_ID.to_string()
-                        header="Create New Type Template"
-                        handle_close=handle_close
-                    >
-                        <TypeTemplateForm handle_submit=move || {
-                            types_resource.refetch();
-                            selected_type.set(None);
-                            close_drawer(TYPE_DRAWER_ID);
-                        } />
-
-                    </Drawer>
-                }
-            }
-        }}
-
         <Suspense fallback=move || view! { <Skeleton /> }>
             <div class="pb-4">
                 {move || {
@@ -177,10 +114,9 @@ pub fn types_page() -> impl IntoView {
                                 <div class="flex justify-between">
                                     <h2 class="card-title">Type Templates</h2>
                                     <div>
-                                        <DrawerBtn drawer_id=TYPE_DRAWER_ID
-                                            .to_string()>
-                                            Create Type <i class="ri-add-fill ml-2"></i>
-                                        </DrawerBtn>
+                                        <A href="new">
+                                            <Button text="Create Type" on_click=move |_| {} />
+                                        </A>
                                     </div>
                                 </div>
                                 <Table
diff --git a/crates/frontend/src/pages/new_custom_types.rs b/crates/frontend/src/pages/new_custom_types.rs
new file mode 100644
index 00000000..b41e40b1
--- /dev/null
+++ b/crates/frontend/src/pages/new_custom_types.rs
@@ -0,0 +1,13 @@
+use leptos::*;
+
+use crate::components::type_template_form::TypeTemplateForm;
+
+#[component]
+pub fn new_custom_types() -> impl IntoView {
+    view! {
+        <TypeTemplateForm
+            class="mx-auto 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/create_experiment.rs b/crates/frontend/src/pages/new_experiment.rs
similarity index 98%
rename from crates/frontend/src/pages/create_experiment.rs
rename to crates/frontend/src/pages/new_experiment.rs
index 03fe8bfb..5edd8d9a 100644
--- a/crates/frontend/src/pages/create_experiment.rs
+++ b/crates/frontend/src/pages/new_experiment.rs
@@ -22,7 +22,7 @@ struct PageResource {
 }
 
 #[component]
-pub fn create_experiment() -> impl IntoView {
+pub fn new_experiment() -> impl IntoView {
     let tenant_rs = use_context::<Signal<String>>().unwrap();
     let navigate = use_navigate();
     let service_prefix = use_service_prefix();
diff --git a/crates/frontend/src/pages/update_custom_types.rs b/crates/frontend/src/pages/update_custom_types.rs
new file mode 100644
index 00000000..7bf5d299
--- /dev/null
+++ b/crates/frontend/src/pages/update_custom_types.rs
@@ -0,0 +1,72 @@
+use leptos::*;
+use leptos_router::{use_params, Params};
+
+use crate::{
+    api::fetch_type,
+    components::{skeleton::Skeleton, type_template_form::TypeTemplateForm},
+};
+
+#[derive(PartialEq, Clone, Debug)]
+struct PageParams {
+    type_name: String,
+}
+
+impl Params for PageParams {
+    fn from_map(
+        map: &leptos_router::ParamsMap,
+    ) -> Result<Self, leptos_router::ParamsError> {
+        map.get("type_name")
+            .map(|v| PageParams {
+                type_name: v.clone(),
+            })
+            .ok_or(leptos_router::ParamsError::MissingParam(
+                "type_name is missing".to_owned(),
+            ))
+    }
+}
+
+#[component]
+pub fn update_custom_types() -> impl IntoView {
+    let tenant_rs = use_context::<Signal<String>>().unwrap();
+    let path_params = use_params::<PageParams>();
+    let page_resource = create_blocking_resource(
+        move || (tenant_rs.get(), path_params.get()),
+        |(t, path_params)| async move {
+            if let Err(err) = path_params {
+                logging::log!("failed to get type due to: {:?}", err);
+                return Err(err.to_string());
+            }
+            fetch_type(&t, &(path_params.unwrap().type_name))
+                .await
+                .map_err(|e| e.to_string())
+        },
+    );
+
+    view! {
+        <Suspense fallback=move || {
+            view! { <Skeleton /> }
+        }>
+            {move || {
+                let type_template = page_resource.get();
+                if type_template.is_none() {
+                    return view! { <p>"Failed to load type template to update"</p> }.into_view();
+                }
+                match type_template.unwrap() {
+                    Ok(t) => {
+                        view! {
+                            <TypeTemplateForm
+                                edit=true
+                                type_name=t.type_name
+                                type_schema=t.type_schema
+                                class="mx-auto w-1/2 h-main-content p-8 rounded-2xl border bg-white overflow-y-auto"
+                                handle_submit=move || {}
+                            />
+                        }
+                            .into_view()
+                    }
+                    Err(e) => view! { <p>{e}</p> }.into_view(),
+                }
+            }}
+        </Suspense>
+    }
+}