diff --git a/src/graphql/http/url.ts b/src/graphql/http/url.ts
index 695f1acd..7ed61e89 100644
--- a/src/graphql/http/url.ts
+++ b/src/graphql/http/url.ts
@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+const PREFIX = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test" ? "/api" : "";
 export const HttpURL = {
-  ClusterNodes: `/api/status/cluster/nodes`,
-  ConfigTTL: `/api/status/config/ttl`,
-  DebuggingConfigDump: `/api/debugging/config/dump`,
+  ClusterNodes: `${PREFIX}/status/cluster/nodes`,
+  ConfigTTL: `${PREFIX}/status/config/ttl`,
+  DebuggingConfigDump: `${PREFIX}/debugging/config/dump`,
 };
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
index 4e0ba92e..2cf7e634 100644
--- a/src/views/settings/components/TTL.vue
+++ b/src/views/settings/components/TTL.vue
@@ -21,7 +21,11 @@ limitations under the License. -->
       :row-style="{ backgroundColor: 'var(--layout-background)' }"
     >
       <el-table-column v-for="item in MetricsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
-        <template #default="scope">{{ scope.row[item.value] < 0 ? "N/A" : scope.row[item.value] }}</template>
+        {{
+          (settingsStore.configTTL?.metrics || {})[item.value] < 0
+            ? "N/A"
+            : (settingsStore.configTTL?.metrics || {})[item.value]
+        }}
       </el-table-column>
     </el-table>
     <div class="label">{{ t("recordsTTL") }}</div>
@@ -31,7 +35,11 @@ limitations under the License. -->
       :row-style="{ backgroundColor: 'var(--layout-background)' }"
     >
       <el-table-column v-for="item in RecordsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
-        <template #default="scope">{{ scope.row[item.value] < 0 ? "N/A" : scope.row[item.value] }}</template>
+        {{
+          (settingsStore.configTTL?.records || {})[item.value] < 0
+            ? "N/A"
+            : (settingsStore.configTTL?.records || {})[item.value]
+        }}
       </el-table-column>
     </el-table>
   </div>