diff --git a/src/components/bot-visibility-toggle.tsx b/src/components/bot-visibility-toggle.tsx
index 49f0887..b6b3d4a 100644
--- a/src/components/bot-visibility-toggle.tsx
+++ b/src/components/bot-visibility-toggle.tsx
@@ -9,19 +9,13 @@ import {
 import { BotIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Toggle } from "@/components/ui/toggle";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useDockviewStore } from "@/stores/dockview";
-import { DefaultDockviewOptions } from "@/config/dockview";
 
 export default function BotVisibilityToggle() {
   const { api } = useDockviewStore();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isBotVisible, setBotVisible] = useState<boolean>(false);
 
-  const botOption = DefaultDockviewOptions.find(
-    (option) => option.id === "Bot"
-  );
-
   useEffect(() => {
     if (api) {
       const panel = api.getPanel("Bot");
@@ -31,7 +25,6 @@ export default function BotVisibilityToggle() {
   }, [api]);
 
   const handleBotToggle = (newState: boolean) => {
-    setBotVisible(newState);
     if (!api) return;
 
     const panel = api.getPanel("Bot");
@@ -39,14 +32,24 @@ export default function BotVisibilityToggle() {
     if (newState) {
       if (panel) {
         panel.api.setActive();
-      } else if (botOption) {
-        api.addPanel(botOption).api.setActive();
+      } else {
+        api.addPanel({
+          id: "Bot",
+          component: "Bot",
+          tabComponent: "Bot",
+          title: "Bot",
+          position: {
+            direction: "right",
+          },
+        });
       }
     } else {
       if (panel) {
         api.removePanel(panel);
       }
     }
+
+    setBotVisible(newState);
   };
 
   return (
@@ -54,19 +57,16 @@ export default function BotVisibilityToggle() {
       <Tooltip>
         <TooltipTrigger asChild>
           <div>
-            {isLoading ? (
-              <Skeleton className="h-8 w-8 rounded-lg" />
-            ) : (
-              <Toggle
-                aria-label="Toggle bot"
-                pressed={isBotVisible}
-                onPressedChange={handleBotToggle}
-                size="sm"
-                className="rounded-lg"
-              >
-                <BotIcon size={16} aria-hidden="true" />
-              </Toggle>
-            )}
+            <Toggle
+              aria-label="Toggle bot"
+              pressed={isBotVisible}
+              onPressedChange={handleBotToggle}
+              size="sm"
+              className="rounded-lg"
+              disabled={isLoading}
+            >
+              <BotIcon size={16} aria-hidden="true" />
+            </Toggle>
           </div>
         </TooltipTrigger>
         <TooltipContent className="px-2 py-1 text-xs">