diff --git a/src/FE/components/Admin/Messages/ChatMessage.tsx b/src/FE/components/Admin/Messages/ChatMessage.tsx
index 0005fd91..c158dada 100644
--- a/src/FE/components/Admin/Messages/ChatMessage.tsx
+++ b/src/FE/components/Admin/Messages/ChatMessage.tsx
@@ -136,9 +136,9 @@ export const ChatMessage: FC<Props> = memo(
                             }
                           }}
                         >
-                          <IconChevronLeft stroke="#7d7d7d" />
+                          <IconChevronLeft />
                         </Button>
-                        <span className="font-bold text-[#7d7d7d]">
+                        <span className="font-bold">
                           {`${currentSelectIndex + 1}/${parentChildrenIds.length
                             }`}
                         </span>
@@ -155,7 +155,7 @@ export const ChatMessage: FC<Props> = memo(
                             }
                           }}
                         >
-                          <IconChevronRight stroke="#7d7d7d" />
+                          <IconChevronRight />
                         </Button>
                       </div>
                     )}
@@ -243,9 +243,9 @@ export const ChatMessage: FC<Props> = memo(
                           }
                         }}
                       >
-                        <IconChevronLeft stroke="#7d7d7d" />
+                        <IconChevronLeft />
                       </Button>
-                      <span className="font-bold text-[#7d7d7d]">
+                      <span className="font-bold">
                         {`${assistantCurrentSelectIndex + 1}/${assistantChildrenIds.length
                           }`}
                       </span>
@@ -263,7 +263,7 @@ export const ChatMessage: FC<Props> = memo(
                           }
                         }}
                       >
-                        <IconChevronRight stroke="#7d7d7d" />
+                        <IconChevronRight />
                       </Button>
                     </div>
                   )}
