diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx
index 6263288c1..89230e1fb 100644
--- a/src/views/hoc/hoc.jsx
+++ b/src/views/hoc/hoc.jsx
@@ -134,6 +134,34 @@ var Hoc = React.createClass({
                                     </a>
                                 </div>
                             </div>
+                            <div className="hoc-section-resource">
+                                <img className="hoc-section-resource-img"
+                                     src="/svgs/tips-card.svg"
+                                     alt="" />
+                                <div className="hoc-section-resource-info">
+                                    <h5 className="hoc-section-resource-info-header">
+                                        <FormattedMessage id='hoc.tipsMakeItFlyTitle' />
+                                    </h5>
+                                    <a className="hoc-section-resource-anchor"
+                                       href="/scratchr2/static/pdfs/help/FlyCards.pdf">
+                                        <FormattedMessage id='hoc.activityCards' />
+                                    </a>
+                                </div>
+                            </div>
+                            <div className="hoc-section-resource">
+                                <img className="hoc-section-resource-img"
+                                     src="/svgs/tips-card.svg"
+                                     alt="" />
+                                <div className="hoc-section-resource-info">
+                                    <h5 className="hoc-section-resource-info-header">
+                                        <FormattedMessage id='hoc.tipsMakeMusicTitle' />
+                                    </h5>
+                                    <a className="hoc-section-resource-anchor"
+                                       href="/scratchr2/static/pdfs/help/MusicCards.pdf">
+                                        <FormattedMessage id='hoc.activityCards' />
+                                    </a>
+                                </div>
+                            </div>
                         </section>
 
                         <section className="hoc-section">
diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss
index d4cb81b20..f6b098ab6 100644
--- a/src/views/hoc/hoc.scss
+++ b/src/views/hoc/hoc.scss
@@ -102,7 +102,6 @@ $base-bg: $ui-white;
 
     text-align: left;
     justify-content: center;
-    align-items: center;
 }
 
 .hoc-section-resource-img,
@@ -112,6 +111,8 @@ $base-bg: $ui-white;
 
 .hoc-section-resource {
     width: 33%;
+    min-height: 4rem;
+    align-items: flex-start;
 }
 
 .hoc-section-resource-anchor {
@@ -127,6 +128,7 @@ $base-bg: $ui-white;
 
 .hoc-section-studio {
     width: 50%;
+    align-items: center;
 }
 
 .hoc-section-studio-img {