diff --git a/index.html b/index.html
index d68f85e020..2b09b133d2 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,8 @@
         NODE_ENV: 'production'
       }
     };
-    globalThis.packageVersion = "24.09.0-alpha.1";
-    globalThis.buildNumber = "6011";
+    globalThis.packageVersion = "25.1.0-alpha.1";
+    globalThis.buildNumber = "6441";
 
   </script>
   <!-- DO NOT CHANGE BELOW LINE -->
diff --git a/manifest.json b/manifest.json
index ea4a8b3a3d..191cb43f3b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,7 +3,7 @@
   "manifest_version": 9,
   "name": "Backend.AI Web UI",
   "short_name": "BackendAIWebUI",
-  "version": "24.09.0-alpha.1",
+  "version": "25.1.0-alpha.1",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#fff",
diff --git a/package.json b/package.json
index 985baf826b..ed625d51f4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "backend.ai-webui",
   "productName": "Backend.AI Desktop",
-  "version": "24.09.0-alpha.1",
+  "version": "25.1.0-alpha.1",
   "repository": "https://github.com/lablup/backend.ai-webui.git",
   "author": "Lablup Inc. <contact@lablup.com>",
   "license": "LGPL-3.0-or-later",
diff --git a/react/package.json b/react/package.json
index b9700848a9..c7112d7a15 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backend-ai-webui-react",
-  "version": "24.09.0-alpha.1",
+  "version": "25.1.0-alpha.1",
   "private": true,
   "dependencies": {
     "@ai-sdk/openai": "^1.0.11",
diff --git a/react/src/App.tsx b/react/src/App.tsx
index b7556c3cf5..b0b0587a19 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -66,6 +66,13 @@ const ComputeSessionList = React.lazy(
 const AgentSummaryPage = React.lazy(() => import('./pages/AgentSummaryPage'));
 const MaintenancePage = React.lazy(() => import('./pages/MaintenancePage'));
 
+/**
+ * Pages for Model Player
+ */
+const PlaygroundPage = React.lazy(
+  () => import('./components/lablupTalkativotUI/LLMPlaygroundPage'),
+);
+const ModelStorePage = React.lazy(() => import('./pages/ModelStorePage'));
 interface CustomHandle {
   title?: string;
   labelKey?: string;
@@ -107,17 +114,17 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <WebUINavigate to="/summary" replace />,
+        element: <WebUINavigate to="/playground" replace />,
       },
       {
         //for electron dev mode
         path: '/build/electron-app/app/index.html',
-        element: <WebUINavigate to="/summary" replace />,
+        element: <WebUINavigate to="/playground" replace />,
       },
       {
         //for electron prod mode
         path: '/app/index.html',
-        element: <WebUINavigate to="/summary" replace />,
+        element: <WebUINavigate to="/playground" replace />,
       },
       {
         path: '/summary',
@@ -365,6 +372,19 @@ const router = createBrowserRouter([
         path: '*',
         element: <></>,
       },
+      /**
+       * Pages for Model Player
+       */
+      {
+        path: '/playground',
+        handle: { labelKey: 'webui.menu.Playground' },
+        Component: PlaygroundPage,
+      },
+      {
+        path: '/model-store',
+        handle: { labelKey: 'webui.menu.ModelStore' },
+        Component: ModelStorePage,
+      },
     ],
   },
 ]);
diff --git a/react/src/components/BAIIcons/VLLMIcon.tsx b/react/src/components/BAIIcons/VLLMIcon.tsx
new file mode 100644
index 0000000000..feaf304d7f
--- /dev/null
+++ b/react/src/components/BAIIcons/VLLMIcon.tsx
@@ -0,0 +1,23 @@
+import { ReactComponent as logo } from './vllm-color.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface CustomIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {
+  size?: number;
+}
+
+const VLLMIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <Icon
+      component={logo}
+      {...props}
+      style={{
+        fontSize: props.size,
+        ...props.style,
+      }}
+    />
+  );
+};
+
+export default VLLMIcon;
diff --git a/react/src/components/BAIIcons/vllm-color.svg b/react/src/components/BAIIcons/vllm-color.svg
new file mode 100644
index 0000000000..54acc3de2d
--- /dev/null
+++ b/react/src/components/BAIIcons/vllm-color.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>vLLM</title><path d="M0 4.973h9.324V23L0 4.973z" fill="#FDB515"></path><path d="M13.986 4.351L22.378 0l-6.216 23H9.324l4.662-18.649z" fill="#30A2FF"></path></svg>
\ No newline at end of file
diff --git a/react/src/components/ChatContent.tsx b/react/src/components/ChatContent.tsx
new file mode 100644
index 0000000000..ff6f8f159c
--- /dev/null
+++ b/react/src/components/ChatContent.tsx
@@ -0,0 +1,122 @@
+import { useTanQuery } from '../hooks/reactQueryAlias';
+import { ChatContentEndpointDetailQuery } from './__generated__/ChatContentEndpointDetailQuery.graphql';
+import { Model } from './lablupTalkativotUI/ChatUIModal';
+import LLMChatCard from './lablupTalkativotUI/LLMChatCard';
+import { ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button } from 'antd';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery } from 'react-relay/hooks';
+
+interface ChatContentProps {
+  endpointId: string;
+  endpointUrl: string;
+  basePath: string;
+}
+
+const ChatContent: React.FC<ChatContentProps> = ({
+  endpointId,
+  endpointUrl,
+  basePath,
+}) => {
+  const { t } = useTranslation();
+
+  const { endpoint_token_list } =
+    useLazyLoadQuery<ChatContentEndpointDetailQuery>(
+      graphql`
+        query ChatContentEndpointDetailQuery(
+          $endpointId: UUID!
+          $tokenListOffset: Int!
+          $tokenListLimit: Int!
+        ) {
+          endpoint_token_list(
+            limit: $tokenListLimit
+            offset: $tokenListOffset
+            endpoint_id: $endpointId
+          ) {
+            total_count
+            items {
+              id
+              token
+              endpoint_id
+              created_at
+              valid_until
+            }
+          }
+        }
+      `,
+      {
+        tokenListLimit: 100,
+        tokenListOffset: 0,
+        endpointId: endpointId as string,
+      },
+      {
+        fetchPolicy: 'network-only',
+      },
+    );
+
+  const newestValidToken =
+    _.orderBy(endpoint_token_list?.items, ['valid_until'], ['desc'])[0]
+      ?.token ?? '';
+
+  const {
+    data: modelsResult,
+    // error,
+    refetch,
+  } = useTanQuery<{
+    data: Array<Model>;
+  }>({
+    queryKey: ['models', endpointUrl],
+    queryFn: () => {
+      return fetch(new URL(basePath + '/models', endpointUrl).toString(), {
+        headers: {
+          Authorization: `BackendAI ${newestValidToken}`,
+        },
+      })
+        .then((res) => res.json())
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  });
+
+  return (
+    <LLMChatCard
+      endpointId={endpointId || ''}
+      baseURL={new URL(basePath, endpointUrl).toString()}
+      models={_.map(modelsResult?.data, (m) => ({
+        id: m.id,
+        name: m.id,
+      }))}
+      apiKey={newestValidToken}
+      fetchOnClient
+      style={{ flex: 1 }}
+      allowCustomModel={false}
+      alert={
+        _.isEmpty(modelsResult?.data) && (
+          <Alert
+            type="warning"
+            showIcon
+            message={t('chatui.CannotFindModel')}
+            action={
+              <Button
+                icon={<ReloadOutlined />}
+                onClick={() => {
+                  refetch();
+                }}
+              >
+                {t('button.Refresh')}
+              </Button>
+            }
+          />
+        )
+      }
+      modelId={modelsResult?.data?.[0].id ?? 'custom'}
+      modelToken={newestValidToken}
+    />
+  );
+};
+
+export default ChatContent;
diff --git a/react/src/components/ImportFromHuggingFacePanel.tsx b/react/src/components/ImportFromHuggingFacePanel.tsx
new file mode 100644
index 0000000000..2f3638499b
--- /dev/null
+++ b/react/src/components/ImportFromHuggingFacePanel.tsx
@@ -0,0 +1,61 @@
+import Flex from '../components/Flex';
+import BAICard from './BAICard';
+import { App, Button, Input, theme } from 'antd';
+import type { GetProps } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ImportFromHuggingFacePanel: React.FC = () => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { message } = App.useApp();
+  const [search, setSearch] = useState<string>('');
+  type SearchProps = GetProps<typeof Input.Search>;
+
+  const { Search } = Input;
+  const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+    // TODO: download model from hugging face by URL
+    setSearch(value);
+  };
+
+  return (
+    <BAICard
+      style={{
+        backgroundImage:
+          'linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(/resources/images/model-player/hugging-face-background.jpg)',
+      }}
+    >
+      <Flex
+        direction="row"
+        align="center"
+        justify="center"
+        style={{ padding: '20px' }}
+        gap={'sm'}
+      >
+        <Search
+          placeholder="Import From Hugging Face"
+          allowClear
+          enterButton={
+            <Button
+              type="primary"
+              onClick={() => {
+                message.info({
+                  key: 'import-from-hugging-face',
+                  content: 'Only available for administrators.',
+                });
+              }}
+              // FIXME: Temporary use hardcoded color for the button background
+              style={{ color: token.colorBgBase, backgroundColor: '#FF7A00' }}
+            >
+              Download
+            </Button>
+          }
+          size="large"
+          onSearch={onSearch}
+        />
+      </Flex>
+    </BAICard>
+  );
+};
+
+export default ImportFromHuggingFacePanel;
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index 5e4eb9c145..026ad52b8a 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -16,6 +16,7 @@ import WebUILink from '../WebUILink';
 import { PluginPage, WebUIPluginType } from './MainLayout';
 import {
   ApiOutlined,
+  AppstoreOutlined,
   BarChartOutlined,
   CloudUploadOutlined,
   ControlOutlined,
@@ -24,6 +25,7 @@ import {
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
+  MessageOutlined,
   SolutionOutlined,
   ToolOutlined,
   UserOutlined,
@@ -85,67 +87,86 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
   const primaryColors = usePrimaryColors();
 
   const generalMenu = filterEmptyItem<ItemType>([
+    // {
+    //   label: <WebUILink to="/summary">{t('webui.menu.Summary')}</WebUILink>,
+    //   icon: <DashboardOutlined style={{ color: token.colorPrimary }} />,
+    //   key: 'summary',
+    // },
+    // {
+    //   label: <WebUILink to="/job">{t('webui.menu.Sessions')}</WebUILink>,
+    //   icon: <SessionsIcon style={{ color: token.colorPrimary }} />,
+    //   key: 'job',
+    // },
     {
-      label: <WebUILink to="/summary">{t('webui.menu.Summary')}</WebUILink>,
-      icon: <DashboardOutlined style={{ color: token.colorPrimary }} />,
-      key: 'summary',
-    },
-    {
-      label: <WebUILink to="/job">{t('webui.menu.Sessions')}</WebUILink>,
-      icon: <SessionsIcon style={{ color: token.colorPrimary }} />,
-      key: 'job',
-    },
-    supportServing && {
-      label: <WebUILink to="/serving">{t('webui.menu.Serving')}</WebUILink>,
-      icon: <EndpointsIcon style={{ color: token.colorPrimary }} />,
-      key: 'serving',
-    },
-    {
-      label: <WebUILink to="/import">{t('webui.menu.Import&Run')}</WebUILink>,
-      icon: <PlayIcon style={{ color: token.colorPrimary }} />,
-      key: 'import',
-    },
-    {
-      label: <WebUILink to="/data">{t('webui.menu.Data&Storage')}</WebUILink>,
-      icon: <CloudUploadOutlined style={{ color: token.colorPrimary }} />,
-      key: 'data',
-    },
-    supportUserCommittedImage && {
       label: (
-        <WebUILink to="/my-environment">
-          {t('webui.menu.MyEnvironments')}
-        </WebUILink>
+        <WebUILink to="/playground">{t('webui.menu.Playground')}</WebUILink>
       ),
-      icon: <MyEnvironmentsIcon style={{ color: token.colorPrimary }} />,
-      key: 'my-environment',
+      icon: <MessageOutlined style={{ color: token.colorPrimary }} />,
+      key: 'playground',
     },
-    !isHideAgents && {
+    {
       label: (
-        <WebUILink to="/agent-summary">
-          {t('webui.menu.AgentSummary')}
-        </WebUILink>
+        <WebUILink to="/model-store">{t('webui.menu.ModelStore')}</WebUILink>
       ),
-      icon: <HddOutlined style={{ color: token.colorPrimary }} />,
-      key: 'agent-summary',
+      icon: <AppstoreOutlined style={{ color: token.colorPrimary }} />,
+      key: 'model-store',
     },
-    {
+    supportServing && {
       label: (
-        <WebUILink to="/statistics">{t('webui.menu.Statistics')}</WebUILink>
+        <WebUILink to="/serving">{t('modelserving.menu.MyServices')}</WebUILink>
       ),
-      icon: <BarChartOutlined style={{ color: token.colorPrimary }} />,
-      key: 'statistics',
-    },
-    !!fasttrackEndpoint && {
-      label: t('webui.menu.FastTrack'),
-      icon: <ExportOutlined style={{ color: token.colorPrimary }} />,
-      key: 'pipeline',
-      onClick: () => {
-        window.open(fasttrackEndpoint, '_blank', 'noopener noreferrer');
-      },
+      icon: <EndpointsIcon style={{ color: token.colorPrimary }} />,
+      key: 'serving',
     },
+    // {
+    //   label: <WebUILink to="/import">{t('webui.menu.Import&Run')}</WebUILink>,
+    //   icon: <PlayIcon style={{ color: token.colorPrimary }} />,
+    //   key: 'import',
+    // },
+    // {
+    //   label: (
+    //     <WebUILink to="/data">{t('modelserving.menu.ModelList')}</WebUILink>
+    //   ),
+    //   icon: <CloudUploadOutlined style={{ color: token.colorPrimary }} />,
+    //   key: 'data',
+    // },
+    // supportUserCommittedImage && {
+    //   label: (
+    //     <WebUILink to="/my-environment">
+    //       {t('webui.menu.MyEnvironments')}
+    //     </WebUILink>
+    //   ),
+    //   icon: <MyEnvironmentsIcon style={{ color: token.colorPrimary }} />,
+    //   key: 'my-environment',
+    // },
+    // !isHideAgents && {
+    //   label: (
+    //     <WebUILink to="/agent-summary">
+    //       {t('webui.menu.AgentSummary')}
+    //     </WebUILink>
+    //   ),
+    //   icon: <HddOutlined style={{ color: token.colorPrimary }} />,
+    //   key: 'agent-summary',
+    // },
+    // {
+    //   label: (
+    //     <WebUILink to="/statistics">{t('webui.menu.Statistics')}</WebUILink>
+    //   ),
+    //   icon: <BarChartOutlined style={{ color: token.colorPrimary }} />,
+    //   key: 'statistics',
+    // },
+    // !!fasttrackEndpoint && {
+    //   label: t('webui.menu.FastTrack'),
+    //   icon: <ExportOutlined style={{ color: token.colorPrimary }} />,
+    //   key: 'pipeline',
+    //   onClick: () => {
+    //     window.open(fasttrackEndpoint, '_blank', 'noopener noreferrer');
+    //   },
+    // },
   ]);
 
-  const adminMenu: MenuProps['items'] = [
+  const adminMenu: MenuProps['items'] = [];
+  /*[
     {
       label: <WebUILink to="/credential">{t('webui.menu.Users')}</WebUILink>,
       icon: <UserOutlined style={{ color: token.colorInfo }} />,
@@ -168,8 +189,10 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       key: 'resource-policy',
     },
   ];
+  */
 
-  const superAdminMenu: MenuProps['items'] = [
+  const superAdminMenu: MenuProps['items'] = [];
+  /*[
     {
       label: <WebUILink to="/agent">{t('webui.menu.Resources')}</WebUILink>,
       icon: <HddOutlined style={{ color: token.colorInfo }} />,
@@ -196,9 +219,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       icon: <InfoCircleOutlined style={{ color: token.colorInfo }} />,
       key: 'information',
     },
-  ];
-
-  const pluginMap: Record<string, MenuProps['items']> = {
+  ]*/ const pluginMap: Record<string, MenuProps['items']> = {
     'menuitem-user': generalMenu,
     'menuitem-admin': adminMenu,
     'menuitem-superadmin': superAdminMenu,
@@ -255,7 +276,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
             height: themeConfig?.logo?.size?.height || 24,
             cursor: 'pointer',
           }}
-          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/summary')}
+          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/serving')}
         />
       }
       theme={currentSiderTheme}
@@ -275,7 +296,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
             height: themeConfig?.logo.sizeCollapsed?.height ?? 24,
             cursor: 'pointer',
           }}
-          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/summary')}
+          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/serving')}
         />
       }
       logoTitle={themeConfig?.logo?.logoTitle || siteDescription || 'WebUI'}
@@ -340,6 +361,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
               ]}
               items={
                 // TODO: add plugin menu
+                /*
                 currentUserRole === 'superadmin'
                   ? [
                       {
@@ -381,6 +403,8 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
                         },
                       ]
                     : []
+                    */
+                []
               }
             />
           </ConfigProvider>
