diff --git a/components/chat.tsx b/components/chat.tsx
index e4dc13a8..07967701 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -44,7 +44,7 @@ export function Chat({ id }: ChatProps) {
   useEffect(() => {
     // Check if device is mobile
     const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
+      setIsMobile(window.innerWidth < 1024)
     }
     
     // Initial check
diff --git a/components/copilot.tsx b/components/copilot.tsx
index b62b37ed..53fc4b9b 100644
--- a/components/copilot.tsx
+++ b/components/copilot.tsx
@@ -146,7 +146,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
                   }
                 />
                 <label
-                  className="text-sm whitespace-nowrap pr-4"
+                  className="text-sm pr-4"
                   htmlFor={option?.value}
                 >
                   {option?.label}
diff --git a/components/settings/components/settings.tsx b/components/settings/components/settings.tsx
index 0d201916..11b3e6ac 100644
--- a/components/settings/components/settings.tsx
+++ b/components/settings/components/settings.tsx
@@ -153,10 +153,18 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
         <div className="space-y-6">
           <Tabs.Root value={currentTab} onValueChange={setCurrentTab} className="w-full">
             <Tabs.List className="grid w-full grid-cols-4 gap-x-2">
-              <Tabs.Trigger value="system-prompt" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">System Prompt</Tabs.Trigger>
-              <Tabs.Trigger value="model" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Model Selection</Tabs.Trigger>
-              <Tabs.Trigger value="user-management" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">User Management</Tabs.Trigger>
-              <Tabs.Trigger value="map" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Map</Tabs.Trigger>
+              <Tabs.Trigger value="system-prompt" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">System Prompt</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="model" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">Model Selection</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="user-management" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">User Management</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="map" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">Map</Button>
+              </Tabs.Trigger>
             </Tabs.List>
             <AnimatePresence mode="wait">
               <motion.div
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 22d68deb..1334aba7 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {