diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx
index cb9942087..f500141f0 100644
--- a/web/containers/CardSidebar/index.tsx
+++ b/web/containers/CardSidebar/index.tsx
@@ -31,7 +31,7 @@ export default function CardSidebar({
   rightAction,
   hideMoreVerticalAction,
 }: Props) {
-  const [show, setShow] = useState(true)
+  const [show, setShow] = useState(false)
   const [more, setMore] = useState(false)
   const [menu, setMenu] = useState<HTMLDivElement | null>(null)
   const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index f9e30aec8..1ad87128f 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -156,21 +156,87 @@ const Sidebar: React.FC = () => {
           <div>
             {activeThread?.assistants[0]?.tools &&
               componentDataAssistantSetting.length > 0 && (
-                <div className="mt-2">
-                  <CardSidebar title="Tools">
-                    <div className="px-2 pt-4">
-                      <div className="mb-2">
+                <CardSidebar title="Tools">
+                  <div className="px-2 pt-4">
+                    <div className="mb-2">
+                      <div className="flex items-center justify-between">
+                        <label
+                          id="retrieval"
+                          className="inline-flex items-center font-bold text-zinc-500 dark:text-gray-300"
+                        >
+                          Retrieval
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoIcon
+                                size={16}
+                                className="ml-2 flex-shrink-0 text-black dark:text-gray-500"
+                              />
+                            </TooltipTrigger>
+                            <TooltipPortal>
+                              <TooltipContent
+                                side="top"
+                                className="max-w-[240px]"
+                              >
+                                <span>
+                                  Retrieval helps the assistant use information
+                                  from files you send to it. Once you share a
+                                  file, the assistant automatically fetches the
+                                  relevant content based on your request.
+                                </span>
+                                <TooltipArrow />
+                              </TooltipContent>
+                            </TooltipPortal>
+                          </Tooltip>
+                        </label>
+
                         <div className="flex items-center justify-between">
-                          <label
-                            id="retrieval"
-                            className="inline-flex items-center font-bold text-zinc-500 dark:text-gray-300"
-                          >
-                            Retrieval
+                          <Switch
+                            name="retrieval"
+                            className="mr-2"
+                            checked={
+                              activeThread?.assistants[0].tools[0].enabled
+                            }
+                            onCheckedChange={(e) => {
+                              if (activeThread)
+                                updateThreadMetadata({
+                                  ...activeThread,
+                                  assistants: [
+                                    {
+                                      ...activeThread.assistants[0],
+                                      tools: [
+                                        {
+                                          type: 'retrieval',
+                                          enabled: e,
+                                          settings:
+                                            (activeThread.assistants[0].tools &&
+                                              activeThread.assistants[0]
+                                                .tools[0]?.settings) ??
+                                            {},
+                                        },
+                                      ],
+                                    },
+                                  ],
+                                })
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    {activeThread?.assistants[0]?.tools[0].enabled && (
+                      <div className="pb-4 pt-2">
+                        <div className="mb-4">
+                          <div className="item-center mb-2 flex">
+                            <label
+                              id="embedding-model"
+                              className="inline-flex font-bold text-zinc-500 dark:text-gray-300"
+                            >
+                              Embedding Model
+                            </label>
                             <Tooltip>
                               <TooltipTrigger asChild>
                                 <InfoIcon
                                   size={16}
-                                  className="ml-2 flex-shrink-0 text-black dark:text-gray-500"
+                                  className="ml-2 flex-shrink-0 dark:text-gray-500"
                                 />
                               </TooltipTrigger>
                               <TooltipPortal>
@@ -179,140 +245,70 @@ const Sidebar: React.FC = () => {
                                   className="max-w-[240px]"
                                 >
                                   <span>
-                                    Retrieval helps the assistant use
-                                    information from files you send to it. Once
-                                    you share a file, the assistant
-                                    automatically fetches the relevant content
-                                    based on your request.
+                                    Embedding model is crucial for understanding
+                                    and processing the input text effectively by
+                                    converting text to numerical
+                                    representations. Align the model choice with
+                                    your task, evaluate its performance, and
+                                    consider factors like resource availability.
+                                    Experiment to find the best fit for your
+                                    specific use case.
                                   </span>
                                   <TooltipArrow />
                                 </TooltipContent>
                               </TooltipPortal>
                             </Tooltip>
-                          </label>
+                          </div>
 
                           <div className="flex items-center justify-between">
-                            <Switch
-                              name="retrieval"
-                              className="mr-2"
-                              checked={
-                                activeThread?.assistants[0].tools[0].enabled
-                              }
-                              onCheckedChange={(e) => {
-                                if (activeThread)
-                                  updateThreadMetadata({
-                                    ...activeThread,
-                                    assistants: [
-                                      {
-                                        ...activeThread.assistants[0],
-                                        tools: [
-                                          {
-                                            type: 'retrieval',
-                                            enabled: e,
-                                            settings:
-                                              (activeThread.assistants[0]
-                                                .tools &&
-                                                activeThread.assistants[0]
-                                                  .tools[0]?.settings) ??
-                                              {},
-                                          },
-                                        ],
-                                      },
-                                    ],
-                                  })
-                              }}
-                            />
+                            <Input value={selectedModel?.name} disabled />
                           </div>
                         </div>
+                        <div className="mb-4">
+                          <div className="mb-2 flex items-center">
+                            <label
+                              id="vector-database"
+                              className="inline-block font-bold text-zinc-500 dark:text-gray-300"
+                            >
+                              Vector Database
+                            </label>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <InfoIcon
+                                  size={16}
+                                  className="ml-2 flex-shrink-0 dark:text-gray-500"
+                                />
+                              </TooltipTrigger>
+                              <TooltipPortal>
+                                <TooltipContent
+                                  side="top"
+                                  className="max-w-[240px]"
+                                >
+                                  <span>
+                                    Vector Database is crucial for efficient
+                                    storage and retrieval of embeddings.
+                                    Consider your specific task, available
+                                    resources, and language requirements.
+                                    Experiment to find the best fit for your
+                                    specific use case.
+                                  </span>
+                                  <TooltipArrow />
+                                </TooltipContent>
+                              </TooltipPortal>
+                            </Tooltip>
+                          </div>
+
+                          <div className="flex items-center justify-between">
+                            <Input value="HNSWLib" disabled />
+                          </div>
+                        </div>
+                        <AssistantSetting
+                          componentData={componentDataAssistantSetting}
+                        />
                       </div>
-                      {activeThread?.assistants[0]?.tools[0].enabled && (
-                        <div className="pb-4 pt-2">
-                          <div className="mb-4">
-                            <div className="item-center mb-2 flex">
-                              <label
-                                id="embedding-model"
-                                className="inline-flex font-bold text-zinc-500 dark:text-gray-300"
-                              >
-                                Embedding Model
-                              </label>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <InfoIcon
-                                    size={16}
-                                    className="ml-2 flex-shrink-0 dark:text-gray-500"
-                                  />
-                                </TooltipTrigger>
-                                <TooltipPortal>
-                                  <TooltipContent
-                                    side="top"
-                                    className="max-w-[240px]"
-                                  >
-                                    <span>
-                                      Embedding model is crucial for
-                                      understanding and processing the input
-                                      text effectively by converting text to
-                                      numerical representations. Align the model
-                                      choice with your task, evaluate its
-                                      performance, and consider factors like
-                                      resource availability. Experiment to find
-                                      the best fit for your specific use case.
-                                    </span>
-                                    <TooltipArrow />
-                                  </TooltipContent>
-                                </TooltipPortal>
-                              </Tooltip>
-                            </div>
-
-                            <div className="flex items-center justify-between">
-                              <Input value={selectedModel?.name} disabled />
-                            </div>
-                          </div>
-                          <div className="mb-4">
-                            <div className="mb-2 flex items-center">
-                              <label
-                                id="vector-database"
-                                className="inline-block font-bold text-zinc-500 dark:text-gray-300"
-                              >
-                                Vector Database
-                              </label>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <InfoIcon
-                                    size={16}
-                                    className="ml-2 flex-shrink-0 dark:text-gray-500"
-                                  />
-                                </TooltipTrigger>
-                                <TooltipPortal>
-                                  <TooltipContent
-                                    side="top"
-                                    className="max-w-[240px]"
-                                  >
-                                    <span>
-                                      Vector Database is crucial for efficient
-                                      storage and retrieval of embeddings.
-                                      Consider your specific task, available
-                                      resources, and language requirements.
-                                      Experiment to find the best fit for your
-                                      specific use case.
-                                    </span>
-                                    <TooltipArrow />
-                                  </TooltipContent>
-                                </TooltipPortal>
-                              </Tooltip>
-                            </div>
-
-                            <div className="flex items-center justify-between">
-                              <Input value="HNSWLib" disabled />
-                            </div>
-                          </div>
-                          <AssistantSetting
-                            componentData={componentDataAssistantSetting}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </CardSidebar>
-                </div>
+                    )}
+                  </div>
+                </CardSidebar>
               )}
           </div>
         )}