diff --git a/components/common-banner.js b/components/common-banner.js
index d3c8fb4bb..e8a0b09b9 100644
--- a/components/common-banner.js
+++ b/components/common-banner.js
@@ -11,9 +11,10 @@ export default props => (
         background-color: #f4f7fb;
         min-height: 150px;
         text-align: center;
+        padding-top: 30px;
+        padding-bottom: 30px;
       }
       .headline {
-        padding-top: 20px;
         font-size: 4em;
         color: #df1cb5;
         font-weight: 900;
@@ -24,7 +25,6 @@ export default props => (
         margin-right: auto;
         letter-spacing: 2px;
         line-height: 2;
-        margin-bottom: 30px;
       }
       @media (max-width: 720px) {
         h2 {
diff --git a/components/content-loaders.js b/components/content-loaders.js
new file mode 100644
index 000000000..95d03654a
--- /dev/null
+++ b/components/content-loaders.js
@@ -0,0 +1,243 @@
+import React from 'react';
+
+export const CardContentLoader = () => (
+  <div className="root">
+    <div className="main">
+      <div className="animation-background">
+        <div className="background-masker header-right" />
+        <div className="background-masker subheader-bottom" />
+        <div className="background-masker content-first-end" />
+        <div className="background-masker content-second-line" />
+        <div className="background-masker content-third-end" />
+      </div>
+    </div>
+    <style jsx>{`
+      @keyframes placeHolderShimmer {
+        0% {
+          background-position: -468px 0;
+        }
+        100% {
+          background-position: 468px 0;
+        }
+      }
+
+      .root {
+        color: #141823;
+        padding: 20px;
+      }
+
+      .main {
+        background: #fff;
+        border: 1px solid;
+        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+        border-radius: 3px;
+        padding: 12px;
+        margin: 0 auto;
+        max-width: 600px;
+        min-height: 120px;
+      }
+
+      .animation-background {
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: placeHolderShimmer;
+        animation-timing-function: linear;
+        background: #f6f7f8;
+        background: #eeeeee;
+        background: linear-gradient(
+          to right,
+          #eeeeee 8%,
+          #dddddd 18%,
+          #eeeeee 33%
+        );
+        background-size: 800px 104px;
+        height: 96px;
+        position: relative;
+      }
+
+      .background-masker {
+        background: #fff;
+        position: absolute;
+        box-sizing: border-box;
+      }
+
+      .outlined .background-masker {
+        border: 1px solid #ddd;
+      }
+
+      .outlined:hover .background-masker {
+        border: none;
+      }
+
+      .outlined:hover .background-masker:hover {
+        border: 1px solid #ccc;
+        z-index: 1;
+      }
+
+      .background-masker.header-top,
+      .background-masker.header-bottom,
+      .background-masker.subheader-bottom {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 20px;
+      }
+
+      .background-masker.header-left,
+      .background-masker.subheader-left,
+      .background-masker.header-right,
+      .background-masker.subheader-right {
+        top: 00px;
+        left: 40px;
+        height: 30px;
+        width: 10px;
+      }
+
+      .background-masker.header-bottom {
+        top: 18px;
+        height: 6px;
+      }
+
+      .background-masker.subheader-right {
+        top: 24px;
+        height: 18px;
+      }
+
+      .background-masker.header-right,
+      .background-masker.subheader-right {
+        width: auto;
+        left: 300px;
+        right: 0;
+      }
+
+      .background-masker.subheader-right {
+        left: 230px;
+      }
+
+      .background-masker.subheader-bottom {
+        top: 30px;
+        height: 25px;
+      }
+
+      .background-masker.content-top,
+      .background-masker.content-second-line,
+      .background-masker.content-third-line,
+      .background-masker.content-second-end,
+      .background-masker.content-third-end,
+      .background-masker.content-first-end {
+        top: 40px;
+        left: 0;
+        right: 0;
+        height: 6px;
+      }
+
+      .background-masker.content-top {
+        height: 20px;
+      }
+
+      .background-masker.content-first-end,
+      .background-masker.content-second-end {
+        width: auto;
+        left: 180px;
+        right: 0;
+        top: 40px;
+        height: 30px;
+      }
+      .background-masker.content-third-end {
+        width: auto;
+        right: 0;
+        height: 10px;
+      }
+
+      .background-masker.content-second-line {
+        top: 68px;
+        height: 20px;
+      }
+
+      .background-masker.content-second-end {
+        left: 420px;
+        top: 74px;
+      }
+
+      .background-masker.content-third-line {
+        top: 82px;
+      }
+
+      .background-masker.content-third-end {
+        left: 500px;
+        top: 88px;
+      }
+    `}</style>
+  </div>
+);
+
+export const TextContentLoader = props => (
+  <div className="root">
+    <div className="animation-background">
+      <div className="background-masker subheader-right" />
+    </div>
+    <style jsx>{`
+      @keyframes placeHolderShimmer {
+        0% {
+          background-position: -468px 0;
+        }
+        100% {
+          background-position: 468px 0;
+        }
+      }
+
+      .root {
+        background: #fff;
+        padding-top: ${props.topPadding};
+        margin: 0 auto;
+        max-width: 600px;
+      }
+
+      .animation-background {
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: placeHolderShimmer;
+        animation-timing-function: linear;
+        background: #f6f7f8;
+        background: #eeeeee;
+        background: linear-gradient(
+          to right,
+          #eeeeee 8%,
+          #dddddd 18%,
+          #eeeeee 33%
+        );
+        background-size: 800px 104px;
+        height: 20px;
+        position: relative;
+      }
+
+      .background-masker {
+        background: #fff;
+        position: absolute;
+        box-sizing: border-box;
+      }
+
+      .outlined .background-masker {
+        border: 1px solid #ddd;
+      }
+
+      .outlined:hover .background-masker {
+        border: none;
+      }
+
+      .outlined:hover .background-masker:hover {
+        border: 1px solid #ccc;
+        z-index: 1;
+      }
+
+      .background-masker.subheader-right {
+        top: 0px;
+        right: 0px;
+        height: 30px;
+        width: 300px;
+      }
+    `}</style>
+  </div>
+);
diff --git a/components/learn-components/accord-guide.js b/components/learn-components/accord-guide.js
index 5a5864b96..47b051fac 100644
--- a/components/learn-components/accord-guide.js
+++ b/components/learn-components/accord-guide.js
@@ -21,6 +21,7 @@ export default class AccordGuide extends Component {
       activeIndex: -1,
     };
   }
+
   handleClick = (e, titleProps) => {
     const { index } = titleProps;
     const { activeIndex } = this.state;
@@ -28,6 +29,7 @@ export default class AccordGuide extends Component {
 
     this.setState({ activeIndex: newIndex });
   };
+
   async componentDidMount() {
     try {
       const request = await fetch(this.props.url);
diff --git a/pages/events.js b/pages/events.js
index e32a01347..f5c486ee9 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import fetch from 'isomorphic-unfetch';
-import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
+import { Card, Divider } from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
 import CommonBanner from '../components/common-banner';
 import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
+import {
+  TextContentLoader,
+  CardContentLoader,
+} from '../components/content-loaders';
 
 class Events extends React.Component {
   state = {
@@ -106,15 +110,18 @@ class Events extends React.Component {
           pageTitle="Events"
           pageSubTitle="Because you cannot change the world alone"
         />
-        <main>
+        <div>
           {this.state.loading ? (
-            <Dimmer active>
-              <Loader indeterminate>Fetching Events</Loader>
-            </Dimmer>
+            <div style={{ backgroundColor: '#FFF' }}>
+              <TextContentLoader topPadding="80px" />
+              <CardContentLoader />
+              <CardContentLoader />
+              <CardContentLoader />
+            </div>
           ) : (
-            this.renderEvents()
+            <main>{this.renderEvents()}</main>
           )}
-        </main>
+        </div>
         <style jsx>{`
           main {
             background-color: #ffffff;