diff --git a/css/style.css b/css/style.css
index b58be8a..2bf941a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,44 @@
+/*on-scroll menu */
+.fixed-header-enabled.onscroll .header-container ul.menu {
+  text-align: right;
+}
+
+
+/*====lp article preview cards==================*/
+.preview-card__grid-row {
+  display: flex;
+  justify-content: space-between;
+}
+.preview-card {
+  box-shadow: 0 2px 14px rgba(100, 100, 100, 0.1), 0 2px 2px rgba(100, 100, 100, 0.1);
+  border: 1px solid #e4e4e4;
+}
+.preview-card {
+  margin: 0 1em 2em 1em;
+  height: 250px
+}
+.preview-card:last-child {
+
+  margin: 0 0 2em 1em;
+
+}
+.preview-card:first-child {
+
+  margin: 0 1em 2rem 0;
+
+}
+.preview-card__caption {
+  margin: 10px;
+}
+
+
+
+
+/*================================================*/
 
 /*change header title fontsize*/
 .col-md-12 .site-name a {
-  font-size: 60px;
+  font-size: 40px;
 }
 
 .header-top__container {
@@ -42,26 +79,47 @@
 /*tweak images added to articles*/
 details#journal-article-text-tab img,
 .path-frontpage .node--view-mode-teaser img {
-    border: 1px solid #ccc;
-      padding: 4px;
-        width: 200px;
-          float: left;
-            margin-right: 1rem;
-              margin-top: 1rem;
-            }
+  border: 1px solid #ccc;
+  padding: 4px;
+  width: 200px;
+  float: left;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
 .field__label {
-    font-family: 'Merriweather', Georgia, Times New Roman, Serif;
-  }
+  /*font-family: 'Merriweather', Georgia, Times New Roman, Serif;*/
+  /*font-family: 'Merriweather', Georgia, Times New Roman, Serif;*/
+  /*font-family: 'Merriweather', Georgia, Times New Roman, Serif;*/
+  font-family: 'Libre Baskerville', serif;
+}
 .field--name-field-issue-number .field__label {
-    font-family: inherit;
-      font-weight: initial;
-    }
+  font-family: inherit;
+  font-weight: initial;
+}
 .path-frontpage .node--view-mode-teaser {
-    padding: 0 0 30px 0;
-      margin-bottom: 30px;
-    }
+  padding: 0 0 30px 0;
+  margin-bottom: 30px;
+}
+
 
+.logo {
+  width:110px;
+}
+/*headings*/
+.hff-01 h1,
+.hff-01 h2,
+.hff-01 h3,
+.hff-01 h4,
+.hff-01 h5,
+.hff-01 h6,
+.hff-01 .tp-caption__title,
+.hff-01 .tp-caption__subtitle,
+.sff-01 .site-name,
+.slff-01 .site-slogan,
+.hff-01 .nav-tab__title {
+  font-family: 'Libre Baskerville', Georgia, Times New Roman, Serif;
+}
+.site-name {
+  font-size:2rem;
+}
 
-    .logo {
-    width:110px;
-    }
diff --git a/lmmi_journal.info.yml b/lmmi_journal.info.yml
index 5282ce3..8c1e0eb 100644
--- a/lmmi_journal.info.yml
+++ b/lmmi_journal.info.yml
@@ -7,6 +7,11 @@ base theme: magazineplus
 # Defines libraries group in which we can add css/js.
 libraries:
   - lmmi_journal/global-styling
+  - lmmi_journal/fonts
+
+stylesheets-remove: core/themes/stable/css/views/views.module.css
+
+
 # Regions
 regions:
   slideout: 'Slideout'
diff --git a/lmmi_journal.libraries.yml b/lmmi_journal.libraries.yml
index 825b153..92827dc 100644
--- a/lmmi_journal.libraries.yml
+++ b/lmmi_journal.libraries.yml
@@ -1,5 +1,15 @@
 global-styling:
   css:
     theme:
