diff --git a/apps/web/src/components/ui/AstralBackground.tsx b/apps/web/src/components/ui/AstralBackground.tsx
index f1e11aaa3..c3457e42a 100644
--- a/apps/web/src/components/ui/AstralBackground.tsx
+++ b/apps/web/src/components/ui/AstralBackground.tsx
@@ -120,9 +120,9 @@ export function AstralBackground() {
       <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/20 dark:to-black/80" />
 
       {/* Nebulas - Optimized opacity for themes */}
-      <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-cyan/5 dark:bg-cyan/5 blur-[120px] animate-pulse" />
+      <div className="absolute top-[-20%] left-[-10%] w-3/5 h-3/5 rounded-full bg-cyan/5 dark:bg-cyan/5 blur-[120px] animate-pulse" />
       <div
-        className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-magenta/5 dark:bg-magenta/5 blur-[120px] animate-pulse"
+        className="absolute bottom-[-20%] right-[-10%] w-3/5 h-3/5 rounded-full bg-magenta/5 dark:bg-magenta/5 blur-[120px] animate-pulse"
         style={{ animationDelay: '2s' }}
       />
 
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 7ed484633..9b108fbf2 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -192,7 +192,7 @@ export const ChatInput: React.FC = () => {
                 <div className="relative shadow-2xl rounded-xl overflow-hidden border border-white/10">
                   <Suspense
                     fallback={
-                      <div className="w-[21.875rem] h-[28rem] bg-card flex items-center justify-center">
+                      <div className="w-[21.875rem] h-96 max-h-layout-list bg-card flex items-center justify-center">
                         <LoadingSpinner />
                       </div>
                     }
diff --git a/apps/web/src/features/chat/components/ChatMessage.tsx b/apps/web/src/features/chat/components/ChatMessage.tsx
index f937b343f..2a9e505d9 100644
--- a/apps/web/src/features/chat/components/ChatMessage.tsx
+++ b/apps/web/src/features/chat/components/ChatMessage.tsx
@@ -42,7 +42,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
   return (
     <div
       className={cn(
-        'group flex flex-col gap-1 max-w-[80%] mb-4 relative',
+        'group flex flex-col gap-1 max-w-4/5 mb-4 relative',
         isMe ? 'ml-auto items-end' : 'mr-auto items-start',
       )}
     >
@@ -155,7 +155,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
             <div className="relative shadow-2xl rounded-xl overflow-hidden border border-white/10 animate-scaleIn">
               <Suspense
                 fallback={
-                  <div className="w-[18.75rem] h-[25rem] bg-card flex items-center justify-center">
+                  <div className="w-[18.75rem] h-96 max-h-layout-list bg-card flex items-center justify-center">
                     <LoadingSpinner size="sm" />
                   </div>
                 }