diff --git a/src/components/ContentTabItem/ContentTabChild.js b/src/components/ContentTabItem/ContentTabChild.js
index eba7c56b8ca5dde67c05cf21f2ba7d1943231ddc..12d20549d835f7fa579fd7b71ba66fb1641af87f 100644
--- a/src/components/ContentTabItem/ContentTabChild.js
+++ b/src/components/ContentTabItem/ContentTabChild.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Checkbox from "@material-ui/core/Checkbox";
 import styled from "styled-components";
 import { Typography } from "@material-ui/core";
 
@@ -16,10 +15,21 @@ const Container = styled.div`
   }
 `;
 
-const ContentTabChild = ({ name, changeVideo, videoFile }) => (
-  <Container onClick={() => changeVideo(videoFile)}>
-    <Checkbox />
-    <Typography>{name}</Typography>
+const ContentTabChild = ({
+  number,
+  changeVideo,
+  videoFile,
+  videoName,
+  duration,
+  sectionName
+}) => (
+  <Container
+    onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)}
+  >
+    <Typography style={{ paddingLeft: "0.5rem" }}>
+      {number}. {videoName} |{" "}
+      <span style={{ fontSize: "0.75em" }}>{duration} seconds</span>
+    </Typography>
   </Container>
 );
 
diff --git a/src/components/ContentTabItem/index.js b/src/components/ContentTabItem/index.js
index bbe5a134a06f00893102d4a0ac0b304daf1b7723..4b3f7b6402c785061b2b68c07d1605e76c3553e3 100644
--- a/src/components/ContentTabItem/index.js
+++ b/src/components/ContentTabItem/index.js
@@ -25,7 +25,7 @@ const SubtitleTypography = styled(Typography)`
   font-size: 0.75rem !important;
 `;
 