-      css/color-lime.css: {}
-      css/style.css: {}
+      css/style.css: {weight: 160, preprocess: FALSE}
+
+fonts:
+  version: VERSION
+  remote: //fonts.googleapis.com/css
+  css:
+    theme:
+      //fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&subset=latin-ext: { type: external }
+  license:
+    name: SIL Open Font License, 1.1
+    url: //scripts.sil.org/OFL
+    gpl-compatible: true
diff --git a/templates/node--journal-article.html.twig b/templates/node--journal-article.html.twig
new file mode 100644
index 0000000..cc114df
--- /dev/null
+++ b/templates/node--journal-article.html.twig
@@ -0,0 +1,130 @@
+{#
+/**
+ * @file
+ * Magazine+'s theme implementation 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()
+ */
+#}
+{{ dump() }}
+
+{#{{ kint(node) }}#}
+{%
+  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,
+    'clearfix',
+  ]
+%}
+{{ attach_library('classy/node') }}
+{{ attach_library('magazineplus/node') }}
+<article{{ attributes.addClass(classes) }}>
+  <div class="node__container">
+    {% block node_side %}
+    {% endblock %}
+    <div{{ content_attributes.addClass('node__main-content', 'clearfix') }}>
+      {% block header_top %}
+      {% endblock %}
+      <header class="node__header">
+        {% block title_area %}
+          {{ title_prefix }}
+          {% if not page %}
+            <h2{{ title_attributes.addClass('node__title') }}>
+              <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+            </h2>
+          {% else %}
+            <h2{{ title_attributes.addClass('node__title title sr-only') }}>
+              {{ label }}
+            </h2>
+          {% endif %}
+          {{ title_suffix }}
+        {% endblock %}
+        {% block meta_area %}
+          {% if display_submitted %}
+            <div class="node__meta">
+              {{ author_picture }}
+              <span{{ author_attributes.addClass('node__submitted-info') }}>
+                {% trans %}
+                  <span class="node__submitted-info-text">By</span> {{ author_name }} on 
+                  <span class="node__submitted-date">
+                    {{ date }}
+                  </span>
+                {% endtrans %}
+              </span>
+              {{ metadata }}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </header>
+      {% block content %}
+        {{ content }}
+      {% endblock %}
+      {% block content_bottom %}
+      {% endblock %}
+    </div>
+  </div>
+</article>
diff --git a/templates/views/views-view-grid--recent-content.html.twig b/templates/views/views-view-grid--recent-content.html.twig
new file mode 100644
index 0000000..cc2d0a5
--- /dev/null
+++ b/templates/views/views-view-grid--recent-content.html.twig
@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Theme override for views to display rows in a grid.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapping element.
+ * - title: The title of this group of rows.
+ * - view: The view object.
+ * - rows: The rendered view results.
+ * - options: The view plugin style options.
+ *   - row_class_default: A flag indicating whether default classes should be
+ *     used on rows.
+ *   - col_class_default: A flag indicating whether default classes should be
+ *     used on columns.
+ * - items: A list of grid items. Each item contains a list of rows or columns.
+ *   The order in what comes first (row or column) depends on which alignment
+ *   type is chosen (horizontal or vertical).
+ *   - attributes: HTML attributes for each row or column.
+ *   - content: A list of columns or rows. Each row or column contains:
+ *     - attributes: HTML attributes for each row or column.
+ *     - content: The row or column contents.
+ *
+ * @see template_preprocess_views_view_grid()
+ */
+#}
+{%
+  set classes = [
+    'views-view-grid',
+    'preview-card__grid',
+    options.alignment,
+    'cols-' ~ options.columns,
+    'clearfix',
+  ]
+%}
+{% if options.row_class_default %}
+  {%
+    set row_classes = [
+      'views-row',
+      'preview-card__grid-row',
+      options.alignment == 'horizontal' ? 'clearfix',
+    ]
+  %}
+{% endif %}
+{% if options.col_class_default %}
+  {%
+    set col_classes = [
+      'views-col preview-card',
+      options.alignment == 'vertical' ? 'clearfix',
+    ]
+  %}
+{% endif %}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div{{ attributes.addClass(classes) }}>
+  {% if options.alignment == 'horizontal' %}
+    {% for row in items %}
+      <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
+        {% for column in row.content %}
+          <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
+            {{- column.content -}}
+          </div>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  {% else %}
+    {% for column in items %}
+      <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
+        {% for row in column.content %}
+          <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
+            {{- row.content -}}
+          </div>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  {% endif %}
+</div>
diff --git a/templates/views/views-view-grid.html.twig b/templates/views/views-view-grid.html.twig
new file mode 100644
index 0000000..8a3a20b
--- /dev/null
+++ b/templates/views/views-view-grid.html.twig
@@ -0,0 +1,76 @@
+{#
+/**
+ * @file
+ * Theme override for views to display rows in a grid.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapping element.
+ * - title: The title of this group of rows.
+ * - view: The view object.
+ * - rows: The rendered view results.
+ * - options: The view plugin style options.
+ *   - row_class_default: A flag indicating whether default classes should be
+ *     used on rows.
+ *   - col_class_default: A flag indicating whether default classes should be
+ *     used on columns.
+ * - items: A list of grid items. Each item contains a list of rows or columns.
+ *   The order in what comes first (row or column) depends on which alignment
+ *   type is chosen (horizontal or vertical).
+ *   - attributes: HTML attributes for each row or column.
+ *   - content: A list of columns or rows. Each row or column contains:
+ *     - attributes: HTML attributes for each row or column.
+ *     - content: The row or column contents.
+ *
+ * @see template_preprocess_views_view_grid()
+ */
+#}
+{%
+  set classes = [
+    'views-view-grid',
+    options.alignment,
+    'cols-' ~ options.columns,
+    'clearfix',
+  ]
+%}
+{% if options.row_class_default %}
+  {%
+    set row_classes = [
+      'views-row',
+      options.alignment == 'horizontal' ? 'clearfix',
+    ]
+  %}
+{% endif %}
+{% if options.col_class_default %}
+  {%
+    set col_classes = [
+      'views-col',
+      options.alignment == 'vertical' ? 'clearfix',
+    ]
+  %}
+{% endif %}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div{{ attributes.addClass(classes) }}>
+  {% if options.alignment == 'horizontal' %}
+    {% for row in items %}
+      <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
+        {% for column in row.content %}
+          <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
+            {{- column.content -}}
+          </div>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  {% else %}
+    {% for column in items %}
+      <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
+        {% for row in column.content %}
+          <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
+            {{- row.content -}}
+          </div>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  {% endif %}
+</div>