diff --git a/crates/frontend/src/components/condition_pills.rs b/crates/frontend/src/components/condition_pills.rs
index 6a083293..1757a69d 100644
--- a/crates/frontend/src/components/condition_pills.rs
+++ b/crates/frontend/src/components/condition_pills.rs
@@ -5,6 +5,137 @@ use crate::components::condition_pills::types::ConditionOperator;
 
 use self::types::Condition;
 use leptos::*;
+use wasm_bindgen::JsCast;
+use web_sys::Element;
+
+#[component]
+pub fn condition_expression(
+    #[prop(into)] id: String,
+    #[prop(into)] list_id: String,
+    condition: Condition,
+) -> impl IntoView {
+    let (expand_rs, expand_ws) = create_signal(false);
+
+    let classes = Signal::derive(move || {
+        if expand_rs.get() {
+            (
+                "pointer flex items-center w-max max-w-full rounded-md bg-gray-50 px-2 py-1 text-xs ring-1 ring-inset ring-purple-700/10 shadow-md gap-x-2 overflow-hidden",
+                "font-mono font-semibold context_condition w-full text-wrap word-break-break"
+            )
+        } else {
+            (
+                "pointer flex items-center w-max max-w-[300px] rounded-md bg-gray-50 px-2 py-1 text-xs ring-1 ring-inset ring-purple-700/10 shadow-md gap-x-2 overflow-hidden whitespace-nowrap",
+
+                "font-mono font-semibold context_condition w-full text-ellipsis overflow-hidden whitespace-nowrap"
+            )
+        }
+    });
+
+    let condition = store_value(condition);
+    let id = store_value(id);
+
+    let click_event_handler = window_event_listener(ev::click, move |ev| {
+        if let Some(t) = ev.target() {
+            let target_element = t.dyn_into::<Element>();
+            if let Ok(te) = target_element {
+                let parent_id = te.parent_element().map(|e| e.id());
+
+                if let Some(p_id) = parent_id {
+                    if !p_id.contains(&list_id) {
+                        expand_ws.set(false);
+                    }
+                }
+            }
+        }
+    });
+    on_cleanup(|| {
+        click_event_handler.remove();
+    });
+
+    view! {
+        {move || {
+            let (list_item_class, value_class) = classes.get();
+            let Condition { left_operand: dimension, operator, right_operand: value } = condition
+                .get_value();
+            view! {
+                <li
+                    id=id.get_value()
+                    class=list_item_class
+                    on:click=move |_| {
+                        if !expand_rs.get() {
+                            expand_ws.set(true);
+                        }
+                    }
+                >
+
+                    <span class="font-mono font-medium context_condition text-gray-500">
+                        {dimension}
+                    </span>
+                    <span class="font-mono font-medium text-gray-650 context_condition">
+                        {operator.to_string()}
+                    </span>
+
+                    {match operator {
+                        ConditionOperator::Between => {
+                            let split_val: Vec<String> = value
+                                .clone()
+                                .split(',')
+                                .map(String::from)
+                                .collect();
+                            view! {
+                                <>
+                                    <span class="font-mono font-semibold context_condition">
+                                        {&split_val[0]}
+                                    </span>
+                                    <span class="font-mono font-medium text-gray-650 context_condition ">
+                                        {"and"}
+                                    </span>
+                                    <span class="font-mono font-semibold context_condition">
+                                        {&split_val[1]}
+                                    </span>
+                                </>
+                            }
+                        }
+                        _ => {
+                            view! {
+                                <>
+                                    <span class=value_class>{value}</span>
+                                </>
+                            }
+                        }
+                    }}
+
+                </li>
+            }
+        }}
+    }
+}
+
+#[component]
+pub fn condition(
+    #[prop(into)] id: String,
+    #[prop(into)] conditions: Vec<Condition>,
+    #[prop(into, default=String::new())] class: String,
+) -> impl IntoView {
+    let outer_div_class = format!("{} pt-3 relative flex flex-col w-full py-4 pl-6 border-l-2 border-gray-300 rounded-lg", class);
+    view! {
+        <div class=outer_div_class>
+            <ol id=id.clone() class="flex flex-col gap-4 w-full pl-3 list-none">
+                {conditions
+                    .into_iter()
+                    .enumerate()
+                    .map(|(idx, condition)| {
+                        let item_id = format!("{}-{}", id, idx);
+                        view! { <ConditionExpression condition id=item_id list_id=id.clone()/> }
+                    })
+                    .collect::<Vec<_>>()}
+            </ol>
+            <span class="absolute badge badge-ghost capitalize top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 m-0 and-badge">
+                "and"
+            </span>
+        </div>
+    }
+}
 
 #[component]
 pub fn condition_pills(#[prop(into)] conditions: Vec<Condition>) -> impl IntoView {
diff --git a/crates/frontend/src/components/context_card.rs b/crates/frontend/src/components/context_card.rs
index 57a32a6f..cd7cb03a 100644
--- a/crates/frontend/src/components/context_card.rs
+++ b/crates/frontend/src/components/context_card.rs
@@ -3,7 +3,7 @@ use serde_json::{Map, Value};
 
 use crate::{
     components::{
-        condition_pills::{types::Condition, ConditionPills},
+        condition_pills::{types::Condition, Condition as ConditionComponent},
         table::{types::Column, Table},
     },
     types::Context,
@@ -13,9 +13,16 @@ use crate::{
 pub fn context_card(
     context: Context,
     overrides: Map<String, Value>,
-    handle_edit: Callback<(Context, Map<String, Value>), ()>,
-    handle_clone: Callback<(Context, Map<String, Value>), ()>,
-    handle_delete: Callback<String, ()>,
+    #[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: Vec<Condition> = (&context).try_into().unwrap_or(vec![]);
     let override_table_rows = overrides
@@ -28,6 +35,7 @@ pub fn context_card(
         })
         .collect::<Vec<Map<String, Value>>>();
 
+    let context_id = StoredValue::new(context.id.clone());
     let context = StoredValue::new(context);
     let overrides = StoredValue::new(overrides);
 
@@ -37,43 +45,49 @@ pub fn context_card(
     ];
 
     view! {
-        <div class="rounded-lg shadow bg-base-100 p-6 shadow">
+        <div class="rounded-lg shadow bg-base-100 p-6 shadow flex flex-col gap-3">
             <div class="flex justify-between">
-                <div class="flex items-center space-x-4">
-                    <h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono">
-                        "Condition"
-                    </h3>
-                    <i class="ri-arrow-right-fill ri-xl text-blue-500"></i>
-                    <ConditionPills conditions=conditions/>
-                </div>
-                <div class="flex space-x-4">
-                    <i
-                        class="ri-pencil-line ri-xl text-blue-500 cursor-pointer"
-                        on:click=move |_| {
-                            handle_edit.call((context.get_value(), overrides.get_value()))
-                        }
-                    >
-                    </i>
-                    <i
-                        class="ri-file-copy-line ri-xl text-blue-500 cursor-pointer"
-                        on:click=move |_| {
-                            handle_clone.call((context.get_value(), overrides.get_value()))
-                        }
-                    >
-                    </i>
-                    <i
-                        class="ri-delete-bin-5-line ri-xl text-blue-500 cursor-pointer"
-                        on:click=move |_| { handle_delete.call(context.get_value().id) }
-                    ></i>
-                </div>
+                <h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
+                    "Condition"
+                </h3>
+                <Show when=move || show_actions>
+                    <div class="h-fit text-right space-x-4">
+                        <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>
+                        <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
+                            class="ri-delete-bin-5-line ri-lg text-red-500 cursor-pointer"
+                            on:click=move |_| { handle_delete.call(context.get_value().id) }
+                        ></i>
+                    </div>
+                </Show>
             </div>
-            <div class="space-x-4">
-                <Table
-                    cell_style="min-w-48 font-mono".to_string()
-                    rows=override_table_rows
-                    key_column="id".to_string()
-                    columns=table_columns
+
+            <div class="xl:flex xl:gap-x-4 xl:justify-between pl-5">
+                <ConditionComponent
+                    conditions=conditions
+                    id=context_id.get_value()
+                    class="xl:w-[400px] h-fit"
                 />
+                <div class="xl:w-2/3 overflow-auto">
+                    <Table
+                        cell_style="min-w-48 font-mono".to_string()
+                        rows=override_table_rows
+                        key_column="id".to_string()
+                        columns=table_columns
+                    />
+                </div>
             </div>
         </div>
     }
diff --git a/crates/frontend/src/hoc/layout.rs b/crates/frontend/src/hoc/layout.rs
index 0f2aa5ab..d01963fe 100644
--- a/crates/frontend/src/hoc/layout.rs
+++ b/crates/frontend/src/hoc/layout.rs
@@ -36,7 +36,7 @@ pub fn Layout(children: Children) -> impl IntoView {
         <div>
             <SideNav resolved_path=path original_path=original_path.to_string()/>
             // params_map=params_map
-            <main class="ease-soft-in-out xl:ml-96 relative h-full max-h-screen rounded-xl transition-all duration-200 overflow-y-auto">
+            <main class="ease-soft-in-out xl:ml-[350px] relative h-full max-h-screen rounded-xl transition-all duration-200 overflow-y-auto">
                 {children()}
             </main>
 
diff --git a/crates/frontend/src/pages/home.rs b/crates/frontend/src/pages/home.rs
index f30592a6..a24488f0 100644
--- a/crates/frontend/src/pages/home.rs
+++ b/crates/frontend/src/pages/home.rs
@@ -1,8 +1,9 @@
 use std::time::Duration;
 
 use crate::components::condition_pills::types::Condition;
-use crate::components::condition_pills::ConditionPills;
+use crate::components::condition_pills::Condition as ConditionComponent;
 use crate::components::skeleton::{Skeleton, SkeletonVariant};
+use crate::types::Config;
 use crate::{
     api::{fetch_config, fetch_dimensions},
     components::{
@@ -50,6 +51,115 @@ fn gen_name_id(s0: &String, s1: &String, s2: &String) -> String {
     format!("{s0}::{s1}::{s2}")
 }
 
+#[component]
+fn all_context_view(config: Config) -> impl IntoView {
+    let Config {
+        contexts,
+        overrides,
+        default_configs,
+    } = config;
+    let rows = |k: &String, v: &Value, striked: bool| {
+        let default_iter = vec![(k.clone(), v.clone())];
+        v
+            .as_object()
+            .unwrap_or(&Map::from_iter(default_iter))
+            .iter()
+            .map(|(key, value)| {
+                let key = key.replace('"', "").trim().to_string();
+                let value = value
+                    .as_str()
+                    .unwrap_or(value.to_string().trim_matches('"'))
+                    .into();
+                let unique_name = gen_name_id(&key, &key, &value);
+                view! {
+                    <tr>
+                        <td class="min-w-48 max-w-72 font-mono">
+                            <span
+                                name=format!("{unique_name}-1") class="config-name"
+                                class:text-black={!striked}
+                                class:font-bold={!striked}
+                                class:text-gray-300={striked}
+                            >{key}</span>
+                        </td>
+                        <td class="min-w-48 max-w-72 font-mono" style="word-break: break-word;">
+                            <span
+                                name=format!("{unique_name}-2")
+                                class="config-value"
+                                class:text-black={ !striked }
+                                class:font-bold={ !striked }
+                                class:text-gray-300 = { striked }
+                            >
+                                {check_url_and_return_val(value) }
+                            </span>
+                        </td>
+                    </tr>
+                }
+            }).collect_view()
+    };
+
+    view! {
+        <div class="flex flex-col w-full gap-y-6 p-6">
+            {contexts
+                .iter()
+                .map(|context| {
+                    let rows: Vec<_> = context
+                        .override_with_keys
+                        .iter()
+                        .filter_map(|key| overrides.get(key).map(|o| rows(key, o, true)))
+                        .collect();
+                    let conditions: Vec<Condition> = context.try_into().unwrap_or_default();
+                    view! {
+                        <div class="card bg-base-100 shadow gap-3 p-6">
+                            <h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
+                                "Condition"
+                            </h3>
+                            <div class="xl:flex xl:gap-x-4 xl:justify-between pl-5">
+                                <ConditionComponent
+                                    conditions=conditions
+                                    id=context.id.clone()
+                                    class="xl:w-[400px] h-fit"
+                                />
+                                <div class="xl:w-2/3 overflow-auto">
+                                    <table class="table table-zebra">
+                                        <thead>
+                                            <tr>
+                                                <th>Key</th>
+                                                <th>Value</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>{rows}</tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                })
+                .rev()
+                .collect::<Vec<_>>()} <div class="card bg-base-100 shadow m-6">
+                <div class="card-body">
+                    <h2 class="card-title">Default Configuration</h2>
+                    <table class="table table-zebra">
+                        <thead>
+                            <tr>
+                                <th>Key</th>
+                                <th>Value</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+
+                            {default_configs
+                                .iter()
+                                .map(|(k, v)| rows(k, v, false))
+                                .collect::<Vec<_>>()}
+
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    }
+}
+
 #[component]
 pub fn home() -> impl IntoView {
     let tenant_rs = use_context::<ReadSignal<String>>().unwrap();
@@ -217,7 +327,7 @@ pub fn home() -> impl IntoView {
         });
     };
     view! {
-        <div class="flex w-full flex-col flex-wrap mt-5 justify-evenly">
+        <div class="w-full mt-5">
             <div class="mr-5 ml-5 mt-6">
                 <Suspense fallback=move || {
                     view! { <Skeleton variant=SkeletonVariant::Block/> }
@@ -337,104 +447,9 @@ pub fn home() -> impl IntoView {
                                             .with(move |result| {
                                                 match result {
                                                     Some(Ok(config)) => {
-                                                        let rows = |k: &String, v: &Value, striked: bool| {
-                                                            let mut view_vector = vec![];
-                                                            let default_iter = vec![(k.clone(), v.clone())];
-                                                            for (key, value) in v
-                                                                .as_object()
-                                                                .unwrap_or(&Map::from_iter(default_iter))
-                                                                .iter()
-                                                            {
-                                                                let key = key.replace('"', "").trim().to_string();
-                                                                let value = value
-                                                                    .as_str()
-                                                                    .unwrap_or(value.to_string().trim_matches('"'))
-                                                                    .into();
-                                                                let unique_name = gen_name_id(&key, &key, &value);
-                                                                view_vector
-                                                                    .push(
-                                                                        view! {
-                                                                            < tr > < td class = "min-w-48 max-w-72 font-mono" > < span
-                                                                            name = format!("{unique_name}-1") class = "config-name"
-                                                                            class : text - black = { ! striked } class : font - bold = {
-                                                                            ! striked } class : text - gray - 300 = { striked } > { key
-                                                                            } </ span > </ td > < td class =
-                                                                            "min-w-48 max-w-72 font-mono" style =
-                                                                            "word-break: break-word;" > < span name =
-                                                                            format!("{unique_name}-2") class = "config-value" class :
-                                                                            text - black = { ! striked } class : font - bold = { !
-                                                                            striked } class : text - gray - 300 = { striked } > {
-                                                                            check_url_and_return_val(value) } </ span > </ td > </ tr >
-                                                                        },
-                                                                    )
-                                                            }
-                                                            view_vector
-                                                        };
-                                                        let contexts_views: Vec<_> = config
-                                                            .contexts
-                                                            .iter()
-                                                            .map(|context| {
-                                                                let rows: Vec<_> = context
-                                                                    .override_with_keys
-                                                                    .iter()
-                                                                    .filter_map(|key| {
-                                                                        config.overrides.get(key).map(|o| (key, o))
-                                                                    })
-                                                                    .map(|(k, v)| { rows(k, v, true) })
-                                                                    .collect();
-                                                                let conditions: Vec<Condition> = context
-                                                                    .try_into()
-                                                                    .unwrap_or_default();
-                                                                view! {
-                                                                    <div class="card bg-base-100 shadow m-6">
-                                                                        <div class="card-body">
-                                                                            <h2 class="card-title">
-                                                                                <ConditionPills conditions=conditions/>
-                                                                            </h2>
-                                                                            <table class="table table-zebra mt-10">
-                                                                                <thead>
-                                                                                    <tr>
-                                                                                        <th>Key</th>
-                                                                                        <th>Value</th>
-                                                                                    </tr>
-                                                                                </thead>
-                                                                                <tbody>{rows}</tbody>
-                                                                            </table>
-
-                                                                        </div>
-                                                                    </div>
-                                                                }
-                                                            })
-                                                            .collect::<Vec<_>>();
-                                                        let new_context_views = contexts_views
-                                                            .into_iter()
-                                                            .rev()
-                                                            .collect::<Vec<_>>();
-                                                        let default_config: Vec<_> = config
-                                                            .default_configs
-                                                            .iter()
-                                                            .map(|(k, v)| { rows(k, v, false) })
-                                                            .collect();
                                                         vec![
-                                                            view! {
-                                                                <div class="mb-4 overflow-y-scroll">
-                                                                    {new_context_views}
-                                                                    <div class="card bg-base-100 shadow m-6">
-                                                                        <div class="card-body">
-                                                                            <h2 class="card-title">Default Configuration</h2>
-                                                                            <table class="table table-zebra">
-                                                                                <thead>
-                                                                                    <tr>
-                                                                                        <th>Key</th>
-                                                                                        <th>Value</th>
-                                                                                    </tr>
-                                                                                </thead>
-                                                                                <tbody>{default_config}</tbody>
-                                                                            </table>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            },
+                                                            view! { <AllContextView config=config.clone()/> }
+                                                                .into_view(),
                                                         ]
                                                     }
                                                     Some(Err(error)) => {
@@ -443,12 +458,14 @@ pub fn home() -> impl IntoView {
                                                                 <div class="error">
                                                                     Failed to fetch config data: {error.to_string()}
                                                                 </div>
-                                                            },
+                                                            }
+                                                                .into_view(),
                                                         ]
                                                     }
                                                     None => {
                                                         vec![
-                                                            view! { <div class="error">No config data fetched</div> },
+                                                            view! { <div class="error">No config data fetched</div> }
+                                                                .into_view(),
                                                         ]
                                                     }
                                                 }
diff --git a/crates/frontend/styles/tailwind.css b/crates/frontend/styles/tailwind.css
index eece7805..617365d2 100644
--- a/crates/frontend/styles/tailwind.css
+++ b/crates/frontend/styles/tailwind.css
@@ -27,6 +27,7 @@
 
 .context_condition{
     font-size: 0.9rem;
+    text-wrap: nowrap;
 }
 
 .value_link {
@@ -86,3 +87,12 @@
 .min-w-48 {
     min-width: 12rem;
 }
+
+span.and-badge {
+    margin: 0;
+}
+
+/* .table-zebra tbody tr:nth-child(2n-1) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+}*/