diff --git a/App/Components/Styles/TopDoctorStyle.js b/App/Components/Styles/TopDoctorStyle.js
index 98f2dee..3223155 100644
--- a/App/Components/Styles/TopDoctorStyle.js
+++ b/App/Components/Styles/TopDoctorStyle.js
@@ -56,7 +56,8 @@ export default connect({
   infoDot: [
     "small-dot",
     "bg-muted",
-    "mx-2"
+    "mx-2",
+    "rounded-full"
   ],
   totalReview: [
     "text-xxs",
diff --git a/App/Components/TopDoctor.js b/App/Components/TopDoctor.js
index 5c78ea9..a6ee7fb 100644
--- a/App/Components/TopDoctor.js
+++ b/App/Components/TopDoctor.js
@@ -22,7 +22,10 @@ const topDoctor = props => {
         </View>
       )}
       renderItem={({ item, index }) => (
-        <TouchableOpacity activeOpacity={0.9} style={styles.card}>
+        <TouchableOpacity
+        activeOpacity={0.9}
+        style={styles.card}
+        onPress={() => NavigationService.navigate("DoctorDetail", {data:item})}>
           <Image source={item.thumb} style={styles.thumb} />
 
           <View style={apply("flex")}>
diff --git a/App/Containers/DoctorDetailScreen.js b/App/Containers/DoctorDetailScreen.js
new file mode 100644
index 0000000..83cef25
--- /dev/null
+++ b/App/Containers/DoctorDetailScreen.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react'
+import {
+  StatusBar,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  View,
+  ImageBackground,
+  TouchableOpacity,
+  TouchableNativeFeedback
+} from 'react-native'
+import { connect } from 'react-redux'
+
+import {
+  IconBack,
+  IconBookmark,
+  IconChat
+} from '../Themes/Svg'
+
+// Styles
+import styles from './Styles/DoctorDetailScreenStyle'
+import { Images } from '../Themes'
+import { apply } from '../Themes/Osmicsx'
+import { colors } from 'osmicsx'
+
+class DoctorDetailScreen extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+
+    }
+  }
+
+  render () {
+    return (
+      <SafeAreaView style={apply(["flex", "bg-white"])}>
+        <StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />
+
+        <ScrollView style={apply("flex")} contentContainerStyle={apply("pb-7")}>
+          <ImageBackground source={Images.detailDoctor} style={styles.imgHeader}>
+            <View style={styles.imgHeaderRow}>
+              <TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.goBack()}>
+                <IconBack width={30} height={30} />
+              </TouchableOpacity>
+
+              <TouchableOpacity activeOpacity={1}>
+                <IconBookmark width={30} height={30} />
+              </TouchableOpacity>
+            </View>
+          </ImageBackground>
+
+          <View style={styles.content}>
+            <Text style={styles.name}>dr. Gilang Segara Bening</Text>
+            <View style={styles.infoWrapper}>
+              <Text style={styles.info}>Heart</Text>
+              <View style={styles.infoDot} />
+              <Text style={styles.info}>Persahabatan Hospital</Text>
+            </View>
+
+            <Text style={styles.contentText}>dr. Gilang is one of the best doctors in the Persahabatan Hospital. He has saved more than 1000 patients in the past 3 years. He has also received many awards from domestic and abroad as the best doctors. He is available on a private or schedule.</Text>
+
+            <View style={styles.spec}>
+              <View style={styles.specCol}>
+                <Text style={styles.specTitle}>Experience</Text>
+                <Text style={styles.specContent}>3 <Text style={styles.specHelper}>yr</Text></Text>
+              </View>
+
+              <View style={styles.specCol}>
+                <Text style={styles.specTitle}>Patient</Text>
+                <Text style={styles.specContent}>1221 <Text style={styles.specHelper}>ps</Text></Text>
+              </View>
+
+              <View style={[styles.specCol, apply("border-r-0")]}>
+                <Text style={styles.specTitle}>Rating</Text>
+                <Text style={styles.specContent}>5.0</Text>
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+
+        <View style={styles.footer}>
+          <TouchableNativeFeedback
+          onPress={() => alert("hello!")}
+          background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
+            <View style={styles.btnChat}>
+              <IconChat />
+            </View>
+          </TouchableNativeFeedback>
+
+          <TouchableNativeFeedback
+            onPress={() => alert("hello!")}
+            background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
+            <View style={styles.btnAppointment}>
+              <Text style={styles.btnFooterLabel}>Make an Appointment</Text>
+            </View>
+          </TouchableNativeFeedback>
+        </View>
+      </SafeAreaView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DoctorDetailScreen)
diff --git a/App/Containers/Styles/DoctorDetailScreenStyle.js b/App/Containers/Styles/DoctorDetailScreenStyle.js
new file mode 100644
index 0000000..af96055
--- /dev/null
+++ b/App/Containers/Styles/DoctorDetailScreenStyle.js
@@ -0,0 +1,114 @@
+import { connect } from '../../Themes/Osmicsx'
+
+export default connect({
+  imgHeader: [
+    "full",
+    "h-s80",
+    "pt-10"
+  ],
+  imgHeaderRow: [
+    "full",
+    "row",
+    "px-10",
+    "items-center",
+    "justify-between"
+  ],
+  content: [
+    "p-5",
+    "pt-7"
+  ],
+  name: [
+    "text-dark",
+    "font-bold",
+    "text-3xl",
+    "mb-3"
+  ],
+  infoWrapper: [
+    "full",
+    "row",
+    "items-center",
+    "mb-5"
+  ],
+  info: [
+    "text-gray-dark",
+    "font-regular",
+    "font-sm"
+  ],
+  infoDot: [
+    "medium-dot",
+    "bg-muted",
+    "mx-2",
+    "rounded-full"
+  ],
+  contentText: [
+    "text-regular",
+    "text-sm",
+    "text-dark",
+    "flex-wrap",
+    "leading-6"
+  ],
+  spec: [
+    "flex",
+    "row",
+    "items-center",
+    "justify-center",
+    "py-6"
+  ],
+  specCol: [
+    "items-center",
+    "border-r",
+    "border-muted",
+    "px-7"
+  ],
+  specTitle: [
+    "font-bold",
+    "text-dark",
+    "text-base",
+    "text-center",
+    "mb-5"
+  ],
+  specContent: [
+    "font-regular",
+    "text-blue-native",
+    "text-2xl"
+  ],
+  specHelper: [
+    "font-regular",
+    "text-muted",
+    "text-sm"
+  ],
+  footer: [
+    "shadow-lg",
+    "full",
+    "absolute",
+    "row",
+    "items-center",
+    "justify-between",
+    "bottom-0",
+    "z-20",
+    "p-5"
+  ],
+  btnChat: [
+    "bg-blue-native",
+    "w-56",
+    "h-56",
+    "items-center",
+    "justify-center",
+    "rounded-lg",
+    "mr-4"
+  ],
+  btnAppointment: [
+    "bg-green-native",
+    "flex",
+    "h-56",
+    "items-center",
+    "justify-center",
+    "rounded-lg"
+  ],
+  btnFooterLabel: [
+    "text-sm",
+    "text-white",
+    "font-regular",
+    "text-center"
+  ]
+})
diff --git a/App/Images/detail-doctor.jpg b/App/Images/detail-doctor.jpg
new file mode 100644
index 0000000..25ad6f1
Binary files /dev/null and b/App/Images/detail-doctor.jpg differ
diff --git a/App/Images/icon-back.svg b/App/Images/icon-back.svg
new file mode 100644
index 0000000..f64ae02
--- /dev/null
+++ b/App/Images/icon-back.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19L8 12L15 5" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/App/Images/icon-bookmark.svg b/App/Images/icon-bookmark.svg
new file mode 100644
index 0000000..fcda307
--- /dev/null
+++ b/App/Images/icon-bookmark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.08999 3.44C8.32617 3.44 7.59363 3.74343 7.05352 4.28354C6.51342 4.82364 6.20999 5.55618 6.20999 6.32V18.32C6.20999 20.32 7.93999 21.32 8.94999 19.91H8.99999C10.68 17.54 13.42 17.54 15.1 19.91C16.1 21.34 17.84 20.33 17.84 18.32V6.32C17.84 5.55618 17.5366 4.82364 16.9965 4.28354C16.4564 3.74343 15.7238 3.44 14.96 3.44H9.08999Z" fill="#25282B"/>
+</svg>
diff --git a/App/Images/icon-chat.svg b/App/Images/icon-chat.svg
new file mode 100644
index 0000000..d509505
--- /dev/null
+++ b/App/Images/icon-chat.svg
@@ -0,0 +1,13 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M30.75 16.5C30.75 21.465 25.38 25.5 18.75 25.5C17.1465 25.5007 15.5525 25.2528 14.025 24.765C12.81 24.375 6.31501 29.265 5.35501 28.59C4.39501 27.915 9.10501 21.915 8.49001 21.09C7.40326 19.8034 6.78928 18.1837 6.75001 16.5C6.75001 11.52 12.135 7.5 18.75 7.5C25.365 7.5 30.75 11.445 30.75 16.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="15" cy="16.5" r="1.5" fill="white"/>
+<circle cx="19.5" cy="16.5" r="1.5" fill="white"/>
+<circle cx="24" cy="16.5" r="1.5" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/App/Navigation/AppNavigation.js b/App/Navigation/AppNavigation.js
index 7ce63db..104c681 100644
--- a/App/Navigation/AppNavigation.js
+++ b/App/Navigation/AppNavigation.js
@@ -6,9 +6,15 @@ import styles from './Styles/NavigationStyles'
 
 import SplashScreen from '../Containers/SplashScreen'
 
-import AccountScreen from '../Containers/AccountScreen'
-import InboxScreen from '../Containers/InboxScreen'
+// home stack
 import HomeScreen from '../Containers/HomeScreen'
+import DoctorDetailScreen from '../Containers/DoctorDetailScreen'
+
+// inbox stack
+import InboxScreen from '../Containers/InboxScreen'
+
+// account stack
+import AccountScreen from '../Containers/AccountScreen'
 
 // Manifest of possible screens
 const AppStack = createStackNavigator({
@@ -21,6 +27,7 @@ const AppStack = createStackNavigator({
 
   // Home Stack
   HomeScreen: { screen: HomeScreen },
+  DoctorDetail: { screen: DoctorDetailScreen },
 
   // Inbox Stack
   InboxScreen: { screen: InboxScreen },
diff --git a/App/Themes/Images.js b/App/Themes/Images.js
index 02b7518..c4cee41 100644
--- a/App/Themes/Images.js
+++ b/App/Themes/Images.js
@@ -3,6 +3,7 @@ const images = {
   thumbDoctor1: require('../Images/thumb-doctor1.jpg'),
   thumbDoctor2: require('../Images/thumb-doctor2.jpg'),
   thumbDoctor3: require('../Images/thumb-doctor3.jpg'),
+  detailDoctor: require('../Images/detail-doctor.jpg')
 }
 
 export default images
diff --git a/App/Themes/Namespace.js b/App/Themes/Namespace.js
index 5654f14..111547a 100644
--- a/App/Themes/Namespace.js
+++ b/App/Themes/Namespace.js
@@ -1,4 +1,4 @@
-import { scaleWidth } from 'osmicsx'
+import { scaleHeight, scaleWidth } from 'osmicsx'
 import { Platform } from 'react-native'
 
 export default {
@@ -50,6 +50,7 @@ export default {
 
   "bg-muted": { backgroundColor: "#CACCCF" },
   "text-muted": { color: "#CACCCF" },
+  "border-muted": { borderColor: "#CACCCF" },
 
   "bg-background": { backgroundColor: "#F6F6F6" },
   "text-gray-dark": { color: "#A0A4A8" },
@@ -65,6 +66,7 @@ export default {
   "w-88": { width: 88 },
   "h-80": { height: 80 },
   "h-24": { height: 24 },
+  "h-s80": { height: scaleHeight(80) },
   "min-w-38": { width: scaleWidth(38) },
 
   // top right bottom left
@@ -72,5 +74,9 @@ export default {
   "-left-3": { left: scaleWidth(Platform.OS == "android" ? 5 : 2) },
 
   // etc
-  "small-dot": { width: 3, height: 3 }
+  "small-dot": { width: 3, height: 3 },
+  "medium-dot": { width: 5, height: 5 },
+
+  "border-r": { borderRightWidth: 1 },
+  "border-r-0": { borderRightWidth: 0 }
 }
diff --git a/App/Themes/Svg.js b/App/Themes/Svg.js
index 2625dc2..a04f7e7 100644
--- a/App/Themes/Svg.js
+++ b/App/Themes/Svg.js
@@ -1,4 +1,7 @@
 import IconSearchSvg from '../Images/icon-search.svg'
+import IconBackSvg from '../Images/icon-back.svg'
+import IconBookmarkSvg from '../Images/icon-bookmark.svg'
+import IconChatSvg from '../Images/icon-chat.svg'
 
 // Category Home
 import IconBandageSvg from '../Images/icon-bandage.svg'
@@ -14,6 +17,9 @@ import IconTeethSvg from '../Images/icon-teeth.svg'
 import IconStar5Svg from '../Images/icon-star5.svg'
 
 export const IconSearch = IconSearchSvg
+export const IconBack = IconBackSvg
+export const IconBookmark = IconBookmarkSvg
+export const IconChat = IconChatSvg
 
 // Category Home
 export const IconBandage = IconBandageSvg