diff --git a/CardStack.js b/CardStack.js
index bec0f54..06d58d3 100644
--- a/CardStack.js
+++ b/CardStack.js
@@ -370,6 +370,105 @@ export default class CardStack extends Component {
   }
 
 
+  renderTop(drag, cardA, cardB, topCard, SC, rotate) {
+    if(topCard == "cardB"){
+      return (
+        <Animated.View style={{
+          position: 'absolute',
+          ...Platform.select({
+            ios: {
+              zIndex: (topCard === 'cardB') ? 3 : 2,
+            },
+            android: {
+              elevation: (topCard === 'cardB') ? 3 : 2,
+            }
+          }),
+          transform: [
+            { rotate: (topCard === 'cardB') ? rotate: '0deg' },
+            {translateX: (topCard === 'cardB') ? drag.x: 0},
+            {translateY: (topCard === 'cardB') ? drag.y: 0},
+            { scale: (topCard === 'cardB') ? 1 : SC},
+          ]
+          }}>
+          {cardB}
+        </Animated.View>
+      );
+    }
+    else{
+      return (
+        <Animated.View style={{
+            position: 'absolute',
+            ...Platform.select({
+              ios: {
+                zIndex: (topCard === 'cardA') ? 3 : 2,
+              },
+              android: {
+                elevation: (topCard === 'cardA') ? 3 : 2,
+              }
+            }),
+            transform: [
+              { rotate: (topCard === 'cardA') ? rotate: '0deg' },
+              {translateX: (topCard === 'cardA') ? drag.x: 0},
+              {translateY: (topCard === 'cardA') ? drag.y: 0},
+              { scale: (topCard === 'cardA') ? 1 : SC},
+            ]
+        }}>
+          {cardA}
+        </Animated.View>
+      )
+    }
+  }
+
+  renderBottom(drag, cardA, cardB, topCard, SC, rotate) {
+    if(topCard == "cardA"){
+      return (
+        <Animated.View style={{
+          position: 'absolute',
+          ...Platform.select({
+            ios: {
+              zIndex: (topCard === 'cardB') ? 3 : 2,
+            },
+            android: {
+              elevation: (topCard === 'cardB') ? 3 : 2,
+            }
+          }),
+          transform: [
+            { rotate: (topCard === 'cardB') ? rotate: '0deg' },
+            {translateX: (topCard === 'cardB') ? drag.x: 0},
+            {translateY: (topCard === 'cardB') ? drag.y: 0},
+            { scale: (topCard === 'cardB') ? 1 : SC},
+          ]
+          }}>
+          {cardB}
+        </Animated.View>
+      );
+    }
+    else{
+      return (
+        <Animated.View style={{
+            position: 'absolute',
+            ...Platform.select({
+              ios: {
+                zIndex: (topCard === 'cardA') ? 3 : 2,
+              },
+              android: {
+                elevation: (topCard === 'cardA') ? 3 : 2,
+              }
+            }),
+            transform: [
+              { rotate: (topCard === 'cardA') ? rotate: '0deg' },
+              {translateX: (topCard === 'cardA') ? drag.x: 0},
+              {translateY: (topCard === 'cardA') ? drag.y: 0},
+              { scale: (topCard === 'cardA') ? 1 : SC},
+            ]
+        }}>
+          {cardA}
+        </Animated.View>
+      )
+    }
+  }
+
+
   render() {
 
     const { secondCardZoom } = this.props;
@@ -385,48 +484,10 @@ export default class CardStack extends Component {
       outputRange: this.props.outputRotationRange,
       extrapolate: 'clamp',
     });
-
     return (
         <View {...this._panResponder.panHandlers} style={[{position:'relative'},this.props.style]}>
-          <Animated.View style={{
-                position: 'absolute',
-                ...Platform.select({
-                  ios: {
-                    zIndex: (topCard === 'cardB') ? 3 : 2,
-                  },
-                  android: {
-                    elevation: (topCard === 'cardB') ? 3 : 2,
-                  }
-                }),
-                transform: [
-                  { rotate: (topCard === 'cardB') ? rotate: '0deg' },
-                  {translateX: (topCard === 'cardB') ? drag.x: 0},
-                  {translateY: (topCard === 'cardB') ? drag.y: 0},
-                  { scale: (topCard === 'cardB') ? 1 : SC},
-                ]
-              }}>
-              {cardB}
-          </Animated.View>
-          <Animated.View style={{
-                position: 'absolute',
-                ...Platform.select({
-                  ios: {
-                    zIndex: (topCard === 'cardA') ? 3 : 2,
-                  },
-                  android: {
-                    elevation: (topCard === 'cardA') ? 3 : 2,
-                  }
-                }),
-                transform: [
-                  { rotate: (topCard === 'cardA') ? rotate: '0deg' },
-                  {translateX: (topCard === 'cardA') ? drag.x: 0},
-                  {translateY: (topCard === 'cardA') ? drag.y: 0},
-                  { scale: (topCard === 'cardA') ? 1 : SC},
-                ]
-              }}>
-              {cardA}
-          </Animated.View>
-
+          {this.renderBottom(drag, cardA, cardB, topCard, SC, rotate)}
+          {this.renderTop(drag, cardA, cardB, topCard, SC, rotate)}
           {this.props.renderNoMoreCards()}
 
         </View>