diff --git a/assets/arena.html b/assets/arena.html
index b20553d..138849d 100644
--- a/assets/arena.html
+++ b/assets/arena.html
@@ -482,8 +482,8 @@
     const QUERY = parseQueryString(location.search);
     const NUM = parseInt(QUERY.num) || 2
     const API_BASE = QUERY.api_base || ".";
-    const DATAJSON_API = API_BASE + "/data.json";
     const CHAT_COMPLETIONS_URL = API_BASE + "/v1/chat/completions";
+    const MODELS_API = API_BASE + "/v1/models";
     const MODEL_IDS_STORAGE_KEY = "__model_ids__";
 
     document.addEventListener("alpine:init", () => {
@@ -512,7 +512,7 @@
 
         async init() {
           try {
-            const { models } = await fetchDataJSON(DATAJSON_API);
+            const models = await fetchJSON(MODELS_API);
             this.models = models;
           } catch (err) {
             console.error(err);
@@ -755,10 +755,10 @@
       }));
     }
 
-    async function fetchDataJSON(url) {
+    async function fetchJSON(url) {
       const res = await fetch(url);
       const data = await res.json()
-      return data;
+      return data.data;
     }
 
     async function* fetchChatCompletions(url, body, signal) {
diff --git a/assets/playground.html b/assets/playground.html
index 0036fb4..af675fd 100644
--- a/assets/playground.html
+++ b/assets/playground.html
@@ -641,8 +641,9 @@
   <script>
     const QUERY = parseQueryString(location.search);
     const API_BASE = QUERY.api_base || ".";
-    const DATAJSON_API = API_BASE + "/data.json";
     const CHAT_COMPLETIONS_URL = API_BASE + "/v1/chat/completions";
+    const MODELS_API = API_BASE + "/v1/models";
+    const ROLES_API = API_BASE + "/v1/roles";
     const SETTINGS_STORAGE_KEY = "__settings__";
 
     document.addEventListener("alpine:init", () => {
@@ -691,7 +692,7 @@
 
         async init() {
           try {
-            const { models, roles } = await fetchDataJSON(DATAJSON_API);
+            const [models, roles] = await Promise.all([MODELS_API, ROLES_API].map(url => fetchJSON(url)));
             this.models = models;
             this.roles.push(...roles);
           } catch (err) {
@@ -949,10 +950,10 @@
 
     }
 
-    async function fetchDataJSON(url) {
+    async function fetchJSON(url) {
       const res = await fetch(url);
       const data = await res.json()
-      return data;
+      return data.data;
     }
 
     async function* fetchChatCompletions(url, body, signal) {
diff --git a/src/serve.rs b/src/serve.rs
index 4413c89..3fa0d90 100644
--- a/src/serve.rs
+++ b/src/serve.rs
@@ -158,12 +158,14 @@ impl Server {
         let mut status = StatusCode::OK;
         let res = if path == "/v1/chat/completions" {
             self.chat_completion(req).await
+        } else if path == "/v1/models" {
+            self.list_models()
+        } else if path == "/v1/roles" {
+            self.list_roles()
         } else if path == "/playground" || path == "/playground.html" {
             self.playground_page()
         } else if path == "/arena" || path == "/arena.html" {
             self.arena_page()
-        } else if path == "/data.json" {
-            self.data_json()
         } else {
             status = StatusCode::NOT_FOUND;
             Err(anyhow!("The requested endpoint was not found."))
@@ -198,11 +200,16 @@ impl Server {
         Ok(res)
     }
 
-    fn data_json(&self) -> Result<AppResponse> {
-        let data = json!({
-            "models": self.models,
-            "roles": self.roles,
-        });
+    fn list_models(&self) -> Result<AppResponse> {
+        let data = json!({ "data": self.models });
+        let res = Response::builder()
+            .header("Content-Type", "application/json; charset=utf-8")
+            .body(Full::new(Bytes::from(data.to_string())).boxed())?;
+        Ok(res)
+    }
+
+    fn list_roles(&self) -> Result<AppResponse> {
+        let data = json!({ "data": self.roles });
         let res = Response::builder()
             .header("Content-Type", "application/json; charset=utf-8")
             .body(Full::new(Bytes::from(data.to_string())).boxed())?;