diff --git a/react/src/components/ModelCardChat.tsx b/react/src/components/ModelCardChat.tsx
new file mode 100644
index 0000000000..cd4728e443
--- /dev/null
+++ b/react/src/components/ModelCardChat.tsx
@@ -0,0 +1,111 @@
+import { useUpdatableState } from '../hooks';
+import ChatContent from './ChatContent';
+import { ModelCardChatQuery } from './__generated__/ModelCardChatQuery.graphql';
+import { Alert, Card, theme } from 'antd/lib';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery } from 'react-relay';
+
+// TODO: fetch endpoint list, filter endpoint by name and send it ot LLMChatCard
+
+interface ModelCardChatProps {
+  modelName?: string;
+  basePath?: string;
+}
+
+const ModelCardChat: React.FC<ModelCardChatProps> = ({
+  modelName,
+  basePath = 'v1',
+}) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const [fetchKey, updateFetchKey] = useUpdatableState('first');
+
+  const { endpoint_list } = useLazyLoadQuery<ModelCardChatQuery>(
+    graphql`
+      query ModelCardChatQuery(
+        $offset: Int!
+        $limit: Int!
+        $filter: String
+        $projectID: UUID
+      ) {
+        endpoint_list(
+          offset: $offset
+          limit: $limit
+          project: $projectID
+          filter: $filter
+        ) {
+          items {
+            name
+            endpoint_id
+            url
+            model
+            status
+          }
+        }
+      }
+    `,
+    {
+      limit: 100,
+      offset: 0,
+      filter: `name ilike "%${modelName}%"`,
+    },
+    {
+      fetchPolicy: 'network-only',
+      fetchKey,
+    },
+  );
+
+  const healthyEndpoint = _.filter(endpoint_list?.items, (item) => {
+    return item?.status == 'HEALTHY';
+  });
+
+  // FIXME: temporally render chat UI only if at least one endpoint is healthy.
+  return healthyEndpoint.length > 0 ? (
+    <ChatContent
+      endpointId={healthyEndpoint[0]?.endpoint_id as string}
+      endpointUrl={healthyEndpoint[0]?.url as string}
+      basePath={basePath}
+    />
+  ) : (
+    <Card
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '50vh',
+      }}
+      styles={{
+        body: {
+          backgroundColor: token.colorFillQuaternary,
+          borderRadius: 0,
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+          height: '50%',
+          position: 'relative',
+        },
+        actions: {
+          paddingLeft: token.paddingContentHorizontal,
+          paddingRight: token.paddingContentHorizontal,
+        },
+        header: {
+          zIndex: 1,
+        },
+      }}
+      actions={[
+        <Alert
+          message="Chat UI is not provided yet. Why don't you create a new one?"
+          type="warning"
+          showIcon
+        />,
+      ]}
+    />
+  );
+};
+
+export default ModelCardChat;
diff --git a/react/src/components/ModelCardModal.tsx b/react/src/components/ModelCardModal.tsx
index 2204697f7b..3eeeb524ae 100644
--- a/react/src/components/ModelCardModal.tsx
+++ b/react/src/components/ModelCardModal.tsx
@@ -1,27 +1,33 @@
 import { useBackendAIImageMetaData } from '../hooks';
+import { useUpdatableState } from '../hooks';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
+import ModelCardChat from './ModelCardChat';
 import ModelCloneModal from './ModelCloneModal';
+import ModelTryContent from './ModelTryContent';
 import ResourceNumber from './ResourceNumber';
 import { ModelCardModalFragment$key } from './__generated__/ModelCardModalFragment.graphql';
-import { BankOutlined, CopyOutlined, FileOutlined } from '@ant-design/icons';
+import { BankOutlined, FileOutlined } from '@ant-design/icons';
 import {
   Alert,
   Button,
   Card,
   Col,
   Descriptions,
+  Divider,
   Empty,
   Grid,
   Row,
   Tag,
   Typography,
+  Tabs,
   theme,
+  Skeleton,
 } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
