diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx
index 736cdfa5b..0067da3f9 100644
--- a/src/views/hoc/hoc.jsx
+++ b/src/views/hoc/hoc.jsx
@@ -16,21 +16,21 @@ var View = React.createClass({
                 <div className="card-deck">
                     <div className="card">
                         <div className="card-info">
-                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <img src="/images/hide-seek-tutorial.png" />
                             <Button>Create a Hide & Seek Game</Button>
                         </div>
                     </div>
 
                     <div className="card">
                         <div className="card-info">
-                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <img src="/images/dance-tutorial.png" />
                             <Button>Compose a Dance Sequence</Button>
                         </div>
                     </div>
 
                     <div className="card">
                         <div className="card-info">
-                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <img src="/images/name-tutorial.png" />
                             <Button>Animate Your Name</Button>
                         </div>
                     </div>
@@ -52,6 +52,28 @@ var View = React.createClass({
                                 <p>Below are some resources to help explore Scratch by yourself or to assist groups in
                                 workshops and classrooms <a href="">Find out more</a></p>
                             </div>
+
+                            <div className="resource">
+                                    <img src="/svgs/tips-card.svg" />
+                                    <div className="resource-info">
+                                        <a href="">Hide & Seek Tip Cards</a>
+                                        <div className="file-size">13mbs</div>
+                                    </div>
+                            </div>
+                            <div className="resource">
+                                    <img src="/svgs/tips-card.svg" />
+                                    <div className="resource-info">
+                                        <a href="">Dance Tip Cards</a>
+                                        <div className="file-size">5mbs</div>
+                                    </div>
+                            </div>
+                            <div className="resource">
+                                    <img src="/svgs/tips-card.svg" />
+                                    <div className="resource-info">
+                                        <a href="">Name Tip Cards</a>
+                                        <div className="file-size">11mbs</div>
+                                    </div>
+                            </div>
                         </section>
 
                         <section className="two-up">
@@ -62,7 +84,7 @@ var View = React.createClass({
                                 Window</a></p>
                             </div>
                             <div className="column">
-                                <img src="https://www.dropbox.com/s/l1n1ba7aof3qqx4/tips-test-animation.gif?dl=1"></img>
+                                <img src="/images/tips-test-animation.gif" />
                             </div>
                         </section>
 
diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss
index 70eea34b4..12d6a5dba 100644
--- a/src/views/hoc/hoc.scss
+++ b/src/views/hoc/hoc.scss
@@ -19,7 +19,7 @@ $base-bg: $ui-white;
         .box {
             margin-bottom: 100px;
         }
-    } 
+    }
 
     .top-banner {
         margin-top: 10px;
@@ -30,7 +30,6 @@ $base-bg: $ui-white;
         padding: 10px 0;
 
         width: 100%;
-        
 
         h1, 
         p {
@@ -152,6 +151,42 @@ $base-bg: $ui-white;
             font-weight: 300; 
         }
 
+        .resource {
+            display: flex;
+            margin: 10px;
+            border-radius: 5px;
+
+            padding: 10px 15px;
+            width: 30%;
+            min-width: 200px;
+            max-width: 230px;
+            text-align: left;
+
+            justify-content: center;
+            align-items: center;
+
+            img {
+                margin-right: 10px;
+            }
+
+            a {
+                font-size: .8em;
+                font-weight: 500;
+            }
+
+            .file-size {
+                margin-top: 5px;
+                width: inherit;
+
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                color: $ui-orange;
+                font-size: .7em;
+                font-weight: 700;
+
+            }
+        }
+
         &.one-up {
             text-align: center;
 
@@ -162,7 +197,7 @@ $base-bg: $ui-white;
         }
 
         &.two-up {
-
+            
             .column {
                 margin: 10px;
 
diff --git a/static/images/dance-tutorial.png b/static/images/dance-tutorial.png
new file mode 100644
index 000000000..de81669da
Binary files /dev/null and b/static/images/dance-tutorial.png differ
diff --git a/static/images/hide-seek-tutorial.png b/static/images/hide-seek-tutorial.png
new file mode 100644
index 000000000..f832b0791
Binary files /dev/null and b/static/images/hide-seek-tutorial.png differ
diff --git a/static/images/name-tutorial.png b/static/images/name-tutorial.png
new file mode 100644
index 000000000..aa44045f0
Binary files /dev/null and b/static/images/name-tutorial.png differ
diff --git a/static/images/tips-test-animation.gif b/static/images/tips-test-animation.gif
new file mode 100644
index 000000000..15f856b84
Binary files /dev/null and b/static/images/tips-test-animation.gif differ
diff --git a/static/svgs/notifications.svg b/static/svgs/notifications.svg
new file mode 100644
index 000000000..fb4772ee4
--- /dev/null
+++ b/static/svgs/notifications.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#FFFFFF;" d="M17,4h-5.1l-1.2-1.9c-0.2-0.2-0.4-0.4-0.7-0.4H4.8c-0.3,0-0.5,0.1-0.7,0.3l-1.5,2
+			C1.2,4.3,0.1,5.5,0.1,6.9v8.5c0,1.6,1.3,2.8,2.9,2.8h14c1.6,0,2.8-1.3,2.8-2.8V6.9C19.9,5.3,18.6,4,17,4z M1.9,6.9
+			c0-0.6,0.5-1.2,1.2-1.2c0.3,0,0.5-0.1,0.7-0.3l1.5-1.9h4.4l1.2,1.8c0.2,0.2,0.4,0.4,0.7,0.4H17c0.6,0,1.1,0.5,1.1,1.2V7
+			c-0.3-0.1-0.7-0.2-1.1-0.2H3C2.6,6.8,2.2,6.9,1.9,7V6.9z M18.1,15.3c0,0.6-0.5,1.1-1.1,1.1H3c-0.6,0-1.2-0.5-1.2-1.1V9.7
+			C1.9,9,2.4,8.5,3,8.5h14c0.6,0,1.1,0.5,1.1,1.2V15.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/static/svgs/tips-card.svg b/static/svgs/tips-card.svg
new file mode 100644
index 000000000..f529b9a22
--- /dev/null
+++ b/static/svgs/tips-card.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="54px" viewBox="0 0 50 54" enable-background="new 0 0 50 54" xml:space="preserve">
+<g>
+	<g opacity="0.4">
+		
+			<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M28.3,6.3H12.5l0.8-2.6C13.7,2.6,14.8,2,16,2.4L28.3,6.3z"/>
+	</g>
+	<g opacity="0.4">
+		
+			<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M48.4,15l-5,15.7v16.4c0,1.2-1,2.1-2.1,2.1h-3.8l-0.8,2.6c-0.4,1.1-1.6,1.7-2.7,1.4l-12.4-3.9h-13c-1.2,0-2.1-1-2.1-2.1v-2.7
+			l-3.6-1.1c-1.1-0.4-1.7-1.6-1.4-2.7l5-15.7V8.4c0-1.2,1-2.1,2.1-2.1h19.7l15.1,4.8l3.6,1.2C48.2,12.7,48.8,13.8,48.4,15z"/>
+		
+			<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M43.4,8.4v2.7L28.3,6.3h13C42.5,6.3,43.4,7.3,43.4,8.4z"/>
+	</g>
+	<g>
+		
+			<path fill="#B6ECFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M34,51.6L2.9,41.7c-1.1-0.4-1.7-1.5-1.4-2.7L13.3,2.2c0.4-1.1,1.5-1.7,2.7-1.4l31.1,9.9c1.1,0.4,1.7,1.5,1.4,2.7L36.7,50.2
+			C36.4,51.4,35.2,52,34,51.6z"/>
+	</g>
+	<g>
+		
+			<path fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M41.3,47.7H8.7c-1.2,0-2.1-1-2.1-2.1V6.9c0-1.2,1-2.1,2.1-2.1h32.6c1.2,0,2.1,1,2.1,2.1v38.6C43.4,46.7,42.5,47.7,41.3,47.7z"/>
+	</g>
+	
+		<path fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M35.4,41.2H14.6c-1.7,0-3-1.3-3-3V16.4h26.8v21.8C38.4,39.8,37,41.2,35.4,41.2z"/>
+	
+		<path fill="#2398C1" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M38.4,16.4H11.6v-2.2c0-1.5,1.2-2.8,2.8-2.8h21.2c1.5,0,2.8,1.2,2.8,2.8V16.4z"/>
+	<g>
+		
+			<polygon fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			29.1,30.4 25,34.5 20.9,30.4 22.7,30.4 22.7,26.5 27.3,26.5 27.3,30.4 		"/>
+		
+			<line fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="23.2" y1="23.9" x2="26.8" y2="23.9"/>
+		
+			<line fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="24" y1="21.6" x2="26" y2="21.6"/>
+	</g>
+</g>
+</svg>