diff --git a/frontend/scss/app/_component.scss b/frontend/scss/app/_component.scss
index e1fd27f94..f6cedb9fc 100644
--- a/frontend/scss/app/_component.scss
+++ b/frontend/scss/app/_component.scss
@@ -66,4 +66,5 @@
 @forward "components/cvs_table";
 @forward "components/config/config_view";
 @forward "components/tabset";
-@forward "components/select";
\ No newline at end of file
+@forward "components/select";
+@forward "components/form";
\ No newline at end of file
diff --git a/frontend/scss/app/components/_form.scss b/frontend/scss/app/components/_form.scss
new file mode 100644
index 000000000..893b9272d
--- /dev/null
+++ b/frontend/scss/app/components/_form.scss
@@ -0,0 +1,43 @@
+@use '../../size';
+
+.tp__form-field {
+  display: flex;
+  gap: var(--gap-default);
+  box-sizing: border-box;
+  min-width: size.$config-field-min-width;
+
+  &__text {
+    flex-flow: column;
+  }
+
+  &__value {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    flex: 1 1 auto;
+    background-color: var(--input-background-color);
+    color: var(--modest-text-color);
+    padding: var(--padding-small) var(--padding-mini);
+    min-height: 2.5rem;
+    max-height: 2.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: 1px solid var(--input-border-color);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  &__bool {
+    flex-flow: row;
+    align-items: center;
+  }
+
+  label {
+    font-weight: bold;
+    white-space: nowrap;
+    vertical-align: middle;
+    color: var(--text-color);
+    font-size: 1.1rem;
+  }
+}
\ No newline at end of file
diff --git a/frontend/scss/app/components/config/_config_view.scss b/frontend/scss/app/components/config/_config_view.scss
index 497294275..9a828bc93 100644
--- a/frontend/scss/app/components/config/_config_view.scss
+++ b/frontend/scss/app/components/config/_config_view.scss
@@ -52,48 +52,6 @@
   }
 }
 
-.tp__config-field {
-  display: flex;
-  gap: var(--gap-default);
-  box-sizing: border-box;
-  min-width: size.$config-field-min-width;
-
-  &__text {
-    flex-flow: column;
-  }
-
-  &__value {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      flex: 1 1 auto;
-      background-color: var(--input-background-color);
-      color: var(--modest-text-color);
-      padding: var(--padding-small) var(--padding-mini);
-      min-height: 2.5rem;
-      max-height: 2.5rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border: 1px solid var(--input-border-color);
-      border-radius: var(--border-radius);
-      box-sizing: border-box;
-      white-space: nowrap;
-  }
-
-  &__bool {
-    flex-flow: row;
-    align-items: center;
-  }
-
-  label {
-    font-weight: bold;
-    white-space: nowrap;
-    vertical-align: middle;
-    color: var(--text-color);
-    font-size: 1.1rem;
-  }
-}
-
 .tp__config-view-page {
   display: flex;
   flex-flow: column;
diff --git a/frontend/scss/app/components/userlist/_proxy_type.scss b/frontend/scss/app/components/userlist/_proxy_type.scss
index 17f33e92f..0b2dc109b 100644
--- a/frontend/scss/app/components/userlist/_proxy_type.scss
+++ b/frontend/scss/app/components/userlist/_proxy_type.scss
@@ -27,4 +27,73 @@
          border-bottom-right-radius: 0;
       }
    }
