diff --git a/css/style.css b/css/style.css
index f46027b..e2048bb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -472,7 +472,7 @@ body {
 }
 
 .layout-container {
-  max-width: 75rem;
+  max-width: 65rem;
   margin-left: auto;
   margin-right: auto;
   padding-left: 1.5rem;
@@ -1085,6 +1085,19 @@ p:last-child {
   color: #0f0f0f;
 }
 
+.pager .pager__items {
+  margin: 1rem 0;
+}
+.pager .pager__items .pager__item a {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.71429;
+  color: #6a6a6a;
+}
+.pager .pager__items .pager__item.is-active a {
+  color: #0f0f0f;
+}
+
 /**
   Define the styling of the semantic components.
  */
@@ -1197,3 +1210,86 @@ header .user--account-menu > li {
 .header .button {
   margin-bottom: 0;
 }
+
+.node--type-article.node--view-mode-teaser {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 3.5rem;
+}
+.node--type-article.node--view-mode-teaser .node__content {
+  flex: 1 1 auto;
+  padding-right: 2rem;
+}
+.node--type-article.node--view-mode-teaser .node__content h2 {
+  font-size: 18px;
+  font-size: 1.125rem;
+  line-height: 1.33333;
+  margin-bottom: .5rem;
+}
+@media only screen and (min-width: 64rem) {
+  .node--type-article.node--view-mode-teaser .node__content h2 {
+    font-size: 24px;
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+}
+.node--type-article.node--view-mode-teaser .node__content p {
+  display: none;
+}
+@media only screen and (min-width: 64rem) {
+  .node--type-article.node--view-mode-teaser .node__content p {
+    display: block;
+    font-size: 14px;
+    font-size: 0.875rem;
+    line-height: 1.71429;
+    color: #6a6a6a;
+    margin-bottom: .25rem;
+  }
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-bottom {
+  margin: .5rem 0;
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.71429;
+  color: #0f0f0f;
+  font-weight: 600;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-bottom a {
+  color: #0f0f0f;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags {
+  font-size: 12px;
+  font-size: 0.75rem;
+  line-height: 2;
+  line-height: 4;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags .field__label {
+  display: none;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags .field__items {
+  display: inline-block;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags .field__items .field__item {
+  display: inline;
+  margin-right: .75rem;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags .field__items .field__item a {
+  padding: .5rem;
+  color: #484848;
+  background: #EEEEEE;
+}
+.node--type-article.node--view-mode-teaser .node__content .node__content-tags .field__items .field__item a:hover {
+  color: #0f0f0f;
+}
+.node--type-article.node--view-mode-teaser .node__media {
+  flex: 1 0 auto;
+  max-width: 100px;
+}
+@media only screen and (min-width: 64rem) {
+  .node--type-article.node--view-mode-teaser .node__media {
+    flex: 1 0 auto;
+    max-width: 100%;
+  }
+}
diff --git a/medium_theme.info.yml b/medium_theme.info.yml
index 38b1d81..f6ba3f5 100644
--- a/medium_theme.info.yml
+++ b/medium_theme.info.yml
@@ -6,7 +6,7 @@ core: 8.x
 libraries:
   - medium_theme/global-styling
 
-base theme: stable
+base theme: classy
 
 regions:
   branding: Branding
diff --git a/sass/components/_components.scss b/sass/components/_components.scss
index f9001ad..470e734 100644
--- a/sass/components/_components.scss
+++ b/sass/components/_components.scss
@@ -9,3 +9,4 @@
 @import "title";
 @import "paragraph";
 @import "navigation";
+@import "pager";
diff --git a/sass/components/_pager.scss b/sass/components/_pager.scss
index e69de29..94a864d 100644
--- a/sass/components/_pager.scss
+++ b/sass/components/_pager.scss
@@ -0,0 +1,16 @@
+.pager {
+  .pager__items {
+    margin: 1rem 0;
+    .pager__item {
+      a {
+        @include typecsset-font-size(14px);
+        color: $color--grey;
+      }
+      &.is-active {
+        a {
+          color: $color--black;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sass/pages/_index.scss b/sass/pages/_index.scss
index 43f1bab..444d203 100644
--- a/sass/pages/_index.scss
+++ b/sass/pages/_index.scss
@@ -2,4 +2,72 @@
   .button {
     margin-bottom: 0;
   }
+}
+.node--type-article {
+  &.node--view-mode-teaser {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 3.5rem;
+    .node__content {
+      flex: 1 1 auto;
+      padding-right: $grid--gutter+1;
+      h2 {
+        @include typecsset-font-size(18px);
+        margin-bottom: .5rem;
+        @include bp-medium() {
+          @include typecsset-font-size(24px);
+        }
+      }
+      p {
+        display: none;
+        @include bp-medium() {
+          display: block;
+          @include typecsset-font-size(14px);
+          color: $color--grey;
+          margin-bottom: .25rem;
+        }
+      }
+      .node__content-bottom {
+        margin: .5rem 0;
+        @include typecsset-font-size(14px);
+        color: $color--black;
+        font-weight: $font--semibold;
+        a {
+          color: $color--black;
+        }
+      }
+      .node__content-tags {
+        @include typecsset-font-size(12px);
+        line-height: 4;
+        .field__label {
+          display: none;
+        }
+        .field__items {
+          display: inline-block;
+          .field__item {
+            display: inline;
+            margin-right: .75rem;
+            a {
+              padding: .5rem;
+              color: $color--dark-grey;
+              background: $color--whisper;
+              &:hover {
+                color: $color--black;
+              }
+            }
+          }
+        }
+      }
+    }
+    .node__media {
+      flex: 1 0 auto;
+      max-width: 100px;
+      @include bp-medium() {
+        flex: 1 0 auto;
+        max-width: 100%;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/sass/settings/_variables.scss b/sass/settings/_variables.scss
index 8514b4c..33f3525 100644
--- a/sass/settings/_variables.scss
+++ b/sass/settings/_variables.scss
@@ -36,7 +36,7 @@ $bp-larger-than-tablet: "min-width: 64rem" !default;
 $bp-larger-than-desktop: "min-width: 75rem" !default;
 
 /* Spacings and widths */
-$layout--container-max-width: 75rem;
+$layout--container-max-width: 65rem;
 $grid-columns: 12;
 $grid--gutter: 1rem;
 $spacing--small: .5rem;
diff --git a/templates/node--article--teaser.html.twig b/templates/node--article--teaser.html.twig
index e69de29..173d710 100644
--- a/templates/node--article--teaser.html.twig
+++ b/templates/node--article--teaser.html.twig
@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+{% set classes = [
+'node',
+'node--type-' ~ node.bundle|clean_class,
+node.isPromoted() ? 'node--promoted',
+node.isSticky() ? 'node--sticky',
+not node.isPublished() ? 'node--unpublished',
+view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+] %}
+<article{{ attributes.addClass(classes) }}>
+  
+  <div class='node__content'>
+    {{ title_prefix }}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+    {{ title_suffix }}
+    {{ content.body }}
+    <div class="node__content-bottom"> {{ author_name }} | {{ date }}</div>
+    <div class="node__content-tags"> {{ content.field_tags }} </div>
+  </div>
+  <div class='node__media'>
+    {{ content.field_image }}
+  </div>
+
+</article>