diff --git a/src/FE/components/Admin/Models/EditModelModal.tsx b/src/FE/components/Admin/Models/EditModelModal.tsx
index e18c5517..60acc246 100644
--- a/src/FE/components/Admin/Models/EditModelModal.tsx
+++ b/src/FE/components/Admin/Models/EditModelModal.tsx
@@ -157,190 +157,174 @@ export const EditModelModal = (props: IProps) => {
         <DialogHeader>
           <DialogTitle>{t('Edit Model')}</DialogTitle>
         </DialogHeader>
-        {loading ? (
-          <div className="flex flex-col space-y-3">
-            <Skeleton className="h-[125px] w-full rounded-xl" />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-[90%]" />
-            </div>
-          </div>
-        ) : (
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-              <div className="grid grid-cols-2 gap-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                key="name"
+                control={form.control}
+                name="name"
+                render={({ field }) => {
+                  return (
+                    <FormInput field={field} label={t('Model Display Name')!} />
+                  );
+                }}
+              ></FormField>
+              <div className="flex justify-between">
                 <FormField
-                  key="name"
+                  key="modelKeyId"
                   control={form.control}
-                  name="name"
+                  name="modelKeyId"
                   render={({ field }) => {
                     return (
-                      <FormInput
+                      <FormSelect
+                        className="w-full"
                         field={field}
-                        label={t('Model Display Name')!}
+                        label={t('Model Keys')!}
+                        items={modelKeys
+                          .filter(
+                            (x) =>
+                              x.modelProviderId === selected.modelProviderId,
+                          )
+                          .map((keys) => ({
+                            name: keys.name,
+                            value: keys.id.toString(),
+                          }))}
                       />
                     );
                   }}
                 ></FormField>
-                <div className="flex justify-between">
-                  <FormField
-                    key="modelKeyId"
-                    control={form.control}
-                    name="modelKeyId"
-                    render={({ field }) => {
-                      return (
-                        <FormSelect
-                          className="w-full"
-                          field={field}
-                          label={t('Model Keys')!}
-                          items={modelKeys
-                            .filter(
-                              (x) =>
-                                x.modelProviderId === selected.modelProviderId,
-                            )
-                            .map((keys) => ({
-                              name: keys.name,
-                              value: keys.id.toString(),
-                            }))}
-                        />
-                      );
-                    }}
-                  ></FormField>
-                  <div
-                    hidden={!form.getValues('modelKeyId')}
-                    className="text-sm mt-12 w-36 text-right"
-                  >
-                    <Popover>
-                      <PopoverTrigger>
-                        <span className="text-primary">
-                          {t('Click View Configs')}
-                        </span>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-full">
-                        {JSON.stringify(
-                          modelKeys
-                            .find(
-                              (x) =>
-                                x.id ===
-                                parseInt(form.getValues('modelKeyId')!),
-                            )
-                            ?.toConfigs(),
-                          null,
-                          2,
-                        )}
-                      </PopoverContent>
-                    </Popover>
-                  </div>
+                <div
+                  hidden={!form.getValues('modelKeyId')}
+                  className="text-sm mt-12 w-36 text-right"
+                >
+                  <Popover>
+                    <PopoverTrigger>
+                      <span className="text-primary">
+                        {t('Click View Configs')}
+                      </span>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full">
+                      {JSON.stringify(
+                        modelKeys
+                          .find(
+                            (x) =>
+                              x.id === parseInt(form.getValues('modelKeyId')!),
+                          )
+                          ?.toConfigs(),
+                        null,
+                        2,
+                      )}
+                    </PopoverContent>
+                  </Popover>
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  key="modelReferenceName"
-                  control={form.control}
-                  name="modelReferenceName"
-                  render={({ field }) => {
-                    return (
-                      <FormInput
-                        disabled
-                        field={field}
-                        label={t('Model Version')!}
-                      />
-                    );
-                  }}
-                ></FormField>
-                <FormField
-                  key="deploymentName"
-                  control={form.control}
-                  name="deploymentName"
-                  render={({ field }) => {
-                    return (
-                      <FormInput label={t('Deployment Name')!} field={field} />
-                    );
-                  }}
-                ></FormField>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  key="inputPrice1M"
-                  control={form.control}
-                  name="inputPrice1M"
-                  render={({ field }) => {
-                    return (
-                      <FormInput
-                        type="number"
-                        label={`${t('1M input tokens price')}(${t('Yuan')})`}
-                        field={field}
-                      />
-                    );
-                  }}
-                ></FormField>
-                <FormField
-                  key="outputPrice1M"
-                  control={form.control}
-                  name="outputPrice1M"
-                  render={({ field }) => {
-                    return (
-                      <FormInput
-                        type="number"
-                        label={`1M ${t('1M output tokens price')}(${t(
-                          'Yuan',
-                        )})`}
-                        field={field}
-                      />
-                    );
-                  }}
-                ></FormField>
-              </div>
-              <div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                key="modelReferenceName"
+                control={form.control}
+                name="modelReferenceName"
+                render={({ field }) => {
+                  return (
+                    <FormInput
+                      disabled
+                      field={field}
+                      label={t('Model Version')!}
+                    />
+                  );
+                }}
+              ></FormField>
+              <FormField
+                key="deploymentName"
+                control={form.control}
+                name="deploymentName"
+                render={({ field }) => {
+                  return (
+                    <FormInput label={t('Deployment Name')!} field={field} />
+                  );
+                }}
+              ></FormField>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                key="inputPrice1M"
+                control={form.control}
+                name="inputPrice1M"
+                render={({ field }) => {
+                  return (
+                    <FormInput
+                      type="number"
+                      label={`${t('1M input tokens price')}(${t('Yuan')})`}
+                      field={field}
+                    />
+                  );
+                }}
+              ></FormField>
+              <FormField
+                key="outputPrice1M"
+                control={form.control}
+                name="outputPrice1M"
+                render={({ field }) => {
+                  return (
+                    <FormInput
+                      type="number"
+                      label={`1M ${t('1M output tokens price')}(${t('Yuan')})`}
+                      field={field}
+                    />
+                  );
+                }}
+              ></FormField>
+            </div>
+            <div>
+              <FormField
+                key="fileServiceId"
+                control={form.control}
+                name="fileServiceId"
+                render={({ field }) => {
+                  return (
+                    <FormSelect
+                      field={field}
+                      label={t('File Service Type')!}
+                      hidden={!selected.allowVision}
+                      items={fileServices.map((item) => ({
+                        name: item.name,
+                        value: item.id.toString(),
+                      }))}
+                    />
+                  );
+                }}
+              ></FormField>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex gap-4">
                 <FormField
-                  key="fileServiceId"
+                  key={'enabled'}
                   control={form.control}
-                  name="fileServiceId"
+                  name={'enabled'}
                   render={({ field }) => {
                     return (
-                      <FormSelect
-                        field={field}
-                        label={t('File Service Type')!}
-                        hidden={!selected.allowVision}
-                        items={fileServices.map((item) => ({
-                          name: item.name,
-                          value: item.id.toString(),
-                        }))}
-                      />
+                      <FormSwitch label={t('Is it enabled')!} field={field} />
                     );
                   }}
                 ></FormField>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="flex gap-4">
-                  <FormField
-                    key={'enabled'}
-                    control={form.control}
-                    name={'enabled'}
-                    render={({ field }) => {
-                      return (
-                        <FormSwitch label={t('Is it enabled')!} field={field} />
-                      );
-                    }}
-                  ></FormField>
-                </div>
-              </div>
-              <DialogFooter className="pt-4">
-                <Button
-                  type="button"
-                  variant="destructive"
-                  onClick={(e) => {
-                    onDelete();
-                    e.preventDefault();
-                  }}
-                >
-                  {t('Delete')}
-                </Button>
-                <Button type="submit">{t('Save')}</Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        )}
+            </div>
+            <DialogFooter className="pt-4">
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={(e) => {
+                  onDelete();
+                  e.preventDefault();
+                }}
+              >
+                {t('Delete')}
+              </Button>
+              <Button type="submit">{t('Save')}</Button>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/FE/components/Button/CopyButton.tsx b/src/FE/components/Button/CopyButton.tsx
index 769b8a2d..b4ca679e 100644
--- a/src/FE/components/Button/CopyButton.tsx
+++ b/src/FE/components/Button/CopyButton.tsx
@@ -36,9 +36,9 @@ export default function CopyButton(props: Props) {
       title={t('Copy')}
     >
       {isCopied ? (
-        <IconCheck stroke={'#7d7d7d'} size={18} />
+        <IconCheck size={18} />
       ) : (
-        <IconClipboard stroke={'#7d7d7d'} size={18} />
+        <IconClipboard size={18} />
       )}
     </Button>
   );
diff --git a/src/FE/components/Chat/ChangeModel.tsx b/src/FE/components/Chat/ChangeModel.tsx
index 884eb759..3e0e7bec 100644
--- a/src/FE/components/Chat/ChangeModel.tsx
+++ b/src/FE/components/Chat/ChangeModel.tsx
@@ -74,11 +74,11 @@ const ChangeModel = ({
     <DropdownMenu onOpenChange={handleOpenMenu}>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="p-1 m-0 h-auto" disabled={readonly}>
-          <span className={cn('text-[#7d7d7d] font-medium', className)}>
+          <span className={cn('font-medium', className)}>
             {content && content}
           </span>
           {!readonly && typeof content === 'string' && (
-            <IconChevronDown stroke="#7d7d7d" />
+            <IconChevronDown />
           )}
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/FE/components/Chat/Chat.tsx b/src/FE/components/Chat/Chat.tsx
index 482c9994..88788cc6 100644
--- a/src/FE/components/Chat/Chat.tsx
+++ b/src/FE/components/Chat/Chat.tsx
@@ -370,37 +370,37 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
   };
 
   return (
-    <div className="relative flex-1 overflow-hidden bg-background">
+    <div className="relative flex-1 overflow-hidden">
       <>
         <div
-          className="max-h-full overflow-x-hidden"
+          className="max-h-full overflow-x-hidden scroll-container"
           ref={chatContainerRef}
           onScroll={handleScroll}
         >
           {selectChat?.id && (
-            <div className="sticky top-0 pt-1 z-10 text-sm bg-background flex items-center justify-between">
-              <div
-                className={cn(
-                  'flex justify-start items-center ml-24',
-                  settings.showChatBar && 'ml-6',
-                )}
-              >
-                {hasModel() && selectMessages?.length != 0 && (
-                  <ChangeModel
-                    className="font-semibold text-base"
-                    content={selectModel?.name}
-                    onChangeModel={(model) => {
-                      homeDispatch({
-                        field: 'selectModel',
-                        value: model,
-                      });
-                      putUserChatModel(selectChat.id, model.modelId);
-                    }}
-                  />
-                )}
-              </div>
-              <div className="pr-2 md:pr-4">
-                {selectMessages?.length === 0 && <ModeToggle />}
+            <div className="sticky top-0 pt-1 z-10 text-sm bg-background right-0">
+              <div className="flex items-center justify-between h-10">
+                <div
+                  className={cn(
+                    'flex justify-start items-center ml-24',
+                    settings.showChatBar && 'ml-6',
+                  )}
+                >
+                  {hasModel() && (
+                    <ChangeModel
+                      className="font-semibold text-base"
+                      content={selectModel?.name}
+                      onChangeModel={(model) => {
+                        homeDispatch({
+                          field: 'selectModel',
+                          value: model,
+                        });
+                        putUserChatModel(selectChat.id, model.modelId);
+                      }}
+                    />
+                  )}
+                </div>
+                <div className="mr-2 md:mr-4">{<ModeToggle />}</div>
               </div>
             </div>
           )}
diff --git a/src/FE/components/Chat/ChatMessage/CopyAction.tsx b/src/FE/components/Chat/ChatMessage/CopyAction.tsx
index 647cc128..64994c81 100644
--- a/src/FE/components/Chat/ChatMessage/CopyAction.tsx
+++ b/src/FE/components/Chat/ChatMessage/CopyAction.tsx
@@ -34,10 +34,7 @@ const CopyAction = (props: Props) => {
       <>
         {messagedCopied ? (
           <Button variant="ghost" className="p-1 m-0 h-auto">
-            <IconCheck
-              stroke="#7d7d7d"
-              className="text-green-500 dark:text-green-400"
-            />
+            <IconCheck className="text-green-500 dark:text-green-400" />
           </Button>
         ) : (
           <Tips
@@ -48,7 +45,7 @@ const CopyAction = (props: Props) => {
                 className={cn('p-1 m-0 h-auto', triggerClassName)}
                 onClick={() => copyOnClick(text)}
               >
-                <IconCopy stroke="#7d7d7d" />
+                <IconCopy />
               </Button>
             }
             side="bottom"
diff --git a/src/FE/components/Chat/ChatMessage/EditAction.tsx b/src/FE/components/Chat/ChatMessage/EditAction.tsx
index 5c0319b7..9679f897 100644
--- a/src/FE/components/Chat/ChatMessage/EditAction.tsx
+++ b/src/FE/components/Chat/ChatMessage/EditAction.tsx
@@ -23,7 +23,7 @@ const EditAction = (props: Props) => {
           className="p-1 m-0 h-auto invisible group-hover:visible focus:visible"
           onClick={onToggleEditing}
         >
-          <IconEdit stroke="#7d7d7d" />
+          <IconEdit />
         </Button>
       }
       content={t('Edit message')!}
diff --git a/src/FE/components/Chat/ChatMessage/GenerateInformationAction.tsx b/src/FE/components/Chat/ChatMessage/GenerateInformationAction.tsx
index d879a121..51576099 100644
--- a/src/FE/components/Chat/ChatMessage/GenerateInformationAction.tsx
+++ b/src/FE/components/Chat/ChatMessage/GenerateInformationAction.tsx
@@ -35,7 +35,7 @@ export const GenerateInformationAction = (props: Props) => {
         className="h-[28px]" side="bottom"
         trigger={
           <Button variant="ghost" className="p-1 m-0 h-auto">
-            <IconInfo stroke="#7d7d7d" />
+            <IconInfo />
           </Button>
         }
         content={
diff --git a/src/FE/components/Chat/ChatMessage/PaginationAction.tsx b/src/FE/components/Chat/ChatMessage/PaginationAction.tsx
index 4f440dfe..e0573f21 100644
--- a/src/FE/components/Chat/ChatMessage/PaginationAction.tsx
+++ b/src/FE/components/Chat/ChatMessage/PaginationAction.tsx
@@ -34,9 +34,9 @@ export const PaginationAction = (props: Props) => {
             }
           }}
         >
-          <IconChevronLeft stroke="#7d7d7d" />
+          <IconChevronLeft />
         </Button>
-        <span className="font-bold text-[#7d7d7d]">
+        <span className="font-bold">
           {`${currentSelectIndex + 1}/${messageIds.length}`}
         </span>
         <Button
@@ -50,7 +50,7 @@ export const PaginationAction = (props: Props) => {
             }
           }}
         >
-          <IconChevronRight stroke="#7d7d7d" />
+          <IconChevronRight />
         </Button>
       </div>
     );
diff --git a/src/FE/components/Chat/ChatMessage/RegenerateAction.tsx b/src/FE/components/Chat/ChatMessage/RegenerateAction.tsx
index 939e5a83..c05ece27 100644
--- a/src/FE/components/Chat/ChatMessage/RegenerateAction.tsx
+++ b/src/FE/components/Chat/ChatMessage/RegenerateAction.tsx
@@ -25,7 +25,7 @@ export const RegenerateAction = (props: Props) => {
               onRegenerate && onRegenerate();
             }}
           >
-            <IconRefresh stroke="#7d7d7d" />
+            <IconRefresh />
           </Button>
         }
         content={t('Regenerate')!}
diff --git a/src/FE/components/Chat/ModelSelect.tsx b/src/FE/components/Chat/ModelSelect.tsx
index 5b6b2e59..1bc843de 100644
--- a/src/FE/components/Chat/ModelSelect.tsx
+++ b/src/FE/components/Chat/ModelSelect.tsx
@@ -44,12 +44,27 @@ export const ModelSelect = () => {
     });
   };
 
