diff --git a/App/Containers/NotifScreen.js b/App/Containers/NotifScreen.js
index 7305851..1336b3a 100644
--- a/App/Containers/NotifScreen.js
+++ b/App/Containers/NotifScreen.js
@@ -1,11 +1,19 @@
 import React, { Component } from 'react'
-import { ScrollView, Text } from 'react-native'
-import { connect } from 'react-redux'
+import { TouchableOpacity } from 'react-native'
+import { ScrollView, 
+        Text, 
+        View, 
+        SafeAreaView, 
+        FlatList,
+        Image, }  from 'react-native'
+import { connect }          from 'react-redux'
+import { Images }           from '../Themes'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
 
 // Styles
 import styles from './Styles/NotifScreenStyle'
+import { apply } from '../Themes/OsmiCSX'
 
 class NotifScreen extends Component {
   // constructor (props) {
@@ -13,13 +21,71 @@ class NotifScreen extends Component {
   //   this.state = {}
   // }
 
+  renderCardNotif() {
+    const data = [
+      {
+      id  :1,
+      name  : 'Yay, kamu dapat diskon 20%!',
+      description : "Segera gunakan diskon-mu untuk belanja barang impian. Belanja sekarang!",
+      image : Images.alertNotif
+      },
+      {
+        id  :2,
+        name  : 'Yay, kamu dapat diskon 50%!',
+        description : "Segera gunakan diskon-mu untuk belanja barang impian. Belanja sekarang!",
+        image : Images.alertNotif
+      },
+      {
+        id  :3,
+        name  : 'Yay, kamu dapat diskon ongkir',
+        description : "Segera gunakan diskon-mu untuk mendapat gratis ongkir pada hari sabtu dan minggu.",
+        image : Images.alertNotif
+      },
+    ]
+    return(
+      <View style={apply('items-center')}> 
+        <FlatList
+          data={data}
+          showVerticalScrollIndicator={false}
+          renderItem={({item})=>(
+            <TouchableOpacity onPress={()=> this.actionDetail()}>
+            <View  
+                width={295} height={90} 
+                style={apply('rounded-b-lg rounded-t-lg bg-white mt-5 pl-7 items-center')}> 
+                <View 
+                  style={apply('row flex')}>
+                  <View 
+                    style={apply('mt-4')}> 
+                    <Image
+                      source={item.image}
+                      style={apply('mt-4 items-stretch'), styles.imageContent}
+                    />
+                  </View>
+                  <View style={apply('column ml-6')}>
+                      <Text style={apply('font-semibold text-base mt-2')}>{item.name}</Text>
+                      <Text style={apply('pr-8')}>{item.description}</Text>
+                    </View>
+                </View>
+              </View>
+            </TouchableOpacity>
+          )}
+          keyExtractor={(item, index)=> index.toString()}
+        />
+    </View>
+    )
+  }
+
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <Text>NotifScreen Container</Text>
-      </ScrollView>
+      <SafeAreaView style={apply('bg-gray-300 flex')}>
+        {this.renderCardNotif()}
+      </SafeAreaView>
     )
   }
+
+  actionDetail() {
+    alert("Hit Detail Promo")
+  }
 }
 
 const mapStateToProps = (state) => {
diff --git a/App/Containers/Styles/NotifScreenStyle.js b/App/Containers/Styles/NotifScreenStyle.js
index 3144a3e..1efc62c 100644
--- a/App/Containers/Styles/NotifScreenStyle.js
+++ b/App/Containers/Styles/NotifScreenStyle.js
@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native'
-import { Colors, Metrics } from '../../Themes/'
 
 export default StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: Metrics.navBarHeight,
-    backgroundColor: Colors.background
-  }
+  imageContent: {
+    width: 40, 
+    height: 40,
+  },
 })
diff --git a/App/Images/bell.png b/App/Images/bell.png
new file mode 100644
index 0000000..efb426a
Binary files /dev/null and b/App/Images/bell.png differ
diff --git a/App/Themes/Images.js b/App/Themes/Images.js
index b9315bc..198f277 100644
--- a/App/Themes/Images.js
+++ b/App/Themes/Images.js
@@ -5,6 +5,7 @@ const images = {
   featured1: require('../Images/featured1.png'),
   featured2: require('../Images/featured2.png'),
   featured3: require('../Images/featured3.png'),
+  alertNotif: require('../Images/bell.png'),
 }
 
 export default images