diff --git a/app/client/api.ts b/app/client/api.ts
index d05909a8..b04cf9b8 100644
--- a/app/client/api.ts
+++ b/app/client/api.ts
@@ -1,5 +1,6 @@
 import { ChatCompletionFinishReason, CompletionUsage } from "@mlc-ai/web-llm";
 import { CacheType, Model } from "../store";
+import { ModelFamily } from "../constant";
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
 
@@ -58,7 +59,7 @@ export interface ModelRecord {
   provider?: string;
   size?: string;
   quantization?: string;
-  family?: string;
+  family: ModelFamily;
   recommended_config?: {
     temperature?: number;
     context_window_size?: number;
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 4572c22d..830564b2 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -68,11 +68,9 @@ import {
   ListItem,
   Modal,
   Popover,
-  Selector,
   showConfirm,
   showPrompt,
   showToast,
-  Tooltip,
 } from "./ui-lib";
 import { useNavigate } from "react-router-dom";
 import {
@@ -83,7 +81,7 @@ import {
   UNFINISHED_INPUT,
 } from "../constant";
 import { Avatar, AvatarPicker } from "./emoji";
-import { ContextPrompts, TemplateAvatar, TemplateConfig } from "./template";
+import { ContextPrompts, TemplateAvatar } from "./template";
 import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
 import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
@@ -91,8 +89,8 @@ import { MultimodalContent } from "../client/api";
 import { Template, useTemplateStore } from "../store/template";
 import Image from "next/image";
 import { MLCLLMContext, WebLLMContext } from "../context";
-import EyeIcon from "../icons/eye.svg";
 import { ChatImage } from "../typing";
+import ModelSelect from "./model-select";
 
 export function ScrollDownToast(prop: { show: boolean; onclick: () => void }) {
   return (
@@ -544,23 +542,14 @@ export function ChatActions(props: {
         fullWidth
       />
       {showModelSelector && (
-        <Selector
-          defaultSelectedValue={currentModel}
-          items={models.map((m) => ({
-            title: m.name,
-            value: m.name,
-            family: m.family,
-            icon: isVisionModel(m.name) ? (
-              <Tooltip content={<div>Vision Model</div>} direction="bottom">
-                <EyeIcon />
-              </Tooltip>
-            ) : undefined,
-          }))}
-          onClose={() => setShowModelSelector(false)}
-          onSelection={(s) => {
-            if (s.length === 0) return;
-            config.selectModel(s[0] as Model);
-            showToast(s[0]);
+        <ModelSelect
+          onClose={() => {
+            setShowModelSelector(false);
+          }}
+          availableModels={models.map((m) => m.name)}
+          onSelectModel={(modelName) => {
+            config.selectModel(modelName as Model);
+            showToast(modelName);
           }}
         />
       )}
diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index 229c9c73..2ea8a068 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -3,6 +3,7 @@ import {
   ModelConfig,
   useAppConfig,
   ModelClient,
+  Model,
 } from "../store";
 
 import CancelIcon from "../icons/cancel.svg";
@@ -11,13 +12,15 @@ import ConnectIcon from "../icons/connection.svg";
 
 import Locale from "../locales";
 import { InputRange } from "./input-range";
-import { List, ListItem, Modal, Select } from "./ui-lib";
+import { List, ListItem, Modal, Select, showToast } from "./ui-lib";
 import React, { useState } from "react";
 import { IconButton } from "./button";
+import ModelSelect from "./model-select";
 
 export function ModelConfigList() {
   const config = useAppConfig();
   const models = config.models;
+  const [showModelSelector, setShowModelSelector] = useState(false);
   const [showApiConnectModel, setShowApiConnectModel] = useState(false);
 
   const [endpointInput, setEndpointInput] = useState<string>(
@@ -59,8 +62,13 @@ export function ModelConfigList() {
           <ListItem title={Locale.Settings.Model}>
             <Select
               value={config.modelConfig.model}
-              onChange={(e) => {
-                config.selectModel(e.target.value);
+              onClick={(e) => {
+                e.preventDefault();
+                setShowModelSelector(true);
+              }}
+              onMouseDown={(e) => {
+                // Prevent the dropdown list from opening
+                e.preventDefault();
               }}
             >
               {models.map((v, i) => (
@@ -237,7 +245,17 @@ export function ModelConfigList() {
           </ListItem>
         </>
       )}
-
+      {showModelSelector && (
+        <ModelSelect
+          onClose={() => {
+            setShowModelSelector(false);
+          }}
+          availableModels={models.map((m) => m.name)}
+          onSelectModel={(modelName) => {
+            config.selectModel(modelName as Model);
+          }}
+        />
+      )}
       {showApiConnectModel && (
         <div className="screen-model-container">
           <Modal
diff --git a/app/components/model-row.module.scss b/app/components/model-row.module.scss
new file mode 100644
index 00000000..4eb6c43c
--- /dev/null
+++ b/app/components/model-row.module.scss
@@ -0,0 +1,59 @@
+.row {
+    display: flex;
+    flex-direction: column;
+    border: var(--border-in-light);
+    border-radius: 10px;
+    overflow: hidden;
+    font-size: .8rem;
+
+    .summary-continer {
+        padding: 0.75rem;
+        transition: background-color 0.2s ease-in-out;
+        cursor: pointer;
+        height: 100%;
+
+        &:hover {
+            background-color: var(--second);
+        }
+
+        .summary {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .summary-model-info {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+        }
+    }
+
+    .expanded {
+        padding: .75rem;
+
+        .variant-option {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out;
+
+            &:hover {
+                background-color: var(--gray);
+            }
+
+            .variant-label {
+                font-size: 0.75rem;
+                color: var(--black);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex-grow: 1;
+                margin-right: 0.5rem;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/components/model-row.tsx b/app/components/model-row.tsx
new file mode 100644
index 00000000..8cecbad3
--- /dev/null
+++ b/app/components/model-row.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import style from "./model-row.module.scss";
+
+interface ModelRowProps {
+  baseModel: string;
+  variants: string[];
+  isExpanded: boolean;
+  hasSingleVariant: boolean;
+  determineModelIcon: (model: string) => JSX.Element;
+  extractModelDetails: (model: string) => {
+    displayName: string;
+    quantBadge: string | null;
+  };
+  onSelectModel: (model: string) => void;
+  onClose: () => void;
+  handleToggleExpand: (modelName: string) => void;
+}
+
+const ModelRow: React.FC<ModelRowProps> = ({
+  baseModel,
+  variants,
+  isExpanded,
+  hasSingleVariant,
+  determineModelIcon,
+  extractModelDetails,
+  onSelectModel,
+  onClose,
+  handleToggleExpand,
+}) => {
+  const { quantBadge } = hasSingleVariant
+    ? extractModelDetails(variants[0])
+    : { quantBadge: null };
+
+  return (
+    <div className={style["row"]} key={baseModel}>
+      <div
+        className={style["summary-continer"]}
+        onClick={() => {
+          if (hasSingleVariant) {
+            onSelectModel(variants[0]);
+            onClose();
+          } else {
+            handleToggleExpand(baseModel);
+          }
+        }}
+      >
+        <div className={style["summary"]}>
+          <div className={style["summary-model-info"]}>
+            {determineModelIcon(variants[0])}
+            <span>{baseModel}</span>
+            {hasSingleVariant && quantBadge && <span>{quantBadge}</span>}
+          </div>
+          {!hasSingleVariant && (isExpanded ? <ChevronUp /> : <ChevronDown />)}
+        </div>
+      </div>
+      {isExpanded && !hasSingleVariant && (
+        <div className={style["expanded"]}>
+          {variants.map((variant) => {
+            const { quantBadge } = extractModelDetails(variant);
+            return (
+              <div
+                key={variant}
+                onClick={() => {
+                  onSelectModel(variant);
+                  onClose();
+                }}
+                className={style["variant-option"]}
+              >
+                <span className={style["variant-label"]}>
+                  {quantBadge || variant}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModelRow;
diff --git a/app/components/model-select.module.scss b/app/components/model-select.module.scss
new file mode 100644
index 00000000..1a39520b
--- /dev/null
+++ b/app/components/model-select.module.scss
@@ -0,0 +1,71 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    gap: 20px;
+    padding-bottom: 20px;
+}
+
+.input-container {
+    position: relative;
+    width: 100%;
+}
+
+input.input[type=text] {
+    width: 100%;
+    max-width: 100%;
+    padding: 0.5rem 0.5rem 0.5rem 2rem;
+}
+
+.input-icon {
+    position: absolute;
+    left: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    width: 1rem;
+    height: 1rem;
+}
+
+.model-list {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-auto-rows: auto;
+    align-items: start;
+}
+
+.model-family-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .4rem;
+
+    .model-family-button {
+        .icon {
+            position: relative;
+            height: 1rem;
+            width: 1rem;
+
+            svg,
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                filter: none !important;
+            }
+        }
+    }
+}
+
+.model-icon {
+    height: 1rem;
+    width: 1rem;
+    position: relative;
+
+    svg,
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        filter: none !important;
+    }
+}
\ No newline at end of file
diff --git a/app/components/model-select.tsx b/app/components/model-select.tsx
new file mode 100644
index 00000000..26ed441a
--- /dev/null
+++ b/app/components/model-select.tsx
@@ -0,0 +1,262 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Cpu, Search } from "lucide-react";
+import ModelRow from "./model-row";
+import { modelDetailsList } from "../utils/model";
+
+import style from "./model-select.module.scss";
+import { Modal } from "./ui-lib";
+
+import Locale from "../locales";
+import { IconButton } from "./button";
+import { ModelFamily } from "../constant";
+import { Model, useAppConfig } from "../store";
+
+export interface ModelSearchProps {
+  onClose: () => void;
+  availableModels: string[];
+  onSelectModel: (model: string) => void;
+}
+
+const modelFamilies: {
+  [key: string]: {
+    name: string;
+    icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  };
+} = {};
+
+for (const modelDetail of modelDetailsList) {
+  modelFamilies[modelDetail.family] = {
+    name: modelDetail.name,
+    icon: modelDetail.icon,
+  };
+}
+
+interface SearchInputProps {
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  searchTerm,
+  setSearchTerm,
+  inputRef,
+}) => {
+  return (
+    <div className={style["input-container"]}>
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder={Locale.ModelSelect.SearchPlaceholder}
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className={style["input"]}
+      />
+      <Search className={style["input-icon"]} />
+    </div>
+  );
+};
+
+const ModelSelect: React.FC<ModelSearchProps> = ({
+  onClose,
+  availableModels,
+  onSelectModel,
+}) => {
+  const config = useAppConfig();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredModels, setFilteredModels] = useState<[string, string[]][]>(
+    [],
+  );
+  const [selectedFamilies, setSelectedFamilies] = useState<string[]>([]);
+  const [expandedModels, setExpandedModels] = useState<Set<string>>(new Set());
+
+  const determineModelIcon = (model: Model) => {
+    const modelFamily = identifyModelFamily(model);
+    const modelDetail = modelDetailsList.find(
+      (md) => modelFamily && modelFamily === md.family,
+    );
+    console.log(model, modelFamily, modelDetail);
+    return (
+      <div className={style["model-icon"]}>
+        {modelDetail?.icon ? <modelDetail.icon /> : <Cpu />}
+      </div>
+    );
+  };
+
+  const identifyModelFamily = (model: Model): ModelFamily | null => {
+    return config.models.find((m) => m.name === model)?.family || null;
+  };
+
+  const extractModelDetails = (model: string) => {
+    const parts = model.split("-");
+    const displayName: string[] = [];
+    const quantBadges: string[] = [];
+    let isBadge = false;
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (isBadge || part.startsWith("q") || part.startsWith("b")) {
+        isBadge = true;
+        if (part !== "MLC") {
+          quantBadges.push(part);
+        }
+      } else {
+        displayName.push(part);
+      }
+    }
+
+    return {
+      displayName: displayName.join(" "),
+      quantBadge: quantBadges.length > 0 ? quantBadges.join("-") : null,
+    };
+  };
+
+  const sortAndGroupModels = useCallback(
+    (models: string[]): [string, string[]][] => {
+      const groupedModels: { [key: string]: string[] } = {};
+
+      for (const model of models) {
+        const { displayName } = extractModelDetails(model);
+        const family = identifyModelFamily(model);
+
+        if (family) {
+          if (!groupedModels[displayName]) {
+            groupedModels[displayName] = [];
+          }
+          groupedModels[displayName].push(model);
+        }
+      }
+
+      for (const key in groupedModels) {
+        groupedModels[key].sort((a, b) => a.localeCompare(b));
+      }
+
+      return Object.entries(groupedModels).sort(
+        ([, aVariants], [, bVariants]) => {
+          const familyA = identifyModelFamily(aVariants[0]) || "";
+          const familyB = identifyModelFamily(bVariants[0]) || "";
+          return familyA.localeCompare(familyB);
+        },
+      );
+    },
+    [],
+  );
+
+  const handleToggleExpand = (modelName: string) => {
+    setExpandedModels((prev) => {
+      const updatedSet = new Set<string>(prev);
+      if (updatedSet.has(modelName)) {
+        updatedSet.delete(modelName);
+      } else {
+        updatedSet.add(modelName);
+      }
+      return updatedSet;
+    });
+  };
+
+  useEffect(() => {
+    const sortedModels = sortAndGroupModels(availableModels);
+
+    let filtered = sortedModels;
+
+    if (searchTerm) {
+      const lowerSearchTerm = searchTerm.toLowerCase();
+      filtered = sortedModels.filter(
+        ([baseModel, variants]) =>
+          baseModel.toLowerCase().includes(lowerSearchTerm) ||
+          variants.some((v) => v.toLowerCase().includes(lowerSearchTerm)),
+      );
+    }
+
+    if (selectedFamilies.length > 0) {
+      filtered = filtered.filter(([, variants]) => {
+        const family = identifyModelFamily(variants[0]);
+        return family && selectedFamilies.includes(family);
+      });
+    }
+
+    setFilteredModels(filtered);
+  }, [searchTerm, availableModels, selectedFamilies, sortAndGroupModels]);
+
+  const handleToggleFamilyFilter = (family: string) => {
+    setSelectedFamilies((prev) =>
+      prev.includes(family)
+        ? prev.filter((f) => f !== family)
+        : [...prev, family],
+    );
+  };
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 0);
+  }, []);
+
+  const countModelsPerFamily = (
+    models: string[],
+  ): { [key: string]: number } => {
+    const counts: { [key: string]: number } = {};
+    for (const model of models) {
+      const family = identifyModelFamily(model);
+      if (family) {
+        counts[family] = (counts[family] || 0) + 1;
+      }
+    }
+    return counts;
+  };
+
+  const modelCounts = countModelsPerFamily(availableModels);
+  const sortedModelFamilies = Object.entries(modelFamilies).sort(
+    ([a], [b]) => (modelCounts[b] || 0) - (modelCounts[a] || 0),
+  );
+
+  return (
+    <div className="screen-model-container">
+      <Modal title={Locale.ModelSelect.Title} onClose={onClose}>
+        <div className={style["header"]}>
+          <SearchInput
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            inputRef={searchInputRef}
+          />
+          <div className={style["model-family-filter"]}>
+            {sortedModelFamilies.map(([key, { name, icon: Icon }]) => (
+              <IconButton
+                key={key}
+                onClick={() => handleToggleFamilyFilter(key)}
+                bordered
+                text={name}
+                icon={
+                  <div className={style["icon"]}>
+                    {Icon ? <Icon /> : <Cpu />}
+                  </div>
+                }
+                className={style["model-family-button"]}
+              />
+            ))}
+          </div>
+        </div>
+        <div className={style["model-list"]}>
+          {filteredModels.map((model) => (
+            <ModelRow
+              key={model[0]}
+              baseModel={model[0]}
+              variants={model[1]}
+              isExpanded={expandedModels.has(model[0])}
+              hasSingleVariant={model[1].length === 1}
+              determineModelIcon={determineModelIcon}
+              extractModelDetails={extractModelDetails}
+              onSelectModel={onSelectModel}
+              onClose={onClose}
+              handleToggleExpand={handleToggleExpand}
+            />
+          ))}
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default ModelSelect;
diff --git a/app/constant.ts b/app/constant.ts
index 1ec075a5..2075b5b8 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -66,13 +66,25 @@ Latex inline format: \\(x^2\\)
 Latex block format: $$e=mc^2$$
 `;
 
+export enum ModelFamily {
+  LLAMA = "llama",
+  PHI = "phi",
+  MISTRAL = "mistral",
+  GEMMA = "gemma",
+  QWEN = "qwen",
+  SMOL_LM = "smollm",
+  WIZARD_MATH = "wizardmath",
+  STABLE_LM = "stablelm",
+  REDPAJAMA = "redpajama",
+}
+
 const DEFAULT_MODEL_BASES: ModelRecord[] = [
   // Phi-3.5 Vision
   {
     name: "Phi-3.5-vision-instruct-q4f32_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Vision",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -84,7 +96,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3.5-vision-instruct-q4f16_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Vision",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -97,7 +109,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-1B-Instruct-q4f32_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -109,7 +121,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-1B-Instruct-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -121,7 +133,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-1B-Instruct-q0f32-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -133,7 +145,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-1B-Instruct-q0f16-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -145,7 +157,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-3B-Instruct-q4f32_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -157,7 +169,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.2-3B-Instruct-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -170,7 +182,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.1-8B-Instruct-q4f32_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.1",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -182,7 +194,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.1-8B-Instruct-q4f16_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.1",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -194,7 +206,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.1-8B-Instruct-q4f32_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.1",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -206,7 +218,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.1-8B-Instruct-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.1",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -218,7 +230,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Hermes-2-Pro-Llama-3-8B-q4f16_1-MLC",
     display_name: "Hermes",
     provider: "NousResearch",
-    family: "Hermes 2 Pro",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -230,7 +242,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Hermes-2-Pro-Llama-3-8B-q4f32_1-MLC",
     display_name: "Hermes",
     provider: "NousResearch",
-    family: "Hermes 2 Pro",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -242,7 +254,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Hermes-3-Llama-3.1-8B-q4f32_1-MLC",
     display_name: "Hermes",
     provider: "NousResearch",
-    family: "Hermes 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -254,7 +266,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Hermes-3-Llama-3.1-8B-q4f16_1-MLC",
     display_name: "Hermes",
     provider: "NousResearch",
-    family: "Hermes 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -266,7 +278,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Hermes-2-Pro-Mistral-7B-q4f16_1-MLC",
     display_name: "Hermes",
     provider: "NousResearch",
-    family: "Hermes 2 Pro",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -278,7 +290,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3.5-mini-instruct-q4f16_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Mini",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -290,7 +302,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3.5-mini-instruct-q4f32_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Mini",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -302,7 +314,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3.5-mini-instruct-q4f16_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Mini",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -314,7 +326,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3.5-mini-instruct-q4f32_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 3.5 Mini",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -326,7 +338,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Mistral-7B-Instruct-v0.3-q4f16_1-MLC",
     display_name: "Mistral",
     provider: "Mistral AI",
-    family: "Mistral",
+    family: ModelFamily.MISTRAL,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -338,7 +350,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Mistral-7B-Instruct-v0.3-q4f32_1-MLC",
     display_name: "Mistral",
     provider: "Mistral AI",
-    family: "Mistral",
+    family: ModelFamily.MISTRAL,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -350,7 +362,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Mistral-7B-Instruct-v0.2-q4f16_1-MLC",
     display_name: "Mistral",
     provider: "Mistral AI",
-    family: "Mistral",
+    family: ModelFamily.MISTRAL,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -360,7 +372,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "OpenHermes-2.5-Mistral-7B-q4f16_1-MLC",
     display_name: "OpenHermes",
     provider: "NousResearch",
-    family: "Hermes",
+    family: ModelFamily.MISTRAL,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -370,7 +382,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "NeuralHermes-2.5-Mistral-7B-q4f16_1-MLC",
     display_name: "NeuralHermes",
     provider: "Maxime Labonne",
-    family: "Hermes",
+    family: ModelFamily.MISTRAL,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -380,7 +392,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "WizardMath-7B-V1.1-q4f16_1-MLC",
     display_name: "WizardMath",
     provider: "WizardLM",
-    family: "WizardMath",
+    family: ModelFamily.WIZARD_MATH,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -391,7 +403,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-1.7B-Instruct-q4f16_1-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -403,7 +415,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-1.7B-Instruct-q4f32_1-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -415,7 +427,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-360M-Instruct-q0f16-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -427,7 +439,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-360M-Instruct-q0f32-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -439,7 +451,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-360M-Instruct-q4f16_1-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -451,7 +463,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-360M-Instruct-q4f32_1-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -463,7 +475,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-135M-Instruct-q0f16-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -475,7 +487,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "SmolLM2-135M-Instruct-q0f32-MLC",
     display_name: "SmolLM",
     provider: "HuggingFaceTB",
-    family: "SmolLM2",
+    family: ModelFamily.SMOL_LM,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -487,7 +499,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-0.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -499,7 +511,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-0.5B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -511,7 +523,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-0.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -523,7 +535,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-0.5B-Instruct-q0f16-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -535,7 +547,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-0.5B-Instruct-q0f32-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -547,7 +559,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-1.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -559,7 +571,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-1.5B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -571,7 +583,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-3B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -583,7 +595,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-3B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -595,7 +607,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-7B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -607,7 +619,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-7B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -620,7 +632,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-Coder-1.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5 Coder",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -632,7 +644,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-Coder-1.5B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5 Coder",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -644,7 +656,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-Coder-7B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5 Coder",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -656,7 +668,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2.5-Coder-7B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2.5 Coder",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -669,7 +681,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-Math-1.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2 Math",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -681,7 +693,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-Math-1.5B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2 Math",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 1.0,
       presence_penalty: 0,
@@ -693,7 +705,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-Math-7B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2 Math",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -705,7 +717,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-Math-7B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2 Math",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -717,7 +729,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-it-q4f16_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -729,7 +741,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-it-q4f32_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -741,7 +753,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-it-q4f16_1-MLC-1k",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -753,7 +765,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-it-q4f32_1-MLC-1k",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -765,7 +777,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-9b-it-q4f16_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -777,7 +789,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-9b-it-q4f32_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -789,7 +801,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-jpn-it-q4f16_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -801,7 +813,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "gemma-2-2b-jpn-it-q4f32_1-MLC",
     display_name: "Gemma",
     provider: "Google",
-    family: "Gemma",
+    family: ModelFamily.GEMMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -813,7 +825,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "stablelm-2-zephyr-1_6b-q4f16_1-MLC",
     display_name: "StableLM",
     provider: "Hugging Face",
-    family: "StableLM 2",
+    family: ModelFamily.STABLE_LM,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -825,7 +837,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "stablelm-2-zephyr-1_6b-q4f32_1-MLC",
     display_name: "StableLM",
     provider: "Hugging Face",
-    family: "StableLM 2",
+    family: ModelFamily.STABLE_LM,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -837,7 +849,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "stablelm-2-zephyr-1_6b-q4f16_1-MLC-1k",
     display_name: "StableLM",
     provider: "Hugging Face",
-    family: "StableLM 2",
+    family: ModelFamily.STABLE_LM,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -849,7 +861,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "stablelm-2-zephyr-1_6b-q4f32_1-MLC-1k",
     display_name: "StableLM",
     provider: "Hugging Face",
-    family: "StableLM 2",
+    family: ModelFamily.STABLE_LM,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -861,7 +873,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "RedPajama-INCITE-Chat-3B-v1-q4f16_1-MLC",
     display_name: "RedPajama",
     provider: "Together",
-    family: "RedPajama",
+    family: ModelFamily.REDPAJAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -871,7 +883,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "RedPajama-INCITE-Chat-3B-v1-q4f32_1-MLC",
     display_name: "RedPajama",
     provider: "Together",
-    family: "RedPajama",
+    family: ModelFamily.REDPAJAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -881,7 +893,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "RedPajama-INCITE-Chat-3B-v1-q4f16_1-MLC-1k",
     display_name: "RedPajama",
     provider: "Together",
-    family: "RedPajama",
+    family: ModelFamily.REDPAJAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -891,7 +903,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "RedPajama-INCITE-Chat-3B-v1-q4f32_1-MLC-1k",
     display_name: "RedPajama",
     provider: "Together",
-    family: "RedPajama",
+    family: ModelFamily.REDPAJAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -901,7 +913,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v1.0-q4f16_1-MLC",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -913,7 +925,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v1.0-q4f32_1-MLC",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -925,7 +937,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v1.0-q4f16_1-MLC-1k",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -937,7 +949,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v1.0-q4f32_1-MLC-1k",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 1,
       presence_penalty: 0,
@@ -949,7 +961,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3.1-70B-Instruct-q3f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3.1",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -961,7 +973,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-0.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -973,7 +985,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-0.5B-Instruct-q0f16-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -985,7 +997,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-0.5B-Instruct-q0f32-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -997,7 +1009,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-1.5B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1009,7 +1021,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-1.5B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1021,7 +1033,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-7B-Instruct-q4f16_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1033,7 +1045,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Qwen2-7B-Instruct-q4f32_1-MLC",
     display_name: "Qwen",
     provider: "Alibaba",
-    family: "Qwen 2",
+    family: ModelFamily.QWEN,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1045,7 +1057,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3-8B-Instruct-q4f32_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -1057,7 +1069,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3-8B-Instruct-q4f16_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -1069,7 +1081,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3-8B-Instruct-q4f32_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -1081,7 +1093,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3-8B-Instruct-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       presence_penalty: 0,
@@ -1093,7 +1105,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-3-70B-Instruct-q3f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 3",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1106,7 +1118,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3-mini-4k-instruct-q4f16_1-MLC",
     display_name: "Phi 3",
     provider: "Microsoft",
-    family: "Phi 3 Mini Instruct",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1118,7 +1130,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3-mini-4k-instruct-q4f32_1-MLC",
     display_name: "Phi 3",
     provider: "Microsoft",
-    family: "Phi 3 Mini Instruct",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1130,7 +1142,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3-mini-4k-instruct-q4f16_1-MLC-1k",
     display_name: "Phi 3",
     provider: "Microsoft",
-    family: "Phi 3 Mini Instruct",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1142,7 +1154,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Phi-3-mini-4k-instruct-q4f32_1-MLC-1k",
     display_name: "Phi 3",
     provider: "Microsoft",
-    family: "Phi 3 Mini Instruct",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       presence_penalty: 0,
@@ -1154,7 +1166,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-2-7b-chat-hf-q4f32_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       top_p: 0.9,
@@ -1164,7 +1176,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-2-7b-chat-hf-q4f16_1-MLC-1k",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       top_p: 0.9,
@@ -1174,7 +1186,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-2-7b-chat-hf-q4f32_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       top_p: 0.9,
@@ -1184,7 +1196,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-2-7b-chat-hf-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       top_p: 0.9,
@@ -1194,7 +1206,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "Llama-2-13b-chat-hf-q4f16_1-MLC",
     display_name: "Llama",
     provider: "Meta",
-    family: "Llama 2",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.6,
       top_p: 0.9,
@@ -1204,7 +1216,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-2-q4f16_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 2",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1214,7 +1226,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-2-q4f32_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 2",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1224,7 +1236,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-2-q4f16_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 2",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1234,7 +1246,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-2-q4f32_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 2",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1244,7 +1256,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-1_5-q4f16_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 1.5",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1254,7 +1266,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-1_5-q4f32_1-MLC",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 1.5",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1264,7 +1276,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-1_5-q4f16_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 1.5",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1274,7 +1286,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "phi-1_5-q4f32_1-MLC-1k",
     display_name: "Phi",
     provider: "Microsoft",
-    family: "Phi 1.5",
+    family: ModelFamily.PHI,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1284,7 +1296,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v0.4-q4f16_1-MLC",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1294,7 +1306,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v0.4-q4f32_1-MLC",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1304,7 +1316,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v0.4-q4f16_1-MLC-1k",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
@@ -1314,7 +1326,7 @@ const DEFAULT_MODEL_BASES: ModelRecord[] = [
     name: "TinyLlama-1.1B-Chat-v0.4-q4f32_1-MLC-1k",
     display_name: "TinyLlama",
     provider: "Zhang Peiyuan",
-    family: "TinyLlama",
+    family: ModelFamily.LLAMA,
     recommended_config: {
       temperature: 0.7,
       top_p: 0.95,
diff --git a/app/icons/google.svg b/app/icons/google.svg
new file mode 100644
index 00000000..d8dc080f
--- /dev/null
+++ b/app/icons/google.svg
@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 48 48"
+>
+  <path
+    fill="#fbc02d"
+    d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+  />
+  <path
+    fill="#e53935"
+    d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+  />
+  <path
+    fill="#4caf50"
+    d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+  />
+  <path
+    fill="#1565c0"
+    d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+  />
+</svg>
diff --git a/app/icons/meta.svg b/app/icons/meta.svg
new file mode 100644
index 00000000..0124b8fa
--- /dev/null
+++ b/app/icons/meta.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    fill="#0081fb"
+    d="M47,29.36l-2.193,1.663L42.62,29.5c0-0.16,0-0.33-0.01-0.5c0-0.16,0-0.33-0.01-0.5	c-0.14-3.94-1.14-8.16-3.14-11.25c-1.54-2.37-3.51-3.5-5.71-3.5c-2.31,0-4.19,1.38-6.27,4.38c-0.06,0.09-0.13,0.18-0.19,0.28	c-0.04,0.05-0.07,0.1-0.11,0.16c-0.1,0.15-0.2,0.3-0.3,0.46c-0.9,1.4-1.84,3.03-2.86,4.83c-0.09,0.17-0.19,0.34-0.28,0.51	c-0.03,0.04-0.06,0.09-0.08,0.13l-0.21,0.37l-1.24,2.19c-2.91,5.15-3.65,6.33-5.1,8.26C14.56,38.71,12.38,40,9.51,40	c-3.4,0-5.56-1.47-6.89-3.69C1.53,34.51,1,32.14,1,29.44l4.97,0.17c0,1.76,0.38,3.1,0.89,3.92C7.52,34.59,8.49,35,9.5,35	c1.29,0,2.49-0.27,4.77-3.43c1.83-2.53,3.99-6.07,5.44-8.3l1.37-2.09l0.29-0.46l0.3-0.45l0.5-0.77c0.76-1.16,1.58-2.39,2.46-3.57	c0.1-0.14,0.2-0.28,0.31-0.42c0.1-0.14,0.21-0.28,0.31-0.41c0.9-1.15,1.85-2.22,2.87-3.1c1.85-1.61,3.84-2.5,5.85-2.5	c3.37,0,6.58,1.95,9.04,5.61c2.51,3.74,3.82,8.4,3.97,13.25c0.01,0.16,0.01,0.33,0.01,0.5C47,29.03,47,29.19,47,29.36z"
+  />
+  <linearGradient
+    id="wSMw7pqi7WIWHewz2_TZXa"
+    x1="42.304"
+    x2="13.533"
+    y1="24.75"
+    y2="24.75"
+    gradientUnits="userSpaceOnUse"
+  >
+    <stop offset="0" stop-color="#0081fb" />
+    <stop offset=".995" stop-color="#0064e1" />
+  </linearGradient>
+  <path
+    fill="url(#wSMw7pqi7WIWHewz2_TZXa)"
+    d="M4.918,15.456	C7.195,11.951,10.483,9.5,14.253,9.5c2.184,0,4.354,0.645,6.621,2.493c2.479,2.02,5.122,5.346,8.419,10.828l1.182,1.967	c2.854,4.746,4.477,7.187,5.428,8.339C37.125,34.606,37.888,35,39,35c2.82,0,3.617-2.54,3.617-5.501L47,29.362	c0,3.095-0.611,5.369-1.651,7.165C44.345,38.264,42.387,40,39.093,40c-2.048,0-3.862-0.444-5.868-2.333	c-1.542-1.45-3.345-4.026-4.732-6.341l-4.126-6.879c-2.07-3.452-3.969-6.027-5.068-7.192c-1.182-1.254-2.642-2.754-5.067-2.754	c-1.963,0-3.689,1.362-5.084,3.465L4.918,15.456z"
+  />
+  <linearGradient
+    id="wSMw7pqi7WIWHewz2_TZXb"
+    x1="7.635"
+    x2="7.635"
+    y1="32.87"
+    y2="13.012"
+    gradientUnits="userSpaceOnUse"
+  >
+    <stop offset="0" stop-color="#0081fb" />
+    <stop offset=".995" stop-color="#0064e1" />
+  </linearGradient>
+  <path
+    fill="url(#wSMw7pqi7WIWHewz2_TZXb)"
+    d="M14.25,14.5	c-1.959,0-3.683,1.362-5.075,3.465C7.206,20.937,6,25.363,6,29.614c0,1.753-0.003,3.072,0.5,3.886l-3.84,2.813	C1.574,34.507,1,32.2,1,29.5c0-4.91,1.355-10.091,3.918-14.044C7.192,11.951,10.507,9.5,14.27,9.5L14.25,14.5z"
+  />
+  <path
+    d="M21.67,20.27l-0.3,0.45l-0.29,0.46c0.71,1.03,1.52,2.27,2.37,3.69l0.21-0.37c0.02-0.04,0.05-0.09,0.08-0.13 c0.09-0.17,0.19-0.34,0.28-0.51C23.19,22.5,22.39,21.29,21.67,20.27z M24.94,15.51c-0.11,0.14-0.21,0.28-0.31,0.42 c0.73,0.91,1.47,1.94,2.25,3.1c0.1-0.16,0.2-0.31,0.3-0.46c0.04-0.06,0.07-0.11,0.11-0.16c0.06-0.1,0.13-0.19,0.19-0.28 c-0.76-1.12-1.5-2.13-2.23-3.03C25.15,15.23,25.04,15.37,24.94,15.51z"
+    opacity=".05"
+  />
+  <path
+    d="M21.67,20.27l-0.3,0.45c0.71,1.02,1.51,2.24,2.37,3.65c0.09-0.17,0.19-0.34,0.28-0.51C23.19,22.5,22.39,21.29,21.67,20.27 z M24.63,15.93c0.73,0.91,1.47,1.94,2.25,3.1c0.1-0.16,0.2-0.31,0.3-0.46c-0.77-1.14-1.52-2.16-2.24-3.06 C24.83,15.65,24.73,15.79,24.63,15.93z"
+    opacity=".07"
+  />
+</svg>
diff --git a/app/icons/microsoft.svg b/app/icons/microsoft.svg
new file mode 100644
index 00000000..5c841b49
--- /dev/null
+++ b/app/icons/microsoft.svg
@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 1024 1024"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M44.522 44.5217H489.739V489.739H44.522V44.5217Z" fill="#F35325" />
+  <path d="M534.261 44.5217H979.478V489.739H534.261V44.5217Z" fill="#81BC06" />
+  <path d="M44.522 534.261H489.739V979.478H44.522V534.261Z" fill="#05A6F0" />
+  <path d="M534.261 534.261H979.478V979.478H534.261V534.261Z" fill="#FFBA08" />
+</svg>
diff --git a/app/icons/mistral.svg b/app/icons/mistral.svg
new file mode 100644
index 00000000..82e252aa
--- /dev/null
+++ b/app/icons/mistral.svg
@@ -0,0 +1,37 @@
+<svg
+  viewBox="0 0 256 233"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M186.182 0h46.545v46.545h-46.545z" />
+  <path fill="#f7d046" d="M209.455 0H256v46.545h-46.545z" />
+  <path d="M0 0h46.545v46.545H0zm0 46.545h46.545V93.09H0zm0 46.546h46.545v46.545H0zm0 46.545h46.545v46.545H0zm0 46.546h46.545v46.545H0z" />
+  <path fill="#f7d046" d="M23.273 0h46.545v46.545H23.273z" />
+  <path
+    fill="#f2a73b"
+    d="M209.455 46.545H256V93.09h-46.545zm-186.182 0h46.545V93.09H23.273z"
+  />
+  <path d="M139.636 46.545h46.545V93.09h-46.545z" />
+  <path
+    fill="#f2a73b"
+    d="M162.909 46.545h46.545V93.09h-46.545zm-93.091 0h46.545V93.09H69.818z"
+  />
+  <path
+    fill="#ee792f"
+    d="M116.364 93.091h46.545v46.545h-46.545zm46.545 0h46.545v46.545h-46.545zm-93.091 0h46.545v46.545H69.818z"
+  />
+  <path d="M93.091 139.636h46.545v46.545H93.091z" />
+  <path fill="#eb5829" d="M116.364 139.636h46.545v46.545h-46.545z" />
+  <path
+    fill="#ee792f"
+    d="M209.455 93.091H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"
+  />
+  <path d="M186.182 139.636h46.545v46.545h-46.545z" />
+  <path fill="#eb5829" d="M209.455 139.636H256v46.545h-46.545z" />
+  <path d="M186.182 186.182h46.545v46.545h-46.545z" />
+  <path fill="#eb5829" d="M23.273 139.636h46.545v46.545H23.273z" />
+  <path
+    fill="#ea3326"
+    d="M209.455 186.182H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"
+  />
+</svg>
\ No newline at end of file
diff --git a/app/icons/snowflake.svg b/app/icons/snowflake.svg
new file mode 100644
index 00000000..de2ee949
--- /dev/null
+++ b/app/icons/snowflake.svg
@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1565 1559"
+>
+  <title>Snowflake Logo</title>
+  <defs>
+    <clipPath id="cp1">
+      <path d="M0.24 0L6893.26 0L6893.26 1558.22L0.24 1558.22L0.24 0Z" />
+    </clipPath>
+  </defs>
+  <g clipPath="url(#cp1)">
+    <path
+      fill="#29b5e8"
+      fillRule="evenodd"
+      d="M522.63 807.57C515.63 830.07 500.44 850.06 478.07 862.84L146.72 1052.69C99.92 1079.39 40.3 1063.56 13.44 1017.38C-13.59 970.94 2.32 911.86 49.08 885.08L234.26 779.17L49.08 672.98C2.32 646.24 -13.67 587.15 13.44 540.88C40.3 494.58 99.92 478.7 146.72 505.4L478.07 695.13C501.37 708.46 516.94 729.6 523.48 753.24C525.68 760.84 526.66 768.44 527.04 776.08C527.3 786.6 525.94 797.26 522.63 807.57ZM612.54 985.38C663 988.98 702.84 1030.84 702.84 1081.77L702.84 1461.36C702.84 1514.89 659.05 1558.22 605.29 1558.22C551.27 1558.22 507.65 1514.89 507.65 1461.36L507.65 1249.05L321.84 1355.29C275.25 1382.2 215.67 1366.28 188.6 1320.06C161.7 1273.75 177.61 1214.37 224.29 1187.63L555.9 998.02C573.72 987.71 593.49 983.76 612.54 985.38ZM952.17 572.85C901.59 569.15 861.83 527.22 861.83 476.33L861.83 96.69C861.83 43.34 905.37 0 959.43 0C1013.44 0 1057.07 43.34 1057.07 96.69L1057.07 309.13L1242.75 202.72C1289.43 175.98 1349.04 191.85 1375.95 238.08C1402.8 284.56 1386.98 343.68 1340.26 370.42L1008.69 560.2C990.87 570.38 971.14 574.37 952.17 572.85ZM224.29 370.42C177.61 343.68 161.7 284.56 188.6 238.08C215.67 191.85 275.25 175.98 321.84 202.72L507.65 309.13L507.65 96.69C507.65 43.34 551.27 0 605.29 0C659.05 0 702.84 43.34 702.84 96.69L702.84 476.33C702.84 527.22 663 569.15 612.54 572.85C593.49 574.37 573.72 570.38 555.9 560.2L224.29 370.42ZM819.83 952.74C815.88 956.77 808.28 960.04 802.51 960.04L761.99 960.04C756.43 960.04 748.71 956.77 744.68 952.74L606.94 816.27C603 812.41 599.81 804.68 599.81 799.25L599.81 758.97C599.81 753.41 603 745.69 606.94 741.78L744.68 605.27C748.71 601.29 756.43 598.1 761.99 598.1L802.51 598.1C808.16 598.1 815.88 601.29 819.83 605.27L957.65 741.78C961.59 745.69 964.77 753.41 964.77 758.97L964.77 799.25C964.77 804.68 961.59 812.41 957.65 816.27L819.83 952.74ZM847.49 778.37C847.49 772.85 844.14 765.17 840.19 761.09L800.26 721.7C796.36 717.8 788.6 714.57 783.04 714.57L781.47 714.57C775.91 714.57 768.19 717.8 764.32 721.7L724.4 761.09C720.41 765.17 717.35 772.85 717.35 778.37L717.35 779.94C717.35 785.37 720.41 792.97 724.4 796.96L764.32 836.43C768.23 840.34 775.91 843.56 781.47 843.56L783.04 843.56C788.6 843.56 796.36 840.34 800.26 836.43L840.19 796.96C844.14 792.97 847.49 785.37 847.49 779.94L847.49 778.37ZM1340.26 1187.63C1386.98 1214.37 1402.8 1273.75 1375.95 1320.06C1349.04 1366.28 1289.38 1382.2 1242.75 1355.29L1057.07 1249.05L1057.07 1461.36C1057.07 1514.89 1013.44 1558.22 959.43 1558.22C905.37 1558.22 861.83 1514.89 861.83 1461.36L861.83 1081.77C861.83 1030.84 901.59 988.98 952.17 985.38C971.14 983.76 990.87 987.71 1008.69 998.02L1340.26 1187.63ZM1330.37 779.17L1515.55 885.08C1562.31 911.86 1578.31 970.94 1551.28 1017.38C1524.29 1063.56 1464.59 1079.39 1418 1052.69L1086.39 862.84C1064.24 850.06 1048.92 830.07 1042.09 807.57C1038.86 797.26 1037.33 786.6 1037.72 776.08C1037.89 768.44 1039.03 760.84 1041.15 753.24C1047.77 729.6 1063.35 708.46 1086.39 695.13L1418 505.4C1464.59 478.7 1524.29 494.58 1551.28 540.88C1578.31 587.15 1562.31 646.24 1515.55 672.98L1330.37 779.17Z"
+    />
+  </g>
+</svg>;
diff --git a/app/icons/stablelm.svg b/app/icons/stablelm.svg
new file mode 100644
index 00000000..a92c235f
--- /dev/null
+++ b/app/icons/stablelm.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.00 0.00 100.00 100.00">
+<g stroke-width="2.00" fill="none" stroke-linecap="butt">
+<path stroke="#9f4fff" vector-effect="non-scaling-stroke" d="
+  M 22.67 33.13
+  Q 22.39 33.73 21.75 32.98
+  Q 21.68 32.90 21.75 32.82
+  Q 21.96 32.59 21.80 32.24
+  A 0.41 0.41 0.0 0 0 21.42 32.02
+  Q 15.64 32.29 9.95 32.48
+  Q 9.26 32.51 8.62 32.23
+  Q 8.00 31.96 7.38 31.70
+  Q 6.97 31.53 6.72 31.89
+  Q 6.38 32.36 5.47 32.50"
+/>
+<path stroke="#a169ff" vector-effect="non-scaling-stroke" d="
+  M 59.23 66.23
+  L 57.70 64.33
+  Q 57.07 63.55 57.17 64.59
+  Q 57.21 65.04 56.98 65.43
+  Q 56.70 65.90 56.17 65.89
+  L 42.13 65.62"
+/>
+</g>
+<path fill="#9e41ff" d="
+  M 22.67 33.13
+  Q 22.39 33.73 21.75 32.98
+  Q 21.68 32.90 21.75 32.82
+  Q 21.96 32.59 21.80 32.24
+  A 0.41 0.41 0.0 0 0 21.42 32.02
+  Q 15.64 32.29 9.95 32.48
+  Q 9.26 32.51 8.62 32.23
+  Q 8.00 31.96 7.38 31.70
+  Q 6.97 31.53 6.72 31.89
+  Q 6.38 32.36 5.47 32.50
+  C 6.33 23.38 13.64 16.80 22.21 14.63
+  Q 38.32 10.53 53.98 18.20
+  A 1.70 1.69 -77.3 0 1 54.94 19.73
+  L 54.98 33.74
+  Q 54.98 34.52 54.33 34.09
+  C 47.55 29.58 39.65 27.62 31.28 28.07
+  Q 24.94 28.41 22.67 33.13
+  Z"
+/>
+<path fill="#a05cff" d="
+  M 22.67 33.13
+  C 21.80 37.43 24.96 39.93 28.60 41.12
+  C 41.67 45.41 60.57 47.24 59.23 66.23
+  L 57.70 64.33
+  Q 57.07 63.55 57.17 64.59
+  Q 57.21 65.04 56.98 65.43
+  Q 56.70 65.90 56.17 65.89
+  L 42.13 65.62
+  Q 42.30 62.13 39.32 60.17
+  Q 36.60 58.38 32.37 57.13
+  C 20.24 53.53 2.93 49.67 5.47 32.50
+  Q 6.38 32.36 6.72 31.89
+  Q 6.97 31.53 7.38 31.70
+  Q 8.00 31.96 8.62 32.23
+  Q 9.26 32.51 9.95 32.48
+  Q 15.64 32.29 21.42 32.02
+  A 0.41 0.41 0.0 0 1 21.80 32.24
+  Q 21.96 32.59 21.75 32.82
+  Q 21.68 32.90 21.75 32.98
+  Q 22.39 33.73 22.67 33.13
+  Z"
+/>
+<path fill="#a276ff" d="
+  M 42.13 65.62
+  L 56.17 65.89
+  Q 56.70 65.90 56.98 65.43
+  Q 57.21 65.04 57.17 64.59
+  Q 57.07 63.55 57.70 64.33
+  L 59.23 66.23
+  C 58.49 91.18 20.26 91.34 5.88 80.25
+  Q 5.49 79.95 5.49 79.46
+  L 5.50 63.81
+  Q 5.50 62.92 6.13 63.55
+  C 13.48 70.87 25.39 73.59 34.99 71.99
+  Q 40.65 71.05 42.13 65.62
+  Z"
+/>
+<circle fill="#e80000" cx="83.99" cy="75.82" r="10.45"/>
+</svg>
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 05a220ca..87e9ba07 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -314,6 +314,10 @@ const cn = {
     Settings: "检测到链接中包含了预制设置，是否自动填入？",
   },
 
+  ModelSelect: {
+    Title: "选择模型",
+    SearchPlaceholder: "搜索一个模型……",
+  },
   UI: {
     Confirm: "确认",
     Cancel: "取消",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index b8368706..e1f295a5 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -347,7 +347,10 @@ const en = {
     NotShow: "Never Show Again",
     ConfirmNoShow: "Confirm to disable? You can enable it in settings later.",
   },
-
+  ModelSelect: {
+    Title: "Model Selection",
+    SearchPlaceholder: "Search model...",
+  },
   UI: {
     Confirm: "Confirm",
     Cancel: "Cancel",
diff --git a/app/store/chat.ts b/app/store/chat.ts
index 02be69e1..2fb9ec1d 100644
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -552,7 +552,7 @@ export const useChatStore = createPersistStore(
 
         const historyMsgLength = countMessages(toBeSummarizedMsgs);
 
-        if (historyMsgLength > modelConfig?.max_tokens ?? 4000) {
+        if (historyMsgLength > (modelConfig?.max_tokens ?? 4000)) {
           const n = toBeSummarizedMsgs.length;
           toBeSummarizedMsgs = toBeSummarizedMsgs.slice(
             Math.max(0, n - config.historyMessageCount),
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 75b31da4..1ba2ce27 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -7,7 +7,7 @@
   /* color */
   --white: white;
   --black: rgb(48, 48, 48);
-  --gray: rgb(250, 250, 250);
+  --gray: rgb(240, 240, 240);
   --light-gray: rgb(120, 120, 120);
   --primary: rgb(90, 96, 135);
   --second: rgb(228, 229, 241);
diff --git a/app/utils/model.ts b/app/utils/model.ts
deleted file mode 100644
index 05a2da66..00000000
--- a/app/utils/model.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ModelRecord } from "../client/api";
-
-export function collectModelTable(
-  models: readonly ModelRecord[],
-  customModels: string,
-) {
-  const modelTable: Record<
-    string,
-    {
-      name: string;
-      display_name: string;
-      provider?: ModelRecord["provider"]; // Marked as optional
-      isDefault?: boolean;
-    }
-  > = {};
-
-  // default models
-  models.forEach((m) => {
-    modelTable[m.name] = {
-      ...m,
-      display_name: m.name, // 'provider' is copied over if it exists
-    };
-  });
-
-  // server custom models
-  customModels
-    .split(",")
-    .filter((v) => !!v && v.length > 0)
-    .forEach((m) => {
-      const available = !m.startsWith("-");
-      const nameConfig =
-        m.startsWith("+") || m.startsWith("-") ? m.slice(1) : m;
-      const [name, display_name] = nameConfig.split("=");
-
-      modelTable[name] = {
-        name,
-        display_name: display_name || name,
-        provider: modelTable[name]?.provider ?? "", // Use optional chaining
-      };
-    });
-
-  return modelTable;
-}
-
-/**
- * Generate full model table.
- */
-export function collectModels(
-  models: readonly ModelRecord[],
-  customModels: string,
-) {
-  const modelTable = collectModelTable(models, customModels);
-  const allModels = Object.values(modelTable);
-
-  return allModels;
-}
diff --git a/app/utils/model.tsx b/app/utils/model.tsx
new file mode 100644
index 00000000..4ebb3567
--- /dev/null
+++ b/app/utils/model.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import MetaIcon from "@/app/icons/meta.svg";
+import MicrosoftIcon from "@/app/icons/microsoft.svg";
+import MistralIcon from "@/app/icons/mistral.svg";
+import GoogleIcon from "@/app/icons/google.svg";
+import StablelmICon from "@/app/icons/stablelm.svg";
+import { ModelRecord } from "../client/api";
+import { ModelFamily } from "../constant";
+import { Shirt, WandSparkles } from "lucide-react";
+
+export function collectModelTable(
+  models: readonly ModelRecord[],
+  customModels: string,
+) {
+  const modelTable: Record<
+    string,
+    {
+      name: string;
+      display_name: string;
+      provider?: ModelRecord["provider"]; // Marked as optional
+      isDefault?: boolean;
+    }
+  > = {};
+
+  // default models
+  models.forEach((m) => {
+    modelTable[m.name] = {
+      ...m,
+      display_name: m.name, // 'provider' is copied over if it exists
+    };
+  });
+
+  // server custom models
+  customModels
+    .split(",")
+    .filter((v) => !!v && v.length > 0)
+    .forEach((m) => {
+      const available = !m.startsWith("-");
+      const nameConfig =
+        m.startsWith("+") || m.startsWith("-") ? m.slice(1) : m;
+      const [name, display_name] = nameConfig.split("=");
+
+      modelTable[name] = {
+        name,
+        display_name: display_name || name,
+        provider: modelTable[name]?.provider ?? "", // Use optional chaining
+      };
+    });
+
+  return modelTable;
+}
+
+/**
+ * Generate full model table.
+ */
+export function collectModels(
+  models: readonly ModelRecord[],
+  customModels: string,
+) {
+  const modelTable = collectModelTable(models, customModels);
+  const allModels = Object.values(modelTable);
+
+  return allModels;
+}
+
+export interface ModelDetails {
+  family: ModelFamily;
+  name: string;
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+export const modelDetailsList: ModelDetails[] = [
+  { family: ModelFamily.LLAMA, name: "Llama", icon: MetaIcon },
+  { family: ModelFamily.PHI, name: "Phi", icon: MicrosoftIcon },
+  { family: ModelFamily.MISTRAL, name: "Mistral", icon: MistralIcon },
+  { family: ModelFamily.GEMMA, name: "Gemma", icon: GoogleIcon },
+  {
+    family: ModelFamily.QWEN,
+    name: "Qwen",
+    icon: (...props) => <img src="./qwen.webp" alt="Qwen Logo" {...props} />,
+  },
+  {
+    family: ModelFamily.SMOL_LM,
+    name: "SmolLM",
+    icon: (...props) => <img src="./smollm.png" alt="SmolLM Logo" {...props} />,
+  },
+  { family: ModelFamily.WIZARD_MATH, name: "Wizard Math", icon: WandSparkles },
+  { family: ModelFamily.STABLE_LM, name: "StableLM", icon: StablelmICon },
+  { family: ModelFamily.REDPAJAMA, name: "RedPajama", icon: Shirt },
+];
diff --git a/package.json b/package.json
index 615d462d..e87da62b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.11",
     "loglevel": "^1.9.1",
+    "lucide-react": "^0.454.0",
     "mermaid": "^10.6.1",
     "nanoid": "^5.0.3",
     "next": "^13.4.9",
diff --git a/public/qwen.webp b/public/qwen.webp
new file mode 100644
index 00000000..05cbcdde
Binary files /dev/null and b/public/qwen.webp differ
diff --git a/public/smollm.png b/public/smollm.png
new file mode 100644
index 00000000..9c259348
Binary files /dev/null and b/public/smollm.png differ
diff --git a/yarn.lock b/yarn.lock
index 409eb1ff..6626eca0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4813,6 +4813,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^0.454.0:
+  version "0.454.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.454.0.tgz#a81b9c482018720f07ead0503ae502d94d528444"
+  integrity sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"