-import _ from 'lodash';
-import { Cog, FolderX } from 'lucide-react';
+import _, { head } from 'lodash';
+import { FolderX } from 'lucide-react';
 import Markdown from 'markdown-to-jsx';
 import React, { Suspense, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +35,7 @@ import { useFragment } from 'react-relay';
 
 interface ModelCardModalProps extends BAIModalProps {
   modelCardModalFrgmt?: ModelCardModalFragment$key | null;
+  // basePath?: string;
   onRequestClose: () => void;
 }
 const ModelCardModal: React.FC<ModelCardModalProps> = ({
@@ -130,261 +137,365 @@ const ModelCardModal: React.FC<ModelCardModalProps> = ({
         </Button>,
       ]}
     >
-      {model_card?.error_msg ? (
-        <Flex direction="column" wrap="wrap" align="stretch" gap={'sm'}>
-          <Alert
-            message={model_card?.error_msg}
-            type="error"
-            showIcon
-            style={{ width: '100%' }}
-          />
-          <Empty
-            style={{ width: '100%' }}
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-          />
-        </Flex>
-      ) : (
-        <>
-          <Flex
-            direction="row"
-            align="start"
-            style={{ marginBottom: token.marginSM }}
-            gap={'xs'}
-            wrap="wrap"
-          >
-            <Flex
-              justify="start"
-              align="start"
-              gap={'xs'}
-              style={{ flex: 1 }}
-              wrap="wrap"
-            >
-              {model_card?.category && (
-                <Tag bordered={false} style={{ marginRight: 0 }}>
-                  {model_card?.category}
-                </Tag>
-              )}
-              {model_card?.task && (
-                <Tag
-                  bordered={false}
-                  color="success"
-                  style={{ marginRight: 0 }}
+      <Tabs
+        defaultActiveKey="experience"
+        tabBarStyle={{ minWidth: 200 }}
+        items={[
+          {
+            key: 'experience',
+            label: t('modelStore.Experience'),
+            children: (
+              <Suspense fallback={<Skeleton active />}>
+                <Flex
+                  direction="row"
+                  wrap="wrap"
+                  align="stretch"
+                  gap={'sm'}
+                  style={{ width: '100%' }}
                 >
-                  {model_card?.task}
-                </Tag>
-              )}
-              {model_card?.label &&
-                _.map(model_card?.label, (label) => (
-                  <Tag
-                    key={label}
-                    bordered={false}
-                    color="blue"
-                    style={{ marginRight: 0 }}
+                  <Flex
+                    direction="row"
+                    wrap="wrap"
+                    align="center"
+                    gap={'sm'}
+                    style={{ flex: 1 }}
                   >
-                    {label}
-                  </Tag>
-                ))}
-              {model_card?.license && (
-                <Tag
-                  icon={<BankOutlined />}
-                  bordered={false}
-                  color="geekblue"
-                  style={{ marginRight: 0 }}
+                    {model_card?.name === 'Talkativot UI' ? (
+                      // FIXME: temporally add iframe for Talkativot UI
+                      <iframe
+                        src="https://talkativot-aiot-demo.asia03.app.backend.ai/chat"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          border: 'none',
+                        }}
+                        title="Talkativot AIOT Demo"
+                      />
+                    ) : (
+                      <ModelCardChat
+                        basePath={
+                          model_card?.name?.includes(
+                            'stable-diffusion-3-medium',
+                          )
+                            ? 'generate-image'
+                            : 'v1'
+                        }
+                        modelName={
+                          model_card?.name === 'stable-diffusion-3-medium'
+                            ? 'stable-diffusion-3m'
+                            : model_card?.name ===
+                                'Llama-3.2-11B-Vision-Instruct'
+                              ? 'llama-vision-11b'
+                              : model_card?.name || ''
+                        }
+                      />
+                    )}
+                  </Flex>
+                  <Divider type="vertical" style={{ height: '100%' }} />
+                  <Flex
+                    direction="column"
+                    align="stretch"
+                    gap="xl"
+                    style={{ flex: 0.25 }}
+                  >
+                    <ModelTryContent
+                      modelStorageHost={model_card?.vfolder?.host as string}
+                      modelName={model_card?.name as string}
+                      minAIAcclResource={(() => {
+                        const minResource = _.toNumber(
+                          model_card?.min_resource,
+                        );
+                        if (_.isNaN(minResource) || minResource === 0) {
+                          return 10;
+                        }
+                        return minResource;
+                      })()}
+                      title={'PALI run on my cloud: '}
+                    />
+                  </Flex>
+                </Flex>
+              </Suspense>
+            ),
+          },
+          {
+            key: 'modelcard',
+            label: t('modelStore.ModelCard'),
+            children: model_card?.error_msg ? (
+              <Flex direction="column" wrap="wrap" align="stretch" gap={'sm'}>
+                <Alert
+                  message={model_card?.error_msg}
+                  type="error"
+                  showIcon
+                  style={{ width: '100%' }}
+                />
+                <Empty
+                  style={{ width: '100%' }}
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                />
+              </Flex>
+            ) : (
+              <>
+                <Flex
+                  direction="row"
+                  align="start"
+                  style={{ marginBottom: token.marginSM }}
+                  gap={'xs'}
+                  wrap="wrap"
                 >
-                  {model_card?.license}
-                </Tag>
-              )}
-            </Flex>
-            <Flex direction="row" justify="end" gap={'sm'}>
-              {/* <Button
-            type="primary"
-            ghost
-            icon={<DownloadOutlined />}
-            size="small"
-            disabled
-          >
-            {t('button.Download')}
-          </Button> */}
-              <Button disabled ghost size="small" icon={<Cog />}>
-                {t('modelStore.FinetuneModel')}
-              </Button>
-              <Button
-                type="primary"
-                ghost
-                icon={<CopyOutlined />}
-                size="small"
-                disabled={!model_card?.vfolder?.cloneable}
-                onClick={() => {
-                  setVisibleCloneModal(true);
-                }}
-              >
-                {t('modelStore.CloneToFolder')}
-              </Button>
-            </Flex>
-          </Flex>
-          <Row gutter={[token.marginLG, token.marginLG]}>
-            <Col {...colSize}>
-              <Flex direction="column" align="stretch" gap={'xs'}>
-                {!!model_card?.description ? (
-                  <>
-                    <Typography.Title level={5} style={{ marginTop: 0 }}>
-                      {t('modelStore.Description')}
-                    </Typography.Title>
-                    <Card
+                  <Flex
+                    justify="start"
+                    align="start"
+                    gap={'xs'}
+                    style={{ flex: 1 }}
+                    wrap="wrap"
+                  >
+                    {model_card?.category && (
+                      <Tag bordered={false} style={{ marginRight: 0 }}>
+                        {model_card?.category}
+                      </Tag>
+                    )}
+                    {model_card?.task && (
+                      <Tag
+                        bordered={false}
+                        color="success"
+                        style={{ marginRight: 0 }}
+                      >
+                        {model_card?.task}
+                      </Tag>
+                    )}
+                    {model_card?.label &&
+                      _.map(model_card?.label, (label) => (
+                        <Tag
+                          key={label}
+                          bordered={false}
+                          color="blue"
+                          style={{ marginRight: 0 }}
+                        >
+                          {label}
+                        </Tag>
+                      ))}
+                    {model_card?.license && (
+                      <Tag
+                        icon={<BankOutlined />}
+                        bordered={false}
+                        color="geekblue"
+                        style={{ marginRight: 0 }}
+                      >
+                        {model_card?.license}
+                      </Tag>
+                    )}
+                  </Flex>
+                  <Flex direction="row" justify="end" gap={'sm'}>
+                    {/* <Button
+                  type="primary"
+                  ghost
+                  icon={<DownloadOutlined />}
+                  size="small"
+                  disabled
+                >
+                  {t('button.Download')}
+                </Button> */}
+                    {/* <Button disabled ghost size="small" icon={<Cog />}>
+                      {t('modelStore.FinetuneModel')}
+                    </Button>
+                    <Button
+                      type="primary"
+                      ghost
+                      icon={<CopyOutlined />}
                       size="small"
-                      style={{
-                        whiteSpace: 'pre-wrap',
-                        minHeight: screen.lg ? 100 : undefined,
-                        height: screen.lg ? 'calc(100vh - 590px)' : undefined,
-                        maxHeight: 'calc(100vh - 590px)',
-                        overflow: 'auto',
+                      disabled={!model_card?.vfolder?.cloneable}
+                      onClick={() => {
+                        // const event = new CustomEvent('backend-ai-vfolder-cloning', {
+                        //   detail: {
+                        //     // TODO: change this to vfolder name
+                        //     name: mode_card?.name,
+                        //   },
+                        // });
+                        // onRequestClose();
+                        // document.dispatchEvent(event);
+                        setVisibleCloneModal(true);
                       }}
                     >
-                      <Typography.Paragraph
-                        ellipsis={{
-                          rows: screen.lg ? 11 : 3,
-                          expandable: 'collapsible',
-                          symbol: (expanded) => (
-                            <Button size="small" type="link">
-                              {expanded
-                                ? t('button.Collapse')
-                                : t('button.Expand')}
-                            </Button>
-                          ),
-                        }}
-                      >
-                        {model_card?.description}
-                      </Typography.Paragraph>
-                    </Card>
-                  </>
-                ) : null}
-                <Descriptions
-                  style={{ marginTop: token.marginMD }}
-                  // title={t('modelStore.Metadata')}
-                  column={1}
-                  size="small"
-                  bordered
-                  items={[
-                    {
-                      key: 'author',
-                      label: t('modelStore.Author'),
-                      children: model_card?.author,
-                    },
-                    {
-                      key: 'version',
-                      label: t('modelStore.Version'),
-                      children: model_card?.version,
-                    },
-                    {
-                      key: 'architecture',
-                      label: t('environment.Architecture'),
-                      children: model_card?.architecture,
-                    },
-                    {
-                      key: 'frameworks',
-                      label: t('modelStore.Framework'),
-                      children: (
-                        <Flex direction="row" gap={'xs'}>
-                          {_.map(
-                            _.filter(
-                              _.castArray(model_card?.framework),
-                              (v) => !_.isEmpty(v),
+                      {t('modelStore.CloneToFolder')}
+                    </Button> */}
+                  </Flex>
+                </Flex>
+                <Row gutter={[token.marginLG, token.marginLG]}>
+                  <Col {...colSize}>
+                    <Flex direction="column" align="stretch" gap={'xs'}>
+                      {!!model_card?.description ? (
+                        <>
+                          <Typography.Title level={5} style={{ marginTop: 0 }}>
+                            {t('modelStore.Description')}
+                          </Typography.Title>
+                          <Card
+                            size="small"
+                            style={{
+                              whiteSpace: 'pre-wrap',
+                              minHeight: screen.lg ? 100 : undefined,
+                              height: screen.lg
+                                ? 'calc(100vh - 590px)'
+                                : undefined,
+                              maxHeight: 'calc(100vh - 590px)',
+                              overflow: 'auto',
+                            }}
+                          >
+                            <Typography.Paragraph
+                              ellipsis={{
+                                rows: screen.lg ? 11 : 3,
+                                expandable: 'collapsible',
+                                symbol: (expanded) => (
+                                  <Button size="small" type="link">
+                                    {expanded
+                                      ? t('button.Collapse')
+                                      : t('button.Expand')}
+                                  </Button>
+                                ),
+                              }}
+                            >
+                              {model_card?.description}
+                            </Typography.Paragraph>
+                          </Card>
+                        </>
+                      ) : null}
+                      <Descriptions
+                        style={{ marginTop: token.marginMD }}
+                        // title={t('modelStore.Metadata')}
+                        column={1}
+                        size="small"
+                        bordered
+                        items={[
+                          {
+                            key: 'author',
+                            label: t('modelStore.Author'),
+                            children: model_card?.author,
+                          },
+                          {
+                            key: 'version',
+                            label: t('modelStore.Version'),
+                            children: model_card?.version,
+                          },
+                          {
+                            key: 'architecture',
+                            label: t('environment.Architecture'),
+                            children: model_card?.architecture,
+                          },
+                          {
+                            key: 'frameworks',
+                            label: t('modelStore.Framework'),
+                            children: (
+                              <Flex direction="row" gap={'xs'}>
+                                {_.map(
+                                  _.filter(
+                                    _.castArray(model_card?.framework),
+                                    (v) => !_.isEmpty(v),
+                                  ),
+                                  (framework, index) => {
+                                    const targetImageKey = framework?.replace(
+                                      /\s*\d+\s*$/,
+                                      '',
+                                    );
+                                    const imageInfo = _.find(
+                                      metadata?.imageInfo,
+                                      (imageInfo) =>
+                                        imageInfo?.name === targetImageKey,
+                                    );
+                                    const uniqueKey = `${framework}-${index}`;
+                                    return imageInfo?.icon ? (
+                                      <Flex gap={'xxs'} key={uniqueKey}>
+                                        <img
+                                          style={{
+                                            width: '1em',
+                                            height: '1em',
+                                          }}
+                                          src={
+                                            'resources/icons/' + imageInfo?.icon
+                                          }
+                                          alt={framework || ''}
+                                        />
+                                        {framework}
+                                      </Flex>
+                                    ) : (
+                                      <Typography.Text key={uniqueKey}>
+                                        {framework}
+                                      </Typography.Text>
+                                    );
+                                  },
+                                )}
+                              </Flex>
                             ),
-                            (framework, index) => {
-                              const targetImageKey = framework?.replace(
-                                /\s*\d+\s*$/,
-                                '',
-                              );
-                              const imageInfo = _.find(
-                                metadata?.imageInfo,
-                                (imageInfo) =>
-                                  imageInfo?.name === targetImageKey,
-                              );
-                              const uniqueKey = `${framework}-${index}`;
-                              return imageInfo?.icon ? (
-                                <Flex gap={'xxs'} key={uniqueKey}>
-                                  <img
-                                    style={{
-                                      width: '1em',
-                                      height: '1em',
-                                    }}
-                                    src={'resources/icons/' + imageInfo?.icon}
-                                    alt={framework || ''}
-                                  />
-                                  {framework}
-                                </Flex>
-                              ) : (
-                                <Typography.Text key={uniqueKey}>
-                                  {framework}
-                                </Typography.Text>
-                              );
-                            },
-                          )}
-                        </Flex>
-                      ),
-                    },
-                    {
-                      key: 'created',
-                      label: t('modelStore.Created'),
-                      children: dayjs(model_card?.created_at).format('lll'),
-                    },
-                    {
-                      key: 'last_modified',
-                      label: t('modelStore.LastModified'),
-                      children: dayjs(model_card?.modified_at).format('lll'),
-                    },
-                    {
-                      key: 'min_resource',
-                      label: t('modelStore.MinResource'),
-                      children: (
-                        <Flex gap="xs">
-                          {model_card?.min_resource &&
-                            _.map(
-                              JSON.parse(model_card?.min_resource),
-                              (value, type) => {
-                                return (
-                                  <ResourceNumber
-                                    key={type}
-                                    // @ts-ignore
-                                    type={type}
-                                    value={_.toString(value)}
-                                  />
-                                );
-                              },
-                            )}
-                        </Flex>
-                      ),
-                    },
-                  ]}
-                />
-              </Flex>
-            </Col>
-            {!!model_card?.readme ? (
-              <Col {...colSize}>
-                <Card
-                  size="small"
-                  title={
-                    <Flex direction="row" gap={'xs'}>
-                      <FileOutlined />
-                      README.md
+                          },
+                          {
+                            key: 'created',
+                            label: t('modelStore.Created'),
+                            children: dayjs(model_card?.created_at).format(
+                              'lll',
+                            ),
+                          },
+                          {
+                            key: 'last_modified',
+                            label: t('modelStore.LastModified'),
+                            children: dayjs(model_card?.modified_at).format(
+                              'lll',
+                            ),
+                          },
+                          {
+                            key: 'min_resource',
+                            label: t('modelStore.MinResource'),
+                            children: (
+                              <Flex gap="xs">
+                                {model_card?.min_resource &&
+                                  _.map(
+                                    JSON.parse(model_card?.min_resource),
+                                    (value, type) => {
+                                      return (
+                                        <ResourceNumber
+                                          key={type}
+                                          // @ts-ignore
+                                          type={type}
+                                          value={_.toString(value)}
+                                        />
+                                      );
+                                    },
+                                  )}
+                              </Flex>
+                            ),
+                          },
+                        ]}
+                      />
                     </Flex>
-                  }
-                  styles={{
-                    body: {
-                      padding: token.paddingLG,
-                      overflow: 'auto',
-                      height: screen.lg ? 'calc(100vh - 287px)' : undefined,
-                      minHeight: 200,
-                    },
-                  }}
-                >
-                  <Markdown>{model_card?.readme || ''}</Markdown>
-                </Card>
-              </Col>
-            ) : null}
-          </Row>
-        </>
-      )}
+                  </Col>
+                  {!!model_card?.readme ? (
+                    <Col {...colSize}>
+                      <Card
+                        size="small"
+                        title={
+                          <Flex direction="row" gap={'xs'}>
+                            <FileOutlined />
+                            README.md
+                          </Flex>
+                        }
+                        styles={{
+                          body: {
+                            padding: token.paddingLG,
+                            overflow: 'auto',
+                            height: screen.lg
+                              ? 'calc(100vh - 287px)'
+                              : undefined,
+                            minHeight: 200,
+                          },
+                        }}
+                      >
+                        <Markdown>{model_card?.readme || ''}</Markdown>
+                      </Card>
+                    </Col>
+                  ) : null}
+                </Row>
+              </>
+            ),
+          },
+        ]}
+      />
       <Suspense>
         <ModelCloneModal
           vfolderNode={model_card?.vfolder_node || null}
