diff --git a/components/calendar-notepad.tsx b/components/calendar-notepad.tsx
index 0c439613..8cc9d44d 100644
--- a/components/calendar-notepad.tsx
+++ b/components/calendar-notepad.tsx
@@ -91,7 +91,7 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
   };
 
   return (
-    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 max-w-2xl mx-auto my-4 border">
+    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 w-full my-4 border">
       <div className="flex items-center justify-between mb-4">
         <button
           onClick={() => setDateOffset(dateOffset - 7)}
diff --git a/components/chat.tsx b/components/chat.tsx
index 2a775600..630a0faf 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -120,7 +120,7 @@ export function Chat({ id }: ChatProps) {
       <HeaderSearchButton />
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
-      <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
+      <div className="w-3/5 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
         {isCalendarOpen ? (
           <CalendarNotepad chatId={id} />
         ) : (
@@ -139,7 +139,7 @@ export function Chat({ id }: ChatProps) {
         )}
       </div>
         <div
-          className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
+          className="w-2/5 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
           {activeView ? <SettingsView /> : <Mapbox />}
diff --git a/components/header.tsx b/components/header.tsx
index 5b5c564a..7e1574d0 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -17,7 +17,7 @@ import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
 
 export const Header = () => {
-  const { toggleCalendar } = useCalendarToggle()
+  const { toggleCalendar, isCalendarOpen } = useCalendarToggle()
   return (
     <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-10 backdrop-blur md:backdrop-blur-none bg-background/80 md:bg-transparent">
       <div>
@@ -38,7 +38,7 @@ export const Header = () => {
         
         <MapToggle />
         
-        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar">
+        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" className={cn(isCalendarOpen && "bg-accent")}>
           <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index d1cd17da..1e04be66 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -26,7 +26,7 @@ interface MobileIconsBarProps {
 export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClick }) => {
   const [, setMessages] = useUIState<typeof AI>()
   const { clearChat } = useActions()
-  const { toggleCalendar } = useCalendarToggle()
+  const { toggleCalendar, isCalendarOpen } = useCalendarToggle()
 
   const handleNewChat = async () => {
     setMessages([])
@@ -42,7 +42,7 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
         <CircleUserRound className="h-[1.2rem] w-[1.2rem]" />
       </Button>
       <MapToggle />
-      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar">
+      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" className={isCalendarOpen ? "bg-accent" : ""}>
         <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
       <Button variant="ghost" size="icon">