diff --git a/app/components/AlbumArt&Craft.tsx b/app/components/AlbumArt&Craft.tsx
new file mode 100644
index 0000000..3fe00de
--- /dev/null
+++ b/app/components/AlbumArt&Craft.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Image } from 'antd';
+import Index from './AdminNav';
+const fallBackImage = "data:image/png;base64,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";
+
+let artCraftImage = [
+    {
+        id: "1",
+        img: "/assets/aimage1.jpg",
+    },
+    {
+        id: "2",
+        img: "/assets/aimage2.jpg",
+    },
+    {
+        id: "3",
+        img: "/assets/aimage3.jpg",
+    },
+    {
+        id: "4",
+        img: "/assets/aimage4.jpg",
+    },
+    {
+        id: "5",
+        img: "/assets/aimage5.jpg",
+    },
+    {
+        id: "6",
+        img: "/assets/aimage2.jpg",
+    },
+    {
+        id: "7",
+        img: "/assets/aimage4.jpg",
+    }
+]
+
+const App: React.FC = () => (
+    <Image.PreviewGroup fallback={fallBackImage} preview={{onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),}}>
+        <div className=''>
+            <section className='container mx-auto px-4'>
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 overflow-hidden mt-10'>
+                {
+                    artCraftImage.map((data) => (
+                        // <div className='grid grid-cols-1 lg:grid-cols-3' key={data.id}></div>
+                        <Image placeholder={true} key={data.id} width={288} height={257} src={data.img}
+                        
+                        />
+                    ))
+                }
+                </div>
+            </section>
+        </div>
+    </Image.PreviewGroup>
+);
+
+export default App;
\ No newline at end of file
diff --git a/app/components/AlbumsIndex.tsx b/app/components/AlbumsIndex.tsx
new file mode 100644
index 0000000..e8f7208
--- /dev/null
+++ b/app/components/AlbumsIndex.tsx
@@ -0,0 +1,41 @@
+let albumsData = [
+    {
+        id : "1",
+        type : "Art & Craft Album",
+        img : "/assets/athumbnail1.jpg",
+        url : "/albums/art-&-craft"
+    },
+    {
+        id : "2",
+        type : "GK & Group Activity",
+        img : "/assets/athumbnail2.jpg",
+        url : "/albums/gk-&-group-activity"
+    },
+    {
+        id : "3",
+        type : "Language & Maths",
+        img : "/assets/athumbnail3.jpg",
+        url : "/albums/language-&-maths"
+    }
+]
+
+
+export default function AlbumIndex(){
+    return(
+        <div>
+            <section className="container mx-auto px-4">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
+                    {
+                        albumsData.map((data) => (
+                            <a href={data.url} key={data.id} className="rounded-[10px] border-[1px] border-[#D4D4D4] relative inline-block">
+                                <img className="w-full rounded-[10px]" src={data.img} alt="" />
+                                <h2 className="absolute bottom-6 left-6 text-[24px] font-[700] text-[#FFF] underline">{data.type}</h2>
+                            </a>
+                        ))
+                    }
+                    <div></div>
+                </div>
+            </section>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/components/StartCourse.tsx b/app/components/MyCoursePracticalModule.tsx
similarity index 83%
rename from app/components/StartCourse.tsx
rename to app/components/MyCoursePracticalModule.tsx
index 6eaab09..6f45084 100644
--- a/app/components/StartCourse.tsx
+++ b/app/components/MyCoursePracticalModule.tsx
@@ -26,7 +26,7 @@ const materialData: MaterialItem[] = [
     type: "Video",
     time: "30 mins",
     date: "28-01-2024",
-    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+    source: "https://videos.pexels.com/video-files/5538137/5538137-sd_640_360_25fps.mp4"
   },
   {
     id: 3,
@@ -53,7 +53,7 @@ const materialData: MaterialItem[] = [
     type: "Video",
     time: "30 mins",
     date: "28-01-2024",
-    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+    source: "https://videos.pexels.com/video-files/5532762/5532762-sd_960_506_25fps.mp4"
   },
   {
     id: 6,
@@ -62,7 +62,7 @@ const materialData: MaterialItem[] = [
     type: "Video",
     time: "30 mins",
     date: "28-01-2024",
-    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+    source: "https://videos.pexels.com/video-files/5538262/5538262-sd_640_360_25fps.mp4"
   }
 ];
 
@@ -93,14 +93,16 @@ const TimelineComponent = () => {
   return (
     <div>
         <section className='container mx-auto px-4'>
-            <div className='grid grid-cols-1 md:grid-cols-7'>
-                <div className='md:col-span-2 mt-4'>
-                    <Timeline items={timelineItems} />
+            <div className='grid grid-cols-1 md:grid-cols-7 gap-x-8'>
+                <div className='md:col-span-2 h-screen border-r-[1px] border-r-[#CFCFCF]'>
+                    <div className='mt-[40px]'>
+                        <Timeline items={timelineItems} />
+                    </div>
                 </div>
-                <div className='md:col-span-5'>
-                    <div>
+                <div className='md:col-span-5 '>
+                    <div className='pt-8'>
                         {selectedItem.type === 'Video' && (
-                            <video autoPlay={true} controls src={selectedItem.source} width="100%" />
+                            <video autoPlay loop controls src={selectedItem.source} width="100%" muted />
                         )}
                         {selectedItem.type === 'Reading Material' && (
                             <iframe src={selectedItem.source} width="100%" height="500px" />
diff --git a/app/components/MyCourseTheoryModule.tsx b/app/components/MyCourseTheoryModule.tsx
new file mode 100644
index 0000000..6f45084
--- /dev/null
+++ b/app/components/MyCourseTheoryModule.tsx
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { Timeline } from 'antd';
+interface MaterialItem {
+    id: number;
+    material: number;
+    title: string;
+    type: string;
+    time: string;
+    date: string;
+    source: string;
+}
+const materialData: MaterialItem[] = [
+  {
+    id: 1,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 2,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/5538137/5538137-sd_640_360_25fps.mp4"
+  },
+  {
+    id: 3,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Reading Material",
+    time: "8 mins",
+    date: "28-01-2024",
+    source: "https://pdfobject.com/pdf/sample.pdf"
+  },
+  {
+    id: 4,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "MCQ",
+    time: "5 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 5,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/5532762/5532762-sd_960_506_25fps.mp4"
+  },
+  {
+    id: 6,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/5538262/5538262-sd_640_360_25fps.mp4"
+  }
+];
+
+const TimelineComponent = () => {
+  const [selectedItem, setSelectedItem] = useState(materialData[0]);
+
+  const handleItemClick = (item : MaterialItem) => {
+    setSelectedItem(item);
+  };
+
+  const timelineItems = materialData.map((item) => ({
+    children: (
+      <div className='p-2' onClick={() => handleItemClick(item)} style={{ cursor: 'pointer', backgroundColor: item.id === selectedItem.id ? '#FFF4EA' : '#FFF'}}>
+        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {item.material} </span> | <span>{item.date} </span></p>
+        <h2 className='text-[18px] font-[700]'>{item.title}</h2>
+        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{item.type}</span> | <span>{item.time}</span></p>
+      </div>
+    ),
+    color: item.id === selectedItem.id ? '#EF7A0C' : '#CFCFCF',
+    dot: item.id === selectedItem.id
+      ? <div className='relative inline-block'>
+            <span className='' style={{ border: '4px solid #EF7A0C', borderRadius: '50%', display: 'inline-block', width: 32, height: 32 }}></span>
+            <span className='absolute inset-0 m-auto mt-[10px] h-10 w-10' style={{ backgroundColor: '#EF7A0C', borderRadius: '50%', display: 'inline-block', width: 12, height: 12 }}></span> 
+        </div>
+      : null,
+  }));
+
+  return (
+    <div>
+        <section className='container mx-auto px-4'>
+            <div className='grid grid-cols-1 md:grid-cols-7 gap-x-8'>
+                <div className='md:col-span-2 h-screen border-r-[1px] border-r-[#CFCFCF]'>
+                    <div className='mt-[40px]'>
+                        <Timeline items={timelineItems} />
+                    </div>
+                </div>
+                <div className='md:col-span-5 '>
+                    <div className='pt-8'>
+                        {selectedItem.type === 'Video' && (
+                            <video autoPlay loop controls src={selectedItem.source} width="100%" muted />
+                        )}
+                        {selectedItem.type === 'Reading Material' && (
+                            <iframe src={selectedItem.source} width="100%" height="500px" />
+                        )}
+                        {selectedItem.type === 'MCQ' && (
+                            <div>
+                            {/* Render MCQ content here */}
+                            </div>
+                        )}
+                        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {selectedItem.material} </span> | <span>{selectedItem.date} </span></p>
+                        <h2 className='text-[18px] font-[700]'>{selectedItem.title}</h2>
+                        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{selectedItem.type}</span> | <span>{selectedItem.time}</span></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+  );
+};
+
+export default TimelineComponent;
diff --git a/app/components/PracticalCourses.tsx b/app/components/PracticalCourses.tsx
new file mode 100644
index 0000000..317623c
--- /dev/null
+++ b/app/components/PracticalCourses.tsx
@@ -0,0 +1,134 @@
+type PracticalData = {
+  id: number;
+  module: number;
+  status: number;
+  time: number;
+  access: number;
+  title: string;
+  description: string;
+  img: string;
+  total_marks: string;
+};
+
+let practicalData: PracticalData[] = [
+  {
+    id: 1,
+    module: 1,
+    status: 2,
+    time: 20,
+    access: 1,
+    title: "Life History of Dr. Maria Montessori",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage1.jpg",
+    total_marks: "50"
+  },
+  {
+    id: 2,
+    module: 2,
+    status: 1,
+    time: 20,
+    access: 1,
+    title: "Introduction to Montessori Methods",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage2.jpg",
+    total_marks: "50"
+  },
+  {
+    id: 3,
+    module: 3,
+    status: 0,
+    time: 20,
+    access: 0,
+    title: "Exercises in Practical Life",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage3.jpg",
+    total_marks: "50"
+  },
+  {
+    id: 1,
+    module: 1,
+    status: 0,
+    time: 20,
+    access: 0,
+    title: "Life History of Dr. Maria Montessori",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage1.jpg",
+    total_marks: "50"
+  },
+  {
+    id: 2,
+    module: 2,
+    status: 0,
+    time: 20,
+    access: 0,
+    title: "Introduction to Montessori Methods",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage2.jpg",
+    total_marks: "50"
+  },
+  {
+    id: 3,
+    module: 3,
+    status: 0,
+    time: 20,
+    access: 0,
+    title: "Exercises in Practical Life",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    img: "/assets/pimage3.jpg",
+    total_marks: "50"
+  }
+];
+
+export default function CourseTheory() {
+  const getStatusText = (status: number): string => {
+      if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
+      if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
+      if (status === 0) return " ";
+      return "";
+  }
+
+  return(
+      <div>
+          <section className="container mx-auto p-4 px-10">
+              <div className="flex flex-row justify-between place-items-center rounded-[10px] bg-[#FBFBFB] border-[1px] border-[#D1D1D1]">
+                  <div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
+                      <div className="relative inline-block">
+                          <img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/pimage3.jpg" alt="" />
+                          <button className="absolute inset-0 m-auto h-10 w-10">
+                              <img  src="/assets/play.svg" alt="" />
+                          </button>
+                      </div>
+                      <div className="">
+                          <h2 className="tet-[18px] font-[700] text-[#000] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+                          <p className="text-[14px] font-[600] text-[#EF7A0C]">
+                              <span> Video</span> &nbsp;|&nbsp; 
+                              <span> 30 mins</span>
+                          </p>
+                      </div>
+                  </div>
+                  <div className="pr-4">
+                      <button className="bg-[#000] text-[#FFF] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
+                  </div>
+              </div>
+          </section>
+          <section className="container mx-auto px-4">
+              <div className="grid grid-cols-1  lg:grid-cols-2 p-6 gap-10 ">
+                  {
+                      practicalData.map((data, index) => (
+                          <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
+                              <img className="w-full rounded-[8px]" src={data.img} alt="" />
+                              <h2 className="text-[18px] font-[700]">{data.title}</h2>
+                              <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} mins of Practical</span> </p>
+                              {/* <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p> */}
+                              <div className="flex flex-row justify-between place-items-center">
+                                <button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button>
+                                {/* <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} /> */}
+                              </div>
+                          </div>
+                      ))
+                  }
+              </div>
+          </section>
+      </div>
+  )
+}
diff --git a/app/routes/albums._index.tsx b/app/routes/albums._index.tsx
new file mode 100644
index 0000000..6d80796
--- /dev/null
+++ b/app/routes/albums._index.tsx
@@ -0,0 +1,109 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import AlbumsIndex from '~/components/AlbumsIndex';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Albums',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="/assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Place Content from here */}
+                    <AlbumsIndex />
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+
diff --git a/app/routes/albums.art-&-craft.tsx b/app/routes/albums.art-&-craft.tsx
new file mode 100644
index 0000000..fd3d5d0
--- /dev/null
+++ b/app/routes/albums.art-&-craft.tsx
@@ -0,0 +1,107 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import AlbumArtCraft from '~/components/AlbumArt&Craft';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Albums',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="/assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Place Content from here */}
+                    <AlbumArtCraft />
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+
diff --git a/app/routes/course._index.tsx b/app/routes/mycourse._index.tsx
similarity index 100%
rename from app/routes/course._index.tsx
rename to app/routes/mycourse._index.tsx
diff --git a/app/routes/mycourse.practical.tsx b/app/routes/mycourse.practical.tsx
new file mode 100644
index 0000000..3629af6
--- /dev/null
+++ b/app/routes/mycourse.practical.tsx
@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import PracticalCourse from '~/components/PracticalCourses';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Practical',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <PracticalCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+
diff --git a/app/routes/course.theory.tsx b/app/routes/mycourse.theory.tsx
similarity index 99%
rename from app/routes/course.theory.tsx
rename to app/routes/mycourse.theory.tsx
index 7a0779a..613842a 100644
--- a/app/routes/course.theory.tsx
+++ b/app/routes/mycourse.theory.tsx
@@ -31,7 +31,7 @@ const items: MenuProps['items'] = [
     },
     {
       type: 'divider',
-    },
+    }, 
     {
       label: '3rd menu item',
       key: '03sd',
diff --git a/app/routes/practical._index.tsx b/app/routes/practical._index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/routes/practical.mod1.tsx b/app/routes/practical.mod1.tsx
new file mode 100644
index 0000000..a066d4b
--- /dev/null
+++ b/app/routes/practical.mod1.tsx
@@ -0,0 +1,113 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+
+import TheoryCourse from '~/components/MyCoursePracticalModule';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const Course: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/mycourse/practical">Practical</a>,},{title: 'Practical 1 : Exercises of Practical Life'}]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <TheoryCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default Course;
+
diff --git a/app/routes/theory._index.tsx b/app/routes/theory._index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/routes/start-course.tsx b/app/routes/theory.mod1.tsx
similarity index 95%
rename from app/routes/start-course.tsx
rename to app/routes/theory.mod1.tsx
index ef53bca..01c52ca 100644
--- a/app/routes/start-course.tsx
+++ b/app/routes/theory.mod1.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import { RightOutlined} from '@ant-design/icons';
 
-import StartCourse from '~/components/StartCourse';
+import StartCourse from '~/components/MyCourseTheoryModule';
 import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
 import '../../public/assets/left_side_nav.css';
 import LeftSideMenu from '~/components/LeftSideMenuItems';
@@ -72,7 +72,7 @@ const Course: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/> 
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/mycourse/theory">Theory</a>,},{title: 'Module 1 : Life History of Dr. Maria Montessori'}]}/> 
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
diff --git a/public/assets/aimage1.jpg b/public/assets/aimage1.jpg
new file mode 100644
index 0000000..c4c89b5
Binary files /dev/null and b/public/assets/aimage1.jpg differ
diff --git a/public/assets/aimage2.jpg b/public/assets/aimage2.jpg
new file mode 100644
index 0000000..0f48fd4
Binary files /dev/null and b/public/assets/aimage2.jpg differ
diff --git a/public/assets/aimage3.jpg b/public/assets/aimage3.jpg
new file mode 100644
index 0000000..f5462c5
Binary files /dev/null and b/public/assets/aimage3.jpg differ
diff --git a/public/assets/aimage4.jpg b/public/assets/aimage4.jpg
new file mode 100644
index 0000000..7fb6cf6
Binary files /dev/null and b/public/assets/aimage4.jpg differ
diff --git a/public/assets/aimage5.jpg b/public/assets/aimage5.jpg
new file mode 100644
index 0000000..79c6c35
Binary files /dev/null and b/public/assets/aimage5.jpg differ
diff --git a/public/assets/athumbnail1.jpg b/public/assets/athumbnail1.jpg
new file mode 100644
index 0000000..13e1d83
Binary files /dev/null and b/public/assets/athumbnail1.jpg differ
diff --git a/public/assets/athumbnail2.jpg b/public/assets/athumbnail2.jpg
new file mode 100644
index 0000000..eba2c07
Binary files /dev/null and b/public/assets/athumbnail2.jpg differ
diff --git a/public/assets/athumbnail3.jpg b/public/assets/athumbnail3.jpg
new file mode 100644
index 0000000..0a97de7
Binary files /dev/null and b/public/assets/athumbnail3.jpg differ
diff --git a/public/assets/pimage1.jpg b/public/assets/pimage1.jpg
new file mode 100644
index 0000000..b698b8d
Binary files /dev/null and b/public/assets/pimage1.jpg differ
diff --git a/public/assets/pimage2.jpg b/public/assets/pimage2.jpg
new file mode 100644
index 0000000..feb953b
Binary files /dev/null and b/public/assets/pimage2.jpg differ
diff --git a/public/assets/pimage3.jpg b/public/assets/pimage3.jpg
new file mode 100644
index 0000000..64d7119
Binary files /dev/null and b/public/assets/pimage3.jpg differ
diff --git a/public/assets/pimage4.jpg b/public/assets/pimage4.jpg
new file mode 100644
index 0000000..54f9bed
Binary files /dev/null and b/public/assets/pimage4.jpg differ