diff --git a/react/src/components/ModelTryContent.tsx b/react/src/components/ModelTryContent.tsx
new file mode 100644
index 0000000000..b9d93e1637
--- /dev/null
+++ b/react/src/components/ModelTryContent.tsx
@@ -0,0 +1,579 @@
+import {
+  baiSignedRequestWithPromise,
+  compareNumberWithUnits,
+  useBaiSignedRequestWithPromise,
+} from '../helper';
+import { generateRandomString } from '../helper';
+import {
+  useCurrentDomainValue,
+  useSuspendedBackendaiClient,
+  useUpdatableState,
+} from '../hooks';
+import { useSuspenseTanQuery, useTanMutation } from '../hooks/reactQueryAlias';
+import { useSetBAINotification } from '../hooks/useBAINotification';
+import { useCurrentResourceGroupValue } from '../hooks/useCurrentProject';
+import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import NvidiaIcon from './BAIIcons/Nvidia';
+import VLLMIcon from './BAIIcons/VLLMIcon';
+import {
+  ServiceCreateType,
+  ServiceLauncherFormValue,
+} from './ServiceLauncherPageContent';
+import { VFolder } from './VFolderSelect';
+import { BuildOutlined } from '@ant-design/icons';
+import { theme, Typography, Button } from 'antd';
+import _ from 'lodash';
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ModelTryContentProps {
+  modelStorageHost?: string;
+  modelName?: string;
+  minAIAcclResource: number;
+  title?: string;
+}
+
+const ModelTryContent: React.FC<ModelTryContentProps> = ({
+  modelName,
+  modelStorageHost,
+  minAIAcclResource,
+  title,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const baiClient = useSuspendedBackendaiClient();
+  const baiRequestWithPromise = useBaiSignedRequestWithPromise();
+  const currentDomain = useCurrentDomainValue();
+  const currentProject = useCurrentProjectValue();
+  const currentResourceGroupByProject = useCurrentResourceGroupValue();
+  const [fetchKey, updateFetchKey] = useUpdatableState('first');
+  const { upsertNotification } = useSetBAINotification();
+
+  const { data: allFolderList } = useSuspenseTanQuery({
+    queryKey: ['allFolderList', fetchKey, currentProject.id],
+    queryFn: () => {
+      const search = new URLSearchParams();
+      search.set('group_id', currentProject.id);
+      return baiRequestWithPromise({
+        method: 'GET',
+        url: `/folders?${search.toString()}`,
+      }) as Promise<VFolder[]>;
+    },
+    staleTime: 1000,
+  });
+
+  const { data: accessibleStorageHostList } = useSuspenseTanQuery({
+    queryKey: ['accessibleStorageHostList', fetchKey, currentProject.id],
+    queryFn: () => {
+      return baiRequestWithPromise({
+        method: 'GET',
+        url: `/folders/_/hosts`,
+      });
+    },
+    staleTime: 1000,
+  });
+
+  const lowestUsageHost = _.minBy(
+    _.map(accessibleStorageHostList?.allowed, (host) => ({
+      host,
+      volume_info: accessibleStorageHostList?.volume_info?.[host],
+    })),
+    'volume_info.usage.percentage',
+  )?.host;
+
+  const myModelStoreList = _.filter(
+    allFolderList,
+    (vFolder) =>
+      vFolder.ownership_type === 'user' && vFolder.usage_mode === 'model',
+  );
+
+  const filteredModelStoreList = myModelStoreList.filter((vFolder) =>
+    vFolder.name.includes(
+      modelName === 'Talkativot UI' ? 'talkativot-standalone' : modelName || '',
+    ),
+  );
+
+  const mutationToClone = useTanMutation<
+    {
+      bgtask_id: string;
+      id: string;
+    },
+    { type?: string; title?: string; message?: string },
+    {
+      input: any;
+      name: string;
+    }
+  >({
+    // @ts-ignore
+    mutationFn: ({ input, name }: { input: any; name: string }) => {
+      return baiClient.vfolder.clone(input, name);
+    },
+  });
+
+  const { data: availableRuntimes } = useSuspenseTanQuery<{
+    runtimes: { name: string; human_readable_name: string }[];
+  }>({
+    queryKey: ['baiClient.modelService.runtime.list'],
+    queryFn: () => {
+      return baiClient.isManagerVersionCompatibleWith('24.03.5')
+        ? baiRequestWithPromise({
+            method: 'GET',
+            url: `/services/_/runtimes`,
+          })
+        : Promise.resolve({
+            runtimes: [
+              {
+                name: 'custom',
+                human_readable_name: 'Custom (Default)',
+              },
+            ],
+          });
+    },
+    staleTime: 1000,
+  });
+
+  const mutationToCreateService = useTanMutation<
+    unknown,
+    {
+      message?: string;
+    },
+    ServiceLauncherFormValue
+  >({
+    mutationFn: (values) => {
+      const environ: { [key: string]: string } = {};
+      if (values.envvars) {
+        values.envvars.forEach((v) => (environ[v.variable] = v.value));
+      }
+      const body: ServiceCreateType = {
+        name: values.serviceName,
+        desired_session_count: values.replicas,
+        image:
+          `${values.environments.image?.registry}/${values.environments.image?.name}:${values.environments.image?.tag}` as string,
+        architecture: values.environments.image?.architecture as string,
+        // FIXME: hardcode this part by selected option (vLLM, NIM, Custom)
+        // ...getImageInfoFromInputInCreating(
+        //   checkManualImageAllowed(
+        //     baiClient._config.allow_manual_image_name_for_session,
+        //     values.environments?.manual,
+        //   ),
+        //   values,
+        // ),
+        runtime_variant: values.runtimeVariant,
+        group: baiClient.current_group, // current Project Group,
+        domain: currentDomain, // current Domain Group,
+        cluster_size: values.cluster_size,
+        cluster_mode: values.cluster_mode,
+        open_to_public: values.openToPublic,
+        config: {
+          model: values.vFolderID,
+          model_version: 1, // FIXME: hardcoded. change it with option later
+          model_mount_destination: '/models', // FIXME: hardcoded. change it with option later
+          environ, // FIXME: hardcoded. change it with option later
+          scaling_group: 'nvidia-H100', // FIXME: hardcoded. change it with option later as well, values.resourceGroup,
+          resources: {
+            // FIXME: manually convert to string since server-side only allows [str,str] tuple
+            cpu: values.resource.cpu.toString(),
+            mem: values.resource.mem,
+            ...(values.resource.accelerator > 0
+              ? {
+                  [values.resource.acceleratorType]:
+                    // FIXME: manually convert to string since server-side only allows [str,str] tuple
+                    values.resource.accelerator.toString(),
+                }
+              : undefined),
+          },
+          resource_opts: {
+            shmem:
+              compareNumberWithUnits(values.resource.mem, '4g') > 0 &&
+              compareNumberWithUnits(values.resource.shmem, '1g') < 0
+                ? '1g'
+                : values.resource.shmem,
+          },
+        },
+      };
+      return baiSignedRequestWithPromise({
+        method: 'POST',
+        url: '/services',
+        body,
+        client: baiClient,
+      });
+    },
+  });
+
+  const getServiceInputByRuntimeVariant = (
+    runtimeVariant: string,
+    vfolderID: string,
+  ): ServiceLauncherFormValue => {
+    const model = modelName?.includes('stable-diffusion-3-medium')
+      ? 'stable-diffusion-3m'
+      : modelName?.includes('Llama-3.2-11B-Vision-Instruct')
+        ? 'llama-vision-11b'
+        : modelName?.includes('Talkativot UI')
+          ? 'talkativot'
+          : modelName;
+    return {
+      serviceName: `${model}-${generateRandomString(4)}`,
+      replicas: 1,
+      // FIXME: hard-coded images for vLLM, NIM, Custom
+      environments: {
+        image: {
+          registry: 'cr.backend.ai',
+          name: (() => {
+            if (modelName?.includes('stable-diffusion')) {
+              return 'testing/ngc-pytorch';
+            }
+            switch (runtimeVariant) {
+              case 'nim':
+                return 'testing/ngc-nim';
+              case 'vllm':
+              case 'custom':
+              default:
+                return 'testing/vllm';
+            }
+          })(),
+          tag: (() => {
+            if (modelName?.includes('stable-diffusion')) {
+              return '24.07-pytorch2.4-py310-cuda12.5';
+            }
+            switch (runtimeVariant) {
+              case 'vllm':
+              case 'custom':
+              default:
+                return '0.6.6-cuda12.4-ubuntu22.04'; // '0.6.2-cuda12.1-ubuntu22.04';
+              case 'nim':
+                return 'ngc-nim:1.0.0-llama3.8b-h100x1-fp16';
+            }
+          })(),
+          architecture: 'x86_64',
+          base_image_name: undefined,
+          digest: undefined,
+          humanized_name: undefined,
+          id: undefined,
+          installed: undefined,
+          labels: undefined,
+          namespace: undefined,
+          resource_limits: undefined,
+          tags: undefined,
+          version: undefined,
+        },
+        // FIXME: temporarily hard-coded environment variable
+        environment: modelName?.includes('Talkativot UI')
+          ? '[{"tokenLimit":1024,"vision":false,"apiEndpoint":"https://llama_kor_bllossom.asia03.app.backend.ai","id":"Llama-3.2-Korean-Bllossom-3B","name":"Llama-3.2-Korean-Bllossom-3B"},{"tokenLimit":2048,"vision":false,"apiEndpoint":"https://gemma2_9b.asia03.app.backend.ai/","id":"gemma-2-9b-it","name":"gemma-2-9b-it"},{"tokenLimit":4096,"vision":true,"apiEndpoint":"https://llama-vision.asia03.app.backend.ai/","id":"Llama-3.2-11B-Vision-Instruct","name":"Llama-3.2-11B-Vision-Instruct"}]'
+          : '',
+        version: '',
+      },
+      // FIXME: temporally hard-coded runtime variant
+      runtimeVariant: modelName?.includes('stable-diffusion')
+        ? 'custom'
+        : runtimeVariant,
+      cluster_size: 1,
+      cluster_mode: 'single-node',
+      openToPublic: true,
+      resourceGroup: currentResourceGroupByProject as string,
+      resource: {
+        cpu: 4,
+        mem: '32g',
+        accelerator: modelName?.includes('Talkativot UI')
+          ? 0
+          : minAIAcclResource,
+        acceleratorType: 'cuda.shares',
+        shmem: '1g',
+      },
+      vFolderID: vfolderID, // TODO: add cloned folder result
+      modelMountDestination: '/models',
+      modelDefinitionPath: '',
+      vfoldersAliasMap: {},
+      envvars: [],
+      enabledAutomaticShmem: false,
+    };
+  };
+
+  const cloneOrCreateModelService = (runtimeVariant: string) => {
+    let modelId = 'vllm-model';
+    switch (runtimeVariant) {
+      case 'vllm':
+      default:
+        break;
+      case 'nim':
+      case 'custom':
+        modelId = 'custom';
+        break;
+    }
+    if (filteredModelStoreList.length < 1) {
+      mutationToClone.mutate(
+        {
+          input: {
+            // FIXME: hardcoded
+            cloneable: true,
+            permission: 'wd', // write-delete permission
+            target_host: modelStorageHost, // lowestUsageHost, // clone to accessible and lowest usage storage host
+            target_name: `${modelName === 'Talkativot UI' ? 'talkativot-standalone-1' : modelName}`,
+            usage_mode: 'model',
+          },
+          name: `${modelName === 'Talkativot UI' ? 'talkativot-standalone' : modelName}`,
+        },
+        {
+          onSuccess: (data) => {
+            upsertNotification({
+              key: `modelStore.clone. + ${modelName}-1`,
+              open: true,
+              onClose: () => {
+                upsertNotification({
+                  key: `modelStore.clone. + ${modelName}-1`,
+                  open: false,
+                  backgroundTask: {
+                    percent: 0,
+                    status: 'pending',
+                  },
+                  to: '',
+                  toText: '',
+                });
+              },
+              extraDescription: '(1 / 2)',
+              backgroundTask: {
+                status: 'pending',
+                percent: 50,
+                taskId: data.bgtask_id,
+                onChange: {
+                  pending: 'Downloading model is in progress...', // t('data.folders.FolderClonePending'),
+                  resolved: 'Successfully downloaded model.', // t('data.folders.FolderCloned'),
+                  rejected:
+                    'Downloading model failed. Please check storage quota and try again.', // t('data.folders.FolderCloneFailed'),
+                },
+                onResolve: () => {
+                  mutationToCreateService.mutate(
+                    getServiceInputByRuntimeVariant('vllm', `${modelName}-1`),
+                    {
+                      onSuccess: (result: any) => {
+                        upsertNotification({
+                          key: result?.endpoint_id,
+                          open: true,
+                          message: 'Starting model service...',
+                          duration: 0,
+                          backgroundTask: {
+                            promise: new Promise<void>((resolve, reject) => {
+                              let progress = 0;
+                              const interval = setInterval(async () => {
+                                try {
+                                  progress += 5;
+                                  upsertNotification({
+                                    key: result?.endpoint_id,
+                                    backgroundTask: {
+                                      status: 'pending',
+                                      percent: progress > 100 ? 100 : progress,
+                                    },
+                                  });
+                                  const routingStatus =
+                                    await baiRequestWithPromise({
+                                      method: 'GET',
+                                      url: `/services/${result?.endpoint_id}`,
+                                    });
+                                  if (routingStatus.active_routes.length > 0) {
+                                    clearInterval(interval);
+                                    return resolve();
+                                  }
+                                  if (progress >= 100) {
+                                    throw new Error(
+                                      'Model service failed to start. Please check the service status.',
+                                    );
+                                  }
+                                } catch (error) {
+                                  clearInterval(interval);
+                                  return reject();
+                                }
+                              }, 5000);
+                            }),
+                            status: 'pending',
+                            percent: 0,
+                            onResolve: () => {
+                              upsertNotification({
+                                duration: 0,
+                                key: result?.endpoint_id,
+                                backgroundTask: {
+                                  status: 'resolved',
+                                  percent: 100,
+                                },
+                                message: '',
+                                to: `/playground?endpointId=${result?.endpoint_id}&modelId=vllm-model`, // PATH to playground page
+                                toText: 'Play your model now!',
+                              });
+                            },
+                            onFailed: () => {
+                              upsertNotification({
+                                key: result?.endpoint_id,
+                                duration: 0,
+                                backgroundTask: {
+                                  status: 'rejected',
+                                  percent: 99,
+                                },
+                                message: '',
+                                to: `/serving/${result?.endpoint_id}`,
+                                toText: 'Go to service detail page',
+                              });
+                            },
+                          },
+                        });
+                      },
+                      onError: () => {
+                        // TODO: show a notification to go to service detail page
+                      },
+                    },
+                  );
+                },
+              },
+            });
+          },
+          onError: () => {
+            // TODO: show a notification for clone error
+          },
+        },
+      );
+    } else {
+      mutationToCreateService.mutate(
+        getServiceInputByRuntimeVariant(
+          runtimeVariant,
+          filteredModelStoreList[0].id,
+        ),
+        {
+          onSuccess: (result: any) => {
+            upsertNotification({
+              key: result?.endpoint_id,
+              open: true,
+              message: 'Starting model service...',
+              duration: 0,
+              backgroundTask: {
+                promise: new Promise<void>((resolve, reject) => {
+                  let progress = 0;
+                  const interval = setInterval(async () => {
+                    try {
+                      progress += 5;
+                      upsertNotification({
+                        key: result?.endpoint_id,
+                        backgroundTask: {
+                          status: 'pending',
+                          percent: progress > 100 ? 100 : progress,
+                        },
+                      });
+                      const routingStatus = await baiRequestWithPromise({
+                        method: 'GET',
+                        url: `/services/${result?.endpoint_id}`,
+                      });
+                      if (routingStatus.active_routes.length > 0) {
+                        clearInterval(interval);
+                        return resolve();
+                      }
+                      if (progress >= 100) {
+                        throw new Error(
+                          'Model service failed to start. Please check the service status.',
+                        );
+                      }
+                    } catch (error) {
+                      clearInterval(interval);
+                      return reject();
+                    }
+                  }, 5000);
+                }),
+                onChange: {
+                  pending: 'Model service is starting...',
+                  resolved: 'Model service is now ready!',
+                  rejected:
+                    'Model service failed to start. Please check the service status.',
+                },
+                status: 'pending',
+                percent: 0,
+                onResolve: () => {
+                  upsertNotification({
+                    duration: 0,
+                    key: result?.endpoint_id,
+                    backgroundTask: {
+                      status: 'resolved',
+                      percent: 100,
+                    },
+                    message: '',
+                    to: `/playground?endpointId=${result?.endpoint_id}&modelId=${modelId}`, // PATH to playground page
+                    toText: 'Play your model now!',
+                  });
+                },
+                onFailed: () => {
+                  upsertNotification({
+                    duration: 0,
+                    key: result?.endpoint_id,
+                    backgroundTask: {
+                      status: 'rejected',
+                      percent: 99,
+                    },
+                    message: '',
+                    to: `/serving/${result?.endpoint_id}`,
+                    toText: 'Go to service detail page',
+                  });
+                },
+              },
+            });
+          },
+          onError: () => {
+            // TODO: show a notification to go to service detail page
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <>
+      {title && (
+        <Typography.Title level={5} style={{ marginTop: 0 }}>
+          {title}
+        </Typography.Title>
+      )}
+      <Button
+        type="primary"
+        disabled={
+          modelName?.includes('stable-diffusion') ||
+          modelName?.includes('Talkativot UI')
+        }
+        onClick={() => {
+          cloneOrCreateModelService('vllm');
+        }}
+        icon={<VLLMIcon size={token.sizeLG} />}
+        style={{
+          height: token.sizeXXL,
+        }}
+      >
+        vLLM
+      </Button>
+      <Button
+        disabled={
+          modelName?.includes('stable-diffusion') ||
+          modelName?.includes('gemma-2-27b-it') ||
+          modelName?.includes('Llama-3.2-11B-Vision-Instruct') ||
+          modelName?.includes('Talkativot UI')
+        }
+        type="primary"
+        onClick={() => {
+          cloneOrCreateModelService('nim');
+        }}
+        style={{
+          height: token.sizeXXL,
+        }}
+        icon={<NvidiaIcon size={token.sizeLG} />}
+      >
+        NIM
+      </Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          cloneOrCreateModelService('custom');
+        }}
+        style={{
+          height: token.sizeXXL,
+        }}
+        icon={<BuildOutlined style={{ fontSize: token.sizeLG }} />}
+      >
+        Custom
+      </Button>
+    </>
+  );
+};
+
+export default ModelTryContent;
diff --git a/react/src/components/lablupTalkativotUI/ChatMessage.tsx b/react/src/components/lablupTalkativotUI/ChatMessage.tsx
index 6f3104e68f..ae429fc186 100644
--- a/react/src/components/lablupTalkativotUI/ChatMessage.tsx
+++ b/react/src/components/lablupTalkativotUI/ChatMessage.tsx
@@ -103,8 +103,9 @@ const ChatMessage: React.FC<{
           direction="column"
           style={{
             borderRadius: token.borderRadius,
-            borderColor: token.colorBorderSecondary,
-            borderWidth: token.lineWidth,
+            border: _.isEmpty(message.experimental_attachments)
+              ? `${token.lineWidth}px solid ${token.colorBorderSecondary}`
+              : 'none',
             padding: '1em',
             paddingTop: 0,
             paddingBottom: 0,
diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
index 8ccb89afcf..d7305f7fa7 100644
--- a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
+++ b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -268,6 +268,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
+        minHeight: '50vh',
       }}
       styles={{
         body: {
@@ -292,7 +293,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
         <ChatSender
           autoFocus
           value={input}
-          placeholder="Say something..."
+          placeholder="Ask me anything..."
           header={
             <Sender.Header
               closable={false}
diff --git a/react/src/components/lablupTalkativotUI/LLMPlaygroundPage.tsx b/react/src/components/lablupTalkativotUI/LLMPlaygroundPage.tsx
index fa1d7bcd97..f2279ee96e 100644
--- a/react/src/components/lablupTalkativotUI/LLMPlaygroundPage.tsx
+++ b/react/src/components/lablupTalkativotUI/LLMPlaygroundPage.tsx
@@ -17,7 +17,7 @@ const LLMPlaygroundPage: React.FC<LLMPlaygroundPageProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
   // Set the initial list to have two items
-  const { list, remove, getKey, push } = useDynamicList(['0', '1']);
+  const { list, remove, getKey, push } = useDynamicList(['0']);
 
   const [isSynchronous, setSynchronous] = useState(false);
 
diff --git a/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx b/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
index 755436f90c..df802971be 100644
--- a/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
+++ b/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
@@ -59,7 +59,7 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
               }
               enableExtraHover={m.role === 'user'}
               extra={
-                m.role !== 'user' ? (
+                m.role !== 'user' && m.content ? (
                   <Compact>
                     <CopyButton
                       type="text"
diff --git a/react/src/hooks/useBAINotification.tsx b/react/src/hooks/useBAINotification.tsx
index 7a607bc71c..90f743e3b0 100644
--- a/react/src/hooks/useBAINotification.tsx
+++ b/react/src/hooks/useBAINotification.tsx
@@ -19,6 +19,8 @@ export interface NotificationState
   to?: string | To;
   open?: boolean;
   backgroundTask?: {
+    onResolve?: (notification: NotificationState) => void;
+    onFailed?: (notification: NotificationState) => void;
     taskId?: string;
     percent?: number;
     status: 'pending' | 'rejected' | 'resolved';
@@ -97,7 +99,7 @@ export const useBAINotificationEffect = () => {
               backgroundTask: {
                 status: 'resolved',
               },
-              duration: CLOSING_DURATION,
+              duration: 0, // CLOSING_DURATION,
             });
             const overrideData = generateOverrideByStatus(
               updatedNotification,
@@ -177,6 +179,8 @@ export const useBAINotificationEffect = () => {
             listeningTaskIdsRef.current,
             notification.backgroundTask?.taskId,
           );
+          notification?.backgroundTask?.onResolve?.(notification);
+          notification?.backgroundTask?.onFailed?.(notification);
           sse.close();
           if (_.startsWith(_.toString(notification.key), 'image-rescan:')) {
             const event = new CustomEvent('image-rescanned');
@@ -193,6 +197,8 @@ export const useBAINotificationEffect = () => {
           });
         });
         const failHandler = (e: any) => {
+          notification?.backgroundTask?.onResolve?.(notification);
+          notification?.backgroundTask?.onFailed?.(notification);
           listeningTaskIdsRef.current = _.without(
             listeningTaskIdsRef.current,
             notification.backgroundTask?.taskId,
@@ -217,6 +223,8 @@ export const useBAINotificationEffect = () => {
         sse.addEventListener('bgtask_failed', failHandler);
         sse.addEventListener('task_failed', (e) => {
           const data = JSON.parse(e['data']);
+          notification?.backgroundTask?.onResolve?.(notification);
+          notification?.backgroundTask?.onFailed?.(notification);
           upsertNotification({
             key: notification.key,
             message: notification.message,
@@ -233,6 +241,8 @@ export const useBAINotificationEffect = () => {
         });
 
         sse.addEventListener('bgtask_cancelled', (e) => {
+          notification?.backgroundTask?.onResolve?.(notification);
+          notification?.backgroundTask?.onFailed?.(notification);
           listeningTaskIdsRef.current = _.without(
             listeningTaskIdsRef.current,
             notification.backgroundTask?.taskId,
diff --git a/react/src/pages/ModelStoreListPage.tsx b/react/src/pages/ModelStoreListPage.tsx
index 7235ade9e0..d342b97ec5 100644
--- a/react/src/pages/ModelStoreListPage.tsx
+++ b/react/src/pages/ModelStoreListPage.tsx
@@ -1,4 +1,5 @@
 import Flex from '../components/Flex';
+import ImportFromHuggingFacePanel from '../components/ImportFromHuggingFacePanel';
 import ModelCardModal from '../components/ModelCardModal';
 import TextHighlighter from '../components/TextHighlighter';
 import { ModelCardModalFragment$key } from '../components/__generated__/ModelCardModalFragment.graphql';
@@ -15,6 +16,7 @@ import {
   Tag,
   theme,
   Typography,
+  Image,
 } from 'antd';
 import { createStyles } from 'antd-style';
 import graphql from 'babel-plugin-relay/macro';
@@ -43,7 +45,13 @@ const ModelStoreListPage: React.FC = () => {
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
   const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
-
+  const [paginationState] = useState<{
+    current: number;
+    pageSize: number;
+  }>({
+    current: 1,
+    pageSize: 100,
+  });
   const { styles } = useStyles();
 
   const [currentModelInfo, setCurrentModelInfo] =
@@ -71,6 +79,10 @@ const ModelStoreListPage: React.FC = () => {
               license
               min_resource
               error_msg @since(version: "24.03.7")
+              vfolder {
+                id
+                name
+              }
               ...ModelCardModalFragment
             }
           }
@@ -91,8 +103,6 @@ const ModelStoreListPage: React.FC = () => {
     },
   );
 
-  // const filterInfo = _.map
-
   const fieldsValues = useMemo(() => {
     const result: {
       task: string[];
@@ -126,6 +136,7 @@ const ModelStoreListPage: React.FC = () => {
       gap="lg"
       style={{ padding: token.paddingLG }}
     >
+      <ImportFromHuggingFacePanel />
       <Flex
         direction="column"
         align="stretch"
@@ -202,7 +213,7 @@ const ModelStoreListPage: React.FC = () => {
       </Flex>
       <List
         className={styles.cardList}
-        grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 }}
+        grid={{ gutter: 16, column: 2 }}
         dataSource={model_cards?.edges
           ?.map((edge) => edge?.node)
           .filter((info) => {
@@ -229,6 +240,26 @@ const ModelStoreListPage: React.FC = () => {
                 _.includes(selectedTasks, info?.task)) &&
               passSearchFilter
             );
+          })
+          .sort((a, b) => {
+            const specialNames = [
+              'gemma-2-27b-it',
+              'Llama-3.2-11B-Vision-Instruct',
+              'stable-diffusion-3-medium',
+              'Talkativot UI',
+            ];
+            const aIndex = specialNames.indexOf(a?.name || '');
+            const bIndex = specialNames.indexOf(b?.name || '');
+
+            if (aIndex !== -1 && bIndex !== -1) {
+              return aIndex - bIndex;
+            } else if (aIndex !== -1) {
+              return -1;
+            } else if (bIndex !== -1) {
+              return 1;
+            } else {
+              return 0;
+            }
           })}
         renderItem={(item) => (
           <List.Item
@@ -262,57 +293,67 @@ const ModelStoreListPage: React.FC = () => {
               style={{
                 height: '100%',
               }}
-              size="small"
-            >
-              <Flex direction="row" wrap="wrap" gap={'xs'}>
-                {item?.description && (
-                  <Typography.Paragraph
-                    ellipsis={{ rows: 3, expandable: false }}
-                  >
-                    <TextHighlighter keyword={search}>
-                      {item?.description}
-                    </TextHighlighter>
-                  </Typography.Paragraph>
-                )}
-                {item?.category && (
-                  <Tag bordered={false}>
-                    <TextHighlighter keyword={search}>
-                      {item?.category}
-                    </TextHighlighter>
-                  </Tag>
-                )}
-                {item?.task && (
-                  <Tag bordered={false} color="success">
-                    <TextHighlighter keyword={search}>
-                      {item?.task}
-                    </TextHighlighter>
-                  </Tag>
-                )}
-                {item?.label &&
-                  _.map(item?.label, (label) => (
-                    <Tag key={label} bordered={false} color="blue">
+              children={
+                <Flex direction="column" align="stretch" gap="xs">
+                  <Flex direction="row" align="start" gap="xs">
+                    <Image
+                      width={150}
+                      preview={false}
+                      src={`/resources/images/model-player/${_.replace(item?.name as string, ' ', '-')}.jpeg`}
+                      fallback="/resources/images/model-player/default.jpeg"
+                      loading={'lazy'}
+                    />
+                    <Typography.Paragraph
+                      ellipsis={{ rows: 3, expandable: false }}
+                      style={{ flex: 1 }}
+                    >
                       <TextHighlighter keyword={search}>
-                        {label}
+                        {item?.description}
                       </TextHighlighter>
-                    </Tag>
-                  ))}
-                {item?.error_msg && (
-                  <Alert
-                    style={{ width: '100%' }}
-                    message={
-                      <Typography.Paragraph
-                        ellipsis={{ rows: 6 }}
-                        style={{ marginBottom: 0 }}
-                      >
-                        {item.error_msg}
-                      </Typography.Paragraph>
-                    }
-                    type="error"
-                    showIcon
-                  />
-                )}
-              </Flex>
-            </Card>
+                    </Typography.Paragraph>
+                  </Flex>
+                  <Flex direction="row" wrap="wrap" gap={'xs'}>
+                    {item?.category && (
+                      <Tag bordered={false}>
+                        <TextHighlighter keyword={search}>
+                          {item?.category}
+                        </TextHighlighter>
+                      </Tag>
+                    )}
+                    {item?.task && (
+                      <Tag bordered={false} color="success">
+                        <TextHighlighter keyword={search}>
+                          {item?.task}
+                        </TextHighlighter>
+                      </Tag>
+                    )}
+                    {item?.label &&
+                      _.map(item?.label, (label) => (
+                        <Tag key={label} bordered={false} color="blue">
+                          <TextHighlighter keyword={search}>
+                            {label}
+                          </TextHighlighter>
+                        </Tag>
+                      ))}
+                    {item?.error_msg && (
+                      <Alert
+                        style={{ width: '100%' }}
+                        message={
+                          <Typography.Paragraph
+                            ellipsis={{ rows: 6 }}
+                            style={{ marginBottom: 0 }}
+                          >
+                            {item.error_msg}
+                          </Typography.Paragraph>
+                        }
+                        type="error"
+                        showIcon
+                      />
+                    )}
+                  </Flex>
+                </Flex>
+              }
+            ></Card>
           </List.Item>
         )}
       />
diff --git a/react/src/pages/ModelStorePage.tsx b/react/src/pages/ModelStorePage.tsx
new file mode 100644
index 0000000000..9ce3c38e8e
--- /dev/null
+++ b/react/src/pages/ModelStorePage.tsx
@@ -0,0 +1,17 @@
+import { Skeleton, theme } from 'antd';
+import React, { Suspense } from 'react';
+
+const ModelStoreListPage = React.lazy(() => import('./ModelStoreListPage'));
+const ModelStorePage: React.FC = () => {
+  const { token } = theme.useToken();
+
+  return (
+    <Suspense
+      fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
+    >
+      <ModelStoreListPage />
+    </Suspense>
+  );
+};
+
+export default ModelStorePage;
diff --git a/react/src/pages/Page401.tsx b/react/src/pages/Page401.tsx
index e173e8c2d8..62770a7158 100644
--- a/react/src/pages/Page401.tsx
+++ b/react/src/pages/Page401.tsx
@@ -38,7 +38,7 @@ const Page401 = () => {
           <Button
             size="large"
             type="primary"
-            onClick={() => webuiNavigate('/summary')}
+            onClick={() => webuiNavigate('/data')}
           >
             {t('button.GoBackToSummaryPage')}
           </Button>
diff --git a/react/src/pages/Page404.tsx b/react/src/pages/Page404.tsx
index d1fb3c9870..eb16a85dda 100644
--- a/react/src/pages/Page404.tsx
+++ b/react/src/pages/Page404.tsx
@@ -38,7 +38,7 @@ const Page404 = () => {
           <Button
             size="large"
             type="primary"
-            onClick={() => webuiNavigate('/summary')}
+            onClick={() => webuiNavigate('/data')}
           >
             {t('button.GoBackToSummaryPage')}
           </Button>
diff --git a/react/src/pages/ServingPage.tsx b/react/src/pages/ServingPage.tsx
index 78a89a85e0..f77c78f82b 100644
--- a/react/src/pages/ServingPage.tsx
+++ b/react/src/pages/ServingPage.tsx
@@ -49,11 +49,6 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
   return (
     <Flex direction="column" align="stretch" gap={'md'}>
       <Card
-        activeTabKey={curTabKey}
-        onTabChange={(key) => {
-          setCurTabKey(key as TabKey);
-        }}
-        tabList={tabList}
         styles={{
           body: {
             padding: 0,
@@ -62,12 +57,13 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
           },
         }}
       >
-        {curTabKey === 'services' ? (
-          <Suspense
-            fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
-          >
-            <EndpointListPage />
-          </Suspense>
+        <Suspense
+          fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
+        >
+          <EndpointListPage />
+        </Suspense>
+        {/* {curTabKey === 'services' ? (
+ 
         ) : null}
         {curTabKey === 'chatting' && baiClient._config.enableLLMPlayground ? (
           <Suspense
@@ -75,7 +71,7 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
           >
             <ChattingPage />
           </Suspense>
-        ) : null}
+        ) : null} */}
       </Card>
     </Flex>
   );
diff --git a/react/src/pages/VFolderListPage.tsx b/react/src/pages/VFolderListPage.tsx
index eafc1ecb3c..74532f8ef5 100644
--- a/react/src/pages/VFolderListPage.tsx
+++ b/react/src/pages/VFolderListPage.tsx
@@ -27,16 +27,14 @@ const StorageStatusPanelFallback = React.lazy(() =>
 );
 
 type TabKey =
-  | 'general'
-  | 'data'
-  | 'automount'
-  | 'model'
-  | 'model-store'
-  | 'trash-bin';
+  // | 'general'
+  // | 'data'
+  // | 'automount'
+  'model' | 'model-store' | 'trash-bin';
 
 interface VFolderListPageProps {}
 
-const tabParam = withDefault(StringParam, 'general');
+const tabParam = withDefault(StringParam, 'model-store');
 
 const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   const { t } = useTranslation();
@@ -87,6 +85,7 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   }[curTabKey];
 
   const tabList = filterEmptyItem([
+    /*
     {
       key: 'general',
       tab: t('data.Folders'),
@@ -99,6 +98,7 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
       key: 'automount',
       tab: t('data.AutomountFolders'),
     },
+    */
     {
       key: 'model',
       tab: t('data.Models'),
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index b6e6c4bcb7..6e69a958d7 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Die E-Mail-Adresse des Benutzers stimmt nicht überein",
       "MyEnvironments": "Meine Umgebungen",
       "ResourcePolicy": "Ressourcenpolitik",
-      "FullNameUpdated": "Der vollständige Name wurde erfolgreich aktualisiert."
+      "FullNameUpdated": "Der vollständige Name wurde erfolgreich aktualisiert.",
+      "Playground": "Spielplatz",
+      "ModelStore": "Modellladen"
     },
     "YouAreOffline": "Offline: Keine Verbindung zu einem Netzwerk.",
     "YouAreOnline": "Sie sind jetzt online",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Er wird als Ihr Benutzertyp-Ordner geklont.",
     "CloneToFolder": "In einen Ordner klonen",
     "FolderAlreadyExists": "Ein Ordner mit diesem Namen existiert bereits.",
-    "FinetuneModel": "Feinabstimmung des Modells"
+    "FinetuneModel": "Feinabstimmung des Modells",
+    "Experience": "Erfahrung",
+    "ModelCard": "Modellkarte",
+    "ImportFromHuggingFace": "Import aus Hugging Face"
   },
   "table": {
     "SettingTable": "Sitzordnung bei Tisch",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Laden Sie die Seite neu",
     "ResetErrorBoundary": "ErrorBoundary zurücksetzen",
     "Title": "Es ist ein Fehler aufgetreten."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Modelldienstleistungen",
+      "ModelList": "Modellliste",
+      "MyServices": "Meine Dienste"
+    }
   }
 }
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index d955fe7b1b..90183ea35e 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Το email χρήστη δεν ταιριάζει",
       "MyEnvironments": "Τα περιβάλλοντα μου",
       "ResourcePolicy": "Πολιτική Πόρων",
-      "FullNameUpdated": "Το πλήρες όνομα ενημερώθηκε με επιτυχία."
+      "FullNameUpdated": "Το πλήρες όνομα ενημερώθηκε με επιτυχία.",
+      "Playground": "Παιδική χαρά",
+      "ModelStore": "Κατάστημα μοντέλων"
     },
     "YouAreOffline": "Offline: Δεν είναι συνδεδεμένος σε κανένα δίκτυο.",
     "YouAreOnline": "Είστε πλέον συνδεδεμένοι",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Θα κλωνοποιηθεί ως φάκελος τύπου χρήστη.",
     "CloneToFolder": "Κλωνοποίηση σε φάκελο",
     "FolderAlreadyExists": "Ένας φάκελος με αυτό το όνομα υπάρχει ήδη.",
-    "FinetuneModel": "Μοντέλο Finetune"
+    "FinetuneModel": "Μοντέλο Finetune",
+    "Experience": "Εμπειρία",
+    "ModelCard": "Κάρτα μοντέλου",
+    "ImportFromHuggingFace": "Εισαγωγή από το πρόσωπο που αγκαλιάζει"
   },
   "table": {
     "SettingTable": "Ρύθμιση πίνακα",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Επαναφόρτωση της σελίδας",
     "ResetErrorBoundary": "Επαναφορά ErrorBoundary",
     "Title": "Εμφανίστηκε σφάλμα."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Υπηρεσίες μοντέλου",
+      "ModelList": "Λίστα μοντέλων",
+      "MyServices": "Οι υπηρεσίες μου"
+    }
   }
 }
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 99d5260ee0..e3a1166959 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -65,7 +65,9 @@
       "DisMatchUserEmail": "User E-mail does not match",
       "MyEnvironments": "My Environments",
       "ResourcePolicy": "Resource Policy",
-      "FullNameUpdated": "Full name is successfully updated."
+      "FullNameUpdated": "Full name is successfully updated.",
+      "Playground": "Playground",
+      "ModelStore": "Model Store"
     },
     "YouAreOffline": "Offline: Not connected to any networks.",
     "YouAreOnline": "You are now online",
@@ -568,7 +570,8 @@
     "Expand": "Expand",
     "Clear": "Clear",
     "Apply": "Apply",
-    "CopySomething": "Copy {{name}}"
+    "CopySomething": "Copy {{name}}",
+    "GoBackToModelServicesPage": "Go back to model services page"
   },
   "agent": {
     "Endpoint": "Endpoint",
@@ -1686,7 +1689,18 @@
     "CloneInfo": "It will be cloned as your user type folder.",
     "CloneToFolder": "Clone to a folder",
     "FolderAlreadyExists": "A folder with this name already exists.",
-    "FinetuneModel": "Finetune Model"
+    "FinetuneModel": "Finetune Model",
+    "Experience": "Experience",
+    "ModelCard": "Model Card",
+    "ImportFromHuggingFace": "Import From Hugging Face"
+  },
+  "tourguide": {
+    "NeoSessionLauncher": {
+      "ValidationErrorTitle": "Input field validation errors",
+      "ValidationErrorText": "If you don't enter a value in a required field or enter an invalid value, an error message displays in that field.",
+      "FixErrorAndTryAgainText": "If there is an error field, the Launch session button is disabled. Please correct the error and try again.",
+      "FixErrorFieldbyModifyButton": "For that error field, you can go directly to the Edit button in the top right corner to edit it."
+    }
   },
   "sourceCodeViewer": {
     "Copy": "Copy",
@@ -1741,14 +1755,6 @@
     "Notification": "Notification",
     "Running": "Running..."
   },
-  "tourGuide": {
-    "neoSessionLauncher": {
-      "FixErrorAndTryAgainText": "If there is an error field, the Launch session button is disabled. Please correct the error and try again.",
-      "FixErrorFieldByModifyButton": "For that error field, you can go directly to the Edit button in the top right corner to edit it.",
-      "ValidationErrorText": "If you don't enter a value in a required field or enter an invalid value, an error message displays in that field.",
-      "ValidationErrorTitle": "Input field validation errors"
-    }
-  },
   "errorBoundary": {
     "DisplayOnlyDevEnv": "This error block is displayed only in WebUI development environment.",
     "ExpiredLoginSessionReLogin": "Login",
@@ -1756,5 +1762,12 @@
     "ReloadPage": "Reload the page",
     "ResetErrorBoundary": "Reset ErrorBoundary",
     "Title": "An error has occurred."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Model Services",
+      "ModelList": "Model List",
+      "MyServices": "My Services"
+    }
   }
 }
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index d025a9dc22..c4bc482436 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -1645,7 +1645,9 @@
       "DisMatchUserEmail": "El correo electrónico del usuario no coincide",
       "MyEnvironments": "Mis ambientes",
       "ResourcePolicy": "Política de recursos",
-      "FullNameUpdated": "El nombre completo se ha actualizado correctamente."
+      "FullNameUpdated": "El nombre completo se ha actualizado correctamente.",
+      "Playground": "Patio de juegos",
+      "ModelStore": "Tienda de modelos"
     },
     "NetworkSoftTimeout": "El servidor está tardando más en responder. Por favor, espere un momento",
     "NotFound": "<p>¡Oops!<br/>Página no encontrada...</p>",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Se clonará como su carpeta de tipo de usuario.",
     "CloneToFolder": "Clonar en una carpeta",
     "FolderAlreadyExists": "Ya existe una carpeta con este nombre.",
-    "FinetuneModel": "Modelo de ajuste fino"
+    "FinetuneModel": "Modelo de ajuste fino",
+    "Experience": "Experiencia",
+    "ModelCard": "Tarjeta modelo",
+    "ImportFromHuggingFace": "Importar desde la cara abrazada"
   },
   "table": {
     "SettingTable": "Ajuste de la tabla",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Recargar la página",
     "ResetErrorBoundary": "Restablecer ErrorBoundary",
     "Title": "Se ha producido un error."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Servicios modelo",
+      "ModelList": "Lista de modelos",
+      "MyServices": "Mis servicios"
+    }
   }
 }
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index 4c404c8510..08277f0a98 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -1645,7 +1645,9 @@
       "DisMatchUserEmail": "Käyttäjän sähköpostiosoite ei täsmää",
       "MyEnvironments": "Omat ympäristöt",
       "ResourcePolicy": "Resurssipolitiikka",
-      "FullNameUpdated": "Koko nimi on päivitetty onnistuneesti."
+      "FullNameUpdated": "Koko nimi on päivitetty onnistuneesti.",
+      "Playground": "Leikkikenttä",
+      "ModelStore": "Mallikauppa"
     },
     "NetworkSoftTimeout": "Palvelimen vastaus kestää kauemmin. Odota hetki",
     "NotFound": "<p>Oops!<br/>Sivua ei löydy...</p>",
@@ -1680,7 +1682,10 @@
     "Version": "Versio",
     "CloneToFolder": "Kloonaa kansioon",
     "FolderAlreadyExists": "Tämän niminen kansio on jo olemassa.",
-    "FinetuneModel": "Finetune malli"
+    "FinetuneModel": "Finetune malli",
+    "Experience": "Kokea",
+    "ModelCard": "Mallikortti",
+    "ImportFromHuggingFace": "Tuo halaavista kasvoista"
   },
   "table": {
     "SettingTable": "Kattaus",
@@ -1754,5 +1759,12 @@
     "ReloadPage": "Lataa sivu uudelleen",
     "ResetErrorBoundary": "Nollaa ErrorBoundary",
     "Title": "On tapahtunut virhe."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Mallipalvelut",
+      "ModelList": "Malliluettelo",
+      "MyServices": "Omat palvelut"
+    }
   }
 }
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index 1f50e6f7d9..02edde978f 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "L'e-mail de l'utilisateur ne correspond pas",
       "MyEnvironments": "Mes environnements",
       "ResourcePolicy": "Politique des ressources",
-      "FullNameUpdated": "Le nom complet a été mis à jour avec succès."
+      "FullNameUpdated": "Le nom complet a été mis à jour avec succès.",
+      "Playground": "Aire de jeux",
+      "ModelStore": "Magasin de modèles"
     },
     "YouAreOffline": "Hors ligne : N'est connecté à aucun réseau.",
     "YouAreOnline": "Vous êtes maintenant en ligne",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Il sera cloné en tant que dossier de votre type d'utilisateur.",
     "CloneToFolder": "Cloner dans un dossier",
     "FolderAlreadyExists": "Un dossier portant ce nom existe déjà.",
-    "FinetuneModel": "Modèle de réglage fin"
+    "FinetuneModel": "Modèle de réglage fin",
+    "Experience": "Expérience",
+    "ModelCard": "Carte modèle",
+    "ImportFromHuggingFace": "Importer depuis un visage câlin"
   },
   "table": {
     "SettingTable": "Paramètre de table",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Recharger la page",
     "ResetErrorBoundary": "Réinitialisation de la limite d'erreur",
     "Title": "Une erreur s'est produite."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Services de modèles",
+      "ModelList": "Liste des modèles",
+      "MyServices": "Mes prestations"
+    }
   }
 }
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index 19884441b5..e4b9cea8a0 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Email Pengguna tidak cocok",
       "MyEnvironments": "Lingkungan Saya",
       "ResourcePolicy": "Kebijakan Sumber Daya",
-      "FullNameUpdated": "Nama lengkap berhasil diperbarui."
+      "FullNameUpdated": "Nama lengkap berhasil diperbarui.",
+      "Playground": "Tempat bermain",
+      "ModelStore": "Toko Model"
     },
     "YouAreOffline": "Offline: Tidak terhubung ke jaringan apa pun.",
     "YouAreOnline": "Anda sekarang online",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Ini akan dikloning sebagai folder tipe pengguna Anda.",
     "CloneToFolder": "Mengkloning ke folder",
     "FolderAlreadyExists": "Folder dengan nama ini sudah ada.",
-    "FinetuneModel": "Penyempurnaan Model"
+    "FinetuneModel": "Penyempurnaan Model",
+    "Experience": "Pengalaman",
+    "ModelCard": "Kartu Model",
+    "ImportFromHuggingFace": "Impor Dari Memeluk Wajah"
   },
   "table": {
     "SettingTable": "Penataan meja",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Muat ulang halaman",
     "ResetErrorBoundary": "Setel Ulang Batas Kesalahan",
     "Title": "Telah terjadi kesalahan."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Layanan Model",
+      "ModelList": "Daftar Model",
+      "MyServices": "Layanan Saya"
+    }
   }
 }
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index da0ac0d5af..43996e6e4a 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "L'e-mail dell'utente non corrisponde",
       "MyEnvironments": "I miei ambienti",
       "ResourcePolicy": "Politica delle risorse",