-const ContentTabItem = ({ sectionName, videos, changeVideo }) => {
+const ContentTabItem = ({ number, sectionName, videos, changeVideo }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const handleClick = () => {
@@ -35,13 +35,15 @@ const ContentTabItem = ({ sectionName, videos, changeVideo }) => {
   const totalVideo = videos.length;
 
   const children = videos.map((d, i) => {
-    const name = `${i + 1}. ${d.video_title}`;
     return (
       <ContentTabChild
         key={i}
-        name={name}
+        number={i + 1}
         changeVideo={changeVideo}
         videoFile={d.video_file}
+        videoName={d.video_title}
+        duration={d.video_duration_in_seconds}
+        sectionName={sectionName}
       />
     );
   });
@@ -50,8 +52,8 @@ const ContentTabItem = ({ sectionName, videos, changeVideo }) => {
     <Container>
       <StyledDiv onClick={handleClick}>
         <div>
-          <Typography>{sectionName}</Typography>
-          <SubtitleTypography>1 / {totalVideo} | 30 menit</SubtitleTypography>
+          <Typography>{`${number}. ${sectionName}`}</Typography>
+          <SubtitleTypography>{totalVideo} video</SubtitleTypography>
         </div>
         {isExpanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
       </StyledDiv>
diff --git a/src/components/CourseCard/index.js b/src/components/CourseCard/index.js
index 918d4e8b21ea7659abcff98ef2c144b2281b0d7b..9b7272d93c3358465682193f24d96c2d9bc5b51b 100644
--- a/src/components/CourseCard/index.js
+++ b/src/components/CourseCard/index.js
@@ -44,8 +44,7 @@ const SubTypography = styled(Typography)`
 `;
 
 const CourseCard = ({ course, handleCardClicked }) => {
-  const { id, course_name, created_by_profile } = course;
-  const totalVideos = 10;
+  const { id, course_name, created_by_profile, no_of_videos } = course;
   return (
     <StyledCard onClick={() => handleCardClicked(id)}>
       <ContentContainer>
@@ -54,7 +53,7 @@ const CourseCard = ({ course, handleCardClicked }) => {
           <SubTypography>{created_by_profile.name}</SubTypography>
         </StyledCardContent>
         <StyledCardContent>
-          <SubTypography>{totalVideos} Video</SubTypography>
+          <SubTypography>{no_of_videos} Video</SubTypography>
         </StyledCardContent>
       </ContentContainer>
     </StyledCard>
diff --git a/src/containers/ContentTabPage/index.js b/src/containers/ContentTabPage/index.js
index dbdce4b262026f710a4f84ba7d60ce47769836b4..0f3caaecebde3574ae4db477a0a2a5a3085a3250 100644
--- a/src/containers/ContentTabPage/index.js
+++ b/src/containers/ContentTabPage/index.js
@@ -5,11 +5,11 @@ import ContentTabItem from "../../components/ContentTabItem";
 const ContentTabPage = ({ data, loading, changeVideo }) => {
   if (loading) return <div>Loading...</div>;
   const html = data.map((d, i) => {
-    const sectionName = `${i + 1}. ${d.section_name}`;
     return (
       <ContentTabItem
         key={i}
-        sectionName={sectionName}
+        number={i + 1}
+        sectionName={d.section_name}
         videos={d.videos}
         changeVideo={changeVideo}
       />
diff --git a/src/containers/Course/index.js b/src/containers/Course/index.js
index 629ce27fb65441c004e48a471e2a6e88841b14ab..b36f4e64bc88e238bef033815b7b79aaf8c0f883 100644
--- a/src/containers/Course/index.js
+++ b/src/containers/Course/index.js
@@ -18,12 +18,18 @@ const Title = styled(Typography)`
   padding: 10px;
 `;
 
+const SubTitle = styled(Title)`
+  font-size: 1.25rem !important;
+`;
+
 const Course = props => {
   const [loading, setLoading] = React.useState(true);
   const [data, setData] = React.useState([]);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [activeVideo, setActiveVideo] = React.useState("");
+  const [title, setTitle] = React.useState("");
   const [isNotFound, setIsNotFound] = React.useState(false);
+  const [hasNoVideo, setHasNoVideo] = React.useState(false);
   const handleChange = (event, newValue) => {
     setTabIndex(newValue);
   };
@@ -31,10 +37,18 @@ const Course = props => {
   useEffect(() => {
     getCourse(props.match.params.courseId).then(res => {
       if (res.status === 200) {
-        setData(res.data);
-        setLoading(false);
-        if (res.data.sections[0].videos[0].video_file) {
-          setActiveVideo(res.data.sections[0].videos[0].video_file);
+        try {
+          setData(res.data);
+          setLoading(false);
+          if (res.data.sections[0].videos[0].video_file) {
+            const video = res.data.sections[0].videos[0];
+            setActiveVideo(video.video_file);
+            setTitle(
+              `${res.data.sections[0].section_name} | ${video.video_title}`
+            );
+          }
+        } catch {
+          setHasNoVideo(true);
         }
       } else if (res.status === 404) setIsNotFound(true);
       else
@@ -42,17 +56,21 @@ const Course = props => {
     });
   }, [props.match.params.courseId]);
 
-  const changeVideo = newVideo => {
-    console.log(newVideo, "masuk")
+  const changeVideo = (title, newVideo) => {
+    console.log(newVideo, "masuk");
     setActiveVideo(newVideo);
+    setTitle(title);
   };
 
   if (isNotFound)
-    return <h1 style={{ textAlign: "center" }}>Course Not Found!</h1>;
+    return <h1 style={{ textAlign: "center" }}>Course not found!</h1>;
 
+  if (hasNoVideo)
+    return <h1 style={{ textAlign: "center" }}>Course has no video!</h1>;
   return (
     <div>
       <Title>{data.course_name}</Title>
+      <SubTitle>{title}</SubTitle>
       <Video url={`${BASE_URL}${activeVideo}`} playing />
       <Tabs value={tabIndex} onChange={handleChange}>
         <Tab label="Konten" />
diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js
index 395d80ea87bd17ead7926891aa939d2ef8cd54c2..31ad54fc17f3010f6979b5b8957cc67dab8d935d 100644
--- a/src/containers/Home/index.js
+++ b/src/containers/Home/index.js
@@ -4,7 +4,6 @@ import CourseCards from "../CourseCards";
 const Home = props => {
   return (
     <div>
-      This is home
       <CourseCards {...props} />
     </div>
   );