diff --git a/package-lock.json b/package-lock.json
index 5ccd231..5f34acf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6841,15 +6841,6 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz",
       "integrity": "sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA=="
     },
-    "react-native-showdown": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/react-native-showdown/-/react-native-showdown-0.4.0.tgz",
-      "integrity": "sha512-9DnDUFQ2vTKI+6uFqCYNslyutKGnhoGZfNc7+p1aRvSUqn3q+3ii+amoXdtmMj8n5qE0mL6PpOv4fAfTyT3TsA==",
-      "requires": {
-        "prop-types": "^15.6.0",
-        "showdown": "^1.3.0"
-      }
-    },
     "react-native-svg": {
       "version": "8.0.10",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-8.0.10.tgz",
@@ -6905,6 +6896,11 @@
       "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-2.5.0.tgz",
       "integrity": "sha512-xFJA+N7wh8Ik/17I4QB24e0a0L3atg1ScVehvtYR5UBTgHdzTFA0ZylvXp9gkZt7V+AT5Pni0H3NQItpqSKFoQ=="
     },
+    "react-native-webview-autoheight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/react-native-webview-autoheight/-/react-native-webview-autoheight-1.0.6.tgz",
+      "integrity": "sha512-M8t2Ccbfr49i3ow6aQq0ou1Hnbq5KGd5Uj0c6sj4iZHYzLYte6o3gjVUMYvQdZ8hQ/ejCtWud6hk5C7CGC5LaQ=="
+    },
     "react-navigation": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-3.2.1.tgz",
diff --git a/package.json b/package.json
index 94452fc..4df7af2 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,11 @@
     "react": "16.5.0",
     "react-apollo": "^2.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-showdown": "^0.4.0",
+    "react-native-webview-autoheight": "^1.0.6",
     "react-navigation": "^3.2.1",
     "react-redux": "^6.0.0",
     "redux": "^4.0.1",
+    "showdown": "^1.9.0",
     "styled-components": "^4.1.3"
   },
   "devDependencies": {
diff --git a/screens/SectionScreen.js b/screens/SectionScreen.js
index 71bc710..5dc43a2 100644
--- a/screens/SectionScreen.js
+++ b/screens/SectionScreen.js
@@ -5,11 +5,19 @@ import {
   StatusBar,
   WebView,
   Linking,
-  ScrollView
+  ScrollView,
+  Dimensions
 } from "react-native";
 import { Icon } from "expo";
-import Markdown from "react-native-showdown";
 import { PlayIcon } from "../components/Icons";
+import MyWebView from 'react-native-webview-autoheight';
+import showdown from 'showdown';
+
+import defaultHTML from '../utils/defaultHTML';
+
+const { width } = Dimensions.get('window');
+
+const converter = new showdown.Converter();
 
 class SectionScreen extends React.Component {
   static navigationOptions = {
@@ -27,7 +35,7 @@ class SectionScreen extends React.Component {
   render() {
     const { navigation } = this.props;
     const section = navigation.getParam("section");
-
+    const markdownToHtml = converter.makeHtml(section.content);
     return (
       <ScrollView>
         <Container>
@@ -69,26 +77,30 @@ class SectionScreen extends React.Component {
             </CloseView>
           </TouchableOpacity>
           <Content>
-            {/* <WebView
-            source={{ html: section.content + htmlStyles }}
-            scalesPageToFit={false}
-            scrollEnabled={false}
-            ref="webview"
-            onNavigationStateChange={event => {
-              console.log(event);
-
-              if (event.url != "about:blank") {
-                this.refs.webview.stopLoading();
-                Linking.openURL(event.url);
-              }
-            }}
-          /> */}
-            <Markdown
-              body={section.content}
-              pureCSS={htmlStyles}
-              scalesPageToFit={false}
-              scrollEnabled={false}
-            />
+          <MyWebView
+          style={{
+            width: width - 40,
+            alignSelf: 'center',
+            marginBottom: 50,
+            marginTop: 20,
+          }}
+          source={{
+            html: defaultHTML
+              .replace('$title', '')
+              .replace('$body', markdownToHtml)
+              .replace('$pureCSS', htmlStyles),
+          }}
+          scalesPageToFit={false}
+          scrollEnabled={false}
+          startInLoadingState
+          ref="webview"
+          onNavigationStateChange={event => {
+            if (event.url.includes('http')) {
+              this.refs.webview.stopLoading();
+              Linking.openURL(event.url);
+            }
+          }}
+          />
           </Content>
         </Container>
       </ScrollView>
@@ -122,17 +134,17 @@ const htmlStyles = `
       font-weight: 600;
       margin-top: 50px;
     }
-  
+
     p {
       margin-top: 20px;
     }
-  
+
     a {
       color: #4775f2;
       font-weight: 600;
       text-decoration: none;
     }
-  
+
     strong {
       font-weight: 700;
     }
@@ -151,16 +163,13 @@ const htmlStyles = `
       border-radius: 10px;
       margin-top: 20px;
     }
-    
+
     code {
       color: white;
     }
 `;
 
-const Content = styled.View`
-  height: 1000px;
-  padding: 20px;
-`;
+const Content = styled.View``;
 
 const Container = styled.View`
   flex: 1;
diff --git a/utils/defaultHTML.js b/utils/defaultHTML.js
new file mode 100644
index 0000000..6ea44bc
--- /dev/null
+++ b/utils/defaultHTML.js
@@ -0,0 +1,32 @@
+module.exports = `<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+        <meta name="format-detection" content="telephone=no">
+        <meta name="format-detection" content="date=no">
+        <meta name="format-detection" content="address=no">
+        <meta name="format-detection" content="email=no">
+
+        <title>$title</title>
+
+        <style type="text/css">
+            body {
+                font-family: Roboto, '-apple-system', Helvetica Neue, Arial;
+            }
+            b, strong {
+                font-family: Roboto, '-apple-system', Helvetica Neue, Arial;
+                font-weight: bold;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                font-family: Roboto, '-apple-system', Helvetica Neue, Arial;
+                font-weight: bold;
+            }
+            $pureCSS
+        </style>
+    </head>
+    <body>
+        $body
+    </body>
+</html>`;