-      "FullNameUpdated": "Il nome completo è stato aggiornato con successo."
+      "FullNameUpdated": "Il nome completo è stato aggiornato con successo.",
+      "Playground": "Parco giochi",
+      "ModelStore": "Negozio di modelli"
     },
     "YouAreOffline": "Non in linea: Non è collegato ad alcuna rete.",
     "YouAreOnline": "Ora sei online",
@@ -1678,7 +1680,10 @@
     "CloneInfo": "Verrà clonata come cartella del tipo di utente.",
     "CloneToFolder": "Clonare in una cartella",
     "FolderAlreadyExists": "Una cartella con questo nome esiste già.",
-    "FinetuneModel": "Modello di messa a punto"
+    "FinetuneModel": "Modello di messa a punto",
+    "Experience": "Esperienza",
+    "ModelCard": "Scheda modello",
+    "ImportFromHuggingFace": "Importa da viso abbracciato"
   },
   "table": {
     "SettingTable": "Impostazione della tabella",
@@ -1753,5 +1758,12 @@
     "ReloadPage": "Ricarica la pagina",
     "ResetErrorBoundary": "Azzeramento di ErrorBoundary",
     "Title": "Si è verificato un errore."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Servizi modello",
+      "ModelList": "Elenco dei modelli",
+      "MyServices": "I miei servizi"
+    }
   }
 }
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index e548e16b3b..6df9be27f5 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "ユーザーの電子メールが一致しません",
       "MyEnvironments": "私の環境",
       "ResourcePolicy": "リソースポリシー",
