diff --git a/docs/index.html b/docs/index.html
index a46d612..8027bb6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -519,8 +519,8 @@
                         </div>
                         <div class="item"><a href="https://github.com/tobychui/zoraxy/wiki" target="_blank">Zoraxy Wiki</a></div>
                         <div class="item"><a href="https://github.com/tobychui/zoraxy" target="_blank">Source Code</a></div>
-                        <div class="item"><a href="" target="_blank">Offical Plugin List</a></div>
-                        <div class="item"><a href="" target="_blank">Plugin Development Guide</a></div>
+                        <div class="item"><a href="https://github.com/aroz-online/zoraxy-official-plugins" target="_blank">Offical Plugin List</a></div>
+                        <div class="item"><a href="https://zoraxy.aroz.org/plugins/html/" target="_blank">Plugin Development Guide</a></div>
                     </div>
                 </div>	
                 <div class="three wide column">
diff --git a/docs/plugins/docs/3. Basic Examples/4. Dynamic Capture Example.md b/docs/plugins/docs/3. Basic Examples/4. Dynamic Capture Example.md
index 329e72c..018605f 100644
--- a/docs/plugins/docs/3. Basic Examples/4. Dynamic Capture Example.md	
+++ b/docs/plugins/docs/3. Basic Examples/4. Dynamic Capture Example.md	
@@ -318,7 +318,7 @@ If everything is correctly setup, you should see the following page when request
 
 Example terminal output for requesting `/foobar/*`:
 
