diff --git a/agent/app/service/website.go b/agent/app/service/website.go
index 9c0ea8eb4fa3..7ed6cc1a3cdb 100644
--- a/agent/app/service/website.go
+++ b/agent/app/service/website.go
@@ -1727,19 +1727,28 @@ func (w WebsiteService) OperateProxy(req request.WebsiteProxyConfig) (err error)
 	location.UpdateDirective("proxy_pass", []string{req.ProxyPass})
 	location.UpdateDirective("proxy_set_header", []string{"Host", req.ProxyHost})
 	location.ChangePath(req.Modifier, req.Match)
+	// Server Cache Settings
 	if req.Cache {
 		if err = openProxyCache(website); err != nil {
 			return
 		}
-		location.AddCache(req.CacheTime, req.CacheUnit, fmt.Sprintf("proxy_cache_zone_of_%s", website.Alias), req.ServerCacheTime, req.ServerCacheUnit)
+		location.AddServerCache(fmt.Sprintf("proxy_cache_zone_of_%s", website.Alias), req.ServerCacheTime, req.ServerCacheUnit)
 	} else {
-		location.RemoveCache(fmt.Sprintf("proxy_cache_zone_of_%s", website.Alias))
+		location.RemoveServerCache(fmt.Sprintf("proxy_cache_zone_of_%s", website.Alias))
 	}
+	// Browser Cache Settings
+	if req.CacheTime != 0 {
+		location.AddBrowserCache(req.CacheTime, req.CacheUnit)
+	} else {
+		location.RemoveBrowserCache()
+	}
+	// Content Replace Settings
 	if len(req.Replaces) > 0 {
 		location.AddSubFilter(req.Replaces)
 	} else {
 		location.RemoveSubFilter()
 	}
