diff --git a/app/components/KnowledgeQuest.tsx b/app/components/KnowledgeQuest.tsx
index 1e52ee2..c9a18f9 100644
--- a/app/components/KnowledgeQuest.tsx
+++ b/app/components/KnowledgeQuest.tsx
@@ -617,7 +617,7 @@ const App: React.FC = () => {
                                 <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Knowledge Quests</p>
                             </div>
                             <div className='flex justify-center place-items-center'>
-                                <button className='bg-[#000] py-2.5 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
+                                <button className='bg-[#000] py-2.5 px-3 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
                                     <img src="../../assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
                                 </button>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
@@ -653,7 +653,7 @@ const App: React.FC = () => {
                                         <TabPane className='' tab="All" key="1">
                                             <div className='flex flex-col gap-6'>
                                                 {knowledgeData.map(data => (
-                                                    <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
+                                                    <div key={data.id} className='flex flex-col lg:flex-row justify-between px-6 place-items-center'>
                                                         <div className='flex flex-row justify-between gap-6'>
                                                             <img src={data.img} alt="" />
                                                             <div className='flex flex-col space-y-3'>
@@ -670,13 +670,17 @@ const App: React.FC = () => {
                                         <TabPane tab="Completed" key="2">
                                             <div className='flex flex-col gap-6'>
                                                 {knowledgeData.map(data => (
-                                                    <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
+                                                    <div key={data.id} className='flex flex-col lg:flex-row justify-between px-6 place-items-center'>
                                                         <div className='flex flex-row justify-between gap-6'>
                                                             <img src={data.img} alt="" />
                                                             <div className='flex flex-col space-y-3'>
                                                             <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
                                                             <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
-                                                            <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
+                                                            <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question} | 200 people have taken this quiz</p>
+                                                            <div className='flex flex-col md:flex-row gap-x-20'>
+                                                                <p className='text-[14px] font-[600]'>Score: 9/10</p>
+                                                                <p className='text-[14px] font-[600] inline-flex place-items-center'>Earned: 9 &nbsp;<img src="../../assets/points-icon.svg" alt="" /></p>
+                                                            </div>
                                                         </div>
                                                         </div>
                                                         <p className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</p>
@@ -720,7 +724,7 @@ const App: React.FC = () => {
                                 </div>
                                 <div className='flex flex-col'>
                                     {sortedData.slice(3).map(data => (
-                                        <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
+                                        <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2 hover:bg-[#FDF2E7] duration-700'>
                                             <p className='text-[11px] font-[700]'># {data.rank}</p>
                                             <img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
                                             <div>
diff --git a/app/routes/ai-quiz.tsx b/app/routes/ai-quiz.tsx
new file mode 100644
index 0000000..f36fbf2
--- /dev/null
+++ b/app/routes/ai-quiz.tsx
@@ -0,0 +1,15 @@
+import React, {useState} from "react";
+
+export default function Index(){
+    return(
+        <section className='container-fluid bg-[#000]'>
+            <div className="flex flex-row justify-center gap-x-8 py-3">
+                <img src="../../assets/ai-button-icon.svg" alt="" />
+                <div className="flex flex-col">
+                    <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
+                    <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+                </div>
+            </div>
+        </section>
+    )
+}
\ No newline at end of file