diff --git a/src/app/components/Landing.js b/src/app/components/Landing.js
index 184ef53..51515bd 100644
--- a/src/app/components/Landing.js
+++ b/src/app/components/Landing.js
@@ -1,15 +1,16 @@
-import React from 'react';
-import Scroll from 'react-scroll';
-import { Row } from 'react-flexbox-grid';
-import Welcome from './landing/Welcome';
-import About from './landing/About';
-import Events from './landing/Events';
-import Tracks from './landing/Tracks';
-import Partners from './landing/Partners';
-import Hacktalks from './landing/Hacktalks';
-import Media from './landing/Media';
-import Volunteer from './landing/Volunteer';
-import Footer from './landing/Footer';
+import React from "react";
+import Scroll from "react-scroll";
+import { Row } from "react-flexbox-grid";
+import Welcome from "./landing/Welcome";
+import About from "./landing/About";
+import Events from "./landing/Events";
+import Tracks from "./landing/Tracks";
+import Partners from "./landing/Partners";
+import Hacktalks from "./landing/Hacktalks";
+import Media from "./landing/Media";
+import Volunteer from "./landing/Volunteer";
+import Footer from "./landing/Footer";
+import Pictures from "./landing/Pictures";
 
 class Landing extends React.Component {
   render() {
@@ -40,13 +41,83 @@ class Landing extends React.Component {
         </nav>
         <nav className="junction_menu">
           <ul>
-            <li><Scroll.Link activeClass="active" to="welcome" spy={true} smooth={true} duration={500}>Welcome</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="about" spy={true} smooth={true} duration={500}>About</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="tracks" spy={true} smooth={true} duration={500}>Tracks</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="partners" spy={true} smooth={true} duration={500}>Partners</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="hacktalks" spy={true} smooth={true} duration={500}>FAQ</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="events" spy={true} smooth={true} duration={500}>Special Events</Scroll.Link></li>
-            <li><Scroll.Link activeClass="active" to="media" spy={true} smooth={true} duration={500}>Media</Scroll.Link></li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="welcome"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                Welcome
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="about"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                About
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="tracks"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                Tracks
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="partners"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                Partners
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="hacktalks"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                FAQ
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="events"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                Special Events
+              </Scroll.Link>
+            </li>
+            <li>
+              <Scroll.Link
+                activeClass="active"
+                to="media"
+                spy={true}
+                smooth={true}
+                duration={500}
+              >
+                Media
+              </Scroll.Link>
+            </li>
           </ul>
         </nav>
         <div id="welcome">
@@ -73,6 +144,9 @@ class Landing extends React.Component {
         <div id="volunteer">
           <Volunteer />
         </div>
+        <div id="picture">
+          <Pictures />
+        </div>
         <div id="footer">
           <Footer />
         </div>
diff --git a/src/app/components/landing/Pictures.c.scss b/src/app/components/landing/Pictures.c.scss
new file mode 100644
index 0000000..073f893
--- /dev/null
+++ b/src/app/components/landing/Pictures.c.scss
@@ -0,0 +1,9 @@
+.block {
+  background-color: #232323;
+}
+
+.image {
+  display: block;
+  max-width: 100%;
+  padding-top: 16px;
+}
diff --git a/src/app/components/landing/Pictures.js b/src/app/components/landing/Pictures.js
index 131442c..a8b64ca 100644
--- a/src/app/components/landing/Pictures.js
+++ b/src/app/components/landing/Pictures.js
@@ -1,105 +1,40 @@
 import React from "react";
-import Slider from "react-slick";
-import { Grid, Row, Col } from "react-flexbox-grid";
+import Scroll from "react-scroll";
+import { Row, Col } from "react-flexbox-grid";
+import Block from "../viewBlocks/Block";
+import BlockHeader from "../viewBlocks/BlockHeader";
+import styles from "./Pictures.c.scss";
 
-const settings = {
-  dots: true,
-  infinite: false,
-  speed: 500,
-  slidesToShow: 4,
-  slidesToScroll: 4,
-  initialSlide: 0,
-  responsive: [
-    {
-      breakpoint: 1024,
-      settings: {
-        slidesToShow: 3,
-        slidesToScroll: 3,
-        infinite: true,
-        dots: true,
-      },
-    },
-    {
-      breakpoint: 600,
-      settings: {
-        slidesToShow: 2,
-        slidesToScroll: 2,
-        initialSlide: 2,
-      },
-    },
-    {
-      breakpoint: 480,
-      settings: {
-        slidesToShow: 1,
-        slidesToScroll: 1,
-      },
-    },
-  ],
-};
+const images = [
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+  "http://lorempixel.com/400/200/",
+];
 
-const Pictures = () =>
-  <Grid fluid>
-    <Row start="xs" className="junction_media">
-      <Col xsOffset={1} xs={5}>
-        <h1 className="text-underline">IN PICTURES</h1>
-      </Col>
-    </Row>
-    <Row start="xs">
-      <Col xsOffset={1} xs={9}>
-        <div className="picture_container">
-          <Slider {...settings}>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-            <div>
-              <img
-                className="responsive picture_container_image"
-                src="http://lorempixel.com/400/200/"
-              />
-            </div>
-          </Slider>
-        </div>
-      </Col>
-    </Row>
-  </Grid>;
+const Pictures = () => (
+  <Scroll.Element name="pictures">
+    <Block className={styles.block}>
+      <BlockHeader title="IN PICTURES" />
+      <Row start="xs">
+        {images.map((url, index) => (
+          <Col xs={6} sm={4} md={2} key={index}>
+            <div>
+              <img src={url} className={styles.image} />
+            </div>
+          </Col>
+        ))}
+      </Row>
+    </Block>
+  </Scroll.Element>
+);
 
 export default Pictures;