+	// SSL Settings
 	if req.SNI {
 		location.UpdateDirective("proxy_ssl_server_name", []string{"on"})
 		if req.ProxySSLName != "" {
@@ -1748,6 +1757,7 @@ func (w WebsiteService) OperateProxy(req request.WebsiteProxyConfig) (err error)
 	} else {
 		location.UpdateDirective("proxy_ssl_server_name", []string{"off"})
 	}
+	// CORS Settings
 	if req.Cors {
 		location.UpdateDirective("add_header", []string{"Access-Control-Allow-Origin", req.AllowOrigins, "always"})
 		if req.AllowMethods != "" {
@@ -1768,7 +1778,7 @@ func (w WebsiteService) OperateProxy(req request.WebsiteProxyConfig) (err error)
 		if req.Preflight {
 			location.AddCorsOption()
 		} else {
-			location.RemoveDirectiveByFullParams("if", []string{"(", "$request_method", "=", "'OPTIONS'", ")"})
+			location.RemoveCorsOption()
 		}
 	} else {
 		location.RemoveDirective("add_header", []string{"Access-Control-Allow-Origin"})
diff --git a/agent/utils/nginx/components/location.go b/agent/utils/nginx/components/location.go
index b89e6c9bd3e0..ab81a543a703 100644
--- a/agent/utils/nginx/components/location.go
+++ b/agent/utils/nginx/components/location.go
@@ -253,7 +253,7 @@ func (l *Location) ChangePath(Modifier string, Match string) {
 	l.Match = Match
 }
 
-func (l *Location) AddCache(cacheTime int, cacheUint, cacheKey string, serverCacheTime int, serverCacheUint string) {
+func (l *Location) AddBrowserCache(cacheTime int, cacheUint string) {
 	l.RemoveDirective("add_header", []string{"Cache-Control", "no-cache"})
 	l.RemoveDirectiveByFullParams("if", []string{"(", "$uri", "~*", `"\.(gif|png|jpg|css|js|woff|woff2)$"`, ")"})
 	l.RemoveDirectiveByFullParams("if", []string{"(", "$uri", "~*", `"\.(gif|png|jpg|css|js|woff|woff2|jpeg|svg|webp|avif)$"`, ")"})
@@ -271,28 +271,36 @@ func (l *Location) AddCache(cacheTime int, cacheUint, cacheKey string, serverCac
 	newDir.Block = block
 	directives = append(directives, newDir)
 	l.Directives = directives
+	l.CacheTime = cacheTime
+	l.CacheUint = cacheUint
+}
+
+func (l *Location) AddServerCache(cacheKey string, serverCacheTime int, serverCacheUint string) {
 	l.UpdateDirective("proxy_ignore_headers", []string{"Set-Cookie", "Cache-Control", "expires"})
 	l.UpdateDirective("proxy_cache", []string{cacheKey})
 	l.UpdateDirective("proxy_cache_key", []string{"$host$uri$is_args$args"})
 	l.UpdateDirective("proxy_cache_valid", []string{"200", "304", "301", "302", strconv.Itoa(serverCacheTime) + serverCacheUint})
 	l.Cache = true
-	l.CacheTime = cacheTime
-	l.CacheUint = cacheUint
+	l.ServerCacheTime = serverCacheTime
+	l.ServerCacheUint = serverCacheUint
 }
 
-func (l *Location) RemoveCache(cacheKey string) {
+func (l *Location) RemoveBrowserCache() {
 	l.RemoveDirectiveByFullParams("if", []string{"(", "$uri", "~*", `"\.(gif|png|jpg|css|js|woff|woff2)$"`, ")"})
 	l.RemoveDirectiveByFullParams("if", []string{"(", "$uri", "~*", `"\.(gif|png|jpg|css|js|woff|woff2|jpeg|svg|webp|avif)$"`, ")"})
-	l.RemoveDirective("proxy_ignore_headers", []string{"Set-Cookie"})
-	l.RemoveDirective("proxy_cache", []string{cacheKey})
-	l.RemoveDirective("proxy_cache_key", []string{"$host$uri$is_args$args"})
-	l.RemoveDirective("proxy_cache_valid", []string{"200"})
-
 	l.UpdateDirective("add_header", []string{"Cache-Control", "no-cache"})
-
 	l.CacheTime = 0
 	l.CacheUint = ""
+}
+
+func (l *Location) RemoveServerCache(cacheKey string) {
+	l.RemoveDirective("proxy_ignore_headers", []string{"Set-Cookie", "Cache-Control", "expires"})
+	l.RemoveDirective("proxy_cache", []string{cacheKey})
+	l.RemoveDirective("proxy_cache_key", []string{"$host$uri$is_args$args"})
+	l.RemoveDirective("proxy_cache_valid", []string{"200"})
 	l.Cache = false
+	l.ServerCacheTime = 0
+	l.ServerCacheUint = ""
 }
 
 func (l *Location) AddSubFilter(subFilters map[string]string) {
@@ -315,6 +323,7 @@ func (l *Location) RemoveSubFilter() {
 }
 
 func (l *Location) AddCorsOption() {
+	l.RemoveCorsOption()
 	newDir := &Directive{
 		Name:       "if",
 		Parameters: []string{"(", "$request_method", "=", "'OPTIONS'", ")"},
@@ -342,3 +351,7 @@ func (l *Location) AddCorsOption() {
 	directives = append(directives, newDir)
 	l.Directives = directives
 }
+
+func (l *Location) RemoveCorsOption() {
+	l.RemoveDirectiveByFullParams("if", []string{"(", "$request_method", "=", "'OPTIONS'", ")"})
+}
diff --git a/frontend/src/api/interface/website.ts b/frontend/src/api/interface/website.ts
index 24edc664510c..576e2ffce76b 100644
--- a/frontend/src/api/interface/website.ts
+++ b/frontend/src/api/interface/website.ts
@@ -413,6 +413,7 @@ export namespace Website {
         allowHeaders: string;
         allowCredentials: boolean;
         preflight: boolean;
+        browserCache?: boolean;
     }
 
     export interface ProxReplace {
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 40f14aa48f45..4e13f7a37b53 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -2494,7 +2494,8 @@ const message = {
             'The password is asymmetrically encrypted and cannot be echoed. Editing needs to reset the password',
         antiLeech: 'Anti-leech',
         extends: 'Extension',
-        browserCache: 'Cache',
+        browserCache: 'Browser Cache',
+        serverCache: 'Server Cache',
         leechLog: 'Record anti-leech log',
         accessDomain: 'Allowed domains',
         leechReturn: 'Response resource',
diff --git a/frontend/src/lang/modules/es-es.ts b/frontend/src/lang/modules/es-es.ts
index 17919abd1365..e86b461b62d5 100644
--- a/frontend/src/lang/modules/es-es.ts
+++ b/frontend/src/lang/modules/es-es.ts
@@ -2481,6 +2481,7 @@ const message = {
         antiLeech: 'Anti-hotlink',
         extends: 'Extensiones',
         browserCache: 'Caché de navegador',
+        serverCache: 'Caché del servidor',
         leechLog: 'Registrar logs anti-hotlink',
         accessDomain: 'Dominios permitidos',
         leechReturn: 'Recurso de respuesta',
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index 53e1c1be97d4..512d05a9ebe9 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -2408,6 +2408,7 @@ const message = {
         antiLeech: '反リーチ',
         extends: '拡大',
         browserCache: 'キャッシュ',
+        serverCache: 'サーバーキャッシュ',
         leechLog: '反リーチログを記録します',
         accessDomain: '許可されたドメイン',
         leechReturn: '応答リソース',
diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts
index 8207be58173f..2cc3c9157325 100644
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@@ -2365,6 +2365,7 @@ const message = {
         antiLeech: '링크 차단',
         extends: '확장',
         browserCache: '캐시',
+        serverCache: '서버 캐시',
         leechLog: '링크 차단 로그 기록',
         accessDomain: '허용된 도메인',
         leechReturn: '응답 리소스',
diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts
index d55e523895c4..35ddcb754d67 100644
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@@ -2465,6 +2465,7 @@ const message = {
         antiLeech: 'Anti-leech',
         extends: 'Pelanjutan',
         browserCache: 'Cache',
+        serverCache: 'Cache Pelayan',
         leechLog: 'Rekod log anti-leech',
         accessDomain: 'Domain yang dibenarkan',
         leechReturn: 'Sumber tindak balas',
diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts
index fa94a6230107..72e754590692 100644
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@@ -2468,6 +2468,7 @@ const message = {
         antiLeech: 'Anti-leech',
         extends: 'Extensão',
         browserCache: 'Cache',
+        serverCache: 'Cache do servidor',
         leechLog: 'Registrar log anti-leech',
         accessDomain: 'Domínios permitidos',
         leechReturn: 'Recurso de resposta',
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index 6fc27aa0b38b..342fee3c9b61 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -2467,6 +2467,7 @@ const message = {
         antiLeech: 'Анти-лич',
         extends: 'Расширение',
         browserCache: 'Кэш',
+        serverCache: 'Кэш сервера',
         leechLog: 'Записывать лог анти-лича',
         accessDomain: 'Разрешенные домены',
         leechReturn: 'Ответ ресурса',
diff --git a/frontend/src/lang/modules/tr.ts b/frontend/src/lang/modules/tr.ts
index 761086ac84c5..510691fb69f0 100644
--- a/frontend/src/lang/modules/tr.ts
+++ b/frontend/src/lang/modules/tr.ts
@@ -2527,6 +2527,7 @@ const message = {
         antiLeech: 'Sömürü karşıtı',
         extends: 'Uzantı',
         browserCache: 'Önbellek',
+        serverCache: 'Sunucu önbelleği',
         leechLog: 'Sömürü karşıtı günlüğü kaydet',
         accessDomain: 'İzin verilen alan adları',
         leechReturn: 'Yanıt kaynağı',
diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts
index de0ecf1edbfa..863912a063cd 100644
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@@ -2320,6 +2320,7 @@ const message = {
         antiLeech: '防盜鏈',
         extends: '副檔名',
         browserCache: '瀏覽器快取',
+        serverCache: '伺服器快取',
         leechLog: '記錄防盜鏈日誌',
         accessDomain: '允許的域名',
         leechReturn: '響應資源',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 93c295f51e67..34432e2239ec 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -2313,6 +2313,7 @@ const message = {
         antiLeech: '防盗链',
         extends: '扩展名',
         browserCache: '浏览器缓存',
+        serverCache: '服务器缓存',
         leechLog: '记录防盗链日志',
         accessDomain: '允许的域名',
         leechReturn: '响应资源',
diff --git a/frontend/src/views/website/website/config/basic/proxy/create/index.vue b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
index 7fc6088c8087..8e93523b220d 100644
--- a/frontend/src/views/website/website/config/basic/proxy/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
@@ -74,51 +74,89 @@
                 <el-tab-pane :label="$t('website.advancedSettings')" name="advanced">
                     <el-divider content-position="left">{{ $t('website.cacheSettings') }}</el-divider>
 
+                    <!-- Server Cache Control -->
                     <div class="flex justify-between items-center py-3">
                         <div class="flex flex-col gap-1">
-                            <span class="font-medium">{{ $t('website.enableCache') }}</span>
+                            <span class="font-medium">{{ $t('website.serverCache') }}</span>
                         </div>
-                        <el-switch v-model="proxy.cache" @change="changeCache(proxy.cache)" size="large" />
+                        <el-button-group>
+                            <el-button
+                                :type="proxy.cache ? 'primary' : 'default'"
+                                @click="changeServerCache(true)"
+                                size="small"
+                            >
+                                {{ $t('commons.button.enable') }}
+                            </el-button>
+                            <el-button
+                                :type="!proxy.cache ? 'primary' : 'default'"
+                                @click="changeServerCache(false)"
+                                size="small"
+                            >
+                                {{ $t('commons.button.disable') }}
+                            </el-button>
+                        </el-button-group>
                     </div>
 
                     <el-collapse-transition>
-                        <div v-if="proxy.cache" class="mt-4">
-                            <el-row :gutter="16">
-                                <el-col :span="12">
-                                    <el-form-item :label="$t('website.browserCacheTime')" prop="cacheTime">
-                                        <el-input v-model.number="proxy.cacheTime" maxlength="15">
-                                            <template #append>
-                                                <el-select v-model="proxy.cacheUnit" class="!w-24">
-                                                    <el-option
-                                                        v-for="(unit, index) in Units"
-                                                        :key="index"
-                                                        :label="unit.label"
-                                                        :value="unit.value"
-                                                    />
-                                                </el-select>
-                                            </template>
-                                        </el-input>
-                                        <span class="input-help">{{ $t('website.browserCacheTimeHelper') }}</span>
-                                    </el-form-item>
-                                </el-col>
-                                <el-col :span="12">
-                                    <el-form-item :label="$t('website.serverCacheTime')" prop="serverCacheTime">
-                                        <el-input v-model.number="proxy.serverCacheTime" maxlength="15">
-                                            <template #append>
-                                                <el-select v-model="proxy.serverCacheUnit" class="!w-24">
-                                                    <el-option
-                                                        v-for="(unit, index) in Units"
-                                                        :key="index"
-                                                        :label="unit.label"
-                                                        :value="unit.value"
-                                                    />
-                                                </el-select>
-                                            </template>
-                                        </el-input>
-                                        <span class="input-help">{{ $t('website.serverCacheTimeHelper') }}</span>
-                                    </el-form-item>
-                                </el-col>
-                            </el-row>
+                        <div v-if="proxy.cache" class="mt-4 mb-6">
+                            <el-form-item :label="$t('website.serverCacheTime')" prop="serverCacheTime">
+                                <el-input v-model.number="proxy.serverCacheTime" maxlength="15" class="!w-64">
+                                    <template #append>
+                                        <el-select v-model="proxy.serverCacheUnit" class="!w-24">
+                                            <el-option
+                                                v-for="(unit, index) in Units"
+                                                :key="index"
+                                                :label="unit.label"
+                                                :value="unit.value"
+                                            />
+                                        </el-select>
+                                    </template>
+                                </el-input>
+                                <span class="input-help">{{ $t('website.serverCacheTimeHelper') }}</span>
+                            </el-form-item>
+                        </div>
+                    </el-collapse-transition>
+
+                    <!-- Browser Cache Control -->
+                    <div class="flex justify-between items-center py-3">
+                        <div class="flex flex-col gap-1">
+                            <span class="font-medium">{{ $t('website.browserCache') }}</span>
+                        </div>
+                        <el-button-group>
+                            <el-button
+                                :type="proxy.browserCache ? 'primary' : 'default'"
+                                @click="changeBrowserCache(true)"
+                                size="small"
+                            >
+                                {{ $t('commons.button.enable') }}
+                            </el-button>
+                            <el-button
+                                :type="!proxy.browserCache ? 'primary' : 'default'"
+                                @click="changeBrowserCache(false)"
+                                size="small"
+                            >
+                                {{ $t('commons.button.disable') }}
+                            </el-button>
+                        </el-button-group>
+                    </div>
+
+                    <el-collapse-transition>
+                        <div v-if="proxy.browserCache" class="mt-4 mb-6">
+                            <el-form-item :label="$t('website.browserCacheTime')" prop="cacheTime">
+                                <el-input v-model.number="proxy.cacheTime" maxlength="15" class="!w-64">
+                                    <template #append>
+                                        <el-select v-model="proxy.cacheUnit" class="!w-24">
+                                            <el-option
+                                                v-for="(unit, index) in Units"
+                                                :key="index"
+                                                :label="unit.label"
+                                                :value="unit.value"
+                                            />
+                                        </el-select>
+                                    </template>
+                                </el-input>
+                                <span class="input-help">{{ $t('website.browserCacheTimeHelper') }}</span>
+                            </el-form-item>
                         </div>
                     </el-collapse-transition>
 
@@ -219,8 +257,8 @@ const initData = (): Website.ProxyConfig => ({
     operate: 'create',
     enable: true,
     cache: false,
-    cacheTime: 1,
-    cacheUnit: 'm',
+    cacheTime: 4,
+    cacheUnit: 'h',
     name: '',
     modifier: '',
     match: '/',
@@ -234,6 +272,7 @@ const initData = (): Website.ProxyConfig => ({
     proxySSLName: '',
     serverCacheTime: 10,
     serverCacheUnit: 'm',
+    browserCache: false,
     cors: false,
     allowOrigins: '*',
     allowMethods: 'GET,POST,OPTIONS,PUT,DELETE',
@@ -255,6 +294,11 @@ const acceptParams = (proxyParam: Website.ProxyConfig) => {
     proxy.value = proxyParam;
     activeTab.value = 'basic';
 
+    // Initialize browserCache based on cacheTime value
+    if (proxy.value.browserCache === undefined) {
+        proxy.value.browserCache = proxy.value.cacheTime > 0;
+    }
+
     const res = getProtocolAndHost(proxyParam.proxyPass);
     if (res != null) {
         proxy.value.proxyProtocol = res.protocol;
@@ -271,20 +315,28 @@ const acceptParams = (proxyParam: Website.ProxyConfig) => {
     }
 };
 
-const changeCache = (cache: boolean) => {
+const changeServerCache = (cache: boolean) => {
+    proxy.value.cache = cache;
     if (cache) {
-        proxy.value.cacheTime = 1;
-        proxy.value.cacheUnit = 'm';
         proxy.value.serverCacheTime = 10;
         proxy.value.serverCacheUnit = 'm';
     } else {
-        proxy.value.cacheTime = 0;
-        proxy.value.cacheUnit = '';
         proxy.value.serverCacheTime = 0;
         proxy.value.serverCacheUnit = '';
     }
 };
 
+const changeBrowserCache = (cache: boolean) => {
+    proxy.value.browserCache = cache;
+    if (cache) {
+        proxy.value.cacheTime = 4;
+        proxy.value.cacheUnit = 'h';
+    } else {
+        proxy.value.cacheTime = 0;
+        proxy.value.cacheUnit = '';
+    }
+};
+
 const addReplaces = () => {
     replaces.value.push({ key: '', value: '' });
 };
diff --git a/frontend/src/views/website/website/config/basic/proxy/index.vue b/frontend/src/views/website/website/config/basic/proxy/index.vue
index 18c3e5e13d66..e8fc69462b07 100644
--- a/frontend/src/views/website/website/config/basic/proxy/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/index.vue
@@ -12,10 +12,17 @@
         <el-table-column :label="$t('website.proxyPass')" prop="proxyPass"></el-table-column>
         <el-table-column :label="$t('website.cache')" prop="cache">
             <template #default="{ row }">
-                <el-switch v-model="row.cache" @change="changeCache(row)" :disabled="!row.enable"></el-switch>
+                <el-tag :type="row.cacheTime > 0 ? 'success' : 'info'">
+                    {{ $t('website.browserCache') + ':' }}
+                    {{ row.cacheTime > 0 ? row.cacheTime + row.cacheUnit : $t('setting.sslDisable') }}
+                </el-tag>
+                <el-tag class="ml-2" :type="row.serverCacheTime > 0 ? 'success' : 'info'">
+                    {{ $t('website.serverCache') + ':' }}
+                    {{ row.serverCacheTime > 0 ? row.serverCacheTime + row.serverCacheUnit : $t('setting.sslDisable') }}
+                </el-tag>
             </template>
         </el-table-column>
-        <el-table-column :label="$t('commons.table.status')" prop="enable">
+        <el-table-column :label="$t('commons.table.status')" prop="enable" width="100">
             <template #default="{ row }">
                 <Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" :operate="true" />
             </template>
@@ -102,8 +109,8 @@ const initData = (id: number): Website.ProxyConfig => ({
     operate: 'create',
     enable: true,
     cache: false,
-    cacheTime: 1,
-    cacheUnit: 'm',
+    cacheTime: 0,
+    cacheUnit: '',
     name: '',
     modifier: '',
     match: '/',
@@ -113,6 +120,12 @@ const initData = (id: number): Website.ProxyConfig => ({
     proxySSLName: '',
     serverCacheTime: 10,
     serverCacheUnit: 'm',
+    cors: false,
+    allowOrigins: '',
+    allowMethods: '',
+    allowHeaders: '',
+    allowCredentials: false,
+    preflight: false,
 });
 
 const openCreate = () => {
@@ -150,15 +163,6 @@ const deleteProxy = async (proxyConfig: Website.ProxyConfig) => {
     });
 };
 
-const changeCache = (proxyConfig: Website.ProxyConfig) => {
-    proxyConfig.operate = 'edit';
-    if (proxyConfig.cache) {
-        proxyConfig.cacheTime = 1;
-        proxyConfig.cacheUnit = 'm';
-    }
-    submit(proxyConfig);
-};
-
 const submit = async (proxyConfig: Website.ProxyConfig) => {
     loading.value = true;
     operateProxyConfig(proxyConfig)