diff --git a/components/kat-kay-la.js b/components/kat-kay-la.js
new file mode 100644
index 0000000..c920c61
--- /dev/null
+++ b/components/kat-kay-la.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {useRouter} from 'next/router'
+import {
+  Card,
+  CardContent,
+  CardActionArea,
+  Typography,
+  Grid
+} from '@material-ui/core'
+import {makeStyles} from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)'
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  }
+})
+
+export default function KatKayLa({tit, kombyen, route}) {
+  const classes = useStyles()
+  const router = useRouter()
+
+  return (
+    <Grid item sm>
+      <Card className={classes.root} variant='outlined'>
+        <CardActionArea onClick={() => router.push(route)}>
+          <CardContent>
+            <Typography gutterBottom align='center' variant='h3' component='h1'>
+              {tit}
+            </Typography>
+            <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h4' component='h2'>
+              {kombyen}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Grid>
+  )
+}
+
+KatKayLa.propTypes = {
+  tit: PropTypes.string.isRequired,
+  kombyen: PropTypes.number.isRequired,
+  route: PropTypes.string.isRequired
+}