-      "FullNameUpdated": "フルネームが正常に更新されました。"
+      "FullNameUpdated": "フルネームが正常に更新されました。",
+      "Playground": "遊び場",
+      "ModelStore": "模型店"
     },
     "YouAreOffline": "オフライン：どのネットワークにも接続されていない。",
     "YouAreOnline": "あなたは今オンラインです",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "ユーザータイプのフォルダとしてクローンされます。",
     "CloneToFolder": "フォルダへのクローン",
     "FolderAlreadyExists": "この名前のフォルダはすでに存在する。",
-    "FinetuneModel": "ファインチューンモデル"
+    "FinetuneModel": "ファインチューンモデル",
+    "Experience": "経験",
+    "ModelCard": "モデルカード",
+    "ImportFromHuggingFace": "ハグフェイスからインポート"
   },
   "table": {
     "SettingTable": "テーブルセッティング",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "ページの更新",
     "ResetErrorBoundary": "ErrorBoundaryの初期化",
     "Title": "エラーが発生しました。"
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "モデルサービス",
+      "ModelList": "機種一覧",
+      "MyServices": "私のサービス"
+    }
   }
 }
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index 9cb29ea7c4..191c389954 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "사용자 E-mail이 일치하지 않습니다.",
       "MyEnvironments": "나의 실행 환경",
       "ResourcePolicy": "자원 정책",