-```
+```html
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Request captured by dynamic sniff path: /d_sniff/
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Header:
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Method: GET
diff --git a/docs/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html b/docs/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html
index 35c786e..858930c 100644
--- a/docs/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html	
+++ b/docs/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html	
@@ -615,7 +615,7 @@ func RenderDebugUI(w http.ResponseWriter, r *http.Request) {
                     :
                   </p>
                 </p>
-                <pre><span class="ts-text is-code">[2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Request captured by dynamic sniff path: /d_sniff/
+                <pre><code class="language-html">[2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Request captured by dynamic sniff path: /d_sniff/
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Header:
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Method: GET
 [2025-05-30 20:44:26.142645] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Hostname: a.localhost
@@ -641,7 +641,7 @@ func RenderDebugUI(w http.ResponseWriter, r *http.Request) {
 [2025-05-30 20:44:26.143165] [plugin-manager] [system:info] [Dynamic Capture Example:22964] Proto: HTTP/2.0
 [2025-05-30 20:44:26.143165] [plugin-manager] [system:info] [Dynamic Capture Example:22964] ProtoMajor: 2
 [2025-05-30 20:44:26.143165] [plugin-manager] [system:info] [Dynamic Capture Example:22964] ProtoMinor: 0
-</span></pre>
+</code></pre>
                 <div class="ts-divider has-top-spaced-large"></div>
                 <p>
                   <p class="ts-text">
diff --git a/src/web/components/httprp.html.bak b/src/web/components/httprp.html.bak
deleted file mode 100644
index 484eb37..0000000
--- a/src/web/components/httprp.html.bak
+++ /dev/null
@@ -1,797 +0,0 @@
-<div class="standardContainer">
-    <div class="ui basic segment">
-        <h2>HTTP Proxy</h2>
-        <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
-    </div>
-    <style>
-        #httpProxyList .ui.toggle.checkbox input:checked ~ label::before{
-            background-color: #00ca52 !important;
-        }
-
-        .subdEntry td:not(.ignoremw){
-            min-width: 200px;
-        }
-
-        .httpProxyListTools{
-            width: 100%;
-        }
-
-        .tag-select{
-            cursor: pointer;
-        }
-
-        .tag-select:hover{
-            text-decoration: underline;
-            opacity: 0.8;
-        }
-    </style>
-    <div class="httpProxyListTools" style="margin-bottom: 1em;">
-        <div id="tagFilterDropdown" class="ui floating basic dropdown labeled icon button" style="min-width: 150px;">
-            <i class="filter icon"></i>
-            <span class="text">Filter by tags</span>
-            <div class="menu">
-              <div class="ui icon search input">
-                <i class="search icon"></i>
-                <input type="text" placeholder="Search tags...">
-              </div>
-              <div class="divider"></div>
-                <div class="scrolling menu tagList">
-                    <!--
-                    Example: 
-                    <div class="item">
-                        <div class="ui red empty circular label"></div>
-                        Important
-                    </div>
-                    -->
-                    <!-- Add more tag options dynamically -->
-                </div>
-            </div>
-        </div>
-        <div class="ui small input"  style="width: 300px; height: 38px;">
-            <!-- Prevent the browser from filling the saved Zoraxy login account into the  input searchInput below -->
-            <input type="password"  autocomplete="off" hidden/>
-            <input type="text" id="searchInput"  placeholder="Quick Search" onkeydown="handleSearchInput(event);" onchange="handleSearchInput(event);" onblur="handleSearchInput(event);">
-        </div>
-    </div>
-    
-    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em; min-height: 300px;">
-        <table class="ui celled sortable unstackable compact table">
-            <thead>
-                <tr>
-                    <th>Host</th>
-                    <th>Destination</th>
-                    <th>Virtual Directory</th>
-                    <th>Tags</th>
-                    <th style="max-width: 300px;">Advanced Settings</th>
-                    <th class="no-sort" style="min-width:150px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="httpProxyList">
-            
-            </tbody>
-        </table>
-    </div>
-
-    <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
-    <br><br>
-</div>
-
-<script>
-
-    /* List all proxy endpoints */
-    function listProxyEndpoints(){
-        $.get("/api/proxy/list?type=host", function(data){
-            $("#httpProxyList").html(``);
-            if (data.error !== undefined){
-                    $("#httpProxyList").append(`<tr>
-                    <td data-label="" colspan="5"><i class="remove icon"></i> ${data.error}</td>
-                </tr>`);
-            }else if (data.length == 0){
-                $("#httpProxyList").append(`<tr>
-                    <td data-label="" colspan="5"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
-                </tr>`);
-            }else{
-                //Sort by RootOrMatchingDomain field
-                data.sort((a,b) => (a.RootOrMatchingDomain > b.RootOrMatchingDomain) ? 1 : ((b.RootOrMatchingDomain > a.RootOrMatchingDomain) ? -1 : 0))
-                data.forEach(subd => {
-                    let subdData = encodeURIComponent(JSON.stringify(subd));
-                    
-                    //Build the upstream list
-                    let upstreams = "";
-                    if (subd.ActiveOrigins.length == 0){
-                        //Invalid config
-                        upstreams = `<i class="ui yellow exclamation triangle icon"></i> No Active Upstream Origin<br>`;
-                    }else{
-                        subd.ActiveOrigins.forEach(upstream => {
-                            console.log(upstream);
-                            //Check if the upstreams require TLS connections
-                            let tlsIcon = "";
-                            if (upstream.RequireTLS){
-                                tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                                if (upstream.SkipCertValidations){
-                                    tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
-                                }
-                            }
-
-                            let upstreamLink = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`;
-
-                            upstreams += `<a href="${upstreamLink}" target="_blank">${upstream.OriginIpOrDomain} ${tlsIcon}</a><br>`;
-                        })
-                    }
-
-                    let inboundTlsIcon = "";
-                    if ($("#tls").checkbox("is checked")){
-                        inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                        if (subd.BypassGlobalTLS){
-                            inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
-                        }
-                    }else{
-                        inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
-                    }
-                    
-                    //Build the virtual directory list
-                    var vdList = `<div class="ui list">`;
-                    subd.VirtualDirectories.forEach(vdir => {
-                        vdList += `<div class="item">${vdir.MatchingPath} <i class="green angle double right icon"></i> ${vdir.Domain}</div>`;
-                    });
-                    vdList += `</div>`;
-
-                    if (subd.VirtualDirectories.length == 0){
-                        vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;">No Virtual Directory</small>`;
-                    }
-
-                    let enableChecked = "checked";
-                    if (subd.Disabled){
-                        enableChecked = "";
-                    }
-                    let httpProto = "http://";
-                    if ($("#tls").checkbox("is checked")) {
-                        httpProto = "https://";
-                    } else {
-                        httpProto = "http://";
-                    }
-                    let hostnameRedirectPort = currentListeningPort;
-                    if (hostnameRedirectPort == 80 || hostnameRedirectPort == 443){
-                        hostnameRedirectPort = "";
-                    }else{
-                        hostnameRedirectPort = ":" + hostnameRedirectPort;
-                    }
-                    let aliasDomains = ``;
-                    if (subd.MatchingDomainAlias != undefined && subd.MatchingDomainAlias.length > 0){
-                        aliasDomains = `<small class="aliasDomains" eptuuid="${subd.RootOrMatchingDomain}" style="color: #636363;">Alias: `;
-                        subd.MatchingDomainAlias.forEach(alias => {
-                            aliasDomains += `<a href="${httpProto}${alias}${hostnameRedirectPort}" target="_blank">${alias}</a>, `;
-                        });
-                        aliasDomains = aliasDomains.substr(0, aliasDomains.length - 2); //Remove the last tailing seperator
-                        aliasDomains += `</small><br>`;
-                    }
-
-                    $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
-                        <td data-label="" editable="true" datatype="inbound">
-                            <a href="${httpProto}${subd.RootOrMatchingDomain}${hostnameRedirectPort}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}<br>
-                            ${aliasDomains}
-                            <small class="accessRuleNameUnderHost" ruleid="${subd.AccessFilterUUID}"></small>
-                        </td>
-                        <td data-label="" editable="true" datatype="domain">
-                            <div class="upstreamList">
-                                ${upstreams}        
-                            </div>
-                        </td>
-                        <td data-label="" editable="true" datatype="vdir">${vdList}</td>
-                        <td data-label="tags" payload="${encodeURIComponent(JSON.stringify(subd.Tags))}" datatype="tags">
-                            <div class="tags-list">
-                            ${subd.Tags.length >0 ? subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join(""):"<small style='opacity: 0.3; pointer-events: none; user-select: none;'>No Tags</small>"}
-                            </div>
-                        </td>
-                        <td data-label="" editable="true" datatype="advanced" style="width: 350px;">
-                            ${subd.AuthenticationProvider.AuthMethod == 0x1?`<i class="ui grey key icon"></i> Basic Auth`:``}
-                            ${subd.AuthenticationProvider.AuthMethod == 0x2?`<i class="ui blue key icon"></i> Forward Auth`:``}
-                            ${subd.AuthenticationProvider.AuthMethod == 0x3?`<i class="ui yellow key icon"></i> OAuth2`:``}
-                            ${subd.AuthenticationProvider.AuthMethod != 0x0 && subd.RequireRateLimit?"<br>":""}
-                            ${subd.RequireRateLimit?`<i class="ui green check icon"></i> Rate Limit @ ${subd.RateLimit} req/s`:``}
-                            ${subd.AuthenticationProvider.AuthMethod == 0x0 && !subd.RequireRateLimit?`<small style="opacity: 0.3; pointer-events: none; user-select: none;">No Special Settings</small>`:""}
-                        </td>
-                        <td class="center aligned ignoremw" editable="true" datatype="action" data-label="">
-                            <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
-                                <input type="checkbox" class="enableToggle" name="active" ${enableChecked} eptuuid="${subd.RootOrMatchingDomain}" onchange="handleProxyRuleToggle(this);">
-                                <label></label>
-                            </div>
-                            <button title="Edit Proxy Rule" class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
-                            <button title="Remove Proxy Rule" class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button>
-                        </td>
-                    </tr>`);
-                });
-                populateTagFilterDropdown(data);
-            }
-
-            resolveAccessRuleNameOnHostRPlist();
-        });
-    }
-
-    //Perform realtime alias update without refreshing the whole page
-    function updateAliasListForEndpoint(endpointName, newAliasDomainList){
-        let targetEle = $(`.aliasDomains[eptuuid='${endpointName}']`);
-        console.log(targetEle);
-        if (targetEle.length == 0){
-            return;
-        }
-
-        let aliasDomains = ``;
-        if (newAliasDomainList != undefined && newAliasDomainList.length > 0){
-            aliasDomains = `Alias: `;
-            newAliasDomainList.forEach(alias => {
-                aliasDomains += `<a href="//${alias}" target="_blank">${alias}</a>, `;
-            });
-            aliasDomains = aliasDomains.substr(0, aliasDomains.length - 2); //Remove the last tailing seperator
-            $(targetEle).html(aliasDomains);
-            $(targetEle).show();
-        }else{
-            $(targetEle).hide();
-        }
-    }
-
-    //Resolve & Update all rule names on host PR list
-    function resolveAccessRuleNameOnHostRPlist(){
-        //Resolve the access filters
-        $.get("/api/access/list", function(data){
-            console.log(data);
-            if (data.error == undefined){
-                //Build a map base on the data
-                let accessRuleMap = {};
-                for (var i = 0; i < data.length; i++){
-                    accessRuleMap[data[i].ID] = data[i];
-                }
-                
-                
-                $(".accessRuleNameUnderHost").each(function(){
-                    let thisAccessRuleID = $(this).attr("ruleid");
-                    if (thisAccessRuleID== ""){
-                        thisAccessRuleID = "default"
-                    }
-
-                    if (thisAccessRuleID == "default"){
-                        //No need to label default access rules
-                        $(this).html("");
-                        return;
-                    }
-
-                    let rule = accessRuleMap[thisAccessRuleID];
-                    if (rule == undefined){
-                        //Missing config or config too old
-                        $(this).html(`<i class="ui red exclamation triangle icon"></i> <b style="color: #db2828;">Access Rule Error</b>`);
-                        return;
-                    }
-                    let icon = `<i class="ui grey filter icon"></i>`;
-                    if (rule.ID == "default"){
-                        icon = `<i class="ui yellow star icon"></i>`;
-                    }else if (rule.BlacklistEnabled && !rule.WhitelistEnabled){
-                        //This is a blacklist filter
-                        icon = `<i class="ui red filter icon"></i>`;
-                    }else if (rule.WhitelistEnabled && !rule.BlacklistEnabled){
-                        //This is a whitelist filter
-                        icon = `<i class="ui green filter icon"></i>`;
-                    }else if (rule.WhitelistEnabled && rule.BlacklistEnabled){
-                        //Whitelist and blacklist filter
-                        icon = `<i class="ui yellow filter icon"></i>`;
-                    }
-
-                    if (rule != undefined){
-                        $(this).html(`${icon} ${rule.Name}`);
-                    }
-                });
-            }
-        })
-    }
-
-    //Update the access rule name on given epuuid, call by hostAccessEditor.html
-    function updateAccessRuleNameUnderHost(epuuid, newruleUID){
-        $(`tr[eptuuid='${epuuid}'].subdEntry`).find(".accessRuleNameUnderHost").attr("ruleid", newruleUID);
-        resolveAccessRuleNameOnHostRPlist();
-    }
-
-    
-    /*
-        Inline editor for httprp.html
-    */
-
-    function editEndpoint(uuid) {
-        uuid = uuid.hexDecode();
-        var row = $('tr[eptuuid="' + uuid + '"]');
-        var columns = row.find('td[data-label]');
-        var payload = $(row).attr("payload");
-        payload = JSON.parse(decodeURIComponent(payload));
-        console.log(payload);
-        columns.each(function(index) {
-            var column = $(this);
-            var oldValue = column.text().trim();
-
-            if ($(this).attr("editable") == "false"){
-                //This col do not allow edit. Skip
-                return;
-            }
-
-            // Create an input element based on the column content
-            var input;
-            var datatype = $(this).attr("datatype");
-            if (datatype == "domain"){
-                let useStickySessionChecked = "";
-                if (payload.UseStickySession){
-                    useStickySessionChecked = "checked";
-                }
-
-                let enableUptimeMonitor = "";
-                //Note the config file store the uptime monitor as disable, so we need to reverse the logic
-                if (!payload.DisableUptimeMonitor){
-                    enableUptimeMonitor = "checked";
-                }
-
-                input = `<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 1em;" onclick="editUpstreams('${uuid}');"><i class="grey server icon"></i> Edit Upstreams</button>
-                <div class="ui divider"></div>
-                <div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="UseStickySession" ${useStickySessionChecked}>
-                    <label>Use Sticky Session<br>
-                        <small>Enable stick session on load balancing</small></label>
-                </div>
-                <div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="EnableUptimeMonitor" ${enableUptimeMonitor}>
-                    <label>Monitor Uptime<br>
-                        <small>Enable active uptime monitor</small></label>
-                </div>
-                `;
-                column.append(input);
-                $(column).find(".upstreamList").addClass("editing");
-            }else if (datatype == "vdir"){
-                //Append a quick access button for vdir page
-                column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
-                    <i class="ui yellow folder icon"></i> Edit Virtual Directories
-                </button>`);
-            }else if (datatype == "tags"){
-                column.append(`
-                    <div class="ui divider"></div>
-                    <button class="ui basic compact fluid tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editTags('${uuid}');"><i class="ui purple tag icon"></i> Edit tags</button>
-                `);
-            }else if (datatype == "advanced"){
-                let authProvider = payload.AuthenticationProvider.AuthMethod;
-                
-                let skipWebSocketOriginCheck = payload.SkipWebSocketOriginCheck;
-                let wsCheckstate = "";
-                if (skipWebSocketOriginCheck){
-                    wsCheckstate = "checked";
-                }
-
-                let requireRateLimit = payload.RequireRateLimit;
-                let rateLimitCheckState = "";
-                if (requireRateLimit){
-                    rateLimitCheckState = "checked";
-                }
-                let rateLimit = payload.RateLimit;
-                if (rateLimit == 0){
-                    //This value is not set. Make it default to 100
-                    rateLimit = 100;
-                }
-                let rateLimitDisableState = "";
-                if (!payload.RequireRateLimit){
-                    rateLimitDisableState = "disabled";
-                }
-
-                column.empty().append(`
-                    <div class="grouped fields authProviderPicker">
-                        <label><b>Authentication Provider</b></label>
-                        <div class="field">
-                            <div class="ui radio checkbox">
-                                <input type="radio" value="0" name="authProviderType" ${authProvider==0x0?"checked":""}>
-                                <label>None (Anyone can access)</label>
-                            </div>
-                        </div>
-                        <div class="field">
-                            <div class="ui radio checkbox">
-                                <input type="radio" value="1" name="authProviderType" ${authProvider==0x1?"checked":""}>
-                                <label>Basic Auth</label>
-                            </div>
-                        </div>
-                        <div class="field">
-                            <div class="ui radio checkbox">
-                                <input type="radio" value="2" name="authProviderType" ${authProvider==0x2?"checked":""}>
-                                <label>Forward Auth</label>
-                            </div>
-                        </div>
-                        <div class="field">
-                            <div class="ui radio checkbox">
-                                <input type="radio" value="3" name="authProviderType" ${authProvider==0x3?"checked":""}>
-                                <label>OAuth2</label>
-                            </div>
-                        </div>
-                    </div>
-                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
-                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
-
-                    <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
-                        <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
-                            <div class="title">
-                                <i class="dropdown icon"></i>
-                                Security Options
-                            </div>
-                            <div class="content">
-                                <div class="ui checkbox" style="margin-top: 0.4em;">
-                                    <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
-                                    <label>Require Rate Limit<br>
-                                    <small>Check this to enable rate limit on this inbound hostname</small></label>
-                                </div><br>
-                                <div class="ui mini right labeled fluid input ${rateLimitDisableState}" style="margin-top: 0.4em;">
-                                    <input type="number" class="RateLimit" value="${rateLimit}" min="1" >
-                                    <label class="ui basic label">
-                                        req / sec / IP
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    <div>
-                `);
-
-                $('.authProviderPicker .ui.checkbox').checkbox();
-            } else if (datatype == "ratelimit"){
-               
-                column.empty().append(`
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="RequireRateLimit" ${checkstate}>
-                        <label>Require Rate Limit</label>
-                    </div>
-                    <div class="ui mini fluid input">
-                        <input type="number" class="RateLimit" value="${rateLimit}" placeholder="100" min="1" max="1000" >
-                    </div>
-                `);
-
-            }else if (datatype == 'action'){
-                column.empty().append(`
-                <button title="Save" onclick="saveProxyInlineEdit('${uuid.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
-                <button title="Cancel" onclick="exitProxyInlineEdit();" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui remove icon"></i></button>
-                
-                `);
-            }else if (datatype == "inbound"){
-                let originalContent = $(column).html();
-
-                //Check if this host is covered within one of the certificates. If not, show the icon
-                let enableQuickRequestButton = true;
-                let domains = [payload.RootOrMatchingDomain]; //Domain for getting certificate if needed
-                for (var i = 0; i < payload.MatchingDomainAlias.length; i++){
-                    let thisAliasName = payload.MatchingDomainAlias[i];
-                    domains.push(thisAliasName);
-                }
-
-                //Check if the domain or alias contains wildcard, if yes, disabled the get certificate button
-                if (payload.RootOrMatchingDomain.indexOf("*") > -1){
-                    enableQuickRequestButton = false;
-                }
-                
-                if (payload.MatchingDomainAlias != undefined){
-                    for (var i = 0; i < payload.MatchingDomainAlias.length; i++){
-                        if (payload.MatchingDomainAlias[i].indexOf("*") > -1){
-                            enableQuickRequestButton = false;
-                            break;
-                        }
-                    }
-                }
-
-                //encode the domain to DOM
-                let certificateDomains = encodeURIComponent(JSON.stringify(domains));
-                
-                column.empty().append(`${originalContent}
-                    <div class="ui divider"></div>
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="BypassGlobalTLS" ${payload.BypassGlobalTLS?"checked":""}>
-                        <label>Allow plain HTTP access<br>
-                            <small>Allow inbound connections without TLS/SSL</small></label>
-                    </div><br>
-                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAliasHostnames('${uuid}');"><i class=" blue at icon"></i> Alias</button>
-                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAccessRule('${uuid}');"><i class="ui filter icon"></i> Access Rule</button>
-                    <button class="ui basic compact tiny ${enableQuickRequestButton?"":"disabled"} button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="requestCertificateForExistingHost('${uuid}', '${certificateDomains}', this);"><i class="green lock icon"></i> Get Certificate</button>
-                `);
-
-                $(".hostAccessRuleSelector").dropdown();
-            }else{
-                //Unknown field. Leave it untouched
-            }
-        });
-
-        $(".endpointAdvanceConfig").accordion();
-        $("#httpProxyList").find(".editBtn").addClass("disabled");
-    }
-
-    //handleToggleRateLimitInput will get trigger if the "require rate limit" checkbox
-    // is changed and toggle the disable state of the rate limit input field
-    function handleToggleRateLimitInput(){
-        let isRateLimitEnabled = $("#httpProxyList input.RequireRateLimit")[0].checked;
-        if (isRateLimitEnabled){
-            $("#httpProxyList input.RateLimit").parent().removeClass("disabled");
-        }else{
-            $("#httpProxyList input.RateLimit").parent().addClass("disabled");
-        }
-    }
-
-    function exitProxyInlineEdit(){
-        listProxyEndpoints();
-        $("#httpProxyList").find(".editBtn").removeClass("disabled");
-    }
-
-    function saveProxyInlineEdit(uuid){
-        uuid = uuid.hexDecode();
-        var row = $('tr[eptuuid="' + uuid + '"]');
-        if (row.length == 0){
-            return;
-        }
-        
-        var epttype = "host";
-        let useStickySession =  $(row).find(".UseStickySession")[0].checked;
-        let DisableUptimeMonitor = !$(row).find(".EnableUptimeMonitor")[0].checked;
-        let authProviderType = $(row).find(".authProviderPicker input[type='radio']:checked").val();
-        let requireRateLimit = $(row).find(".RequireRateLimit")[0].checked;
-        let rateLimit = $(row).find(".RateLimit").val();
-        let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
-        let tags = getTagsArrayFromEndpoint(uuid);
-        if (tags.length > 0){
-            tags = tags.join(",");
-        }else{
-            tags = "";
-        }
-        $.cjax({
-            url: "/api/proxy/edit",
-            method: "POST",
-            data: {
-                "type": epttype,
-                "rootname": uuid,
-                "ss":useStickySession,
-                "dutm": DisableUptimeMonitor,
-                "bpgtls": bypassGlobalTLS,
-                "authprovider" :authProviderType,
-                "rate" :requireRateLimit,
-                "ratenum" :rateLimit,
-                "tags": tags,
-            },
-            success: function(data){
-                if (data.error !== undefined){
-                    msgbox(data.error, false, 6000);
-                }else{
-                    msgbox("Proxy endpoint updated");
-                    listProxyEndpoints();
-                }
-            }
-        })
-    }
-
-    //Generic functions for delete rp endpoints 
-    function deleteEndpoint(epoint){
-        epoint = decodeURIComponent(epoint).hexDecode();
-        if (confirm("Confirm remove proxy for :" + epoint + "?")){
-            $.cjax({
-                url: "/api/proxy/del",
-                method: "POST",
-                data: {ep: epoint},
-                success: function(data){
-                    if (data.error == undefined){
-                        listProxyEndpoints();
-                        msgbox("Proxy Rule Deleted", true);
-                        reloadUptimeList();
-                    }else{
-                        msgbox(data.error, false);
-                    }
-                }
-            })
-        }
-    }
-
-    
-    /* button events */
-    function editBasicAuthCredentials(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
-    }
-
-    function editAccessRule(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload);
-    }
-
-    function editAliasHostnames(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload);
-    }
-
-    function quickEditVdir(uuid){
-        openTabById("vdir");
-        $("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
-    }
-
-    //Open the custom header editor
-    function editCustomHeaders(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload);
-    }
-
-    //Open the load balance option
-    function editUpstreams(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload);
-    }
-
-    function handleProxyRuleToggle(object){
-        let endpointUUID = $(object).attr("eptuuid");
-        let isChecked = object.checked;
-        $.cjax({
-            url: "/api/proxy/toggle",
-            data: {
-                "ep": endpointUUID,
-                "enable": isChecked
-            },
-            success: function(data){
-                if (data.error != undefined){
-                    msgbox(data.error, false);
-                }else{
-                    if (isChecked){
-                        msgbox("Proxy Rule Enabled");
-                    }else{
-                        msgbox("Proxy Rule Disabled");
-                    }
-                    
-                }
-            }
-        })
-    }
-
-    /* 
-        Certificate Shortcut
-    */
-
-    function requestCertificateForExistingHost(hostUUID, RootAndAliasDomains, btn=undefined){
-        RootAndAliasDomains = JSON.parse(decodeURIComponent(RootAndAliasDomains))
-        let renewDomainKey = RootAndAliasDomains.join(",");
-        let preferedACMEEmail = $("#prefACMEEmail").val();
-        if (preferedACMEEmail == ""){
-            msgbox("Preferred email for ACME registration not set", false);
-            return;
-        }
-        let defaultCA = $("#defaultCA").dropdown("get value");
-        if (defaultCA == ""){
-            defaultCA = "Let's Encrypt";
-        }
-
-        //Check if the root or the alias domain contain wildcard character, if yes, return error
-        for (var i = 0; i < RootAndAliasDomains.length; i++){
-            if (RootAndAliasDomains[i].indexOf("*") != -1){
-                msgbox("Wildcard domain can only be setup via ACME tool", false);
-                return;
-            }
-        }
-        
-        //Renew the certificate
-        renewCertificate(renewDomainKey, false, btn);
-    }
-
-    //Bind on tab switch events
-    tabSwitchEventBind["httprp"] = function(){
-        listProxyEndpoints();
-
-        //Reset the tag filter
-        $("#tagFilterDropdown").dropdown('set selected', "");
-    }
-
-    /* Tags & Search */
-    function handleSearchInput(event){
-        if (event.key == "Escape"){
-            $("#searchInput").val("");
-        }
-        filterProxyList();
-    }
-
-     // Function to filter the proxy list
-     function filterProxyList() {
-        let searchInput = $("#searchInput").val().toLowerCase();
-        let selectedTag = $("#tagFilterDropdown").dropdown('get value');
-        $("#httpProxyList tr").each(function() {
-            let host = $(this).find("td[data-label='']").text().toLowerCase();
-            let tagElements = $(this).find("td[data-label='tags']");
-            let tags = tagElements.attr("payload");
-            tags = JSON.parse(decodeURIComponent(tags));
-            if ((host.includes(searchInput) || searchInput === "") && (tags.includes(selectedTag) || selectedTag === "")) {
-                $(this).show();
-            } else {
-                $(this).hide();
-            }
-        });
-    }
-
-    // Function to generate a color based on a tag name
-    function getTagColorByName(tagName) {
-        function hashCode(str) {
-            return str.split('').reduce((prevHash, currVal) =>
-                ((prevHash << 5) - prevHash) + currVal.charCodeAt(0), 0);
-        }
-        let hash = hashCode(tagName);
-        let color = '#' + ((hash >> 24) & 0xFF).toString(16).padStart(2, '0') +
-                            ((hash >> 16) & 0xFF).toString(16).padStart(2, '0') +
-                            ((hash >> 8) & 0xFF).toString(16).padStart(2, '0');
-        return color;
-    }
-
-    function getTagTextColor(tagName){
-        let color = getTagColorByName(tagName);
-        let r = parseInt(color.substr(1, 2), 16);
-        let g = parseInt(color.substr(3, 2), 16);
-        let b = parseInt(color.substr(5, 2), 16);
-        let brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);
-        return brightness > 125 ? "#000000" : "#ffffff";
-    }
-    
-     // Populate the tag filter dropdown
-     function populateTagFilterDropdown(data) {
-        let tags = new Set();
-        data.forEach(subd => {
-            subd.Tags.forEach(tag => tags.add(tag));
-        });
-        tags = Array.from(tags).sort((a, b) => a.localeCompare(b));
-        let dropdownMenu = $("#tagFilterDropdown .tagList");
-        dropdownMenu.html(`<div class="item tag-select" data-value="">
-            <div class="ui grey empty circular label"></div>
-            Show all
-        </div>`);
-        tags.forEach(tag => {
-            let thisTagColor = getTagColorByName(tag);
-            dropdownMenu.append(`<div class="item tag-select" data-value="${tag}">
-                <div class="ui empty circular label" style="background-color: ${thisTagColor}; border-color: ${thisTagColor};" ></div>
-                ${tag}
-            </div>`);
-        });
-    }
-
-    // Edit tags for a specific endpoint
-    function editTags(uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: "host",
-            ep: uuid
-        }));
-        showSideWrapper("snippet/tagEditor.html?t=" + Date.now() + "#" + payload);
-    }
-
-    // Render the tags preview from tag editing snippet
-    function renderTagsPreview(endpoint, tags){
-        let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
-        //Update the tag DOM
-        let newTagDOM = tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
-        $(targetProxyRuleEle).find(".tags-list").html(newTagDOM);
-
-        //Update the tag payload
-        $(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags)));
-    }
-
-    function getTagsArrayFromEndpoint(endpoint){
-        let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
-        let tags = $(targetProxyRuleEle).attr("payload");
-        return JSON.parse(decodeURIComponent(tags));
-    }
-
-    // Initialize the proxy list on page load
-    $(document).ready(function() {
-        listProxyEndpoints();
-
-        // Event listener for clicking on tags
-        $(document).on('click', '.tag-select', function() {
-            let tag = $(this).text().trim();
-            $('#tagFilterDropdown').dropdown('set selected', tag);
-            filterProxyList();
-        });
-    });
-</script>
diff --git a/src/web/components/httprp_new.html b/src/web/components/httprp_new.html
new file mode 100644
index 0000000..e7b4f4f
--- /dev/null
+++ b/src/web/components/httprp_new.html
@@ -0,0 +1,1455 @@
+<div class="standardContainer">
+    <div class="ui basic segment">
+        <h2>HTTP Proxy</h2>
+        <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
+    </div>
+    <style>
+        #httpProxyList .ui.toggle.checkbox input:checked ~ label::before{
+            background-color: #00ca52 !important;
+        }
+
+        .subdEntry td:not(.ignoremw){
+            min-width: 100px;
+        }
+
+        .httpProxyListTools{
+            width: 100%;
+        }
+
+        .tag-select{
+            cursor: pointer;
+        }
+
+        th.no-sort{
+            cursor: default !important;
+        }
+
+        .tag-select:hover{
+            text-decoration: underline;
+            opacity: 0.8;
+        }
+
+        .inlineEditActionBtn{
+            border: 0px solid transparent !important;
+            box-shadow: none !important;
+            background-color: transparent !important;
+        }
+
+        body.darkTheme .ui.basic.small.icon.circular.button.inlineEditActionBtn{
+            border: 0px solid transparent !important;
+        }
+
+        /* Custom, non overlaying modal for proxy rule editing */
+        #httprpEditModal{
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 68vw;
+            height: 75vh;
+            background-color: var(--theme_bg_primary);
+            padding: 1.4em;
+            border-radius: .6em;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 8px 16px rgba(0, 0, 0, 0.2);
+            z-index: 9;
+            max-width: 840px;
+        }
+
+        #httprpEditModal .rpconfig_content{
+            height: 100%;
+        }
+
+        #httprpEditModal .editor_side_wrapper{
+            position: absolute;
+            top: 0;
+            right: 0;
+            height:100%;
+            width: 100%;
+            background-color: var(--theme_bg_primary);
+        }
+
+        #httprpEditModal .wrapper_frame{
+            width: 100%;
+            border: 1px solid var(--divider_color);
+            border-radius: 0.5em;
+            height: calc(100%);
+        }
+
+        #httprpEditModal .editor_side_wrapper .wrapper_frame{
+            height: calc(100% - 30px);
+        }
+
+        #httprpEditModal .editor_back_button {
+            border: none;
+            background-color: transparent;
+            box-shadow: none;
+            color: var(--text_color);
+            font-size: 2.2em;
+            cursor: pointer;
+            padding-top: 20px;
+        }
+
+        #httprpEditModal .editor_back_button:hover{
+            opacity: 0.5;
+        }
+
+        @media screen and (max-width: 1024px) {
+            #httprpEditModal {
+                width: 85vw;
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            #httprpEditModal {
+                height: 80vh;
+                border-radius: 0;
+                overflow-y: scroll;
+            }
+
+            .httpProxyEditClosePC{
+                display:none !important;
+            }
+            .httpProxyEditCloseMobile{
+                display:block !important;
+            }
+        }
+
+        @media screen and (min-width: 769px) {
+            .httpProxyEditClosePC{
+                display:block !important;
+            }
+            .httpProxyEditCloseMobile{
+                display:none !important;
+            }
+        }
+
+        #httprpEditDarkenLayer {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 8;
+            backdrop-filter: blur(3px);
+        }
+
+        #httprpEditModalWrapper {
+            display: none; /* Hidden by default */
+        }
+    </style>
+    <div class="httpProxyListTools" style="margin-bottom: 1em;">
+        <div id="tagFilterDropdown" class="ui floating basic dropdown labeled icon button" style="min-width: 150px;">
+            <i class="filter icon"></i>
+            <span class="text">Filter by tags</span>
+            <div class="menu">
+              <div class="ui icon search input">
+                <i class="search icon"></i>
+                <input type="text" placeholder="Search tags...">
+              </div>
+              <div class="divider"></div>
+                <div class="scrolling menu tagList">
+                    <!--
+                    Example: 
+                    <div class="item">
+                        <div class="ui red empty circular label"></div>
+                        Important
+                    </div>
+                    -->
+                    <!-- Add more tag options dynamically -->
+                </div>
+            </div>
+        </div>
+        <div class="ui small input"  style="width: 300px; height: 38px;">
+            <!-- Prevent the browser from filling the saved Zoraxy login account into the  input searchInput below -->
+            <input type="password"  autocomplete="off" hidden/>
+            <input type="text" id="searchInput"  placeholder="Quick Search" onkeydown="handleSearchInput(event);" onchange="handleSearchInput(event);" onblur="handleSearchInput(event);">
+        </div>
+    </div>
+    
+    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em; min-height: 300px;">
+        <table class="ui unstackable sortable compact celled definition table">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>Host</th>
+                    <th>Destination</th>
+                    <th>Virtual Directory</th>
+                    <th class="no-sort">Tags</th>
+                    <th class="no-sort" style="width:50px; cursor: default !important;"></th>
+                </tr>
+            </thead>
+            <tbody id="httpProxyList">
+            
+            </tbody>
+        </table>
+    </div>
+
+    <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
+    <br><br>
+</div>
+
+<!-- Modal for editing a HTTP Proxy Rule -->
+<div id="httprpEditModalWrapper">
+    <div id="httprpEditModal" editing-host="">
+        <div class="ui stackable grid" style="height:100%;">
+            <div class="four wide column">
+                <div class="ui secondary fluid vertical menu">
+                    <a class="active item hrpedit_menu_item" cfgpage="downstream">
+                        <i class="angle double white right icon"></i> Downstream
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="upstream">
+                        <i class="angle double left icon"></i> Upstream
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="vdirs">
+                        <i class="angle folder icon"></i> Virtual Directory
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="alias">
+                        <i class="at icon"></i> Alias
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="ssl">
+                        <i class="lock icon"></i> TLS / SSL
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="headers">
+                        <i class="heading icon"></i> Headers
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="accessrule">
+                        <i class="star icon"></i> Access Rules
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="security">
+                        <i class="key icon"></i> Security
+                    </a>
+                    <a class="item hrpedit_menu_item" cfgpage="tags">
+                        <i class="tags icon"></i> Tags
+                    </a>
+                </div>
+
+                <button class="ui basic fluid button httpProxyEditClosePC" onclick="closeHttpRuleEditor();">Close</button>
+            </div>
+            <div class="twelve wide column">
+                <div style="height:100%;">
+                    <!-- Downstream -->
+                    <div class="rpconfig_content" rpcfg="downstream">
+                        <div class="ui segment">
+                            <h3 class="downstream_primary_hostname">
+                                
+                            </h3>
+                            <div class="downstream_alias_hostname">
+
+                            </div>
+                            <div class="ui divider"></div>
+                            <div class="downstream_action_list">
+                                <div class="ui checkbox" style="margin-top: 0.4em;">
+                                    <input type="checkbox" class="BypassGlobalTLS" ${subd.BypassGlobalTLS?"checked":""}>
+                                    <label>Allow plain HTTP access<br>
+                                        <small>Allow inbound connections without TLS/SSL</small></label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Upstream -->
+                    <div class="rpconfig_content" rpcfg="upstream">
+                        <div class="ui segment">
+                            <div class="upstream_list">
+
+                            </div>
+                            <button class="ui basic compact button editUpstreamButton" style="margin-left: 0.4em; margin-top: 1em;"><i class="grey server icon"></i> Edit Upstreams</button>
+                            <div class="ui divider"></div>
+                            <div class="ui checkbox" style="margin-top: 0.4em;">
+                                <input type="checkbox" class="EnableUptimeMonitor">
+                                <label>Monitor Uptime<br>
+                                    <small>Enable active uptime monitor and auto disable upstreams that are offline</small></label>
+                            </div>
+                            <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
+                                <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
+                                    <div class="title">
+                                        <i class="dropdown icon"></i>
+                                        Advanced Settings
+                                    </div>
+                                    <div class="content">
+                                        <div class="ui checkbox" style="margin-top: 0.4em;">
+                                            <input type="checkbox" class="UseStickySession">
+                                            <label>Use Sticky Session<br>
+                                                <small>Enable stick session on load balancing</small></label>
+                                        </div>
+                                        <br>
+                                        <div class="ui disabled checkbox" style="margin-top: 0.4em;">
+                                            <input type="checkbox" class="DisableChunkedTransferEncoding">
+                                            <label>Disable Chunked Transfer Encoding<br>
+                                                <small>Enable this option if your upstream uses a legacy HTTP server implementation</small></label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Virtual Directories-->
+                    <div class="rpconfig_content" rpcfg="vdirs">
+                        <div class="ui segment">
+                            <div class="vdir_list">
+
+                            </div>
+                            <div class="ui divider"></div>
+                            <button class="ui basic tiny button editVdirBtn" style="margin-left: 0.4em; margin-top: 0.4em;">
+                                <i class="ui yellow folder icon"></i> Edit Virtual Directories
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Alias -->
+                    <div class="rpconfig_content" rpcfg="alias">
+                        <iframe src="" class="wrapper_frame">
+
+                        </iframe>
+                    </div>
+                    <!-- TLS / SSL -->
+                    <div class="rpconfig_content" rpcfg="ssl">
+                        <div class="ui segment">
+                            <p>Work In Progress </p>
+                            <br>
+                            <button class="ui basic small button getCertificateBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="green lock icon"></i> Get Certificate</button>
+                        </div>
+                    </div>
+                    <!-- Custom Headers -->
+                    <div class="rpconfig_content" rpcfg="headers">
+                        <iframe src="" class="wrapper_frame">
+
+                        </iframe>
+                    </div>
+                    <!-- Access Rule -->
+                    <div class="rpconfig_content" rpcfg="accessrule">
+                        <iframe src="" class="wrapper_frame">
+
+                        </iframe>
+                    </div>
+                    <!-- Security -->
+                    <div class="rpconfig_content" rpcfg="security">
+                        <div class="ui segment">
+                            <div class="grouped fields authProviderPicker">
+                                <!-- Auth Providers -->
+                                <label><b>Authentication Provider</b></label>
+                                <div class="field">
+                                    <div class="ui radio checkbox">
+                                        <input type="radio" value="0" name="authProviderType">
+                                        <label>None (Anyone can access)</label>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="ui radio checkbox">
+                                        <input type="radio" value="1" name="authProviderType">
+                                        <label>Basic Auth</label>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="ui radio checkbox">
+                                        <input type="radio" value="2" name="authProviderType">
+                                        <label>Forward Auth</label>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="ui radio checkbox">
+                                        <input type="radio" value="3" name="authProviderType">
+                                        <label>OAuth2</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <br>
+                            <button class="ui basic compact tiny button editBasicAuthCredentialsBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="ui blue user circle icon"></i> Basic Auth Credentials</button>
+                            
+                            <div class="ui divider"></div>
+                            <!-- Rate Limits-->
+                            <div class="ui checkbox" style="margin-top: 0.4em;">
+                                <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
+                                <label>Require Rate Limit<br>
+                                <small>Check this to enable rate limit on this inbound hostname</small></label>
+                            </div><br>
+                            <div class="ui small right labeled fluid input" style="margin-top: 0.4em;">
+                                <input type="number" class="RateLimit" value="0" min="1" >
+                                <label class="ui basic label">
+                                    req / sec / IP
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Tags -->
+                    <div class="rpconfig_content" rpcfg="tags">
+                        <iframe src="" class="wrapper_frame">
+
+                        </iframe>
+                    </div>
+                </div>
+                <button class="ui basic fluid button httpProxyEditCloseMobile" onclick="closeHttpRuleEditor();">Close</button>
+                <!-- Editor Side Wrapper -->
+                <div class="editor_side_wrapper" style="display:none;">
+                    <a class="editor_back_button">
+                        <i class="chevron circle left icon" style="margin-top: 22px;"></i>
+                    </a>
+                    <iframe src="snippet/placeholder.html" class="wrapper_frame">
+
+                    </iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="httprpEditDarkenLayer"></div>
+</div>
+
+
+<script>
+    var httpProxyList = []; //Proxy list of the current node
+
+    $('#httprpEditModal .tabular.menu .item').tab();
+
+    /* Renderers */
+    function renderUpstreamList(subd){
+        //Build the upstream list
+        let upstreams = "";
+        if (subd.ActiveOrigins.length == 0){
+            //Invalid config
+            upstreams = `<i class="ui yellow exclamation triangle icon"></i> No Active Upstream Origin<br>`;
+        }else{
+            subd.ActiveOrigins.forEach(upstream => {
+                //console.log(upstream);
+                //Check if the upstreams require TLS connections
+                let tlsIcon = "";
+                if (upstream.RequireTLS){
+                    tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
+                    if (upstream.SkipCertValidations){
+                        tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
+                    }
+                }
+
+                let upstreamLink = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`;
+
+                upstreams += `<a href="${upstreamLink}" target="_blank">${upstream.OriginIpOrDomain} ${tlsIcon}</a><br>`;
+            })
+        }
+        return upstreams;
+    }
+
+    function renderVirtualDirectoryList(subd){
+        let vdList = `<div class="ui list">`;
+        subd.VirtualDirectories.forEach(vdir => {
+            vdList += `<div class="item">${vdir.MatchingPath} <i class="green angle double right icon"></i> ${vdir.Domain}</div>`;
+        });
+        vdList += `</div>`
+        if (subd.VirtualDirectories.length == 0){
+            vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;">No Virtual Directory</small>`;
+        }
+
+        return vdList;
+    }
+
+    function renderTagList(subd){
+        let tagList = "";
+        if (subd.Tags.length > 0){
+            tagList = subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
+        }else{
+            tagList = "<small style='opacity: 0.3; pointer-events: none; user-select: none;'>No Tags</small>";
+            tagListEmpty = true;
+        }
+        return tagList;
+    }
+
+    /* List all proxy endpoints */
+    function listProxyEndpoints(){
+        $.get("/api/proxy/list?type=host", function(data){
+            $("#httpProxyList").html(``);
+            if (data.error !== undefined){
+                    $("#httpProxyList").append(`<tr>
+                    <td data-label="" colspan="5"><i class="remove icon"></i> ${data.error}</td>
+                </tr>`);
+            }else if (data.length == 0){
+                $("#httpProxyList").append(`<tr>
+                    <td data-label="" colspan="5"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
+                </tr>`);
+            }else{
+                //Sort by RootOrMatchingDomain field
+                data.sort((a,b) => (a.RootOrMatchingDomain > b.RootOrMatchingDomain) ? 1 : ((b.RootOrMatchingDomain > a.RootOrMatchingDomain) ? -1 : 0))
+                httpProxyList = data;
+                data.forEach(subd => {
+                    let subdData = encodeURIComponent(JSON.stringify(subd));
+                    
+                    //Build the upstream list
+                    let upstreams = renderUpstreamList(subd);
+
+                    let inboundTlsIcon = "";
+                    if ($("#tls").checkbox("is checked")){
+                        inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
+                        if (subd.BypassGlobalTLS){
+                            inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
+                        }
+                    }else{
+                        inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
+                    }
+                    
+                    //Build the virtual directory list
+                    let vdList = renderVirtualDirectoryList(subd);
+                    let vdIsEmpty = (subd.VirtualDirectories.length == 0);
+
+                    //Build the Subdomain enable checkbox
+                    let enableChecked = "checked";
+                    if (subd.Disabled){
+                        enableChecked = "";
+                    }
+
+                    //Generate a  the TLS lock icons
+                    let httpProto = "http://";
+                    if ($("#tls").checkbox("is checked")) {
+                        httpProto = "https://";
+                    } else {
+                        httpProto = "http://";
+                    }
+                    let hostnameRedirectPort = currentListeningPort;
+                    if (hostnameRedirectPort == 80 || hostnameRedirectPort == 443){
+                        hostnameRedirectPort = "";
+                    }else{
+                        hostnameRedirectPort = ":" + hostnameRedirectPort;
+                    }
+
+                    //Generate alias domain list
+                    let aliasDomains = ``;
+                    if (subd.MatchingDomainAlias != undefined && subd.MatchingDomainAlias.length > 0){
+                        aliasDomains = `<small class="aliasDomains" eptuuid="${subd.RootOrMatchingDomain}" style="color: #636363;">Alias: `;
+                        subd.MatchingDomainAlias.forEach(alias => {
+                            aliasDomains += `<a href="${httpProto}${alias}${hostnameRedirectPort}" target="_blank">${alias}</a>, `;
+                        });
+                        aliasDomains = aliasDomains.substr(0, aliasDomains.length - 2); //Remove the last tailing seperator
+                        aliasDomains += `</small><br>`;
+                    }
+
+                    //Build tag list
+                    let tagList = renderTagList(subd);
+                    let tagListEmpty = (subd.Tags.length == 0);
+                    
+                    $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
+                        <td class="collapsing ignoremw" datatype="enable">
+                            <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
+                                <input type="checkbox" class="enableToggle" name="active" ${enableChecked} eptuuid="${subd.RootOrMatchingDomain}" onchange="handleProxyRuleToggle(this);">
+                                <label></label>
+                            </div>
+                        </td>
+                        <td data-label="" editable="true" datatype="inbound">
+                            <a href="${httpProto}${subd.RootOrMatchingDomain}${hostnameRedirectPort}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}<br>
+                            ${aliasDomains}
+                            <small class="accessRuleNameUnderHost" ruleid="${subd.AccessFilterUUID}"></small>
+                        </td>
+                        <td data-label="" editable="true" datatype="domain">
+                            <div class="upstreamList">
+                                ${upstreams}        
+                            </div>
+                        </td>
+                        <td data-label="" editable="true" datatype="vdir" style="${vdIsEmpty?"text-align: center;":""}">${vdList}</td>
+                        <td data-label="tags" payload="${encodeURIComponent(JSON.stringify(subd.Tags))}" datatype="tags" style="${tagListEmpty?"text-align: center;":""}">
+                            <div class="tags-list">
+                            ${tagList}
+                            </div>
+                        </td>
+                        <!-- <td data-label="" editable="true" datatype="advanced" style="width: 350px;">
+                            ${subd.AuthenticationProvider.AuthMethod == 0x1?`<i class="ui grey key icon"></i> Basic Auth`:``}
+                            ${subd.AuthenticationProvider.AuthMethod == 0x2?`<i class="ui blue key icon"></i> Forward Auth`:``}
+                            ${subd.AuthenticationProvider.AuthMethod == 0x3?`<i class="ui yellow key icon"></i> OAuth2`:``}
+                            ${subd.AuthenticationProvider.AuthMethod != 0x0 && subd.RequireRateLimit?"<br>":""}
+                            ${subd.RequireRateLimit?`<i class="ui green check icon"></i> Rate Limit @ ${subd.RateLimit} req/s`:``}
+                            ${subd.AuthenticationProvider.AuthMethod == 0x0 && !subd.RequireRateLimit?`<small style="opacity: 0.3; pointer-events: none; user-select: none;">No Special Settings</small>`:""}
+                        </td> -->
+                        <td class="center aligned ignoremw" editable="true" datatype="action" data-label="">
+                            <button title="Edit Proxy Rule" class="ui circular small basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="ellipsis vertical icon"></i></button>
+                            <!-- <button title="Remove Proxy Rule" class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button> -->
+                        </td>
+                    </tr>`);
+                });
+                populateTagFilterDropdown(data);
+            }
+
+            resolveAccessRuleNameOnHostRPlist();
+        });
+    }
+
+    //Perform realtime alias update without refreshing the whole page
+    function updateAliasListForEndpoint(endpointName, newAliasDomainList){
+        let targetEle = $(`.aliasDomains[eptuuid='${endpointName}']`);
+        console.log(targetEle);
+        if (targetEle.length == 0){
+            return;
+        }
+
+        let aliasDomains = ``;
+        if (newAliasDomainList != undefined && newAliasDomainList.length > 0){
+            aliasDomains = `Alias: `;
+            newAliasDomainList.forEach(alias => {
+                aliasDomains += `<a href="//${alias}" target="_blank">${alias}</a>, `;
+            });
+            aliasDomains = aliasDomains.substr(0, aliasDomains.length - 2); //Remove the last tailing seperator
+            $(targetEle).html(aliasDomains);
+            $(targetEle).show();
+        }else{
+            $(targetEle).hide();
+        }
+    }
+
+    //Resolve & Update all rule names on host PR list
+    function resolveAccessRuleNameOnHostRPlist(){
+        //Resolve the access filters
+        $.get("/api/access/list", function(data){
+            console.log(data);
+            if (data.error == undefined){
+                //Build a map base on the data
+                let accessRuleMap = {};
+                for (var i = 0; i < data.length; i++){
+                    accessRuleMap[data[i].ID] = data[i];
+                }
+                
+                
+                $(".accessRuleNameUnderHost").each(function(){
+                    let thisAccessRuleID = $(this).attr("ruleid");
+                    if (thisAccessRuleID== ""){
+                        thisAccessRuleID = "default"
+                    }
+
+                    if (thisAccessRuleID == "default"){
+                        //No need to label default access rules
+                        $(this).html("");
+                        return;
+                    }
+
+                    let rule = accessRuleMap[thisAccessRuleID];
+                    if (rule == undefined){
+                        //Missing config or config too old
+                        $(this).html(`<i class="ui red exclamation triangle icon"></i> <b style="color: #db2828;">Access Rule Error</b>`);
+                        return;
+                    }
+                    let icon = `<i class="ui grey filter icon"></i>`;
+                    if (rule.ID == "default"){
+                        icon = `<i class="ui yellow star icon"></i>`;
+                    }else if (rule.BlacklistEnabled && !rule.WhitelistEnabled){
+                        //This is a blacklist filter
+                        icon = `<i class="ui red filter icon"></i>`;
+                    }else if (rule.WhitelistEnabled && !rule.BlacklistEnabled){
+                        //This is a whitelist filter
+                        icon = `<i class="ui green filter icon"></i>`;
+                    }else if (rule.WhitelistEnabled && rule.BlacklistEnabled){
+                        //Whitelist and blacklist filter
+                        icon = `<i class="ui yellow filter icon"></i>`;
+                    }
+
+                    if (rule != undefined){
+                        $(this).html(`${icon} ${rule.Name}`);
+                    }
+                });
+            }
+        })
+    }
+
+    //Update the access rule name on given epuuid, call by hostAccessEditor.html
+    function updateAccessRuleNameUnderHost(epuuid, newruleUID){
+        $(`tr[eptuuid='${epuuid}'].subdEntry`).find(".accessRuleNameUnderHost").attr("ruleid", newruleUID);
+        resolveAccessRuleNameOnHostRPlist();
+    }
+
+    
+    /*
+        Inline editor for httprp.html
+    */
+
+    function editEndpoint(uuid) {
+        uuid = uuid.hexDecode();
+        var row = $('tr[eptuuid="' + uuid + '"]');
+        var payload = $(row).attr("payload");
+        payload = JSON.parse(decodeURIComponent(payload));
+        initHttpProxyRuleEditorModal(payload);
+        return;
+        /*
+        var columns = row.find('td[data-label]');
+        console.log(payload);
+        columns.each(function(index) {
+            var column = $(this);
+            var oldValue = column.text().trim();
+
+            if ($(this).attr("editable") == "false"){
+                //This col do not allow edit. Skip
+                return;
+            }
+
+            // Create an input element based on the column content
+            var input;
+            var datatype = $(this).attr("datatype");
+            if (datatype == "domain"){
+                let useStickySessionChecked = "";
+                if (payload.UseStickySession){
+                    useStickySessionChecked = "checked";
+                }
+
+                let enableUptimeMonitor = "";
+                //Note the config file store the uptime monitor as disable, so we need to reverse the logic
+                if (!payload.DisableUptimeMonitor){
+                    enableUptimeMonitor = "checked";
+                }
+
+                input = `<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 1em;" onclick="editUpstreams('${uuid}');"><i class="grey server icon"></i> Edit Upstreams</button>
+                <div class="ui divider"></div>
+                <div class="ui checkbox" style="margin-top: 0.4em;">
+                    <input type="checkbox" class="UseStickySession" ${useStickySessionChecked}>
+                    <label>Use Sticky Session<br>
+                        <small>Enable stick session on load balancing</small></label>
+                </div>
+                <div class="ui checkbox" style="margin-top: 0.4em;">
+                    <input type="checkbox" class="EnableUptimeMonitor" ${enableUptimeMonitor}>
+                    <label>Monitor Uptime<br>
+                        <small>Enable active uptime monitor</small></label>
+                </div>
+                `;
+                column.append(input);
+                $(column).find(".upstreamList").addClass("editing");
+            }else if (datatype == "vdir"){
+                //Append a quick access button for vdir page
+                column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
+                    <i class="ui yellow folder icon"></i> Edit Virtual Directories
+                </button>`);
+            }else if (datatype == "tags"){
+                column.append(`
+                    <div class="ui divider"></div>
+                    <button class="ui basic compact fluid tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editTags('${uuid}');"><i class="ui purple tag icon"></i> Edit tags</button>
+                `);
+            }else if (datatype == "advanced"){
+                let authProvider = payload.AuthenticationProvider.AuthMethod;
+                
+                let skipWebSocketOriginCheck = payload.SkipWebSocketOriginCheck;
+                let wsCheckstate = "";
+                if (skipWebSocketOriginCheck){
+                    wsCheckstate = "checked";
+                }
+
+                let requireRateLimit = payload.RequireRateLimit;
+                let rateLimitCheckState = "";
+                if (requireRateLimit){
+                    rateLimitCheckState = "checked";
+                }
+                let rateLimit = payload.RateLimit;
+                if (rateLimit == 0){
+                    //This value is not set. Make it default to 100
+                    rateLimit = 100;
+                }
+                let rateLimitDisableState = "";
+                if (!payload.RequireRateLimit){
+                    rateLimitDisableState = "disabled";
+                }
+
+                column.empty().append(`
+                    <div class="grouped fields authProviderPicker">
+                        <label><b>Authentication Provider</b></label>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" value="0" name="authProviderType" ${authProvider==0x0?"checked":""}>
+                                <label>None (Anyone can access)</label>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" value="1" name="authProviderType" ${authProvider==0x1?"checked":""}>
+                                <label>Basic Auth</label>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" value="2" name="authProviderType" ${authProvider==0x2?"checked":""}>
+                                <label>Forward Auth</label>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" value="3" name="authProviderType" ${authProvider==0x3?"checked":""}>
+                                <label>OAuth2</label>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
+
+                    <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
+                        <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
+                            <div class="title">
+                                <i class="dropdown icon"></i>
+                                Security Options
+                            </div>
+                            <div class="content">
+                                <div class="ui checkbox" style="margin-top: 0.4em;">
+                                    <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
+                                    <label>Require Rate Limit<br>
+                                    <small>Check this to enable rate limit on this inbound hostname</small></label>
+                                </div><br>
+                                <div class="ui mini right labeled fluid input ${rateLimitDisableState}" style="margin-top: 0.4em;">
+                                    <input type="number" class="RateLimit" value="${rateLimit}" min="1" >
+                                    <label class="ui basic label">
+                                        req / sec / IP
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    <div>
+                `);
+
+                $('.authProviderPicker .ui.checkbox').checkbox();
+            } else if (datatype == "ratelimit"){
+               
+                column.empty().append(`
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="RequireRateLimit" ${checkstate}>
+                        <label>Require Rate Limit</label>
+                    </div>
+                    <div class="ui mini fluid input">
+                        <input type="number" class="RateLimit" value="${rateLimit}" placeholder="100" min="1" max="1000" >
+                    </div>
+                `);
+
+            }else if (datatype == 'action'){
+                column.empty().append(`
+                <button title="Save" onclick="saveProxyInlineEdit('${uuid.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
+                <button title="Cancel" onclick="exitProxyInlineEdit();" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui remove icon"></i></button>
+                
+                `);
+            }else if (datatype == "inbound"){
+                let originalContent = $(column).html();
+
+                //Check if this host is covered within one of the certificates. If not, show the icon
+                let enableQuickRequestButton = true;
+                let domains = [payload.RootOrMatchingDomain]; //Domain for getting certificate if needed
+                for (var i = 0; i < payload.MatchingDomainAlias.length; i++){
+                    let thisAliasName = payload.MatchingDomainAlias[i];
+                    domains.push(thisAliasName);
+                }
+
+                //Check if the domain or alias contains wildcard, if yes, disabled the get certificate button
+                if (payload.RootOrMatchingDomain.indexOf("*") > -1){
+                    enableQuickRequestButton = false;
+                }
+                
+                if (payload.MatchingDomainAlias != undefined){
+                    for (var i = 0; i < payload.MatchingDomainAlias.length; i++){
+                        if (payload.MatchingDomainAlias[i].indexOf("*") > -1){
+                            enableQuickRequestButton = false;
+                            break;
+                        }
+                    }
+                }
+
+                //encode the domain to DOM
+                let certificateDomains = encodeURIComponent(JSON.stringify(domains));
+                
+                column.empty().append(`${originalContent}
+                    <div class="ui divider"></div>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="BypassGlobalTLS" ${payload.BypassGlobalTLS?"checked":""}>
+                        <label>Allow plain HTTP access<br>
+                            <small>Allow inbound connections without TLS/SSL</small></label>
+                    </div><br>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAliasHostnames('${uuid}');"><i class=" blue at icon"></i> Alias</button>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAccessRule('${uuid}');"><i class="ui filter icon"></i> Access Rule</button>
+                    <button class="ui basic compact tiny ${enableQuickRequestButton?"":"disabled"} button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="requestCertificateForExistingHost('${uuid}', '${certificateDomains}', this);"><i class="green lock icon"></i> Get Certificate</button>
+                `);
+
+                $(".hostAccessRuleSelector").dropdown();
+            }else{
+                //Unknown field. Leave it untouched
+            }
+        });
+
+        $(".endpointAdvanceConfig").accordion();
+        $("#httpProxyList").find(".editBtn").addClass("disabled");
+    */
+    }
+
+    //handleToggleRateLimitInput will get trigger if the "require rate limit" checkbox
+    // is changed and toggle the disable state of the rate limit input field
+    function handleToggleRateLimitInput(){
+        let isRateLimitEnabled = $("#httpProxyList input.RequireRateLimit")[0].checked;
+        if (isRateLimitEnabled){
+            $("#httpProxyList input.RateLimit").parent().removeClass("disabled");
+        }else{
+            $("#httpProxyList input.RateLimit").parent().addClass("disabled");
+        }
+    }
+
+    function exitProxyInlineEdit(){
+        listProxyEndpoints();
+        $("#httpProxyList").find(".editBtn").removeClass("disabled");
+    }
+
+    function saveProxyInlineEdit(uuid){
+        let editor = $("#httprpEditModal");
+        
+        let epttype = "host";
+        let useStickySession =  $(editor).find(".UseStickySession")[0].checked;
+        let DisableUptimeMonitor = !$(editor).find(".EnableUptimeMonitor")[0].checked;
+        let authProviderType = $(editor).find(".authProviderPicker input[type='radio']:checked").val();
+        let requireRateLimit = $(editor).find(".RequireRateLimit")[0].checked;
+        let rateLimit = $(editor).find(".RateLimit").val();
+        let bypassGlobalTLS = $(editor).find(".BypassGlobalTLS")[0].checked;
+        let tags = getTagsArrayFromEndpoint(uuid);
+        if (tags.length > 0){
+            tags = tags.join(",");
+        }else{
+            tags = "";
+        }
+
+        console.log({
+                "type": epttype,
+                "rootname": uuid,
+                "ss":useStickySession,
+                "dutm": DisableUptimeMonitor,
+                "bpgtls": bypassGlobalTLS,
+                "authprovider" :authProviderType,
+                "rate" :requireRateLimit,
+                "ratenum" :rateLimit,
+                "tags": tags,
+        });
+
+        $.cjax({
+            url: "/api/proxy/edit",
+            method: "POST",
+            data: {
+                "type": epttype,
+                "rootname": uuid,
+                "ss":useStickySession,
+                "dutm": DisableUptimeMonitor,
+                "bpgtls": bypassGlobalTLS,
+                "authprovider" :authProviderType,
+                "rate" :requireRateLimit,
+                "ratenum" :rateLimit,
+                "tags": tags,
+            },
+            success: function(data){
+                if (data.error !== undefined){
+                    msgbox(data.error, false, 6000);
+                }else{
+                    msgbox("Proxy endpoint updated");
+                    listProxyEndpoints();
+                }
+            }
+        })
+    }
+
+    //Generic functions for delete rp endpoints 
+    function deleteEndpoint(epoint){
+        epoint = decodeURIComponent(epoint).hexDecode();
+        if (confirm("Confirm remove proxy for :" + epoint + "?")){
+            $.cjax({
+                url: "/api/proxy/del",
+                method: "POST",
+                data: {ep: epoint},
+                success: function(data){
+                    if (data.error == undefined){
+                        listProxyEndpoints();
+                        msgbox("Proxy Rule Deleted", true);
+                        reloadUptimeList();
+                    }else{
+                        msgbox(data.error, false);
+                    }
+                }
+            })
+        }
+    }
+
+    
+    /* button events */
+    function editBasicAuthCredentials(uuid){
+        let payload = encodeURIComponent(JSON.stringify({
+            ept: "host",
+            ep: uuid
+        }));
+        showEditorSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
+    }
+
+
+    function quickEditVdir(uuid){
+        openTabById("vdir");
+        $("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
+    }
+
+    //Open the load balance option
+    function editUpstreams(uuid){
+        let payload = encodeURIComponent(JSON.stringify({
+            ept: "host",
+            ep: uuid
+        }));
+        showEditorSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload);
+    }
+
+    function handleProxyRuleToggle(object){
+        let endpointUUID = $(object).attr("eptuuid");
+        let isChecked = object.checked;
+        $.cjax({
+            url: "/api/proxy/toggle",
+            data: {
+                "ep": endpointUUID,
+                "enable": isChecked
+            },
+            success: function(data){
+                if (data.error != undefined){
+                    msgbox(data.error, false);
+                }else{
+                    if (isChecked){
+                        msgbox("Proxy Rule Enabled");
+                    }else{
+                        msgbox("Proxy Rule Disabled");
+                    }
+                    
+                }
+            }
+        })
+    }
+
+    /* 
+        Certificate Shortcut
+    */
+
+    function requestCertificateForExistingHost(hostUUID, RootAndAliasDomains, btn=undefined){
+        RootAndAliasDomains = JSON.parse(decodeURIComponent(RootAndAliasDomains))
+        let renewDomainKey = RootAndAliasDomains.join(",");
+        let preferedACMEEmail = $("#prefACMEEmail").val();
+        if (preferedACMEEmail == ""){
+            msgbox("Preferred email for ACME registration not set", false);
+            return;
+        }
+        let defaultCA = $("#defaultCA").dropdown("get value");
+        if (defaultCA == ""){
+            defaultCA = "Let's Encrypt";
+        }
+
+        //Check if the root or the alias domain contain wildcard character, if yes, return error
+        for (var i = 0; i < RootAndAliasDomains.length; i++){
+            if (RootAndAliasDomains[i].indexOf("*") != -1){
+                msgbox("Wildcard domain can only be setup via ACME tool", false);
+                return;
+            }
+        }
+        
+        //Renew the certificate
+        renewCertificate(renewDomainKey, false, btn);
+    }
+
+    /* Tags & Search */
+    function handleSearchInput(event){
+        if (event.key == "Escape"){
+            $("#searchInput").val("");
+        }
+        filterProxyList();
+    }
+
+     // Function to filter the proxy list
+     function filterProxyList() {
+        let searchInput = $("#searchInput").val().toLowerCase();
+        let selectedTag = $("#tagFilterDropdown").dropdown('get value');
+        $("#httpProxyList tr").each(function() {
+            let host = $(this).find("td[data-label='']").text().toLowerCase();
+            let tagElements = $(this).find("td[data-label='tags']");
+            let tags = tagElements.attr("payload");
+            tags = JSON.parse(decodeURIComponent(tags));
+            if ((host.includes(searchInput) || searchInput === "") && (tags.includes(selectedTag) || selectedTag === "")) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+    }
+
+    // Function to generate a color based on a tag name
+    function getTagColorByName(tagName) {
+        function hashCode(str) {
+            return str.split('').reduce((prevHash, currVal) =>
+                ((prevHash << 5) - prevHash) + currVal.charCodeAt(0), 0);
+        }
+        let hash = hashCode(tagName);
+        let color = '#' + ((hash >> 24) & 0xFF).toString(16).padStart(2, '0') +
+                            ((hash >> 16) & 0xFF).toString(16).padStart(2, '0') +
+                            ((hash >> 8) & 0xFF).toString(16).padStart(2, '0');
+        return color;
+    }
+
+    function getTagTextColor(tagName){
+        let color = getTagColorByName(tagName);
+        let r = parseInt(color.substr(1, 2), 16);
+        let g = parseInt(color.substr(3, 2), 16);
+        let b = parseInt(color.substr(5, 2), 16);
+        let brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);
+        return brightness > 125 ? "#000000" : "#ffffff";
+    }
+    
+     // Populate the tag filter dropdown
+     function populateTagFilterDropdown(data) {
+        let tags = new Set();
+        data.forEach(subd => {
+            subd.Tags.forEach(tag => tags.add(tag));
+        });
+        tags = Array.from(tags).sort((a, b) => a.localeCompare(b));
+        let dropdownMenu = $("#tagFilterDropdown .tagList");
+        dropdownMenu.html(`<div class="item tag-select" data-value="">
+            <div class="ui grey empty circular label"></div>
+            Show all
+        </div>`);
+        tags.forEach(tag => {
+            let thisTagColor = getTagColorByName(tag);
+            dropdownMenu.append(`<div class="item tag-select" data-value="${tag}">
+                <div class="ui empty circular label" style="background-color: ${thisTagColor}; border-color: ${thisTagColor};" ></div>
+                ${tag}
+            </div>`);
+        });
+    }
+
+    // Edit tags for a specific endpoint
+    function editTags(uuid){
+        let payload = encodeURIComponent(JSON.stringify({
+            ept: "host",
+            ep: uuid
+        }));
+        showEditorSideWrapper("snippet/tagEditor.html?t=" + Date.now() + "#" + payload);
+    }
+
+    // Render the tags preview from tag editing snippet, callback from tags editor
+    function renderTagsPreview(endpoint, tags){
+        let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
+        //Update the tag DOM
+        let newTagDOM = tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
+        $(targetProxyRuleEle).find(".tags-list").html(newTagDOM);
+
+        //Update the tag payload
+        $(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags)));
+    }
+
+
+    function getTagsArrayFromEndpoint(endpoint){
+        let subd = getEditingHttpProxyCachedSubd();
+        return tags = subd.Tags || [];
+    }
+    
+    /* Modal Events */
+    $("#httprpEditDarkenLayer").on("click", function() {
+        closeHttpRuleEditor();
+    });
+
+    function closeHttpRuleEditor(){
+        $(".ui.toggle.tiny.fitted.checkbox").css("z-index", 0);
+        $("#httprpEditModalWrapper").fadeOut("fast", function(){
+            $(".ui.toggle.tiny.fitted.checkbox").css("z-index", "auto");
+            $("body").css("overflow", "auto");
+            exitProxyInlineEdit();
+        }); 
+    }
+
+    //Get the current editing http hostname, return null if errors
+    function getEditingHttpProxyHostname(){
+        let hostname = $("#httprpEditModal").attr("editing-host");
+        if (hostname == ""){
+            return null;
+        }
+        return decodeURIComponent(hostname);
+    }
+
+    function getEditingHttpProxyCachedSubd(){
+        let hostname = getEditingHttpProxyHostname();
+        if (hostname == null){
+            return null;
+        }
+        let subd = httpProxyList.find(subd => subd.RootOrMatchingDomain === hostname);
+        return subd;
+    }
+
+    //Initialize the http proxy rule editor
+    function initHttpProxyRuleEditorModal(rulepayload){
+        let subd = JSON.parse(JSON.stringify(rulepayload));
+    
+        //Populate all the information in the proxy editor
+        populateAndBindEventsToHTTPProxyEditor(subd);
+
+        //Show the first rpconfig
+        $("#httprpEditModal .rpconfig_content").hide();
+        $("#httprpEditModal .rpconfig_content[rpcfg='downstream']").show();
+        $("#httprpEditModal .hrpedit_menu_item.active").removeClass("active");
+        $("#httprpEditModal .hrpedit_menu_item[cfgpage='downstream']").addClass("active");
+        $("body").css("overflow", "hidden");
+        // Fixing a bug in semantic ui that when an element fade in/out on top of checkbox
+        // the checkbox suddently flash on top of the fading element
+        $(".ui.toggle.tiny.fitted.checkbox").css("z-index", 0);
+        $("#httprpEditModalWrapper").fadeIn("fast", function(){
+            $(".ui.toggle.tiny.fitted.checkbox").css("z-index", "auto");
+        });
+    }
+
+    // This function populate the bind all the events required for the proxy editor
+    // pass a copy of the data structure of subd to prevent modification to the original one
+    function populateAndBindEventsToHTTPProxyEditor(subd){
+        //Assign the editing host to DOM element
+        let uuid = subd.RootOrMatchingDomain; //Each matching hostname as uuid
+        $("#httprpEditModal").attr("editing-host", encodeURIComponent(uuid));
+
+        /* ------------ Downstream ------------ */
+        let editor = $("#httprpEditModalWrapper");
+        
+        //Check if the domain is wildcard domain, if yes do not render as a link
+        if (subd.RootOrMatchingDomain.indexOf("*") > -1){
+            editor.find(".downstream_primary_hostname").html(subd.RootOrMatchingDomain);
+        }else{
+            editor.find(".downstream_primary_hostname").html(`<a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a>`);
+        }
+        editor.find(".BypassGlobalTLS").off('change');
+        editor.find(".BypassGlobalTLS").prop("checked", subd.BypassGlobalTLS);
+        editor.find(".BypassGlobalTLS").on("change", function() {
+            saveProxyInlineEdit(uuid);
+        });
+        
+        
+        //Build the alias hostname list
+        let aliasHTML = "";
+        subd.MatchingDomainAlias.forEach(alias => {
+            if (alias.indexOf("*") > -1){
+                //Wildcard alias
+                aliasHTML += `<span class="ui tiny label">${alias}</span> `;
+            }else{
+                //Normal alias
+                aliasHTML += `<span class="ui tiny label"><a href="//${alias}" target="_blank">${alias}</a></span> `;
+            }
+            
+        });
+        editor.find(".downstream_alias_hostname").html(aliasHTML);
+        
+        //TODO: Move this to SSL TLS section
+        let enableQuickRequestButton = true;
+        let domains = [subd.RootOrMatchingDomain]; //Domain for getting certificate if needed
+        for (var i = 0; i < subd.MatchingDomainAlias.length; i++){
+            let thisAliasName = subd.MatchingDomainAlias[i];
+            domains.push(thisAliasName);
+        }
+
+        //Check if the domain or alias contains wildcard, if yes, disabled the get certificate button
+        if (subd.RootOrMatchingDomain.indexOf("*") > -1){
+            enableQuickRequestButton = false;
+        }
+        
+        if (subd.MatchingDomainAlias != undefined){
+            for (var i = 0; i < subd.MatchingDomainAlias.length; i++){
+                if (subd.MatchingDomainAlias[i].indexOf("*") > -1){
+                    enableQuickRequestButton = false;
+                    break;
+                }
+            }
+        }
+
+        let certificateDomains = encodeURIComponent(JSON.stringify(domains));
+        if (enableQuickRequestButton){
+            editor.find(".getCertificateBtn").removeClass("disabled");
+        }else{
+            editor.find(".getCertificateBtn").addClass("disabled");
+        }
+
+        editor.find(".getCertificateBtn").off("click").on("click", function(){
+            requestCertificateForExistingHost(uuid, certificateDomains, this);
+        });
+
+        /* ------------ Upstreams ------------ */
+        editor.find(".upstream_list").html(renderUpstreamList(subd));
+        editor.find(".editUpstreamButton").off("click").on("click", function(){
+            editUpstreams(uuid);
+        });
+
+        editor.find(".EnableUptimeMonitor").off("change");
+        editor.find(".EnableUptimeMonitor").prop("checked", !subd.DisableUptimeMonitor);
+        editor.find(".EnableUptimeMonitor").on("change", function() {
+            saveProxyInlineEdit(uuid);
+        });
+
+        editor.find(".UseStickySession").off("change");
+        editor.find(".UseStickySession").prop("checked", subd.UseStickySession);
+        editor.find(".UseStickySession").on("change", function() {
+            saveProxyInlineEdit(uuid);
+        });
+
+        /* ------------ Vdirs ------------ */
+        editor.find(".vdir_list").html(renderVirtualDirectoryList(subd));
+        editor.find(".editVdirBtn").off("click").on("click", function(){
+            quickEditVdir(uuid);
+        });
+
+        /* ------------ Alias ------------ */ 
+        (() => {
+            let payload = encodeURIComponent(JSON.stringify({
+                ept: "host",
+                ep: uuid
+            }));
+            let frameURL = "snippet/aliasEditor.html?t=" + Date.now() + "#" + payload;
+            editor.find(".rpconfig_content[rpcfg='alias'] .wrapper_frame").attr('src', frameURL);
+        })();
+
+        /* ------------ Headers ------------ */ 
+        (() => {
+            let payload = encodeURIComponent(JSON.stringify({
+                ept: "host",
+                ep: uuid
+            }));
+            let frameURL = "snippet/customHeaders.html?t=" + Date.now() + "#" + payload;
+            editor.find(".rpconfig_content[rpcfg='headers'] .wrapper_frame").attr('src', frameURL);
+        })();
+
+        /* ------------ Access Rule ------------ */
+        (()=>{
+            let payload = encodeURIComponent(JSON.stringify({
+                ept: "host",
+                ep: uuid
+            }));
+            let frameURL = "snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload;
+            editor.find(".rpconfig_content[rpcfg='accessrule'] .wrapper_frame").attr('src', frameURL);
+        })();
+
+        /* ------------ Security ------------ */
+    
+        let authMethodContent = "";
+        switch (subd.AuthenticationProvider.AuthMethod) {
+        case 0x1:
+            editor.find(".authProviderPicker input[value='1']").prop("checked", true);
+            break;
+        case 0x2:
+            editor.find(".authProviderPicker input[value='2']").prop("checked", true);
+            break;
+        case 0x3:
+            editor.find(".authProviderPicker input[value='3']").prop("checked", true);
+            break;
+        default:
+            editor.find(".authProviderPicker input[value='0']").prop("checked", true);
+            break;
+        }
+
+        editor.find(".editBasicAuthCredentialsBtn").off("click").on("click", function(){
+            editBasicAuthCredentials(uuid);
+        });
+
+        //Rate limit
+        if (subd.RequireRateLimit) {
+            editor.find(".RequireRateLimit").prop("checked", true);
+            editor.find(".RateLimit").parent().removeClass("disabled");
+        } else {
+            editor.find(".RequireRateLimit").prop("checked", false);
+            editor.find(".RateLimit").parent().addClass("disabled");
+        }
+
+        function rateLimitChangeEvent(){
+            let rateLimitValue = $(this).val();
+            if (rateLimitValue < 0 || isNaN(rateLimitValue)) {
+                msgbox("Rate limit must be >= 0", false);
+                $(this).val(subd.RateLimit); // Reset to previous valid value
+                return;
+            }
+            saveProxyInlineEdit(uuid);
+        }
+
+        editor.find(".RequireRateLimit").off("change").on("change", function() {
+            if ($(this).is(":checked")) {
+                editor.find(".RateLimit").parent().removeClass("disabled");
+            } else {
+                editor.find(".RateLimit").parent().addClass("disabled");
+            }
+
+            if (subd.RateLimit === 0) {
+                subd.RateLimit = 100; // Set default rate limit to 100 if uninitialized
+                $(this).val(subd.RateLimit);
+                editor.find(".RateLimit").off("change"); // Temporarily disable the change event handler
+                editor.find(".RateLimit").val(100); // Set the value to 100
+                editor.find(".RateLimit").on("change", rateLimitChangeEvent); // Re-enable the change event handler
+            }
+            saveProxyInlineEdit(uuid);
+        });
+        editor.find(".RateLimit").attr("value", subd.RateLimit);
+        editor.find(".RateLimit").off("change").on("change", rateLimitChangeEvent);
+
+        /* ------------ TLS ------------ */
+
+        /* ------------ Tags ------------ */
+        (()=>{
+            let payload = encodeURIComponent(JSON.stringify({
+                ept: "host",
+                ep: uuid
+            }));
+            let frameURL = "snippet/tagEditor.html?t=" + Date.now() + "#" + payload;
+            editor.find(".rpconfig_content[rpcfg='tags'] .wrapper_frame").attr('src', frameURL);
+        })();
+
+        console.log(subd);
+    }
+
+    // Pull the latest proxy config from server side again and populate the editor
+    // with latest settings
+    function resyncProxyEditorConfig(){
+        let currentEditingHostname = getEditingHttpProxyHostname();
+        $.get("/api/proxy/list?type=host", function(data){
+            data.sort((a,b) => (a.RootOrMatchingDomain > b.RootOrMatchingDomain) ? 1 : ((b.RootOrMatchingDomain > a.RootOrMatchingDomain) ? -1 : 0));
+            let editingHost = data.find(subd => subd.RootOrMatchingDomain === currentEditingHostname);
+            if (editingHost) {
+                populateAndBindEventsToHTTPProxyEditor(editingHost);
+            } else {
+                closeHttpRuleEditor();
+            }
+        });
+    }
+
+    //bind events to hrpedit_menu_item
+    $(".hrpedit_menu_item").on("click", function() {
+        $(".hrpedit_menu_item.active").removeClass("active");
+        $(this).addClass("active");
+        let cfgPageId = $(this).attr("cfgpage");
+        $("#httprpEditModal .rpconfig_content").hide();
+        $(`#httprpEditModal .rpconfig_content[rpcfg='${cfgPageId}']`).show();
+        $("#httprpEditModal .wrapper_frame").contents().scrollTop(0);
+        hideEditorSideWrapper(); //Always close the side wrapper on tab change
+    });
+
+    $("#httprpEditModal .editor_back_button").on("click", function(event) {
+        // Prevent click event from propagating to the modal background
+        event.stopPropagation();
+        hideEditorSideWrapperViaBtn();
+    });
+
+    function showEditorSideWrapper(url){
+        $("#httprpEditModal .editor_side_wrapper .wrapper_frame").attr('src', url);
+        $("#httprpEditModal .editor_side_wrapper").fadeIn("fast");
+    }
+
+    function hideEditorSideWrapperViaBtn(){
+        hideEditorSideWrapper();
+        resyncProxyEditorConfig();
+    }
+
+    function hideEditorSideWrapper(){
+        $("#httprpEditModal .editor_side_wrapper").fadeOut("fast");
+    }
+
+
+    /*
+        Page Initialization Functions 
+    */
+
+    // Initialize the proxy list on page load
+    $(document).ready(function() {
+        listProxyEndpoints();
+
+        // Event listener for clicking on tags
+        $(document).on('click', '.tag-select', function() {
+            let tag = $(this).text().trim();
+            $('#tagFilterDropdown').dropdown('set selected', tag);
+            filterProxyList();
+        });
+    });
+
+    //Bind on tab switch events
+    tabSwitchEventBind["httprp"] = function(){
+        //Check if the proxy editor is opened
+        if ($("#httprpEditModalWrapper").is(":visible")) {
+            // When page switch from Vdir and back to this page
+            // there is a chance where the user has modified the Vdir
+            // we need to get the latest setting from server side and 
+            // render it again
+            updateVdirInProxyEditor();
+        } else {
+            listProxyEndpoints();
+            //Reset the tag filter
+            $("#tagFilterDropdown").dropdown('set selected', "");
+        }
+    }
+        
+</script>