diff --git a/src/components/ContentTabItem/ContentTabChild.js b/src/components/ContentTabItem/ContentTabChild.js
index 12d20549d835f7fa579fd7b71ba66fb1641af87f..e6377203ea9239aab3a8dbb02fa135073ab06c83 100644
--- a/src/components/ContentTabItem/ContentTabChild.js
+++ b/src/components/ContentTabItem/ContentTabChild.js
@@ -22,17 +22,38 @@ const ContentTabChild = ({
   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>
-);
+}) => {
+  const getDuration = duration => {
+    if (!duration) return "";
 
+    let result = "";
+
+    // set detik
+    let temp = duration;
+    if (temp % 60) result = `${temp % 60} detik`;
+    if (temp < 60) return result;
+
+    // set menit
+    temp = Math.floor(temp / 60);
+    if (temp % 60) result = `${temp % 60} menit ${result}`;
+    if (temp < 60) return result;
+
+    // set jam
+    temp = Math.floor(temp / 60);
+    result = `${temp % 60} jam ${result}`;
+    return result;
+  };
+  return (
+    <Container
+      onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)}
+    >
+      <Typography style={{ paddingLeft: "0.5rem" }}>
+        {number}. {videoName} |{" "}
+        <span style={{ fontSize: "0.75em" }}>{getDuration(duration)}</span>
+      </Typography>
+    </Container>
+  );
+};
 ContentTabChild.propTypes = {
   name: PropTypes.string
 };