-}
\ No newline at end of file
+}
+
+.tp__proxy-type-input {
+   display: flex;
+   flex-flow: row wrap;
+   gap: var(--gap-default);
+   .tp__chip {
+      cursor: pointer;
+      &:hover {
+         border-color: var(--active-color);
+      }
+   }
+
+   &__reverse.active,
+   &__reverse-live.active,
+   &__reverse-vod.active,
+   &__reverse-series.active {
+      color: var(--tag-active-color);
+      background-color: var(--tag-active-background-color);
+      border-color: var(--tag-active-border-color);
+   }
+
+   &__reverse-live.redirect-active,
+   &__reverse-vod.redirect-active,
+   &__reverse-series.redirect-active,
+   &__redirect.active {
+      color: var(--tag-alt-active-color);
+      background-color: var(--tag-alt-active-background-color);
+      border-color: var(--tag-alt-active-border-color);
+   }
+
+   &__mixed {
+      display: flex;
+      flex-flow: row nowrap;
+      span:not(:first-child) {
+         border-top-left-radius: 0;
+         border-bottom-left-radius: 0;
+      }
+      span:not(:last-child) {
+         border-top-right-radius: 0;
+         border-bottom-right-radius: 0;
+      }
+   }
+}
+
+.tp__chip__group {
+   display: flex;
+   flex-flow: row nowrap;
+   gap: var(--gap-default);
+}
+
+//   &__sub {
+//      display: flex;
+//      flex-flow: row nowrap;
+//      span:not(:first-child) {
+//         border-top-left-radius: 0;
+//         border-bottom-left-radius: 0;
+//      }
+//      span:not(:last-child) {
+//         border-top-right-radius: 0;
+//         border-bottom-right-radius: 0;
+//      }
+//
+//      .tp__chip.active {
+//         background-color: var(--tag-active-background-color);
+//         color: var(--tag-active-color);
+//         fill: var(--tag-active-color);
+//      }
+//   }
+//}
\ No newline at end of file
diff --git a/frontend/src/app/components/config/macros.rs b/frontend/src/app/components/config/macros.rs
index 23822708f..6aec3b774 100644
--- a/frontend/src/app/components/config/macros.rs
+++ b/frontend/src/app/components/config/macros.rs
@@ -2,9 +2,9 @@
 macro_rules! config_field_optional {
     ($config:expr, $label:expr, $field:ident) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
-                <span class="tp__config-field__value">
+                <span class="tp__form-field__value">
                 {
                     match $config.$field.as_ref() {
                         Some(value) => html! { &value },
@@ -21,9 +21,9 @@ macro_rules! config_field_optional {
 macro_rules! config_field_optional_hide {
     ($config:expr, $label:expr, $field:ident) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
-                <span class="tp__config-field__value">
+                <span class="tp__form-field__value">
                     <$crate::app::components::HideContent content={$config.$field.as_ref().map_or_else(String::new, |content| content.clone())}></$crate::app::components::HideContent>
                 </span>
             </div>
@@ -35,9 +35,9 @@ macro_rules! config_field_optional_hide {
 macro_rules! config_field_hide {
     ($config:expr, $label:expr, $field:ident) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
-                <span class="tp__config-field__value">
+                <span class="tp__form-field__value">
                     <$crate::app::components::HideContent content={$config.$field.clone()}></$crate::app::components::HideContent>
                 </span>
             </div>
@@ -49,7 +49,7 @@ macro_rules! config_field_hide {
 macro_rules! config_field_bool {
     ($config:expr, $label:expr, $field:ident) => {
         html! {
-            <div class="tp__config-field tp__config-field__bool">
+            <div class="tp__form-field tp__form-field__bool">
                 <label>{$label}</label>
                 <$crate::app::components::ToggleSwitch value={$config.$field} readonly={true} />
             </div>
@@ -61,7 +61,7 @@ macro_rules! config_field_bool {
 macro_rules! config_field_bool_empty {
     ($label:expr) => {
         html! {
-            <div class="tp__config-field tp__config-field__bool">
+            <div class="tp__form-field tp__form-field__bool">
                 <label>{$label}</label>
                 <$crate::app::components::ToggleSwitch value={false} readonly={true} />
             </div>
@@ -73,9 +73,9 @@ macro_rules! config_field_bool_empty {
 macro_rules! config_field {
     ($config:expr, $label:expr, $field:ident) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
-                <span class="tp__config-field__value">{$config.$field.to_string()}</span>
+                <span class="tp__form-field__value">{$config.$field.to_string()}</span>
             </div>
         }
     };
@@ -85,7 +85,7 @@ macro_rules! config_field {
 macro_rules! config_field_child {
     ($label:expr, $body:block) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
                 { $body }
             </div>
@@ -97,9 +97,9 @@ macro_rules! config_field_child {
 macro_rules! config_field_empty {
     ($label:expr) => {
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <label>{$label}</label>
-                <span class="tp__config-field__value"></span>
+                <span class="tp__form-field__value"></span>
             </div>
         }
     };
@@ -116,7 +116,7 @@ macro_rules! edit_field_text_option {
     (@inner $instance:expr, $label:expr, $field:ident, $hidden:expr) => {{
         let instance = $instance.clone();
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <$crate::app::components::input::Input
                     label={$label}
                     hidden={$hidden}
@@ -147,7 +147,7 @@ macro_rules! edit_field_text {
     (@inner $instance:expr, $label:expr, $field:ident, $hidden:expr) => {{
         let instance = $instance.clone();
         html! {
-            <div class="tp__config-field tp__config-field__text">
+            <div class="tp__form-field tp__form-field__text">
                 <$crate::app::components::input::Input
                     label={$label}
                     hidden={$hidden}
@@ -170,7 +170,7 @@ macro_rules! edit_field_bool {
     ($instance:expr, $label:expr, $field:ident) => {{
         let instance = $instance.clone();
         html! {
-            <div class="tp__config-field tp__config-field__bool">
+            <div class="tp__form-field tp__form-field__bool">
                 <label>{$label}</label>
                 <$crate::app::components::ToggleSwitch
                      value={instance.borrow().$field}
diff --git a/frontend/src/app/components/config/webui_config_view.rs b/frontend/src/app/components/config/webui_config_view.rs
index d0303e68f..3297602f2 100644
--- a/frontend/src/app/components/config/webui_config_view.rs
+++ b/frontend/src/app/components/config/webui_config_view.rs
@@ -6,6 +6,7 @@ use crate::{
 };
 use yew::prelude::*;
 use yew_i18n::use_translation;
+use shared::model::WebUiConfigDto;
 
 const LABEL_AUTH: &str = "LABEL.AUTH";
 const LABEL_ENABLED: &str = "LABEL.ENABLED";
@@ -37,26 +38,75 @@ pub fn WebUiConfigView() -> Html {
         }
     };
 
+    let render_empty_csp = || {
+        html! {
+            <Card>
+                 <h1>{translate.t(LABEL_CONTENT_SECURITY_POLICY)}</h1>
+                { config_field_bool_empty!(translate.t(LABEL_ENABLED)) }
+                { config_field_empty!(translate.t(LABEL_CONTENT_SECURITY_POLICY_CUSTOM_ATTRIBUTES)) }
+             </Card>
+        }
+    };
+
     let render_empty = || {
         html! {
            <>
             { config_field_bool_empty!(translate.t(LABEL_ENABLED)) }
             { config_field_bool_empty!(translate.t(LABEL_USER_UI_ENABLED)) }
-            { config_field_child!(translate.t(LABEL_CONTENT_SECURITY_POLICY), {
-                html! {
-                    <>
-                        { config_field_bool_empty!(translate.t(LABEL_ENABLED)) }
-                        { config_field_empty!(translate.t(LABEL_CONTENT_SECURITY_POLICY_CUSTOM_ATTRIBUTES)) }
-                    </>
-                }
-            }) }
             { config_field_empty!(translate.t(LABEL_PATH)) }
             { config_field_empty!(translate.t(LABEL_PLAYER_SERVER)) }
+            { render_empty_csp()}
             { render_empty_auth() }
            </>
         }
     };
 
+    let render_csp = |web_ui: &WebUiConfigDto| {
+        html! {
+            {
+                match web_ui.content_security_policy.as_ref() {
+                    Some(csp) => html! {
+                        <Card>
+                            <h1>{translate.t(LABEL_CONTENT_SECURITY_POLICY)}</h1>
+                            { config_field_bool!(csp, translate.t(LABEL_ENABLED), enabled) }
+                            { config_field_child!(translate.t(LABEL_CONTENT_SECURITY_POLICY_CUSTOM_ATTRIBUTES), {
+                                html! {
+                                    <div class="tp__config-view__tags">
+                                        {
+                                            if let Some(custom) = &csp.custom_attributes {
+                                                html! { for custom.iter().map(|a| html! { <Chip label={a.clone()} /> }) }
+                                            } else {
+                                                html! {}
+                                            }
+                                        }
+                                    </div>
+                                }
+                            }) }
+                        </Card>
+                    },
+                    None => render_empty_csp()
+                }
+            }
+        }
+    };
+
+    let render_auth = |web_ui: &WebUiConfigDto| html! {
+        {
+            match web_ui.auth.as_ref() {
+                Some(auth) => html!{
+                   <Card>
+                    <h1>{translate.t(LABEL_AUTH)}</h1>
+                    { config_field_bool!(auth, translate.t(LABEL_ENABLED), enabled) }
+                    { config_field!(auth, translate.t(LABEL_ISSUER), issuer) }
+                    { config_field_hide!(auth, translate.t(LABEL_SECRET), secret) }
+                    { config_field!(auth, translate.t(LABEL_TOKEN_TTL_MINS), token_ttl_mins) }
+                    { config_field_optional!(auth, translate.t(LABEL_USERFILE), userfile) }
+                    </Card>
+                },
+                None => render_empty_auth(),
+            }}
+    };
+
     html! {
         <div class="tp__webui-config-view tp__config-view-page">
             <div class="tp__webui-config-config-view__body tp__config-view-page__body">
@@ -67,54 +117,10 @@ pub fn WebUiConfigView() -> Html {
                         <>
                             { config_field_bool!(web_ui, translate.t(LABEL_ENABLED), enabled) }
                             { config_field_bool!(web_ui, translate.t(LABEL_USER_UI_ENABLED), user_ui_enabled) }
-                            { config_field_child!(translate.t(LABEL_CONTENT_SECURITY_POLICY), {
-                                html! {
-                                    match web_ui.content_security_policy.as_ref() {
-                                        Some(csp) => html! {
-                                            <>
-                                                { config_field_bool!(csp, translate.t(LABEL_ENABLED), enabled) }
-                                                { config_field_child!(translate.t(LABEL_CONTENT_SECURITY_POLICY_CUSTOM_ATTRIBUTES), {
-                                                    html! {
-                                                        <div class="tp__config-view__tags">
-                                                            {
-                                                                if let Some(custom) = &csp.custom_attributes {
-                                                                    html! { for custom.iter().map(|a| html! { <Chip label={a.clone()} /> }) }
-                                                                } else {
-                                                                    html! {}
-                                                                }
-                                                            }
-                                                        </div>
-                                                    }
-                                                }) }
-                                            </>
-                                        },
-                                        None => html! {
-                                            <>
-                                                { config_field_bool_empty!(translate.t(LABEL_ENABLED)) }
-                                                { config_field_empty!(translate.t(LABEL_CONTENT_SECURITY_POLICY_CUSTOM_ATTRIBUTES)) }
-                                            </>
-                                        }
-                                    }
-                                }
-                            }) }
                             { config_field_optional!(web_ui, translate.t(LABEL_PATH), path) }
                             { config_field_optional!(web_ui, translate.t(LABEL_PLAYER_SERVER), player_server) }
-                            <Card>
-                              <h1>{translate.t(LABEL_AUTH)}</h1>
-                              {
-                                match web_ui.auth.as_ref() {
-                                    Some(auth) => html!{
-                                        <>
-                                        { config_field_bool!(auth, translate.t(LABEL_ENABLED), enabled) }
-                                        { config_field!(auth, translate.t(LABEL_ISSUER), issuer) }
-                                        { config_field_hide!(auth, translate.t(LABEL_SECRET), secret) }
-                                        { config_field!(auth, translate.t(LABEL_TOKEN_TTL_MINS), token_ttl_mins) }
-                                        { config_field_optional!(auth, translate.t(LABEL_USERFILE), userfile) }
-                                        </>
-                                    },
-                                    None => render_empty_auth(),
-                                }}
-                            </Card>
+                            { render_csp(web_ui) }
+                            { render_auth(web_ui) }
                         </>
                         }
                     } else {
diff --git a/frontend/src/app/components/userlist/proxy_type_input.rs b/frontend/src/app/components/userlist/proxy_type_input.rs
index 4962c9b10..dad2a3292 100644
--- a/frontend/src/app/components/userlist/proxy_type_input.rs
+++ b/frontend/src/app/components/userlist/proxy_type_input.rs
@@ -1,69 +1,141 @@
-use shared::model::{ProxyType};
+use shared::model::{ClusterFlags, ProxyType};
 use yew::prelude::*;
 use yew_i18n::use_translation;
 
+fn get_flags(pt: ProxyType)-> (bool, bool, bool, bool, bool) {
+    match pt {
+        ProxyType::Reverse(flags) => {
+            let cluster = flags.unwrap_or_else(ClusterFlags::all);
+            let live_flag = cluster.contains(ClusterFlags::Live);
+            let vod_flag = cluster.contains(ClusterFlags::Vod);
+            let series_flag = cluster.contains(ClusterFlags::Series);
+            (false, true, live_flag, vod_flag, series_flag)
+        }
+        ProxyType::Redirect => (true, false, false, false, false),
+    }
+}
+
 #[derive(Properties, Clone, PartialEq, Debug)]
 pub struct ProxyTypeInputProps {
     pub value: ProxyType,
+    #[prop_or_default]
+    pub onchange: Callback<ProxyType>,
 }
 
 #[function_component]
 pub fn ProxyTypeInput(props: &ProxyTypeInputProps) -> Html {
     let translate = use_translation();
-    //
-    // let render_chip = |flag: bool, class_sfx: &str,  label: &str, | -> Html {
-    //     if flag {
-    //         html! {
-    //             <Chip class={ format!("tp__proxy-type__reverse tp__proxy-type__reverse-{} active", class_sfx) } label={translate.t(label)} />
-    //         }
-    //     } else {
-    //         html!{
-    //             <Chip class={ format!("tp__proxy-type__redirect tp__proxy-type__redirect-{}", class_sfx)} label={translate.t(label)} />
-    //         }
-    //     }
-    // };
-    //
-    // match props.value {
-    //     ProxyType::Reverse(flags) => {
-    //         let cluster = flags.unwrap_or_else(ClusterFlags::all);
-    //         let live_flag = cluster.contains(ClusterFlags::Live);
-    //         let vod_flag = cluster.contains(ClusterFlags::Vod);
-    //         let series_flag = cluster.contains(ClusterFlags::Series);
-    //         if live_flag && vod_flag && series_flag {
-    //             html! { <Chip label={translate.t("LABEL.REVERSE")} class={"tp__proxy-type__reverse"} /> }
-    //         } else {
-    //             html! {
-    //             <div class="tp__proxy-type__mixed">
-    //                { render_chip(live_flag, "live", "LABEL.LIVE_SHORT") }
-    //                { render_chip(vod_flag, "vod", "LABEL.VOD_SHORT") }
-    //                { render_chip(series_flag, "series", "LABEL.SERIES_SHORT" ) }
-    //              </div>
-    //             }
-    //         }
-    //     }
-    //     ProxyType::Redirect => html! {
-    //         <Chip label={translate.t("LABEL.REDIRECT")} class={"tp__proxy-type__redirect"} />
-    //     },
-    // }
+    let selections = use_state(|| get_flags(props.value));
 
-    let handle_redirect_click = {
-      Callback::from(move |_| {
-          println!("redirect");
+    {
+        let set_selections = selections.clone();
+        use_effect_with(props.value, move |pt| {
+            set_selections.set(get_flags(*pt));
+        });
+    }
+
+    let handle_change = {
+      let onchange = props.onchange.clone();
+      Callback::from(move |(redirect, _reverse, live, vod, series)| {
+        if redirect {
+            onchange.emit(ProxyType::Redirect);
+        } else {
+            let cluster_flags = if live && vod && series {
+                None
+            } else {
+                let mut flags = ClusterFlags::empty();
+                if live {
+                    flags.insert(ClusterFlags::Live);
+                }
+                if vod {
+                    flags.insert(ClusterFlags::Vod);
+                }
+                if series {
+                    flags.insert(ClusterFlags::Series);
+                }
+                Some(flags)
+            };
+            onchange.emit(ProxyType::Reverse(cluster_flags));
+        }
       })
     };
 
+    let handle_redirect_click = {
+        let set_selections = selections.clone();
+        let emit_change = handle_change.clone();
+        Callback::from(move |_| {
+            let new_flags = (true, false, false, false, false);
+            set_selections.set(new_flags);
+            emit_change.emit(new_flags);
+        })
+    };
+    let handle_reverse_click = {
+        let set_selections = selections.clone();
+        let emit_change = handle_change.clone();
+        Callback::from(move |_| {
+            let new_flags = (false, true, true, true, true);
+            set_selections.set(new_flags);
+            emit_change.emit(new_flags);
+        })
+    };
+    let handle_reverse_live_click = {
+        let set_selections = selections.clone();
+        let emit_change = handle_change.clone();
+        Callback::from(move |_| {
+            let flags = *set_selections;
+            let new_flags = if flags.0 {
+                (false, true, true, true, true)
+            } else {
+               (false, true, !flags.2, flags.3, flags.4)
+            };
+            set_selections.set(new_flags);
+            emit_change.emit(new_flags);
+        })
+    };
+    let handle_reverse_vod_click = {
+        let set_selections = selections.clone();
+        let emit_change = handle_change.clone();
+        Callback::from(move |_| {
+            let flags = *set_selections;
+            let new_flags = if flags.0 {
+                (false, true, true, true, true)
+            } else {
+                (false, true, flags.2, !flags.3, flags.4)
+            };
+            set_selections.set(new_flags);
+            emit_change.emit(new_flags);
+        })
+    };
+
+    let handle_reverse_series_click = {
+        let set_selections = selections.clone();
+        let emit_change = handle_change.clone();
+        Callback::from(move |_| {
+            let flags = *set_selections;
+            let new_flags = if flags.0 {
+                (false, true, true, true, true)
+            } else {
+                (false, true, flags.2, flags.3, !flags.4)
+            };
+            set_selections.set(new_flags);
+            emit_change.emit(new_flags);
+        })
+    };
+
+    let (redirect, reverse, reverse_live, reverse_vod, reverse_series) = *selections;
+
     html! {
         <div class="tp__proxy-type-input">
-          <span class={"tp__chip"} onclick={handle_redirect_click}>
-            <span class="tp__chip__label">{ translate.t("LABEL.REDIRECT") }</span>
+          <span onclick={handle_redirect_click} class={classes!("tp__chip", "tp__proxy-type-input__redirect", if redirect {"active"} else {""})}>
+            <span>{ translate.t("LABEL.REDIRECT") }</span>
           </span>
 
-          <span class={"tp__chip"}>
-            <span class="tp__chip__label">{ translate.t("LABEL.REVERSE") }</span>
-            <span class={"tp__chip__group"}>
-                <span class="tp__chip__label">{ translate.t("LABEL.LIVE") }</span>
-                <span class="tp__chip__label">{ translate.t("LABEL.VIDEO") }</span>
-                <span class="tp__chip__label">{ translate.t("LABEL.SERIES") }</span>
+          <span class={classes!("tp__chip", "tp__chip__group", "tp__proxy-type-input__reverse" , if reverse {"active"} else {""})}>
+            <span onclick={handle_reverse_click}>{ translate.t("LABEL.REVERSE") }</span>
+            <span class={"tp__chip__group__sub tp__proxy-type-input__mixed"}>
+                <span onclick={handle_reverse_live_click} class={classes!("tp__chip", "tp__proxy-type-input__reverse-live", if reverse_live {"active"} else { if reverse {"redirect-active"} else {""} })}>{ translate.t("LABEL.LIVE_SHORT") }</span>
+                <span onclick={handle_reverse_vod_click} class={classes!("tp__chip", "tp__proxy-type-input__reverse-vod", if reverse_vod {"active"} else {if reverse {"redirect-active"} else {""} })}>{ translate.t("LABEL.VOD_SHORT") }</span>
+                <span onclick={handle_reverse_series_click} class={classes!("tp__chip", "tp__proxy-type-input__reverse-series", if reverse_series {"active"} else {if reverse {"redirect-active"} else {""} })}>{ translate.t("LABEL.SERIES_SHORT") }</span>
             </span>
           </span>
         </div>
diff --git a/frontend/src/app/components/userlist/proxy_user_credentials_form.rs b/frontend/src/app/components/userlist/proxy_user_credentials_form.rs
index 699a4e8dc..35f8cbc79 100644
--- a/frontend/src/app/components/userlist/proxy_user_credentials_form.rs
+++ b/frontend/src/app/components/userlist/proxy_user_credentials_form.rs
@@ -89,8 +89,12 @@ pub fn ProxyUserCredentialsForm(props: &ProxyUserCredentialsFormProps) -> Html {
 
             { config_field_child!(translate.t("LABEL.PROXY"), {
                html! {
-                     <ProxyTypeInput value={props.user.as_ref().map_or_else(|| ProxyType::Reverse(None), |u| u.credentials.proxy)} />
+                     <ProxyTypeInput value={props.user.as_ref().map_or_else(|| ProxyType::Reverse(None), |u| u.credentials.proxy)}
+                    onchange={Callback::from(|proxy_type: ProxyType|
+                        warn!("Proxy Type: {:?}", proxy_type)
+                    )}/>
             }})}
+
             <label>{ translate.t("LABEL.PROXY") }</label>
             <span>{"TODO"}</span>