-      "FullNameUpdated": "사용자 이름이 성공적으로 갱신되었습니다."
+      "FullNameUpdated": "사용자 이름이 성공적으로 갱신되었습니다.",
+      "Playground": "플레이그라운드",
+      "ModelStore": "모델 스토어"
     },
     "YouAreOffline": "오프라인: 네트워크에 연결되어 있지 않습니다.",
     "YouAreOnline": "온라인 상태가 되었습니다",
@@ -1681,7 +1683,10 @@
     "CloneInfo": "새로운 사용자 폴더로 복제됩니다.",
     "CloneToFolder": "폴더로 복제",
     "FolderAlreadyExists": "같은 이름의 폴더가 존재합니다.",
-    "FinetuneModel": "모델 파인튜닝"
+    "FinetuneModel": "모델 파인튜닝",
+    "Experience": "사용해보기",
+    "ModelCard": "모델 카드",
+    "ImportFromHuggingFace": "Hugging Face 에서 가져오기"
   },
   "table": {
     "SettingTable": "테이블 설정",
@@ -1756,5 +1761,12 @@
     "ReloadPage": "페이지 새로고침",
     "ResetErrorBoundary": "ErrorBoundary 초기화",
     "Title": "에러가 발생했습니다."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "모델 서비스",
+      "ModelList": "모델 리스트",
+      "MyServices": "실행중인 서비스"
+    }
   }
 }
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 568b05156e..2da9067cd2 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Хэрэглэгчийн имэйл таарахгүй байна",
       "MyEnvironments": "Миний орчин",
       "ResourcePolicy": "Нөөцийн бодлого",
-      "FullNameUpdated": "Бүтэн нэр амжилттай шинэчлэгдлээ."
+      "FullNameUpdated": "Бүтэн нэр амжилттай шинэчлэгдлээ.",
+      "Playground": "Тоглоомын талбай",
+      "ModelStore": "Загварын дэлгүүр"
     },
     "YouAreOffline": "Офлайн: Ямар ч сүлжээнд холбогдоогүй.",
     "YouAreOnline": "Та одоо онлайн байна",
@@ -1679,7 +1681,10 @@
     "CloneInfo": "Үүнийг таны хэрэглэгчийн төрлийн хавтас болгон хувилах болно.",
     "CloneToFolder": "Хавтас руу клон хийх",
     "FolderAlreadyExists": "Ийм нэртэй хавтас аль хэдийн байна.",
-    "FinetuneModel": "Finetune загвар"
+    "FinetuneModel": "Finetune загвар",
+    "Experience": "Туршлага",
+    "ModelCard": "Загварын карт",
+    "ImportFromHuggingFace": "Тэврэх нүүрээс импортлох"
   },
   "table": {
     "SettingTable": "Хүснэгтийн тохиргоо",
@@ -1754,5 +1759,12 @@
     "ReloadPage": "Хуудсыг дахин ачаална уу",
     "ResetErrorBoundary": "Алдааны хил хязгаарыг дахин тохируулах",
     "Title": "Алдаа гарсан байна."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Загвар үйлчилгээ",
+      "ModelList": "Загварын жагсаалт",
+      "MyServices": "Миний үйлчилгээ"
+    }
   }
 }
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 84c1e970ad..946041f4f7 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "E-mel Pengguna tidak sepadan",
       "MyEnvironments": "Persekitaran Saya",
       "ResourcePolicy": "Dasar Sumber",
-      "FullNameUpdated": "Nama penuh berjaya dikemas kini."
+      "FullNameUpdated": "Nama penuh berjaya dikemas kini.",
+      "Playground": "Taman permainan",
+      "ModelStore": "Kedai Model"
     },
     "YouAreOffline": "Luar talian: Tidak disambungkan ke mana-mana rangkaian.",
     "YouAreOnline": "Anda kini dalam talian",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Ia akan diklonkan sebagai folder jenis pengguna anda.",
     "CloneToFolder": "Klon ke folder",
     "FolderAlreadyExists": "Folder dengan nama ini sudah wujud.",
-    "FinetuneModel": "Model Finetune"
+    "FinetuneModel": "Model Finetune",
+    "Experience": "Pengalaman",
+    "ModelCard": "Kad Model",
+    "ImportFromHuggingFace": "Import Dari Muka Berpeluk"
   },
   "table": {
     "SelectColumnToDisplay": "Pilih untuk lajur untuk dipaparkan",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Muat semula halaman",
     "ResetErrorBoundary": "Tetapkan Semula ErrorBoundary",
     "Title": "Ralat telah berlaku."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Perkhidmatan Model",
+      "ModelList": "Senarai Model",
+      "MyServices": "Perkhidmatan Saya"
+    }
   }
 }
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index 378ce83bdf..ec8d45e33e 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Adres e-mail użytkownika nie jest zgodny",
       "MyEnvironments": "Moje Środowiska",
       "ResourcePolicy": "Polityka zasobów",
-      "FullNameUpdated": "Pełna nazwa została pomyślnie zaktualizowana."
+      "FullNameUpdated": "Pełna nazwa została pomyślnie zaktualizowana.",
+      "Playground": "Plac gier i zabaw",
+      "ModelStore": "Sklep modelarski"
     },
     "YouAreOffline": "Offline: Brak połączenia z siecią.",
     "YouAreOnline": "Jesteś teraz online",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Zostanie on sklonowany jako folder typu użytkownika.",
     "CloneToFolder": "Klonowanie do folderu",
     "FolderAlreadyExists": "Folder o tej nazwie już istnieje.",
-    "FinetuneModel": "Dostosuj model"
+    "FinetuneModel": "Dostosuj model",
+    "Experience": "Doświadczenie",
+    "ModelCard": "Karta Modelowa",
+    "ImportFromHuggingFace": "Importuj z przytulającej twarzy"
   },
   "table": {
     "SettingTable": "Nakrycie stołu",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Przeładuj stronę",
     "ResetErrorBoundary": "Reset ErrorBoundary",
     "Title": "Wystąpił błąd."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Usługi modelarskie",
+      "ModelList": "Lista modeli",
+      "MyServices": "Moje usługi"
+    }
   }
 }
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index bdad0ea09d..f6bc5c9a49 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "E-mail do usuário não corresponde",
       "MyEnvironments": "Meus ambientes",
       "ResourcePolicy": "Política de Recursos",
-      "FullNameUpdated": "O nome completo foi atualizado com sucesso."
+      "FullNameUpdated": "O nome completo foi atualizado com sucesso.",
+      "Playground": "Parque infantil",
+      "ModelStore": "Loja de modelos"
     },
     "YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
     "YouAreOnline": "Agora você está online",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Será clonada como a pasta do seu tipo de utilizador.",
     "CloneToFolder": "Clonar para uma pasta",
     "FolderAlreadyExists": "Já existe uma pasta com este nome.",
-    "FinetuneModel": "Modelo de ajuste fino"
+    "FinetuneModel": "Modelo de ajuste fino",
+    "Experience": "Experiência",
+    "ModelCard": "Cartão Modelo",
+    "ImportFromHuggingFace": "Importar do rosto abraçado"
   },
   "table": {
     "SettingTable": "Configuração de mesa",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Recarregar a página",
     "ResetErrorBoundary": "Repor ErrorBoundary",
     "Title": "Ocorreu um erro."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Serviços de modelo",
+      "ModelList": "Lista de modelos",
+      "MyServices": "Meus serviços"
+    }
   }
 }
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 4e0215b4c9..4e6a3f0771 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "E-mail do usuário não corresponde",
       "MyEnvironments": "Meus ambientes",
       "ResourcePolicy": "Política de Recursos",
-      "FullNameUpdated": "O nome completo foi atualizado com sucesso."
+      "FullNameUpdated": "O nome completo foi atualizado com sucesso.",
+      "Playground": "Parque infantil",
+      "ModelStore": "Loja de modelos"
     },
     "YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
     "YouAreOnline": "Agora você está online",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Ele será clonado como sua pasta de tipo de usuário.",
     "CloneToFolder": "Clonar para uma pasta",
     "FolderAlreadyExists": "Já existe uma pasta com este nome.",
-    "FinetuneModel": "Modelo de ajuste fino"
+    "FinetuneModel": "Modelo de ajuste fino",
+    "Experience": "Experiência",
+    "ModelCard": "Cartão Modelo",
+    "ImportFromHuggingFace": "Importar do rosto abraçado"
   },
   "table": {
     "SettingTable": "Configuração de mesa",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Recarregar a página",
     "ResetErrorBoundary": "Repor ErrorBoundary",
     "Title": "Ocorreu um erro."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Serviços de modelo",
+      "ModelList": "Lista de modelos",
+      "MyServices": "Meus serviços"
+    }
   }
 }
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 41aa3af424..71a9c8710f 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Электронная почта пользователя не совпадает",
       "MyEnvironments": "Моя среда",
       "ResourcePolicy": "Ресурсная политика",
-      "FullNameUpdated": "Полное имя успешно обновлено."
+      "FullNameUpdated": "Полное имя успешно обновлено.",
+      "Playground": "Детская площадка",
+      "ModelStore": "Модельный магазин"
     },
     "YouAreOffline": "Не в сети: Не подключен ни к одной сети.",
     "YouAreOnline": "Вы сейчас в сети",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Она будет клонирована как папка вашего типа пользователя.",
     "CloneToFolder": "Клонирование в папку",
     "FolderAlreadyExists": "Папка с таким именем уже существует.",
-    "FinetuneModel": "Точная настройка модели"
+    "FinetuneModel": "Точная настройка модели",
+    "Experience": "Опыт",
+    "ModelCard": "Модель карты",
+    "ImportFromHuggingFace": "Импорт из обнимающего лица"
   },
   "table": {
     "SettingTable": "Сервировка стола",
@@ -1755,5 +1760,12 @@
     "ReloadPage": "Перезагрузить страницу",
     "ResetErrorBoundary": "Сброс границы ошибки",
     "Title": "Произошла ошибка."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "Модельные услуги",
+      "ModelList": "Список моделей",
+      "MyServices": "Мои услуги"
+    }
   }
 }
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 8ea3a821fd..567c3fdc5b 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "อีเมลผู้ใช้ไม่ตรงกัน",
       "MyEnvironments": "สภาพแวดล้อมของฉัน",
       "ResourcePolicy": "นโยบายทรัพยากร",
-      "FullNameUpdated": "อัปเดตชื่อเต็มเรียบร้อยแล้ว"
+      "FullNameUpdated": "อัปเดตชื่อเต็มเรียบร้อยแล้ว",
+      "Playground": "สนามเด็กเล่น",
+      "ModelStore": "ร้านโมเดล"
     },
     "YouAreOffline": "ออฟไลน์: ไม่ได้เชื่อมต่อกับเครือข่ายใดๆ",
     "YouAreOnline": "คุณออนไลน์แล้ว",
@@ -1665,7 +1667,10 @@
     "CloneInfo": "จะถูกโคลนเป็นโฟลเดอร์ประเภทผู้ใช้ของคุณ",
     "CloneToFolder": "โคลนไปยังโฟลเดอร์",
     "FolderAlreadyExists": "มีโฟลเดอร์ชื่อนี้อยู่แล้ว",
-    "FinetuneModel": "ปรับแต่งโมเดล"
+    "FinetuneModel": "ปรับแต่งโมเดล",
+    "Experience": "ประสบการณ์",
+    "ModelCard": "การ์ดโมเดล",
+    "ImportFromHuggingFace": "นำเข้าจากกอดใบหน้า"
   },
   "sourceCodeViewer": {
     "Copy": "คัดลอก",
@@ -1735,5 +1740,12 @@
     "ReloadPage": "โหลดหน้าใหม่",
     "ResetErrorBoundary": "รีเซ็ต ErrorBoundary",
     "Title": "เกิดข้อผิดพลาด"
+  },
+  "modelserving": {
+    "menu": {
+      "ModelServices": "บริการโมเดล",
+      "ModelList": "รายการรุ่น",
+      "MyServices": "บริการของฉัน"
+    }
   }
 }
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index 35cd4a3c95..1bd70dcbd7 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "Kullanıcı E-postası eşleşmiyor",
       "MyEnvironments": "Ortamlarım",
       "ResourcePolicy": "Kaynak Politikası",
-      "FullNameUpdated": "Tam ad başarıyla güncellendi."
+      "FullNameUpdated": "Tam ad başarıyla güncellendi.",
+      "Playground": "Bahçesi",
+      "ModelStore": "Model Mağazası"
     },
     "YouAreOffline": "Çevrimdışı: Herhangi bir ağa bağlı değil.",
     "YouAreOnline": "artık çevrimiçisin",
@@ -1679,7 +1681,10 @@
     "CloneInfo": "Kullanıcı tipi klasörünüz olarak klonlanacaktır.",
     "CloneToFolder": "Bir klasöre klonlama",
     "FolderAlreadyExists": "Bu isimde bir klasör zaten mevcut.",
-    "FinetuneModel": "İnce Ayar Modeli"
+    "FinetuneModel": "İnce Ayar Modeli",
+    "Experience": "Deneyim",
+    "ModelCard": "Model Kartı",
+    "ImportFromHuggingFace": "Sarılma Yüzünden İçe Aktar"
   },
   "table": {
     "SettingTable": "Tablo Ayarı",
@@ -1754,5 +1759,10 @@
     "ReloadPage": "Sayfayı yeniden yükle",
     "ResetErrorBoundary": "ErrorBoundary'yi Sıfırla",
     "Title": "Bir hata oluştu."
+  },
+  "modelserving": {
+    "menu": {
+      "MyServices": "Hizmetlerim"
+    }
   }
 }
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index cc708c2b6c..3bc9eb95e9 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "E-mail của người dùng không khớp",
       "MyEnvironments": "Môi trường của tôi",
       "ResourcePolicy": "Chính sách tài nguyên",
