diff --git a/actions/dashboard/ExamPreparationActions.tsx b/actions/dashboard/ExamPreparationActions.tsx
index 76af85bc..bc56cf65 100644
--- a/actions/dashboard/ExamPreparationActions.tsx
+++ b/actions/dashboard/ExamPreparationActions.tsx
@@ -72,12 +72,12 @@ export async function continueConversation (
             You and the user can discuss the exam and the student's performance
 
             Messages inside [] means that it's a UI element or a user event. For example:
-            - [showExamnForm] means that the user will see an exam form and fill it out
-            - [showExamnResult] means that the user will see the result of the exam he took
-            - [examnsSuggestions] means that the user will see suggestions for exams he can take
+            - [showExamForm] means that the user will see an exam form and fill it out
+            - [showExamResult] means that the user will see the result of the exam he took
+            - [examsSuggestions] means that the user will see suggestions for exams he can take
 
-            If the user requests a exam or quiz, call \`showExamnForm\` to show the exam form. after an exan is taken, call \`showExamnResult\` to show the result of the exam.
-            As a teacher, if the user ask for an exam but is vague, you can suggest exams to the user by calling \`examnsSuggestions\` or if the user is asking for suggestions.
+            If the user requests a exam or quiz, call \`showExamForm\` to show the exam form. after an exan is taken, call \`showExamResult\` to show the result of the exam.
+            As a teacher, if the user ask for an exam but is vague, you can suggest exams to the user by calling \`examsSuggestions\` or if the user is asking for suggestions.
 
             Besides that, you can also chat with users about possible topics for exams, or any other topic you want to discuss with the user that goes along with the exam preparation as this is a exam preparation chat.
         `,
@@ -118,7 +118,7 @@ export async function continueConversation (
             )
         },
         tools: {
-            showExamnForm: {
+            showExamForm: {
                 description: 'Show the user an exam form to fill out for an exam preparationn, this form will be sent to the user and he will anwser it',
                 parameters: z.object({
                     singleSelectQuestion: z.array(z.object({
@@ -182,7 +182,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-call',
-                                        toolName: 'showExamnForm',
+                                        toolName: 'showExamForm',
                                         toolCallId,
                                         args: {
                                             singleSelectQuestion,
@@ -199,7 +199,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-result',
-                                        toolName: 'showExamnForm',
+                                        toolName: 'showExamForm',
                                         toolCallId,
                                         result: {
                                             singleSelectQuestion,
@@ -230,7 +230,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-call',
-                                    toolName: 'showExamnForm',
+                                    toolName: 'showExamForm',
                                     toolCallId,
                                     result: {
                                         singleSelectQuestion,
@@ -248,7 +248,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-result',
-                                    toolName: 'showExamnForm',
+                                    toolName: 'showExamForm',
                                     toolCallId,
                                     result: {
                                         singleSelectQuestion,
@@ -284,7 +284,7 @@ export async function continueConversation (
                     )
                 }
             },
-            showExamnResult: {
+            showExamResult: {
                 description: 'Show the user the result of the exam he took',
                 parameters: z.object({
                     score: z.number().int().describe('The grade of the student in the exam with a scale from 0 to 20'),
@@ -313,7 +313,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-call',
-                                        toolName: 'showExamnResult',
+                                        toolName: 'showExamResult',
                                         toolCallId,
                                         args: {
                                             score,
@@ -329,7 +329,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-result',
-                                        toolName: 'showExamnResult',
+                                        toolName: 'showExamResult',
                                         toolCallId,
                                         result: {
                                             score,
@@ -361,7 +361,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-call',
-                                    toolName: 'showExamnResult',
+                                    toolName: 'showExamResult',
                                     toolCallId,
                                     result: {
                                         score,
@@ -378,7 +378,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-result',
-                                    toolName: 'showExamnResult',
+                                    toolName: 'showExamResult',
                                     toolCallId,
                                     result: {
                                         score,
@@ -408,14 +408,14 @@ export async function continueConversation (
                     )
                 }
             },
-            examnsSuggestions: {
-                description: 'Show the user suggestions for exams he can take',
+            examsSuggestions: {
+                description: 'Show the user suggestions for exams forms he can take',
                 parameters: z.object({
                     suggestions: z.array(z.object({
-                        title: z.string().describe('The title of the suggestion'),
-                        description: z.string().describe('The description of the suggestion'),
-                        content: z.string().describe('The content of the suggestion'),
-                        difficulty: z.string().describe('The difficulty of the examn')
+                        title: z.string().describe('The title of the suggestion for the exam'),
+                        description: z.string().describe('The description of the suggestion for the exam'),
+                        content: z.string().describe('The content of the suggestion for the exam'),
+                        difficulty: z.string().describe('The difficulty of the exam')
                     }))
                 }),
                 generate: async function * ({
@@ -435,7 +435,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-call',
-                                        toolName: 'examnsSuggestions',
+                                        toolName: 'examsSuggestions',
                                         toolCallId,
                                         args: {
                                             suggestions
@@ -449,7 +449,7 @@ export async function continueConversation (
                                 content: [
                                     {
                                         type: 'tool-result',
-                                        toolName: 'examnsSuggestions',
+                                        toolName: 'examsSuggestions',
                                         toolCallId,
                                         result: {
                                             suggestions
@@ -468,7 +468,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-call',
-                                    toolName: 'examnsSuggestions',
+                                    toolName: 'examsSuggestions',
                                     toolCallId,
                                     result: {
                                         suggestions
@@ -483,7 +483,7 @@ export async function continueConversation (
                             message: JSON.stringify([
                                 {
                                     type: 'tool-result',
-                                    toolName: 'examnsSuggestions',
+                                    toolName: 'examsSuggestions',
                                     toolCallId,
                                     result: {
                                         suggestions
@@ -600,10 +600,10 @@ export const getUIStateFromAIState = (aiState: Chat) => {
 
           message.role === 'tool' ? (
               message.content.map(tool => {
-                  // find if the next message is a showExamnResult
+                  // find if the next message is a showExamResult
                   // @ts-expect-error
-                  const isNextMessageAShowExamnResult = aiState?.messages[index + 1] ? aiState?.messages[index + 1].content[0]?.toolName === 'showExamnResult' : false
-                  return tool.toolName === 'showExamnForm' ? (
+                  const isNextMessageAShowExamnResult = aiState?.messages[index + 1] ? aiState?.messages[index + 1].content[0]?.toolName === 'showExamResult' : false
+                  return tool.toolName === 'showExamForm' ? (
                       <Message
                           sender={'assistant'}
                           time={dayjs().format('dddd, MMMM D, YYYY h:mm A')}
@@ -621,7 +621,7 @@ export const getUIStateFromAIState = (aiState: Chat) => {
                               hideSubmit={isNextMessageAShowExamnResult}
                           />
                       </Message>
-                  ) : tool.toolName === 'showExamnResult' ? (
+                  ) : tool.toolName === 'showExamResult' ? (
                       <Message
                           sender={'assistant'}
                           time={dayjs().format('dddd, MMMM D, YYYY h:mm A')}
@@ -636,7 +636,7 @@ export const getUIStateFromAIState = (aiState: Chat) => {
                               questionAndAnswerFeedback={tool.result.questionAndAnswerFeedback}
                           />
                       </Message>
-                  ) : tool.toolName === 'examnsSuggestions' ? (
+                  ) : tool.toolName === 'examsSuggestions' ? (
                       <Message
                           sender={'assistant'}
                           time={dayjs().format('dddd, MMMM D, YYYY h:mm A')}
diff --git a/app/api/lessons/chat/student/route.ts b/app/api/lessons/chat/student/route.ts
index bfcf7f54..1167d9d5 100644
--- a/app/api/lessons/chat/student/route.ts
+++ b/app/api/lessons/chat/student/route.ts
@@ -35,6 +35,7 @@ export async function POST (req: Request) {
                         })
                 }
             },
+            temperature: 0.5,
             // model: ollama('llama3'),
             messages: convertToCoreMessages(messages),
             tools: {
@@ -76,6 +77,7 @@ export async function POST (req: Request) {
         // Respond with the stream
         return result.toAIStreamResponse()
     } catch (error) {
+        console.log('Error:', error)
         return new Response('Error', { status: 500 })
     }
 }
diff --git a/app/dashboard/student/chat/[chatId]/free-chat/page.tsx b/app/dashboard/student/chat/[chatId]/free-chat/page.tsx
index 88b4937d..dfd564d3 100644
--- a/app/dashboard/student/chat/[chatId]/free-chat/page.tsx
+++ b/app/dashboard/student/chat/[chatId]/free-chat/page.tsx
@@ -27,8 +27,7 @@ export default async function FreeChatPage ({
     return (
 
         <>
-            <div className='flex flex-col gap-4 overflow-y-auto h-[calc(100vh-4rem)]'>
-
+            <div className='flex flex-col gap-4 overflow-y-auto h-[calc(100vh)] md:h-[calc(100vh-4rem)]'>
                 <FreeChat
                     chatId={Number(params.chatId)}
                     initialMessages={
diff --git a/app/dashboard/student/chat/[chatId]/layout.tsx b/app/dashboard/student/chat/[chatId]/layout.tsx
index 83ebc644..df1950f7 100644
--- a/app/dashboard/student/chat/[chatId]/layout.tsx
+++ b/app/dashboard/student/chat/[chatId]/layout.tsx
@@ -23,10 +23,7 @@ export default async function CoursesLayout ({
     }
 
     return (
-        <div className='flex flex-col gap-4 p-4'>
-            <h1 className="text-2xl font-semibold">
-                {chatData.data.title}
-            </h1>
+        <div className='flex flex-col gap-4 p-2 lg:p-4'>
             {children}
         </div>
     )
diff --git a/components/dashboards/Common/CommentsSections.tsx b/components/dashboards/Common/CommentsSections.tsx
index 74e8bc6f..c2af9e2b 100644
--- a/components/dashboards/Common/CommentsSections.tsx
+++ b/components/dashboards/Common/CommentsSections.tsx
@@ -36,7 +36,7 @@ export default async function CommentsSections ({
                 .filter(comment => comment.parent_comment_id === null)
                 .map((comment) => {
                     const user = profiles.data.find((profile) => profile.id === comment.user_id)
-                    const isReactionPresent = comment.comment_reactions.find(
+                    const isReactionPresent = comment?.comment_reactions?.find(
                         (reaction) => reaction.user_id === currentUser.data.user.id
                     )
 
diff --git a/components/dashboards/Common/chat/chat.tsx b/components/dashboards/Common/chat/chat.tsx
index 6e1ce1e3..ac9795c7 100644
--- a/components/dashboards/Common/chat/chat.tsx
+++ b/components/dashboards/Common/chat/chat.tsx
@@ -113,11 +113,12 @@ const ChatWindow = ({
     isLoading: boolean
 }) => {
     return (
-        <div className="flex-1 overflow-y-auto p-4 ">
+        <div className="flex-1 overflow-y-auto p-1 md:p-2 lg:p-4">
             {messages.map((msg, index) => {
                 if (msg.role === 'system') {
                     return null
                 }
+                if (index === 0) return null
                 return (
                     <Message
                         key={index}
@@ -151,57 +152,86 @@ const ChatWindow = ({
 const ChatInput = ({
     isLoading,
     stop,
-    callbackFunction
+    callbackFunction,
+    isTemplatePresent
 }: {
     isLoading: boolean
     stop?: () => void
     callbackFunction: (MessageType: MessageType) => void
+    isTemplatePresent?: boolean
 }) => {
     const [message, setMessage] = useState<string>('')
     const ref = useRef<MDXEditorMethods>(null)
 
     return (
-        <form
-            onSubmit={(e) => {
-                e.preventDefault()
-                callbackFunction({
-                    content: message,
-                    role: 'user',
-                    createdAt: new Date(),
-                    id: generateId()
-                })
-                setMessage('')
-                ref.current?.setMarkdown('')
-            }}
-            className="py-4 flex gap-2 flex-col w-full"
-        >
-            <ForwardRefEditor
-                className={cn(
-                    'flex-1 p-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full rich-text markdown-body',
-                    isLoading ? 'cursor-not-allowed' : 'cursor-text'
-                )}
-                placeholder="Chat with the AI assistant"
-                markdown={message}
-                onChange={(value) => setMessage(value)}
-                ref={ref}
-            />
-            <input type="hidden" value={message} />
-            {isLoading ? (
-                <Button
-                    type="button"
-                    onClick={stop}
-                    variant="outline"
-                    className="rounded-r-lg"
-                >
-          Stop
-                </Button>
-            ) : (
-                <Button type="submit" className="rounded-r-lg">
-          Send
-                </Button>
+        <>
+            {isTemplatePresent && (
+                <>
+                    <Button
+                        variant='outline'
+                        disabled={isLoading}
+                        onClick={() => {
+                            ('Template for generating exam form')
+                            setMessage('Please create an exam form for the topic of **"Your Topic"**\n---\nThe exam form should contain the following sections:\n- Multiple choice questions\n- True or False questions\n- Fill in the blanks\n- Matching questions\nI want it to have a minimum of "X" questions.\nIt should have a level of difficulty of "X".\nThe exam form should be interactive and engaging.\n')
+                            ref.current?.setMarkdown('Please create an exam form for the topic of **"Your Topic"**\n---\nThe exam form should contain the following sections:\n- Multiple choice questions\n- True or False questions\n- Fill in the blanks\n- Matching questions\nI want it to have a minimum of "X" questions.\nIt should have a level of difficulty of "X".\nThe exam form should be interactive and engaging.\n')
+                        } }
+                    >
+                    Template for generating exam form for a "X" topic
+                    </Button>
+                    <Button
+                        variant='outline'
+                        disabled={isLoading}
+                        onClick={() => {
+                            setMessage('Please help me by giving suggestions of possible exams You could generate for the given topic "Your topic"')
+                            ref.current?.setMarkdown('Please help me by giving suggestions of possible exams You could generate for the given topic "Your topic"')
+                        } }
+                    >
+                        Template for asking a suggestions of an exam form for a "X" topic
+                    </Button>
+                </>
             )}
-            <DisclaimerForUser />
-        </form>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    callbackFunction({
+                        content: message,
+                        role: 'user',
+                        createdAt: new Date(),
+                        id: generateId()
+                    })
+                    setMessage('')
+                    ref.current?.setMarkdown('')
+                }}
+                className="py-4 flex gap-2 flex-col w-full"
+            >
+                <ForwardRefEditor
+                    className={cn(
+                        'flex-1 p-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full rich-text markdown-body',
+                        isLoading ? 'cursor-not-allowed' : 'cursor-text'
+                    )}
+                    placeholder="Chat with the AI assistant"
+                    markdown={message}
+                    onChange={(value) => setMessage(value)}
+                    ref={ref}
+                />
+                <input type="hidden" value={message} />
+                {isLoading ? (
+                    <Button
+                        type="button"
+                        onClick={stop}
+                        variant="outline"
+                        className="rounded-r-lg"
+                    >
+            Stop
+                    </Button>
+                ) : (
+                    <Button type="submit" className="rounded-r-lg">
+            Send
+                    </Button>
+                )}
+                <DisclaimerForUser />
+            </form>
+        </>
     )
 }
 
diff --git a/components/dashboards/Common/comments/CommentsCard.tsx b/components/dashboards/Common/comments/CommentsCard.tsx
index ccc94478..77172129 100644
--- a/components/dashboards/Common/comments/CommentsCard.tsx
+++ b/components/dashboards/Common/comments/CommentsCard.tsx
@@ -45,7 +45,7 @@ const CommentCard = ({
     avatar: string
     date: string
     isAuthor: boolean
-    comment_reactions: Array<Tables<'comment_reactions'>>
+    comment_reactions?: Array<Tables<'comment_reactions'>>
     isReactionPresent?: Tables<'comment_reactions'>
     allComments: any[]
     profiles: Array<Tables<'profiles'>>
@@ -81,13 +81,15 @@ const CommentCard = ({
         }
     }
 
-    const reactionsForEachType = comment_reactions.reduce((acc, reaction) => {
+    const reactionsForEachType = comment_reactions?.reduce((acc, reaction) => {
         acc[reaction.reaction_type] = acc[reaction.reaction_type] + 1 || 1
         return acc
     }, {})
 
     const replies = allComments.filter(reply => reply.parent_comment_id === comment.id)
 
+    console.log(reactionsForEachType)
+
     return (
         <Card className="p-2 mb-4">
             <CardHeader className="flex p-2 flex-row items-start gap-4 bg-card">
@@ -146,7 +148,7 @@ const CommentCard = ({
                         <Popover>
                             <PopoverTrigger>
                                 <button className="flex items-center gap-2 text-gray-600 hover:text-gray-800">
-                                    {reactionTypes.map(({ type, icon: Icon }) => (
+                                    {reactionsForEachType && reactionTypes?.map(({ type, icon: Icon }) => (
                                         <ReactionButton
                                             key={type}
                                             type={reactionsForEachType[type] ? reactionTypes.find(rt => rt.type === type).color : ''}
@@ -159,7 +161,7 @@ const CommentCard = ({
                             </PopoverTrigger>
                             <PopoverContent className="p-2 bg-white border rounded-md shadow-sm w-fit">
                                 <div className="flex items-center gap-4 h-7">
-                                    {reactionTypes.map(({ type, icon: Icon, color }) => (
+                                    {reactionsForEachType && reactionTypes?.map(({ type, icon: Icon, color }) => (
                                         <ReactionButton
                                             key={type}
                                             type={color}
@@ -193,10 +195,10 @@ const CommentCard = ({
                                             course_id={course_id}
                                             name={replyUser?.full_name || 'Unknown'}
                                             avatar={replyUser?.avatar_url || '/img/favicon.png'}
-                                            date={dayjs(reply.created_at).format('DD/MM/YYYY: HH:mm')}
+                                            date={dayjs(reply?.created_at).format('DD/MM/YYYY: HH:mm')}
                                             isAuthor={isReplyAuthor}
-                                            comment_reactions={reply.comment_reactions}
-                                            isReactionPresent={reply.comment_reactions.find(
+                                            comment_reactions={reply?.comment_reactions}
+                                            isReactionPresent={reply?.comment_reactions?.find(
                                                 (reaction) => reaction.user_id === currentUser.id
                                             )}
                                             allComments={allComments}
diff --git a/components/dashboards/student/chat/ExamPrepAiComponent.tsx b/components/dashboards/student/chat/ExamPrepAiComponent.tsx
index 91443d5d..046aa7b0 100644
--- a/components/dashboards/student/chat/ExamPrepAiComponent.tsx
+++ b/components/dashboards/student/chat/ExamPrepAiComponent.tsx
@@ -6,7 +6,11 @@ import { useForm } from 'react-hook-form'
 
 import { AI } from '@/actions/dashboard/ExamPreparationActions'
 import { Button, buttonVariants } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+    Card, CardContent, CardDescription,
+    CardFooter,
+    CardHeader, CardTitle
+} from '@/components/ui/card'
 import { Form } from '@/components/ui/form'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
@@ -138,7 +142,7 @@ export default function ExamPrepAiComponent ({
         .join('')}.
         This is the object of the user submission: ${JSON.stringify(submission, null, 2)}
 
-        [showExamnResult, please call the function \`showExamnResult\` with the user submission object as the argument.]
+        [showExamResult, please call the function \`showExamResult\` with the user submission object as the argument.]
         `
 
         console.log(content)
@@ -357,64 +361,70 @@ function MatchingTextQuestionComponent ({ question, isFinished, form }: { questi
     const isMatched = (leftId: string, rightId: string): boolean => matchedPairs[leftId] === rightId
 
     return (
-        <div className="space-y-4">
-            <h2 className="text-xl font-bold mb-4">
-            Matching Text Question
-            </h2>
-            <div className="grid grid-cols-2 gap-8">
-                <div className="flex flex-col gap-4">
-                    {question.leftColumn.map((item) => (
-                        <div
-                            key={item.id}
-                            className={cn(
-                                isItemDisabled(item, 'left') ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer',
-                                getBackgroundColor(item, 'left'),
-                                'flex gap-4 items-center justify-between py-4 h-12'
-                            )}
-                            onClick={() => {
-                                if (isFinished) return
-                                !isItemDisabled(item, 'left') && handleLeftClick(item)
-                            }}
-                        >
-                            <span>{item.text}</span>
-                            {matchedPairs[item.id] && (
-                                <Button
-                                    variant='destructive'
-                                    onClick={() => handleDeselect(item.id)}
-                                    disabled={isFinished}
-                                >
+        <Card>
+            <CardHeader>
+                <CardTitle>Matching Text Question</CardTitle>
+                <CardDescription>Match the items in the left column with the items in the right column by clicking on the items.</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className="grid grid-cols-2 gap-8">
+                    <div className="flex flex-col gap-4">
+                        {question.leftColumn.map((item) => (
+                            <div
+                                key={item.id}
+                                className={cn(
+                                    isItemDisabled(item, 'left') ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer',
+                                    getBackgroundColor(item, 'left'),
+                                    'flex gap-4 items-center justify-between py-4 h-12'
+                                )}
+                                onClick={() => {
+                                    if (isFinished) return
+                                    !isItemDisabled(item, 'left') && handleLeftClick(item)
+                                }}
+                            >
+                                <span>{item.text}</span>
+                                {matchedPairs[item.id] && (
+                                    <Button
+                                        variant='destructive'
+                                        onClick={() => handleDeselect(item.id)}
+                                        disabled={isFinished}
+                                    >
                     Cancel
-                                </Button>
-                            )}
-                        </div>
-                    ))}
-                </div>
-                <div className="flex flex-col gap-4">
-                    {question.rightColumn.map((item) => (
-                        <div
-                            key={item.id}
-                            className={cn(
-                                isItemDisabled(item, 'right') ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer',
-                                getBackgroundColor(item, 'right'),
-                                'flex gap-4 items-center justify-between py-4 h-12'
-                            )}
-                            onClick={() => !isItemDisabled(item, 'right') && handleRightClick(item)}
-                        >
-                            <span>{item.text}</span>
-                            {Object.keys(matchedPairs).map((leftId) => (
-                                isMatched(leftId, item.id) && (
-                                    <span key={item.id} className="ml-2 text-lg">{' (Matched)'}</span>
-                                )
-                            ))}
-                        </div>
-                    ))}
-                </div>
-            </div>
-            {selectedLeft && (
-                <div className="text-center mt-4 text-gray-700">
-                    <p>Selected: {selectedLeft.text}</p>
+                                    </Button>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    <div className="flex flex-col gap-4">
+                        {question.rightColumn.map((item) => (
+                            <div
+                                key={item.id}
+                                className={cn(
+                                    isItemDisabled(item, 'right') ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer',
+                                    getBackgroundColor(item, 'right'),
+                                    'flex gap-4 items-center justify-between py-4 h-12'
+                                )}
+                                onClick={() => !isItemDisabled(item, 'right') && handleRightClick(item)}
+                            >
+                                <span>{item.text}</span>
+                                {Object.keys(matchedPairs).map((leftId) => (
+                                    isMatched(leftId, item.id) && (
+                                        <span key={item.id} className="ml-2 text-lg">{' (Matched)'}</span>
+                                    )
+                                ))}
+                            </div>
+                        ))}
+                    </div>
                 </div>
-            )}
-        </div>
+            </CardContent>
+            <CardFooter>
+
+                {selectedLeft && (
+                    <div className="text-center mt-4 text-gray-700">
+                        <p>Selected: {selectedLeft.text}</p>
+                    </div>
+                )}
+            </CardFooter>
+        </Card>
     )
 }
diff --git a/components/dashboards/student/chat/ExamPrepChat.tsx b/components/dashboards/student/chat/ExamPrepChat.tsx
index 035924bd..cee55602 100644
--- a/components/dashboards/student/chat/ExamPrepChat.tsx
+++ b/components/dashboards/student/chat/ExamPrepChat.tsx
@@ -31,7 +31,7 @@ export default function ExamPrepChat ({
         if (!lastMessage) return
         if (lastMessage.role === 'tool') {
             const [toolCalled] = lastMessage.content
-            const isShowExamnForm = toolCalled.toolName === 'showExamnForm'
+            const isShowExamnForm = toolCalled.toolName === 'showExamForm'
             setHideInput(isShowExamnForm)
         }
     }
@@ -52,17 +52,17 @@ export default function ExamPrepChat ({
                     <SuggestionsContainer
                         suggestions={[
                             {
-                                title: 'help me creating a basic python examn form',
+                                title: 'help me creating a basic python exam form',
                                 description:
                   'This will help you to create a basic python exam form'
                             },
                             {
-                                title: 'help me creating a basic Javascipt examn form',
+                                title: 'help me creating a basic Javascipt exam form',
                                 description:
                   'This will help you to create a basic Javascript exam form'
                             },
                             {
-                                title: 'help me creating a basic HTML examn form',
+                                title: 'help me creating a basic HTML exam form',
                                 description:
                   'This will help you to create a basic HTML exam form'
                             }
@@ -100,19 +100,19 @@ export default function ExamPrepChat ({
             )}
             <ScrollArea
                 ref={scrollRef} // Add this line
-                className="flex-1 w-full rounded-md border p-4 lg:h-[calc(100vh-8rem)] h-[calc(100vh-4rem)]"
+                className="flex-1 w-full p-1 lg:h-[calc(100vh-8rem)] h-[calc(100vh-0.5rem)]"
             >
                 {conversation.length ? (
                     <ChatList messages={conversation} />
                 ) : (
                     <div className="flex-1 flex items-center justify-center my-4">
                         <p className="text-gray-400">
-                            Please write a message with the examn you want, like "help me creating a basic
+                            Please write a message with the exam you want, like "help me creating a basic
                             <span
                                 className="text-gray-600 font-semibold"
                             >
                             [Exam Subject]
-                            </span> examn form for me please"
+                            </span> exam form for me please"
                         </p>
                     </div>
                 )}
@@ -128,6 +128,7 @@ export default function ExamPrepChat ({
                     <ChatInput
                         isLoading={isLoading}
                         stop={() => setStop(true)}
+                        isTemplatePresent={true}
                         callbackFunction={async (input) => {
                             if (stop) return
 
diff --git a/components/dashboards/student/chat/ExamnSuggestions.tsx b/components/dashboards/student/chat/ExamnSuggestions.tsx
index 5a645b34..e8d4d895 100644
--- a/components/dashboards/student/chat/ExamnSuggestions.tsx
+++ b/components/dashboards/student/chat/ExamnSuggestions.tsx
@@ -10,7 +10,7 @@ import { cn } from '@/utils'
 
 import ChatLoadingSkeleton from './ChatLoadingSkeleton'
 
-interface ExamnSuggestion {
+interface ExamSuggestion {
     title: string
     description: string
     content: string
@@ -22,20 +22,20 @@ export default function ExamnSuggestions ({
     suggestions,
     disabled
 }: {
-    suggestions: ExamnSuggestion[]
+    suggestions: ExamSuggestion[]
     disabled?: boolean
 }) {
     const [isLoading, setIsLoading] = useState(false)
     const { continueConversation } = useActions()
     const [_, setMessages] = useUIState<typeof AI>()
-    const [selectedSuggestion, setSelectedSuggestion] = useState<ExamnSuggestion | null>(null)
+    const [selectedSuggestion, setSelectedSuggestion] = useState<ExamSuggestion | null>(null)
 
-    async function onSuggestionClick (suggestion: ExamnSuggestion) {
+    async function onSuggestionClick (suggestion: ExamSuggestion) {
         setIsLoading(true)
         try {
-            const message = `Help me creating an examn form for ${suggestion.title}
+            const message = `Help me creating an exam form for ${suggestion.title}
             ---
-            # Examn Form
+            # Exam Form
             title: ${suggestion.title}
             description: ${suggestion.description}
             content: ${suggestion.content}
diff --git a/components/dashboards/student/course/lessons/TaksMessages.tsx b/components/dashboards/student/course/lessons/TaksMessages.tsx
index 93ddeea2..6280d7e5 100644
--- a/components/dashboards/student/course/lessons/TaksMessages.tsx
+++ b/components/dashboards/student/course/lessons/TaksMessages.tsx
@@ -23,7 +23,7 @@ function useChatLogic (
         maxAutomaticRoundtrips: 5,
         body: { lessonId },
         initialMessages: [
-            { role: 'system', content: systemPrompt, id: generateId() },
+            { role: 'assistant', content: systemPrompt, id: generateId() },
             ...initialMessages.map((msg) => ({
                 role: msg.sender,
                 content: msg.message,