+  const getTitle = () => {
+    if (modelUsage) {
+      if (modelUsage.tokens === 0 && modelUsage.counts === 0) {
+        return t('unit-price');
+      } else if (+modelUsage.counts > 0) {
+        return t('Remaining Chat Counts');
+      } else if (+modelUsage.tokens > 0) {
+        return t('Remaining Tokens');
+      } else {
+        return t('unit-price');
+      }
+    }
+    return '';
+  };
+
   return (
     <div className="flex flex-col">
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
-        {t('Model')}
+        {getTitle()}
       </label>
-      <div className="w-full focus:outline-none active:outline-none rounded-lg border bg-background border-neutral-200  dark:border-neutral-600">
+      {/* <div className="w-full focus:outline-none active:outline-none rounded-lg border bg-background border-neutral-200  dark:border-neutral-600">
         <Select
           onValueChange={handleChange}
           value={selectModel?.modelId?.toString()}
@@ -66,10 +81,10 @@ export const ModelSelect = () => {
             ))}
           </SelectContent>
         </Select>
-      </div>
+      </div> */}
       {modelUsage && modelUsage.tokens === 0 && modelUsage.counts === 0 ? (
         <span className="text-xs pt-2">
-          {t('unit-price')}: ￥{modelUsage.inputTokenPrice1M.toFixed(4)}/
+          ￥{modelUsage.inputTokenPrice1M.toFixed(4)}/
           {modelUsage.outputTokenPrice1M.toFixed(4)} (1M tokens)
         </span>
       ) : (
@@ -78,18 +93,12 @@ export const ModelSelect = () => {
             <div className="flex justify-between text-xs pt-1 text-muted-foreground">
               <div className="flex gap-4">
                 {+modelUsage.counts > 0 ? (
-                  <span>
-                    {t('Remaining Chat Counts')}:&nbsp;{modelUsage.counts}
-                  </span>
+                  <span>{modelUsage.counts}</span>
                 ) : +modelUsage.tokens > 0 ? (
-                  <span>
-                    {t('Remaining Tokens')}:&nbsp;
-                    {formatNumberAsMoney(+modelUsage.tokens)}
-                  </span>
+                  <span>{formatNumberAsMoney(+modelUsage.tokens)}</span>
                 ) : (
                   <span>
-                    {t('unit-price')}: ￥
-                    {modelUsage.inputTokenPrice1M.toFixed(4)}/
+                    ￥{modelUsage.inputTokenPrice1M.toFixed(4)}/
                     {modelUsage.outputTokenPrice1M.toFixed(4)} (1M tokens)
                   </span>
                 )}
@@ -99,7 +108,8 @@ export const ModelSelect = () => {
                   <></>
                 ) : (
                   <>
-                    {modelUsage.expires} {` ${t('become due')}`}
+                    {new Date(modelUsage.expires).toLocaleDateString()}{' '}
+                    {` ${t('become due')}`}
                   </>
                 )}
               </div>
diff --git a/src/FE/components/Chatbar/ChatbarSettings.tsx b/src/FE/components/Chatbar/ChatbarSettings.tsx
index 62542266..1d0da2e3 100644
--- a/src/FE/components/Chatbar/ChatbarSettings.tsx
+++ b/src/FE/components/Chatbar/ChatbarSettings.tsx
@@ -8,8 +8,6 @@ import { clearUserInfo, clearUserSession, getLoginUrl } from '@/utils/user';
 
 import { UserRole } from '@/types/adminApis';
 
-import { HomeContext } from '@/contexts/Home.context';
-
 import {
   IconBulbFilled,
   IconKey,
@@ -31,6 +29,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 
 import { getUserBalanceOnly } from '@/apis/clientApis';
+import { HomeContext } from '@/contexts/Home.context';
 
 export const ChatBarSettings = () => {
   const router = useRouter();
@@ -68,7 +67,7 @@ export const ChatBarSettings = () => {
       {user?.role === UserRole.admin && (
         <SidebarButton
           text={t('Admin Panel')}
-          icon={<IconSettingsCog size={18} />}
+          icon={<IconSettingsCog />}
           onClick={() => {
             router.push('/admin');
           }}
@@ -81,7 +80,7 @@ export const ChatBarSettings = () => {
             <SidebarButton
               className="capitalize"
               text={user?.username}
-              icon={<IconUser size={18} />}
+              icon={<IconUser />}
               onClick={handleClickUserMore}
             />
           </PopoverTrigger>
@@ -90,7 +89,7 @@ export const ChatBarSettings = () => {
               text={`${t('Account balance')}￥${(+(userBalance || 0)).toFixed(
                 2,
               )}`}
-              icon={<IconMoneybag size={18} />}
+              icon={<IconMoneybag />}
               onClick={() => {
                 setUserBalanceModalOpen(true);
               }}
@@ -98,14 +97,14 @@ export const ChatBarSettings = () => {
             <Separator className="my-2" />
             <SidebarButton
               text={t('Prompt Management')}
-              icon={<IconBulbFilled size={18} />}
+              icon={<IconBulbFilled />}
               onClick={() => {
                 handleUpdateSettings('showPromptBar', !showPromptBar);
               }}
             />
             <SidebarButton
               text={`${t('API Key Management')}`}
-              icon={<IconKey size={18} />}
+              icon={<IconKey />}
               onClick={() => {
                 setSettingSheetOpen(true);
               }}
@@ -113,14 +112,14 @@ export const ChatBarSettings = () => {
             <Separator className="my-2" />
             <SidebarButton
               text={t('Change Password')}
-              icon={<IconPasswordUser size={18} />}
+              icon={<IconPasswordUser />}
               onClick={() => {
                 setChangePwdModalOpen(true);
               }}
             />
             <SidebarButton
               text={t('Log out')}
-              icon={<IconLogout size={18} />}
+              icon={<IconLogout />}
               onClick={logout}
             />
           </PopoverContent>
diff --git a/src/FE/components/Chatbar/ClearConversations.tsx b/src/FE/components/Chatbar/ClearConversations.tsx
index df461396..1989ac88 100644
--- a/src/FE/components/Chatbar/ClearConversations.tsx
+++ b/src/FE/components/Chatbar/ClearConversations.tsx
@@ -50,7 +50,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
   ) : (
     <SidebarButton
       text={t('Clear conversations')}
-      icon={<IconTrash size={18} />}
+      icon={<IconTrash />}
       onClick={() => setIsConfirming(true)}
     />
   );
diff --git a/src/FE/components/Chatbar/Conversation.tsx b/src/FE/components/Chatbar/Conversation.tsx
index 8a9b76e1..43dfb4f8 100644
--- a/src/FE/components/Chatbar/Conversation.tsx
+++ b/src/FE/components/Chatbar/Conversation.tsx
@@ -174,7 +174,7 @@ export const ConversationComponent = ({ chat }: Props) => {
               disabled={messageIsStreaming}
               className="focus:outline-none"
             >
-              <Button variant="ghost" className="p-[6px] m-0 h-auto">
+              <Button variant="ghost" className="p-[6px] m-0 h-auto hover:opacity-50">
                 <IconDots size={16} />
               </Button>
             </DropdownMenuTrigger>
diff --git a/src/FE/components/Markdown/CodeBlock.tsx b/src/FE/components/Markdown/CodeBlock.tsx
index f2fd0a45..f320245f 100644
--- a/src/FE/components/Markdown/CodeBlock.tsx
+++ b/src/FE/components/Markdown/CodeBlock.tsx
@@ -31,7 +31,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
 
   return (
     <div className="codeblock relative font-sans text-[16px]">
-      <div className="flex items-center justify-between w-full py-[6px] px-3 bg-black">
+      <div className="flex items-center justify-between w-full py-[6px] px-3 bg-[#282C34]">
         <span className="text-xs lowercase text-white">{language}</span>
 
         <div className="flex items-center">
diff --git a/src/FE/components/ModeToggle/ModeTooggle.tsx b/src/FE/components/ModeToggle/ModeTooggle.tsx
index c3ca40ba..fc6cb780 100644
--- a/src/FE/components/ModeToggle/ModeTooggle.tsx
+++ b/src/FE/components/ModeToggle/ModeTooggle.tsx
@@ -11,16 +11,16 @@ export function ModeToggle() {
   const { setTheme } = useTheme();
 
   return (
-    <Button variant="ghost" size="icon" className="hover:bg-none">
+    <Button className="hover:bg-transparent p-0 m-0 bg-transparent">
       <IconSun
+        size={24}
         onClick={() => setTheme('dark')}
-        className="h-[22px] w-[22px] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-        stroke="#7d7d7d"
+        className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
       />
       <IconMoon
+        size={24}
         onClick={() => setTheme('light')}
-        className="absolute h-[22px] w-[22px] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-        stroke="#7d7d7d"
+        className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
       />
     </Button>
   );
diff --git a/src/FE/components/Promptbar/components/Prompt.tsx b/src/FE/components/Promptbar/components/Prompt.tsx
index d7ea0490..0e185bf8 100644
--- a/src/FE/components/Promptbar/components/Prompt.tsx
+++ b/src/FE/components/Promptbar/components/Prompt.tsx
@@ -76,13 +76,13 @@ export const PromptComponent = ({ prompt }: Props) => {
 
   const getPromptColor = (prompt: PromptSlim) => {
     if (prompt.isSystem) {
-      return '#3b82f6';
+      return 'text-green-700';
     } else if (prompt.isDefault) {
-      return '#16a34a';
+      return 'text-blue-700';
     } else {
-      return 'grey';
+      return 'text-gray-600';
     }
-  }
+  };
 
   return (
     <div className="relative flex items-center">
@@ -92,7 +92,7 @@ export const PromptComponent = ({ prompt }: Props) => {
           handlePromptDetail(e);
         }}
       >
-        <IconBulbFilled size={18} style={{ color: getPromptColor(prompt) }} />
+        <IconBulbFilled size={18} className={getPromptColor(prompt)} />
 
         <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all pr-4 text-left text-[12.5px] leading-3">
           {prompt.name}
diff --git a/src/FE/components/Sidebar/OpenCloseButton.tsx b/src/FE/components/Sidebar/OpenCloseButton.tsx
index 9cf9c933..bb4cf537 100644
--- a/src/FE/components/Sidebar/OpenCloseButton.tsx
+++ b/src/FE/components/Sidebar/OpenCloseButton.tsx
@@ -51,13 +51,13 @@ export const OpenSidebarButton = ({ onClick, side }: Props) => {
             {side === 'right' ? (
               <div className="flex flex-col items-center">
                 <Button variant="ghost">
-                  <IconLayoutSidebarRight stroke="#7d7d7d" size={26} />
+                  <IconLayoutSidebarRight size={26} />
                 </Button>
               </div>
             ) : (
               <div className="flex flex-col items-center">
                 <Button variant="ghost" className="p-1 m-0 h-auto">
-                  <IconLayoutSidebar stroke="#7d7d7d" size={26} />
+                  <IconLayoutSidebar size={26} />
                 </Button>
               </div>
             )}
diff --git a/src/FE/components/Sidebar/Sidebar.tsx b/src/FE/components/Sidebar/Sidebar.tsx
index b72eb598..11f36044 100644
--- a/src/FE/components/Sidebar/Sidebar.tsx
+++ b/src/FE/components/Sidebar/Sidebar.tsx
@@ -51,7 +51,7 @@ const Sidebar = <T,>({
       <div
         className={`${
           isOpen ? 'w-[260px]' : 'w-0 hidden'
-        } fixed top-0 ${side}-0 z-40 flex h-full flex-none flex-col text-black bg-[#f9f9f9] dark:bg-[#202123] dark:text-white p-2 text-[14px] sm:relative  sm:top-0`}
+        } fixed top-0 ${side}-0 z-40 flex h-full flex-none flex-col bg-gray-50 dark:bg-[#202123] p-2 text-[14px] sm:relative  sm:top-0`}
       >
         <div
           className={cn(
@@ -67,9 +67,9 @@ const Sidebar = <T,>({
                 onClick={toggleOpen}
               >
                 {side === 'right' ? (
-                  <IconLayoutSidebarRight stroke="#7d7d7d" size={26} />
+                  <IconLayoutSidebarRight size={26} />
                 ) : (
-                  <IconLayoutSidebar stroke="#7d7d7d" size={26} />
+                  <IconLayoutSidebar size={26} />
                 )}
               </Button>
             }
@@ -85,7 +85,7 @@ const Sidebar = <T,>({
                   variant="ghost"
                   className="p-1 m-0 h-auto"
                 >
-                  <IconSquarePlus stroke="#7d7d7d" size={26} />
+                  <IconSquarePlus size={26} />
                 </Button>
               }
               content={addItemButtonTitle}
@@ -124,13 +124,13 @@ const Sidebar = <T,>({
                 {side === 'right' ? (
                   <div className="flex flex-col items-center">
                     <Button variant="ghost">
-                      <IconLayoutSidebarRight stroke="#7d7d7d" size={26} />
+                      <IconLayoutSidebarRight size={26} />
                     </Button>
                   </div>
                 ) : (
                   <div className="flex flex-col items-center">
                     <Button variant="ghost" className="p-1 m-0 h-auto">
-                      <IconLayoutSidebar stroke="#7d7d7d" size={26} />
+                      <IconLayoutSidebar size={26} />
                     </Button>
                   </div>
                 )}
@@ -148,7 +148,7 @@ const Sidebar = <T,>({
                   variant="ghost"
                   className="p-1 m-0 h-auto"
                 >
-                  <IconSquarePlus stroke="#7d7d7d" size={26} />
+                  <IconSquarePlus size={26} />
                 </Button>
               }
               content={addItemButtonTitle}
diff --git a/src/FE/hooks/useFetch.ts b/src/FE/hooks/useFetch.ts
index 1bd97bf1..2601e46c 100644
--- a/src/FE/hooks/useFetch.ts
+++ b/src/FE/hooks/useFetch.ts
@@ -17,10 +17,8 @@ export type RequestWithBodyModel = RequestModel & {
 
 const readResponse = async (response: Response) => {
   if (!response.headers) {
-    console.log();
     return response;
   }
-  console.log(response.status, [...response.headers.keys()]);
   const contentType = response.headers.get('content-type');
   const contentDisposition = response.headers.get('content-disposition');
 
@@ -30,7 +28,10 @@ const readResponse = async (response: Response) => {
     return await response.json();
   } else if (contentType.indexOf('text/plain') !== -1) {
     return await response.text();
-  } else if (contentDisposition != null && contentDisposition.indexOf('attachment') !== -1) {
+  } else if (
+    contentDisposition != null &&
+    contentDisposition.indexOf('attachment') !== -1
+  ) {
     return await response.blob();
   } else {
     return null;
@@ -77,13 +78,21 @@ export const useFetch = () => {
         const result = readResponse(response);
         return result;
       })
-      .catch(async (err) => {
-        const error = await readResponse(err);
-        const message = error?.message || error.errMessage || error;
+      .catch(async (err: Response) => {
         const { t } = useTranslation();
+        const error = await readResponse(err);
+        let message = error?.message || error?.errMessage || error;
+
+        if (err.status === 500) {
+          message = 'Internal server error, Please try again later';
+        } else if (err.status === 403) {
+          location.href = '/';
+          return;
+        }
+
         toast.error(
           t(
-            typeof message === 'string'
+            typeof message === 'string' && message !== ''
               ? message
               : 'Operation failed, Please try again later, or contact technical personnel',
           ),
diff --git a/src/FE/locales/zh-CN.json b/src/FE/locales/zh-CN.json
index 3f7ee86a..614850d8 100644
--- a/src/FE/locales/zh-CN.json
+++ b/src/FE/locales/zh-CN.json
@@ -95,6 +95,7 @@
   "Actions": "操作",
   "Edit": "编辑",
   "Operation failed, Please try again later, or contact technical personnel": "操作失败，请稍后再试，或联系技术人员",
+  "Internal server error, Please try again later": "内部服务器错误，请稍后再试",
   "Created successful": "创建成功",
   "Updated successful": "修改成功",
   "Deleted successful": "删除成功",
@@ -355,4 +356,4 @@
   "File is empty.": "文件为空。",
   "File is too large.": "文件过大。",
   "Invalid file name.": "无效的文件名。"
-}
\ No newline at end of file
+}
diff --git a/src/FE/pages/_app.tsx b/src/FE/pages/_app.tsx
index cc003b54..8c25e65d 100644
--- a/src/FE/pages/_app.tsx
+++ b/src/FE/pages/_app.tsx
@@ -1,11 +1,17 @@
+import { useEffect, useState } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 
+import { getUserInfo } from '@/utils/user';
+
+import { UserRole } from '@/types/adminApis';
+
 import { ThemeProvider } from '@/components/Theme/ThemeProvider';
 
+import ErrorPage from './_error';
 import AdminLayout from './admin/layout';
 import './globals.css';
 
@@ -14,6 +20,19 @@ import 'katex/dist/katex.min.css';
 function App({ Component, pageProps }: AppProps<{}> | any) {
   const route = useRouter();
   const queryClient = new QueryClient();
+
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    document.title = "Chats";
+  }, []);
+
+  const isAdmin = () => {
+    const user = getUserInfo();
+    return user?.role === UserRole.admin;
+  };
+
   return (
     <ThemeProvider
       attribute="class"
@@ -22,17 +41,23 @@ function App({ Component, pageProps }: AppProps<{}> | any) {
       disableTransitionOnChange
     >
       <Toaster />
-      <QueryClientProvider client={queryClient}>
-        {route.pathname.includes('/admin') ? (
-          <AdminLayout>
+      {isClient && (
+        <QueryClientProvider client={queryClient}>
+          {route.pathname.includes('/admin') ? (
+            isAdmin() ? (
+              <AdminLayout>
+                <Component {...pageProps} />
+              </AdminLayout>
+            ) : (
+              <ErrorPage statusCode={404} />
+            )
+          ) : route.pathname.includes('/authorizing') ? (
+            <Component {...pageProps} />
+          ) : (
             <Component {...pageProps} />
-          </AdminLayout>
-        ) : route.pathname.includes('/authorizing') ? (
-          <Component {...pageProps} />
-        ) : (
-          <Component {...pageProps} />
-        )}
-      </QueryClientProvider>
+          )}
+        </QueryClientProvider>
+      )}
     </ThemeProvider>
   );
 }
diff --git a/src/FE/pages/_error.tsx b/src/FE/pages/_error.tsx
index 61067688..456abe24 100644
--- a/src/FE/pages/_error.tsx
+++ b/src/FE/pages/_error.tsx
@@ -5,9 +5,11 @@ import useTranslation from '@/hooks/useTranslation';
 const Custom404 = () => {
   const { t } = useTranslation();
   return (
-    <div>
-      <h1>{t('404: Page not found')}</h1>
-      <p>{t("Sorry, we couldn't find the page you were trying to access.")}</p>
+    <div className="flex flex-col text-center gap-y-2 mt-4">
+      <h1 className="text-2xl">{t('404: Page not found')}</h1>
+      <p className="text-gray-500">
+        {t("Sorry, we couldn't find the page you were trying to access.")}
+      </p>
     </div>
   );
 };
@@ -19,9 +21,14 @@ const ErrorPage = ({ statusCode }: { statusCode: number }) => {
   }
 
   return (
-    <div>
-      <h1>{statusCode}{t(': An error has occurred')}</h1>
-      <p>{t('Sorry, there was an unexpected error, please try again later.')}</p>
+    <div className="flex flex-col text-center gap-y-4 mt-4">
+      <h1 className="text-2xl">
+        {statusCode}
+        {t(': An error has occurred')}
+      </h1>
+      <p className="text-gray-500">
+        {t('Sorry, there was an unexpected error, please try again later.')}
+      </p>
     </div>
   );
 };
diff --git a/src/FE/pages/globals.css b/src/FE/pages/globals.css
index 60ccc781..17255b9f 100644
--- a/src/FE/pages/globals.css
+++ b/src/FE/pages/globals.css
@@ -136,7 +136,7 @@ select:focus {
 }
 
 .md-p {
-  padding-left: 8px;
+  padding-left: 6px;
   white-space: pre-wrap;
 }
 
diff --git a/src/FE/pages/login/index.tsx b/src/FE/pages/login/index.tsx
index 6ed80130..b9af464c 100644
--- a/src/FE/pages/login/index.tsx
+++ b/src/FE/pages/login/index.tsx
@@ -125,8 +125,8 @@ export default function LoginPage() {
     <>
       {!loading && isClient && (
         <div className="container relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-          <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
-            <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative hidden h-full flex-col  p-10 text-white dark:text-black lg:flex dark:border-r">
+            <div className="absolute inset-0 dark:bg-gray-50 bg-zinc-900" />
             <div className="relative z-20 flex items-center text-lg font-medium">
               <img
                 src="/icons/logo.png"
diff --git a/src/FE/types/config.ts b/src/FE/types/config.ts
index 26eed585..aae3283a 100644
--- a/src/FE/types/config.ts
+++ b/src/FE/types/config.ts
@@ -1,8 +1,7 @@
 export enum GlobalConfigKeys {
   tencentSms = 'tencentSms',
-  session = 'session',
   siteInfo = 'siteInfo',
-  logs = 'logs',
+  JwtSecretKey = 'JwtSecretKey',
 }
 
 export interface SiteInfoConfig {
@@ -27,11 +26,5 @@ export const GlobalDefaultConfigs = {
       qqGroup: '',
     },
   },
-  session: {
-    expire: '',
-  },
-  logs: {
-    error: true,
-    success: false,
-  },
+  JwtSecretKey: '',
 };