-      "FullNameUpdated": "Tên đầy đủ được cập nhật thành công."
+      "FullNameUpdated": "Tên đầy đủ được cập nhật thành công.",
+      "Playground": "Sân chơi",
+      "ModelStore": "Cửa hàng mô hình"
     },
     "YouAreOffline": "Ngoại tuyến: Không kết nối với bất kỳ mạng nào.",
     "YouAreOnline": "Bạn hiện đang trực tuyến",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "Nó sẽ được sao chép thành thư mục loại người dùng của bạn.",
     "CloneToFolder": "Sao chép vào một thư mục",
     "FolderAlreadyExists": "Một thư mục có tên này đã tồn tại.",
-    "FinetuneModel": "Mô hình Finetune"
+    "FinetuneModel": "Mô hình Finetune",
+    "Experience": "Kinh nghiệm",
+    "ModelCard": "Thẻ mẫu",
+    "ImportFromHuggingFace": "Nhập Từ Ôm Mặt"
   },
   "table": {
     "SettingTable": "Cài đặt bảng",
@@ -1755,5 +1760,11 @@
     "ReloadPage": "Tải lại trang",
     "ResetErrorBoundary": "Đặt lại ranh giới lỗi",
     "Title": "Một lỗi đã xảy ra."
+  },
+  "modelserving": {
+    "menu": {
+      "ModelList": "Danh sách mẫu",
+      "MyServices": "Dịch vụ của tôi"
+    }
   }
 }
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index c4b1d8302a..639a4d3792 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "用户电子邮件不匹配",
       "MyEnvironments": "我的环境",
       "ResourcePolicy": "资源政策",
-      "FullNameUpdated": "全名更新成功。"
+      "FullNameUpdated": "全名更新成功。",
+      "Playground": "操场",
+      "ModelStore": "模型店"
     },
     "YouAreOffline": "脱机：未连接任何网络。",
     "YouAreOnline": "您现在在线",
@@ -1680,7 +1682,10 @@
     "CloneInfo": "它将被克隆为用户类型文件夹。",
     "CloneToFolder": "克隆到文件夹",
     "FolderAlreadyExists": "该名称的文件夹已经存在。",
-    "FinetuneModel": "微调模型"
+    "FinetuneModel": "微调模型",
+    "Experience": "经验",
+    "ModelCard": "型号卡",
+    "ImportFromHuggingFace": "从拥抱脸导入"
   },
   "table": {
     "SettingTable": "桌面设置",
@@ -1755,5 +1760,11 @@
     "ReloadPage": "重新载入页面",
     "ResetErrorBoundary": "重置错误边界",
     "Title": "发生错误。"
+  },
+  "modelserving": {
+    "menu": {
+      "ModelList": "型号列表",
+      "MyServices": "我的服务"
+    }
   }
 }
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index 24889335b7..7914fad53f 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -66,7 +66,9 @@
       "DisMatchUserEmail": "使用者電子郵件不符",
       "MyEnvironments": "我的環境",
       "ResourcePolicy": "資源政策",
-      "FullNameUpdated": "全名更新成功。"
+      "FullNameUpdated": "全名更新成功。",
+      "Playground": "操場",
+      "ModelStore": "模型店"
     },
     "YouAreOffline": "脱机：未连接任何网络。",
     "YouAreOnline": "您現在在線",
@@ -1679,7 +1681,10 @@
     "CloneInfo": "它将被克隆为用户类型文件夹。",
     "CloneToFolder": "克隆到文件夹",
     "FolderAlreadyExists": "该名称的文件夹已经存在。",
-    "FinetuneModel": "微調模型"
+    "FinetuneModel": "微調模型",
+    "Experience": "經驗",
+    "ModelCard": "型號卡",
+    "ImportFromHuggingFace": "從擁抱臉導入"
   },
   "table": {
     "SettingTable": "桌面設定",
@@ -1754,5 +1759,11 @@
     "ReloadPage": "重新载入页面",
     "ResetErrorBoundary": "重置错误边界",
     "Title": "发生错误。"
+  },
+  "modelserving": {
+    "menu": {
+      "ModelList": "型號列表",
+      "MyServices": "我的服務"
+    }
   }
 }
diff --git a/resources/images/model-player/Llama-2-13b-chat-hf.jpeg b/resources/images/model-player/Llama-2-13b-chat-hf.jpeg
new file mode 100644
index 0000000000..022f7dc51f
Binary files /dev/null and b/resources/images/model-player/Llama-2-13b-chat-hf.jpeg differ
diff --git a/resources/images/model-player/Llama-3.2-11B-Vision-instruct.jpeg b/resources/images/model-player/Llama-3.2-11B-Vision-instruct.jpeg
new file mode 100644
index 0000000000..ec3a50f062
Binary files /dev/null and b/resources/images/model-player/Llama-3.2-11B-Vision-instruct.jpeg differ
diff --git a/resources/images/model-player/Meta-Llama-3-8B-Instruct.jpeg b/resources/images/model-player/Meta-Llama-3-8B-Instruct.jpeg
new file mode 100644
index 0000000000..a92c1d78a7
Binary files /dev/null and b/resources/images/model-player/Meta-Llama-3-8B-Instruct.jpeg differ
diff --git a/resources/images/model-player/Mistral-7B-Instruct-v0.1.jpeg b/resources/images/model-player/Mistral-7B-Instruct-v0.1.jpeg
new file mode 100644
index 0000000000..e46e758467
Binary files /dev/null and b/resources/images/model-player/Mistral-7B-Instruct-v0.1.jpeg differ
diff --git a/resources/images/model-player/Mixtral-8x7B-Instruct-v0.1.jpeg b/resources/images/model-player/Mixtral-8x7B-Instruct-v0.1.jpeg
new file mode 100644
index 0000000000..34ac27aa93
Binary files /dev/null and b/resources/images/model-player/Mixtral-8x7B-Instruct-v0.1.jpeg differ
diff --git a/resources/images/model-player/Qwen2-7B-Instruct.jpeg b/resources/images/model-player/Qwen2-7B-Instruct.jpeg
new file mode 100644
index 0000000000..b1dcfe79bf
Binary files /dev/null and b/resources/images/model-player/Qwen2-7B-Instruct.jpeg differ
diff --git a/resources/images/model-player/Yi-1.5-9B-Chat.jpeg b/resources/images/model-player/Yi-1.5-9B-Chat.jpeg
new file mode 100644
index 0000000000..10f424840f
Binary files /dev/null and b/resources/images/model-player/Yi-1.5-9B-Chat.jpeg differ
diff --git a/resources/images/model-player/bert-large-cased.jpeg b/resources/images/model-player/bert-large-cased.jpeg
new file mode 100644
index 0000000000..02b347925c
Binary files /dev/null and b/resources/images/model-player/bert-large-cased.jpeg differ
diff --git a/resources/images/model-player/calm3-22b-chat.jpeg b/resources/images/model-player/calm3-22b-chat.jpeg
new file mode 100644
index 0000000000..39ed22d82d
Binary files /dev/null and b/resources/images/model-player/calm3-22b-chat.jpeg differ
diff --git a/resources/images/model-player/clip-vit-large-patch14.jpeg b/resources/images/model-player/clip-vit-large-patch14.jpeg
new file mode 100644
index 0000000000..949af54d17
Binary files /dev/null and b/resources/images/model-player/clip-vit-large-patch14.jpeg differ
diff --git a/resources/images/model-player/default.jpeg b/resources/images/model-player/default.jpeg
new file mode 100644
index 0000000000..5a09c708b5
Binary files /dev/null and b/resources/images/model-player/default.jpeg differ
diff --git a/resources/images/model-player/efficientnet-b0.jpeg b/resources/images/model-player/efficientnet-b0.jpeg
new file mode 100644
index 0000000000..d7f3594573
Binary files /dev/null and b/resources/images/model-player/efficientnet-b0.jpeg differ
diff --git a/resources/images/model-player/falcon-7b-instruct.jpeg b/resources/images/model-player/falcon-7b-instruct.jpeg
new file mode 100644
index 0000000000..033f64bb5a
Binary files /dev/null and b/resources/images/model-player/falcon-7b-instruct.jpeg differ
diff --git a/resources/images/model-player/flan-t5-xxl.jpeg b/resources/images/model-player/flan-t5-xxl.jpeg
new file mode 100644
index 0000000000..10ce65ae2e
Binary files /dev/null and b/resources/images/model-player/flan-t5-xxl.jpeg differ
diff --git a/resources/images/model-player/gemma-1.1-2b-it.jpeg b/resources/images/model-player/gemma-1.1-2b-it.jpeg
new file mode 100644
index 0000000000..30984bd9e2
Binary files /dev/null and b/resources/images/model-player/gemma-1.1-2b-it.jpeg differ
diff --git a/resources/images/model-player/gemma-2-27b-it.jpeg b/resources/images/model-player/gemma-2-27b-it.jpeg
new file mode 100644
index 0000000000..6ca94dac74
Binary files /dev/null and b/resources/images/model-player/gemma-2-27b-it.jpeg differ
diff --git a/resources/images/model-player/hf-logo.png b/resources/images/model-player/hf-logo.png
new file mode 100644
index 0000000000..49e2841dd5
Binary files /dev/null and b/resources/images/model-player/hf-logo.png differ
diff --git a/resources/images/model-player/hugging-face-background.jpg b/resources/images/model-player/hugging-face-background.jpg
new file mode 100644
index 0000000000..8636743fe1
Binary files /dev/null and b/resources/images/model-player/hugging-face-background.jpg differ
diff --git a/resources/images/model-player/llama-3.1-8b-it.jpeg b/resources/images/model-player/llama-3.1-8b-it.jpeg
new file mode 100644
index 0000000000..6beba14772
Binary files /dev/null and b/resources/images/model-player/llama-3.1-8b-it.jpeg differ
diff --git a/resources/images/model-player/sdxl-turbo.jpeg b/resources/images/model-player/sdxl-turbo.jpeg
new file mode 100644
index 0000000000..9452ba3a6a
Binary files /dev/null and b/resources/images/model-player/sdxl-turbo.jpeg differ
diff --git a/resources/images/model-player/stable-diffusion-2.jpeg b/resources/images/model-player/stable-diffusion-2.jpeg
new file mode 100644
index 0000000000..363b7a2c40
Binary files /dev/null and b/resources/images/model-player/stable-diffusion-2.jpeg differ
diff --git a/resources/images/model-player/stable-diffusion-3-medium.jpeg b/resources/images/model-player/stable-diffusion-3-medium.jpeg
new file mode 100644
index 0000000000..f824c41c2c
Binary files /dev/null and b/resources/images/model-player/stable-diffusion-3-medium.jpeg differ
diff --git a/resources/images/model-player/stable-diffusion-v1-5.jpeg b/resources/images/model-player/stable-diffusion-v1-5.jpeg
new file mode 100644
index 0000000000..8afb7ed5c7
Binary files /dev/null and b/resources/images/model-player/stable-diffusion-v1-5.jpeg differ
diff --git a/resources/images/model-player/talkativot-UI.jpeg b/resources/images/model-player/talkativot-UI.jpeg
new file mode 100644
index 0000000000..e5f6390063
Binary files /dev/null and b/resources/images/model-player/talkativot-UI.jpeg differ
diff --git a/resources/images/model-player/whisper-large-v3.jpeg b/resources/images/model-player/whisper-large-v3.jpeg
new file mode 100644
index 0000000000..0e30907e72
Binary files /dev/null and b/resources/images/model-player/whisper-large-v3.jpeg differ
diff --git a/src/backend-ai-app.ts b/src/backend-ai-app.ts
index a67f1c3b05..f0773799da 100644
--- a/src/backend-ai-app.ts
+++ b/src/backend-ai-app.ts
@@ -20,6 +20,7 @@ export const navigate =
         '/experiment',
         '/data',
         '/my-environment',
+        '/model-store',
         '/statistics',
         '/usersettings',
         '/agent',
@@ -48,7 +49,7 @@ export const navigate =
     }
     let page;
     if (['/', 'build', '/build', 'app', '/app'].includes(path)) {
-      page = 'summary';
+      page = 'playground';
     } else if (path[0] === '/') {
       page = path.slice(1);
     } else {
diff --git a/src/components/backend-ai-error-view.ts b/src/components/backend-ai-error-view.ts
index 5f4b76fd86..435a99c93d 100644
--- a/src/components/backend-ai-error-view.ts
+++ b/src/components/backend-ai-error-view.ts
@@ -70,8 +70,8 @@ export default class BackendAIErrorView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
-    globalThis.history.pushState({}, '', '/summary');
+    const page = url !== '' ? url : 'playground';
+    globalThis.history.pushState({}, '', '/playground');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
     document.dispatchEvent(
       new CustomEvent('react-navigate', {
@@ -97,8 +97,8 @@ export default class BackendAIErrorView extends BackendAIPage {
               unelevated
               fullwidth
               id="go-to-summary"
-              label="${_t('button.GoBackToSummaryPage')}"
-              @click="${() => this._moveTo('summary')}"
+              label="${_t('button.GoBackToModelServicesPage')}"
+              @click="${() => this._moveTo('playground')}"
             ></mwc-button>
           </div>
         </div>
diff --git a/src/components/backend-ai-permission-denied-view.ts b/src/components/backend-ai-permission-denied-view.ts
index 2f3d4d631b..89977103b7 100644
--- a/src/components/backend-ai-permission-denied-view.ts
+++ b/src/components/backend-ai-permission-denied-view.ts
@@ -113,8 +113,8 @@ export default class BackendAIPermissionDeniedView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
-    globalThis.history.pushState({}, '', '/summary');
+    const page = url !== '' ? url : 'playground';
+    globalThis.history.pushState({}, '', '/playground');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
   }
 
diff --git a/src/components/backend-ai-webui.ts b/src/components/backend-ai-webui.ts
index efa7ec45b9..4734f6100f 100644
--- a/src/components/backend-ai-webui.ts
+++ b/src/components/backend-ai-webui.ts
@@ -162,6 +162,8 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
     'settings',
     'maintenance',
     'serving',
+    'playground',
+    'model-store',
     'service',
     'service/start',
     'service/update',
diff --git a/version.json b/version.json
index ae38cc4889..830faf2fb5 100644
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{ "package": "24.09.0-alpha.1", "buildNumber": "6111", "buildDate": "240703.130731", "revision": "d8cea1cb" }
+{ "package": "25.1.0-alpha.1", "buildNumber": "6441", "buildDate": "250105.230113", "revision": "c18dd4be5" }