diff --git a/app/src/conversation/conversation.ts b/app/src/conversation/conversation.ts
index c038068..97c510a 100644
--- a/app/src/conversation/conversation.ts
+++ b/app/src/conversation/conversation.ts
@@ -4,9 +4,9 @@ import { AnonymousProps, requestAnonymous } from "./anonymous.ts";
 
 type ConversationCallback = (idx: number, message: Message[]) => void;
 export type SendMessageProps = {
+  model: string;
   message: string;
   web?: boolean;
-  gpt4?: boolean;
 };
 
 export class Conversation {
diff --git a/app/src/conversation/manager.ts b/app/src/conversation/manager.ts
index c5afff3..a139904 100644
--- a/app/src/conversation/manager.ts
+++ b/app/src/conversation/manager.ts
@@ -73,6 +73,7 @@ export class Manager {
     auth: boolean,
     props: SendMessageProps,
   ): Promise<boolean> {
+    props.model = props.model.trim().toLowerCase();
     const id = this.getCurrent();
     if (!this.conversations[id]) return false;
     console.debug(
diff --git a/app/src/routes/Home.tsx b/app/src/routes/Home.tsx
index 8597d4d..736f942 100644
--- a/app/src/routes/Home.tsx
+++ b/app/src/routes/Home.tsx
@@ -12,8 +12,6 @@ import {
   Trash2,
 } from "lucide-react";
 import { Button } from "../components/ui/button.tsx";
-import { Switch } from "../components/ui/switch.tsx";
-import { Label } from "../components/ui/label.tsx";
 import {
   Tooltip,
   TooltipContent,
@@ -37,15 +35,15 @@ import {
   useAnimation,
   useEffectAsync,
 } from "../utils.ts";
-import { useToast } from "../components/ui/use-toast.ts";
+import {toast, useToast} from "../components/ui/use-toast.ts";
 import { ConversationInstance, Message } from "../conversation/types.ts";
 import {
   selectCurrent,
-  selectGPT4,
+  selectModel,
   selectHistory,
   selectMessages,
   selectWeb,
-  setGPT4,
+  setModel,
   setWeb,
 } from "../store/chat.ts";
 import {
@@ -64,6 +62,7 @@ import MessageSegment from "../components/Message.tsx";
 import { setMenu } from "../store/menu.ts";
 import FileProvider, { FileObject } from "../components/FileProvider.tsx";
 import router from "../router.ts";
+import SelectGroup from "../components/SelectGroup.tsx";
 
 function SideBar() {
   const { t } = useTranslation();
@@ -281,7 +280,7 @@ function ChatWrapper() {
   const [clearEvent, setClearEvent] = useState<() => void>(() => {});
   const dispatch = useDispatch();
   const auth = useSelector(selectAuthenticated);
-  const gpt4 = useSelector(selectGPT4);
+  const model = useSelector(selectModel);
   const web = useSelector(selectWeb);
   const messages = useSelector(selectMessages);
   const target = useRef(null);
@@ -291,13 +290,13 @@ function ChatWrapper() {
     clearEvent?.();
   }
 
-  async function handleSend(auth: boolean, gpt4: boolean, web: boolean) {
+  async function handleSend(auth: boolean, model: string, web: boolean) {
     // because of the function wrapper, we need to update the selector state using props.
     if (!target.current) return;
     const el = target.current as HTMLInputElement;
     const message: string = formatMessage(file, el.value);
     if (message.length > 0 && el.value.trim().length > 0) {
-      if (await manager.send(t, auth, { message, web, gpt4 })) {
+      if (await manager.send(t, auth, { message, web, model })) {
         clearFile();
         el.value = "";
       }
@@ -351,7 +350,7 @@ function ChatWrapper() {
                 ref={target}
                 placeholder={t("chat.placeholder")}
                 onKeyDown={async (e: React.KeyboardEvent<HTMLInputElement>) => {
-                  if (e.key === "Enter") await handleSend(auth, gpt4, web);
+                  if (e.key === "Enter") await handleSend(auth, model, web);
                 }}
               />
               {auth && (
@@ -368,7 +367,7 @@ function ChatWrapper() {
               size={`icon`}
               variant="outline"
               className={`send-button`}
-              onClick={() => handleSend(auth, gpt4, web)}
+              onClick={() => handleSend(auth, model, web)}
             >
               <svg
                 className="h-4 w-4"
@@ -383,12 +382,18 @@ function ChatWrapper() {
           </div>
           <div className={`input-options`}>
             <div className="flex items-center space-x-2">
-              <Switch
-                disabled={!auth}
-                id="enable-gpt4"
-                onCheckedChange={(state: boolean) => dispatch(setGPT4(state))}
+              <SelectGroup
+                current={model}
+                list={["GPT-3.5", "GPT-3.5-16k", "GPT-4", "GPT-4-32k"]}
+                onChange={(model: string) => {
+                  if (!auth && model !== "GPT-3.5") {
+                    toast({
+                      title: t("login-required"),
+                    })
+                  }
+                  dispatch(setModel(model));
+                }}
               />
-              <Label htmlFor="enable-gpt4">GPT-4</Label>
             </div>
           </div>
         </div>
diff --git a/app/src/store/chat.ts b/app/src/store/chat.ts
index 1a96cff..7f3b4f0 100644
--- a/app/src/store/chat.ts
+++ b/app/src/store/chat.ts
@@ -7,7 +7,7 @@ import { RootState } from "./index.ts";
 type initialStateType = {
   history: ConversationInstance[];
   messages: Message[];
-  gpt4: boolean;
+  model: string;
   web: boolean;
   current: number;
 };
@@ -17,7 +17,7 @@ const chatSlice = createSlice({
   initialState: {
     history: [],
     messages: [],
-    gpt4: false,
+    model: "GPT-3.5",
     web: true,
     current: -1,
   } as initialStateType,
@@ -43,8 +43,8 @@ const chatSlice = createSlice({
     setMessages: (state, action) => {
       state.messages = action.payload as Message[];
     },
-    setGPT4: (state, action) => {
-      state.gpt4 = action.payload as boolean;
+    setModel: (state, action) => {
+      state.model = action.payload as string;
     },
     setWeb: (state, action) => {
       state.web = action.payload as boolean;
@@ -67,7 +67,7 @@ export const {
   addHistory,
   setCurrent,
   setMessages,
-  setGPT4,
+  setModel,
   setWeb,
   addMessage,
   setMessage,
@@ -76,7 +76,7 @@ export const selectHistory = (state: RootState): ConversationInstance[] =>
   state.chat.history;
 export const selectMessages = (state: RootState): Message[] =>
   state.chat.messages;
-export const selectGPT4 = (state: RootState): boolean => state.chat.gpt4;
+export const selectModel = (state: RootState): string => state.chat.model;
 export const selectWeb = (state: RootState): boolean => state.chat.web;
 export const selectCurrent = (state: RootState): number => state.chat.current;
 
diff --git a/chat.exe b/chat.exe
new file mode 100644
index 0000000..43e1665
Binary files /dev/null and b/chat.exe differ
diff --git a/types/globals.go b/types/globals.go
index 3570a6a..d1aec75 100644
--- a/types/globals.go
+++ b/types/globals.go
@@ -1,7 +1,5 @@
 package types
 
-import "chat/utils"
-
 const (
 	GPT3Turbo        = "gpt-3.5-turbo"
 	GPT3Turbo0613    = "gpt-3.5-turbo-0613"
@@ -42,10 +40,19 @@ var GPT432kArray = []string{
 	GPT432k0613,
 }
 
+func in(value string, slice []string) bool {
+	for _, item := range slice {
+		if item == value {
+			return true
+		}
+	}
+	return false
+}
+
 func IsGPT4Model(model string) bool {
-	return utils.Contains(model, GPT4Array) || utils.Contains(model, GPT432kArray)
+	return in(model, GPT4Array) || in(model, GPT432kArray)
 }
 
 func IsGPT3TurboModel(model string) bool {
-	return utils.Contains(model, GPT3TurboArray) || utils.Contains(model, GPT3Turbo16kArray)
+	return in(model, GPT3TurboArray) || in(model, GPT3Turbo16kArray)
 }