diff --git a/apps/web/components/AI/AIActivityAsk.tsx b/apps/web/components/AI/AIActivityAsk.tsx
index 75281795..bc21baeb 100644
--- a/apps/web/components/AI/AIActivityAsk.tsx
+++ b/apps/web/components/AI/AIActivityAsk.tsx
@@ -2,7 +2,7 @@ import { useSession } from '@components/Contexts/SessionContext'
 import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
 import Avvvatars from 'avvvatars-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { FlaskConical, Keyboard, Sparkle, Sparkles, X } from 'lucide-react'
+import { FlaskConical, Keyboard, MessageCircle, Sparkle, Sparkles, X } from 'lucide-react'
 import Image from 'next/image';
 import { send } from 'process';
 import learnhouseAI_icon from "public/learnhouse_ai_simple.png";
@@ -19,8 +19,9 @@ function AIActivityAsk(props: AIActivityAskProps) {
     const [isAIModalOpen, setIsAIModalOpen] = React.useState(false);
 
 
+
     return (
-        <div>
+        <div className=''>
             <ActivityChatMessageBox isAIModalOpen={isAIModalOpen} setIsAIModalOpen={setIsAIModalOpen} activity={props.activity} />
             <div
                 onClick={() => setIsAIModalOpen(true)}
@@ -59,12 +60,16 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
 
     // TODO : come up with a better way to handle this
     const inputClass = isWaitingForResponse
-        ? 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30'
+        ? 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
         : 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30';
 
-    React.useEffect(() => {
-
-    }, [session]);
+    useEffect(() => {
+        if (props.isAIModalOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+    }, [props.isAIModalOpen]);
 
     function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
         if (event.key === 'Enter') {
@@ -106,7 +111,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
         if (messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
         }
-        
+
     }, [messages, session]);
 
 
@@ -116,11 +121,12 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                 initial={{ y: 20, opacity: 0.3, filter: 'blur(5px)' }}
                 animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
                 transition={{ type: "spring", bounce: 0.35, duration: 1.7, mass: 0.2, velocity: 2 }}
-                className='fixed top-0 left-0 w-full h-full z-50 flex justify-center items-center'
+                className='fixed top-0 left-0 w-full h-full z-50 flex justify-center items-center '
+                style={{ pointerEvents: 'none' }}
             >
                 <div
                     style={{
-
+                        pointerEvents: 'auto',
                         background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)'
                     }}
                     className="bg-black z-50 rounded-2xl max-w-screen-2xl w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md">
@@ -149,9 +155,9 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                             <div ref={messagesEndRef} />
                         </div>
                     ) : (
-                        <AIMessagePlaceHolder />
+                        <AIMessagePlaceHolder sendMessage={sendMessage} activity_uuid={props.activity.activity_uuid} />
                     )}
-                    <div className='flex space-x-2'>
+                    <div className='flex space-x-2 items-center'>
                         <div className=''>
                             <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
                         </div>
@@ -159,6 +165,9 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                             <input onKeyDown={handleKeyDown} onChange={handleChange} disabled={isWaitingForResponse} value={chatInputValue} placeholder='Ask AI About this Lecture' type="text" className={inputClass} name="" id="" />
 
                         </div>
+                        <div className=''>
+                            <MessageCircle size={20} className='text-white/50 hover:cursor-pointer' onClick={() => sendMessage(chatInputValue)} />
+                        </div>
                     </div>
                 </div>
             </motion.div>
@@ -202,16 +211,17 @@ function AIMessage(props: AIMessageProps) {
     )
 }
 
-const AIMessagePlaceHolder = () => {
+const AIMessagePlaceHolder = (props : {activity_uuid : string, sendMessage : any}) => {
+    const session = useSession() as any;
     return (
         <div className='flex-col h-[237px] w-full'>
-            <div className='flex flex-col text-center justify-center pt-5'>
+            <div className='flex flex-col text-center justify-center pt-12'>
                 <Image width={80} className='mx-auto' src={learnhouseAI_logo_black} alt="" />
-                <p className='pt-3 text-xl text-white/60'>How can we help today ?</p>
-                <div className='questions flex space-x-2 mx-auto pt-3 flex-wrap w-[500px] justify-center'>
-                    <span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Explain in simple examples</span>
-                    <span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Generate flashcards</span>
-                    <span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Break down in concepts</span>
+                <p className='pt-3 text-2xl font-semibold text-white/60'>Hello {session.user.username}, How can we help today ?</p>
+                <div className='questions flex space-x-3 mx-auto pt-14 flex-wrap   justify-center'>
+                    <span onClick={() => props.sendMessage('Explain this Course in Simple examples.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Explain in simple examples</span>
+                    <span onClick={() => props.sendMessage('Generate flashcards about this course and this lecture.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Generate flashcards</span>
+                    <span onClick={() => props.sendMessage('Break down this Course in concepts.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Break down in concepts</span>
                 </div>
             </div>
         </div>