diff --git a/assets/js/TranscriptPage.jsx b/assets/js/TranscriptPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..69da971a04dc9ff29a685018992d8d78965c93d9
--- /dev/null
+++ b/assets/js/TranscriptPage.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import CourseList from './components/CourseList';
+
+export default class TranscriptPage extends React.Component {
+      constructor(props) {
+        super(props);
+        /* istanbul ignore next */
+        this.state = {
+          data: {"transcript":[{
+              "url": "http://api.cs.ui.ac.id/siakngcs/riwayat-mahasiswa/99731/",
+              "npm": "1406622616",
+                "kelas": {
+                    "url": "http://api.cs.ui.ac.id/siakngcs/kelas/473569/",
+                    "kd_kls": "473569",
+                    "nm_kls": "MD 1 - B",
+                    "nm_mk_cl": {
+                        "url": "http://api.cs.ui.ac.id/siakngcs/matakuliah/817/",
+                        "kd_mk": "CSF1600100",
+                        "nm_mk": "Matematika Diskret 1",
+                        "kd_org": "06.00.12.01",
+                        "kd_kur": "06.00.12.01-2012",
+                        "jml_sks": 3
+                    },
+            "kd_kur_cl": "06.00.12.01-2012",
+            "kd_mk_cl": "CSF1600100",
+            "periode": {
+                "url": "http://api.cs.ui.ac.id/siakngcs/periode/25/",
+                "term": 1,
+                "tahun": 2014
+            },
+            "pengajar": [
+                {
+                    "url":
+"http://api.cs.ui.ac.id/siakngcs/dosen/196111251992031001/",
+                    "nomor": "196111251992031001",
+                    "nama": "Prof. Drs. T. Basaruddin M.Sc., Ph.D",
+                    "id_skema": 1,
+                    "nm_skema": "Skema Inti",
+                    "maks_sks": 8
+                }
+            ]
+        },
+        "kd_kls": "473569",
+        "kd_kur": "06.00.12.01-2012",
+        "kd_mk": "CSF1600100",
+        "kd_org": "01.00.12.01",
+        "term": 1,
+        "tahun": 2014,
+        "nilai": "A"
+    }],"name":"Si jagoan neon" }};//ambil dari database
+
+      }
+
+      render() {
+        return (
+          <CourseList data={this.state.data.transcript} name={this.state.data.name}/>
+        );
+  }
+}
diff --git a/assets/js/components/Course.jsx b/assets/js/components/Course.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8713846243fb6e9d167db438a28b7a81191a717b
--- /dev/null
+++ b/assets/js/components/Course.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+
+export default class Course extends React.Component {
+  static propTypes = {
+    courseName: React.PropTypes.string.isRequired,
+    grade: React.PropTypes.string.isRequired,
+  };
+
+
+  render() {
+    return (
+
+      <Table.Row>
+              <Table.Cell>{this.props.courseName}</Table.Cell>
+              <Table.Cell>{this.props.grade}</Table.Cell>
+          </Table.Row>
+    );
+  }
+}
diff --git a/assets/js/components/CourseList.jsx b/assets/js/components/CourseList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc0357a036eb34c558ba011254d91822636fe4a4
--- /dev/null
+++ b/assets/js/components/CourseList.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Grid, Segment, Table } from 'semantic-ui-react';
+import Course from './Course';
+export default class CourseList extends React.Component {
+
+  static propTypes = {
+    data: React.PropTypes.array.isRequired,
+    name: React.PropTypes.array.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    /* istanbul ignore next */
+    this.state = { course: this.props.data };
+  }
+
+
+  generateCourse() {
+    return this.state.course.map((course, index) =>
+      <Course
+        key={index}
+        courseName={course.kelas.nm_kls}
+        grade={course.nilai}
+      />,
+    );
+  }
+
+  render = () => (
+      <Grid.Column centered>
+
+      <Segment>
+          <h2>Nama : {this.props.name}</h2>
+            <Table unstackable>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell>Mata Kuliah</Table.HeaderCell>
+                  <Table.HeaderCell>Nilai</Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+              { this.generateCourse() }
+              </Table.Body>
+            </Table>
+      </Segment>
+      </Grid.Column>
+  );
+}