diff --git a/packages/marko-web-theme-monorail/.eslintignore b/packages/marko-web-theme-monorail/.eslintignore
new file mode 100644
index 000000000..c7a811092
--- /dev/null
+++ b/packages/marko-web-theme-monorail/.eslintignore
@@ -0,0 +1 @@
+*.marko.js
diff --git a/packages/marko-web-theme-monorail/.eslintrc.js b/packages/marko-web-theme-monorail/.eslintrc.js
new file mode 100644
index 000000000..2415c8b75
--- /dev/null
+++ b/packages/marko-web-theme-monorail/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.marko'],
+      },
+    },
+  },
+};
diff --git a/packages/marko-web-theme-monorail/browser/.eslintrc.js b/packages/marko-web-theme-monorail/browser/.eslintrc.js
new file mode 100644
index 000000000..2eb0b8d9c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'airbnb-base',
+    'plugin:vue/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {
+    'vue/max-attributes-per-line': ['error', {
+      singleline: 3,
+      multiline: {
+        max: 1,
+        allowFirstLine: false,
+      },
+    }],
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};
diff --git a/packages/marko-web-theme-monorail/browser/block-loader.vue b/packages/marko-web-theme-monorail/browser/block-loader.vue
new file mode 100644
index 000000000..a610c7c74
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/block-loader.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :class="classes">
+    <div v-if="isLoading">
+      Loading {{ label }}...
+    </div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-else-if="html" v-html="html" />
+    <div v-if="error">
+      <h5>Unable to load {{ label }} block.</h5>
+      <p>{{ error.message }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    input: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    error: null,
+    hasLoaded: false,
+    html: null,
+    isLoading: false,
+    classes: ['lazyload'],
+  }),
+
+  created() {
+    document.addEventListener('lazybeforeunveil', this.load.bind(this));
+  },
+
+  methods: {
+    async load() {
+      if (!this.isLoading && !this.hasLoaded) {
+        try {
+          this.error = null;
+          this.isLoading = true;
+          const input = JSON.stringify(this.input);
+          const href = `/__render-block/${this.name}?input=${encodeURIComponent(input)}`;
+          const res = await fetch(href, { credentials: 'same-origin' });
+          this.html = await res.text();
+          this.hasLoaded = true;
+        } catch (e) {
+          this.error = e;
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/comment-toggle-button.vue b/packages/marko-web-theme-monorail/browser/comment-toggle-button.vue
new file mode 100644
index 000000000..6d31f1aa8
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/comment-toggle-button.vue
@@ -0,0 +1,89 @@
+<template>
+  <button
+    :class="classes"
+    type="button"
+    @click="toggle"
+  >
+    <span>{{ translate("viewAllComments") }}</span>
+  </button>
+</template>
+
+<script>
+import EventBus from '@parameter1/base-cms-marko-web/browser/event-bus';
+import get from '@parameter1/base-cms-marko-web-identity-x/browser/utils/get';
+import i18n from './i18n-vue';
+
+export default {
+
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    targets: {
+      type: Array,
+      default: () => [],
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    error: null,
+    expanded: false,
+    isLoading: false,
+    totalCount: 0,
+  }),
+
+  created() {
+    // @todo to move this component/functionality to the marko-web-identity-x package
+    this.expanded = this.isExpanded;
+    this.loadCount();
+  },
+
+  methods: {
+    /**
+     *
+     */
+    async loadCount() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const res = await get(`/comment-count/${this.identifier}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+        this.totalCount = data.totalCount;
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    toggle() {
+      this.expanded = !this.expanded;
+      // @todo to move this component/functionality to the marko-web-identity-x package
+      EventBus.$emit('identity-x-comments-expanded', this.expanded);
+      const elements = document.querySelectorAll(this.targets.join(','));
+      Array.prototype.forEach.call(elements, el => el.classList.toggle(this.toggleClass));
+    },
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/i18n-vue.js b/packages/marko-web-theme-monorail/browser/i18n-vue.js
new file mode 100644
index 000000000..db06f7640
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/i18n-vue.js
@@ -0,0 +1,11 @@
+import translations from './translations-vue';
+
+export default (lang, fieldLabelKey) => {
+  if (!translations[lang]) {
+    throw new Error(`No translations available for requested language ${lang}!`);
+  }
+  if (!translations[lang][fieldLabelKey]) {
+    throw new Error(`No translations available in ${lang} for requested key ${fieldLabelKey}!`);
+  }
+  return translations[lang][fieldLabelKey];
+};
diff --git a/packages/marko-web-theme-monorail/browser/index.js b/packages/marko-web-theme-monorail/browser/index.js
new file mode 100644
index 000000000..779b7b26c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/index.js
@@ -0,0 +1,114 @@
+import GTM from '@parameter1/base-cms-marko-web-gtm/browser';
+import GAM from '@parameter1/base-cms-marko-web-gam/browser';
+import Search from '@parameter1/base-cms-marko-web-search/browser';
+import SocialSharing from '@parameter1/base-cms-marko-web-social-sharing/browser';
+import Inquiry from '@parameter1/base-cms-marko-web-inquiry/browser';
+import NativeX from '@parameter1/base-cms-marko-web-native-x/browser';
+import IdentityX from '@parameter1/base-cms-marko-web-identity-x/browser';
+import OmedaIdentityX from '@parameter1/base-cms-marko-web-omeda-identity-x/browser';
+
+const CommentToggleButton = () => import(/* webpackChunkName: "theme-comment-toggle-button" */ './comment-toggle-button.vue');
+const BlockLoader = () => import(/* webpackChunkName: "theme-block-loader" */ './block-loader.vue');
+const InlineNewsletterForm = () => import(/* webpackChunkName: "theme-inline-newsletter-form" */ './inline-newsletter-form.vue');
+const MenuToggleButton = () => import(/* webpackChunkName: "theme-menu-toggle-button" */ './menu-toggle-button.vue');
+const NewsletterCloseButton = () => import(/* webpackChunkName: "theme-newsletter-close-button" */ './newsletter-close-button.vue');
+const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-newsletter-toggle-button" */ './newsletter-toggle-button.vue');
+
+const SiteNewsletterMenu = () => import(/* webpackChunkName: "theme-site-newsletter-menu" */ './site-newsletter-menu.vue');
+const WufooForm = () => import(/* webpackChunkName: "theme-wufoo-form" */ './wufoo-form.vue');
+const TopStoriesMenu = () => import(/* webpackChunkName: "theme-top-stories-menu" */ './top-stories-menu.vue');
+
+const setP1EventsIdentity = ({ p1events, brandKey, encryptedId }) => {
+  if (!p1events || !brandKey || !encryptedId) return;
+  p1events('setIdentity', `omeda.${brandKey}.customer*${encryptedId}~encrypted`);
+};
+
+export default (Browser, config = {
+  enableOmedaIdentityX: true,
+  withGTM: true,
+  withP1Events: true,
+}) => {
+  const { EventBus } = Browser;
+  const { enableOmedaIdentityX } = config;
+
+  if (enableOmedaIdentityX) {
+    EventBus.$on('omeda-identity-x-authenticated', ({ brandKey, encryptedId }) => {
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+    EventBus.$on('omeda-identity-x-rapid-identify-response', ({ brandKey, encryptedId }) => {
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+  }
+
+  Browser.register('ThemeCommentToggleButton', CommentToggleButton);
+
+  EventBus.$on('identity-x-logout', () => {
+    if (window.p1events) window.p1events('setIdentity', null);
+  });
+  const emitNewsletterEvent = ({ type, action, data }) => {
+    let label = `Step ${data.step}`;
+    if (action === 'Error') label = `${label} Error: ${data.error}`;
+    EventBus.$emit('newsletter-form-action', {
+      category: `Newsletter Signup Form (${type})`,
+      action,
+      label,
+    });
+  };
+
+  const emitNewsletterSubscription = ({ type, newsletter }) => {
+    EventBus.$emit('newsletter-form-subscription', {
+      category: newsletter.eventCategory || newsletter.name,
+      action: type,
+    });
+  };
+
+  GTM(Browser);
+  GAM(Browser);
+  Search(Browser);
+  SocialSharing(Browser);
+  NativeX(Browser);
+  if (enableOmedaIdentityX) {
+    OmedaIdentityX(Browser);
+  } else {
+    IdentityX(Browser);
+  }
+  Inquiry(Browser);
+
+  Browser.register('ThemeBlockLoader', BlockLoader);
+
+  Browser.register('ThemeSiteNewsletterMenu', SiteNewsletterMenu, {
+    provide: { EventBus },
+    on: {
+      load: (data) => {
+        emitNewsletterEvent({ type: 'Pushdown', action: 'Load', data });
+        emitNewsletterEvent({ type: 'Pushdown', action: 'View', data });
+      },
+      focus: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Focus', data }),
+      submit: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Submit', data }),
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+  Browser.register('ThemeInlineNewsletterForm', InlineNewsletterForm, {
+    on: {
+      load: data => emitNewsletterEvent({ type: 'Inline', action: 'Load', data }),
+      view: data => emitNewsletterEvent({ type: 'Inline', action: 'View', data }),
+      focus: data => emitNewsletterEvent({ type: 'Inline', action: 'Focus', data }),
+      submit: (data) => {
+        emitNewsletterEvent({ type: 'Inline', action: 'Submit', data });
+        if (window.olytics) window.olytics.confirm(data.encryptedCustomerId);
+      },
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: data => emitNewsletterEvent({ type: 'Inline', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('ThemeMenuToggleButton', MenuToggleButton);
+  Browser.register('ThemeNewsletterCloseButton', NewsletterCloseButton);
+
+  Browser.register('ThemeNewsletterToggleButton', NewsletterToggleButton, {
+    provide: { EventBus },
+  });
+  Browser.register('ThemeTopStoriesMenu', TopStoriesMenu);
+  Browser.register('WufooForm', WufooForm);
+};
diff --git a/packages/marko-web-theme-monorail/browser/inline-newsletter-form.vue b/packages/marko-web-theme-monorail/browser/inline-newsletter-form.vue
new file mode 100644
index 000000000..fa4d551f6
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/inline-newsletter-form.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="inline-newsletter-form">
+    <div ref="lazyload" class="lazyload" />
+    <step-1
+      v-if="step === 1"
+      :newsletter="defaultNewsletter"
+      :name="name"
+      :description="description"
+      :disabled="disabled"
+      :image-src="imageSrc"
+      :image-srcset="imageSrcset"
+      :recaptcha-site-key="recaptchaSiteKey"
+      :privacy-policy-link="privacyPolicyLink"
+      :lang="lang"
+      @submit="stepOneSubmit"
+      @subscribe="$emit('subscribe', $event)"
+      @focus="$emit('focus', { step: 1 })"
+      @error="$emit('error', { step: 1, error: $event })"
+    />
+    <step-2
+      v-if="step === 2"
+      :site-name="siteName"
+      :email="email"
+      :default-newsletter="defaultNewsletter"
+      :newsletters="newsletters"
+      :demographic="demographic"
+      :recaptcha-site-key="recaptchaSiteKey"
+      :privacy-policy-link="privacyPolicyLink"
+      :lang="lang"
+      as-card
+      @submit="$emit('submit', { step: 2 })"
+      @subscribe="$emit('subscribe', $event)"
+      @focus="$emit('focus', { step: 2 })"
+      @load="$emit('load', { step: 2 })"
+      @error="$emit('error', { step: 2, error: $event })"
+    />
+  </div>
+</template>
+
+<script>
+import Step1 from './inline-newsletter-form/step1.vue';
+import Step2 from './newsletter-signup-form/step2.vue';
+
+export default {
+  components: {
+    Step1,
+    Step2,
+  },
+
+  props: {
+    siteName: {
+      type: String,
+      required: true,
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    defaultNewsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    newsletters: {
+      type: Array,
+      default: () => [],
+    },
+    demographic: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    didView: false,
+    email: null,
+    step: 1,
+  }),
+
+  watch: {
+    didView(value) {
+      if (value) this.$emit('view', { step: 1 });
+    },
+  },
+
+  mounted() {
+    this.$emit('load', { step: 1 });
+    this.$refs.lazyload.addEventListener('lazybeforeunveil', () => {
+      this.didView = true;
+    });
+  },
+
+  methods: {
+    stepOneSubmit({ email, encryptedCustomerId }) {
+      this.$emit('submit', { step: 1, encryptedCustomerId });
+      this.email = email;
+      this.step = 2;
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/inline-newsletter-form/step1.vue b/packages/marko-web-theme-monorail/browser/inline-newsletter-form/step1.vue
new file mode 100644
index 000000000..0cb41b29c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/inline-newsletter-form/step1.vue
@@ -0,0 +1,139 @@
+<template>
+  <div :class="blockName">
+    <div
+      v-if="imageSrc"
+      :class="`${blockName}__left-col`"
+    >
+      <img :src="imageSrc" :srcset="imageSrcset" :alt="name">
+    </div>
+    <div :class="`${blockName}__right-col`">
+      <div :class="`${blockName}__title`">
+        {{ name }}
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div :class="`${blockName}__description`" v-html="description" />
+
+      <form :class="`${blockName}__form`" @submit.prevent="submit">
+        <div :class="`${blockName}__email-group`">
+          <label for="inline-newsletter-email" class="sr-only">Email</label>
+          <input
+            id="inline-newsletter-email"
+            v-model="email"
+            :class="`${blockName}__email-input`"
+            :disabled="isLoading"
+            class="form-control"
+            placeholder="Enter your email"
+            type="email"
+            required
+            @focus="didFocus = true"
+          >
+        </div>
+        <sign-up-button
+          :class="`${blockName}__form-button`"
+          :is-loading="isLoading"
+          :disabled="disabled"
+        />
+      </form>
+      <privacy-policy :block-name="blockName" :privacy-policy-link="privacyPolicyLink" />
+
+
+      <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>An error ocurred.</strong>
+        {{ error.message }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import PrivacyPolicy from '../newsletter-signup-form/privacy-policy.vue';
+import SignUpButton from '../newsletter-signup-form/sign-up-button.vue';
+
+import getRecaptchaToken from '../newsletter-signup-form/get-recaptcha-token';
+
+export default {
+  components: {
+    PrivacyPolicy,
+    SignUpButton,
+  },
+
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    blockName: 'inline-newsletter-form-step1',
+    didFocus: false,
+    email: null,
+    error: null,
+    isLoading: false,
+  }),
+
+  watch: {
+    didFocus(value) {
+      if (value) this.$emit('focus');
+    },
+  },
+
+  methods: {
+    async submit() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { email, newsletter } = this;
+        const { deploymentTypeId } = newsletter;
+
+        const token = await getRecaptchaToken(this.recaptchaSiteKey);
+        const res = await fetch('/__omeda/newsletter-signup', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ deploymentTypeIds: [deploymentTypeId], email, token }),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        const { encryptedCustomerId } = json;
+        this.$emit('submit', { email, encryptedCustomerId });
+        this.$emit('subscribe', { newsletter });
+      } catch (e) {
+        this.error = e;
+        this.$emit('error', e);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/menu-toggle-button.vue b/packages/marko-web-theme-monorail/browser/menu-toggle-button.vue
new file mode 100644
index 000000000..693c774c0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/menu-toggle-button.vue
@@ -0,0 +1,143 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="buttonLabel"
+    @click="toggle"
+  >
+    <span v-if="calcBefore">
+      {{ calcBefore }}
+    </span>
+    <component :is="icon" :modifiers="iconModifiers" />
+    <span v-if="calcAfter">
+      {{ calcAfter }}
+    </span>
+  </button>
+</template>
+
+<script>
+import IconChevronDown from '@parameter1/base-cms-marko-web-icons/browser/chevron-down.vue';
+import IconChevronUp from '@parameter1/base-cms-marko-web-icons/browser/chevron-up.vue';
+import IconDash from '@parameter1/base-cms-marko-web-icons/browser/dash.vue';
+import IconMail from '@parameter1/base-cms-marko-web-icons/browser/mail.vue';
+import IconPlus from '@parameter1/base-cms-marko-web-icons/browser/plus.vue';
+import IconThreeBars from '@parameter1/base-cms-marko-web-icons/browser/three-bars.vue';
+import IconX from '@parameter1/base-cms-marko-web-icons/browser/x.vue';
+import EventBus from '@parameter1/base-cms-marko-web/browser/event-bus';
+
+const validateIcon = v => ['chevron-down', 'chevron-up', 'dash', 'mail', 'plus', 'three-bars', 'x'].includes(v);
+
+export default {
+  components: {
+    IconChevronDown,
+    IconChevronUp,
+    IconDash,
+    IconMail,
+    IconPlus,
+    IconThreeBars,
+    IconX,
+  },
+  props: {
+    className: {
+      type: String,
+      default: null,
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    targets: {
+      type: Array,
+      default: () => [],
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    iconModifiers: {
+      type: Array,
+      default: () => [],
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Toggle Menu',
+    },
+    iconName: {
+      type: String,
+      default: 'three-bars',
+      validator: validateIcon,
+    },
+    expandedIconName: {
+      type: String,
+      default: 'x',
+      validator: validateIcon,
+    },
+    before: {
+      type: String,
+      default: null,
+    },
+    beforeExpanded: {
+      type: String,
+      default: null,
+    },
+    beforeCollapsed: {
+      type: String,
+      default: null,
+    },
+    after: {
+      type: String,
+      default: null,
+    },
+    afterExpanded: {
+      type: String,
+      default: null,
+    },
+    afterCollapsed: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    expanded: false,
+  }),
+  computed: {
+    calcBefore() {
+      const {
+        before,
+        beforeExpanded,
+        beforeCollapsed,
+        expanded,
+      } = this;
+      if (expanded && beforeExpanded) return beforeExpanded;
+      if (!expanded && beforeCollapsed) return beforeCollapsed;
+      return before;
+    },
+    calcAfter() {
+      const {
+        after,
+        afterExpanded,
+        afterCollapsed,
+        expanded,
+      } = this;
+      if (expanded && afterExpanded) return afterExpanded;
+      if (!expanded && afterCollapsed) return afterCollapsed;
+      return after;
+    },
+    icon() {
+      if (this.expanded) return `icon-${this.expandedIconName}`;
+      return `icon-${this.iconName}`;
+    },
+  },
+  created() {
+    this.expanded = this.initiallyExpanded;
+  },
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+      EventBus.$emit('site-menu-expanded', this.expanded);
+      const elements = document.querySelectorAll(this.targets.join(','));
+      Array.prototype.forEach.call(elements, el => el.classList.toggle(this.toggleClass));
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-close-button.vue b/packages/marko-web-theme-monorail/browser/newsletter-close-button.vue
new file mode 100644
index 000000000..4fa6f020f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-close-button.vue
@@ -0,0 +1,44 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="buttonLabel"
+    @click="close"
+  >
+    <icon-x :modifiers="iconModifiers" />
+  </button>
+</template>
+
+<script>
+import IconX from '@parameter1/base-cms-marko-web-icons/browser/x.vue';
+
+export default {
+  components: {
+    IconX,
+  },
+  props: {
+    className: {
+      type: String,
+      default: null,
+    },
+    targetButton: {
+      type: String,
+      required: true,
+    },
+    iconModifiers: {
+      type: Array,
+      default: () => [],
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Close Newsletter Menu',
+    },
+  },
+  methods: {
+    close() {
+      const element = document.querySelector(this.targetButton);
+      if (element) element.click();
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/check-icon.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/check-icon.vue
new file mode 100644
index 000000000..61a9fa58d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/check-icon.vue
@@ -0,0 +1,13 @@
+<template>
+  <span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+    >
+      <!-- eslint-disable-next-line -->
+      <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
+    </svg>
+  </span>
+</template>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/form-group.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/form-group.vue
new file mode 100644
index 000000000..c31bbb85f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/form-group.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="classes">
+    <label
+      :class="`${blockName}__form-label`"
+      :for="id"
+    >
+      {{ displayLabel }}
+    </label>
+    <slot :id="id" :required="required" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `nl-complete-signup-${this.field}`;
+    },
+
+    classes() {
+      const element = `${this.blockName}__form-group`;
+      return [element, `${element}--${this.field}`];
+    },
+    displayLabel() {
+      const parts = [this.label];
+      if (this.required) parts.push('*');
+      return parts.join(' ');
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/get-recaptcha-token.js b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/get-recaptcha-token.js
new file mode 100644
index 000000000..05f1a74cc
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/get-recaptcha-token.js
@@ -0,0 +1,3 @@
+export default siteKey => window.grecaptcha.execute(siteKey, {
+  action: 'newsletterSignup',
+});
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/input-form-group.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/input-form-group.vue
new file mode 100644
index 000000000..441475d11
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/input-form-group.vue
@@ -0,0 +1,57 @@
+<template>
+  <form-group
+    :field="field"
+    :block-name="blockName"
+    :label="label"
+    :required="required"
+  >
+    <template #default="{ id }">
+      <input
+        :id="id"
+        :value="value"
+        class="form-control form-control--bg-white"
+        :required="required"
+        :disabled="disabled"
+        @input="$emit('input', $event.target.value)"
+        @focus="$emit('focus')"
+      >
+    </template>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from './form-group.vue';
+
+export default {
+  components: {
+    FormGroup,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/newsletter-checkbox.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/newsletter-checkbox.vue
new file mode 100644
index 000000000..c58c11f7d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/newsletter-checkbox.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="newsletter-checkbox-group custom-control custom-checkbox">
+    <input
+      :id="id"
+      type="checkbox"
+      class="custom-control-input"
+      :value="deploymentTypeId"
+      :disabled="disabled"
+      @change="$emit('change', { newsletter, checked: $event.target.checked })"
+      @focus="$emit('focus')"
+    >
+    <label
+      class="d-flex flex-column custom-control-label custom-control-label--bg-white"
+      :for="id"
+    >
+      <span class="newsletter-checkbox-group__name">
+        {{ name }}
+      </span>
+      <span class="newsletter-checkbox-group__description">
+        {{ description }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    inPushdown: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    deploymentTypeId() {
+      return this.newsletter.deploymentTypeId;
+    },
+
+    id() {
+      const id = `deployment-type-id-${this.deploymentTypeId}`;
+      return this.inPushdown ? `pushdown-${id}` : id;
+    },
+
+    name() {
+      return this.newsletter.name;
+    },
+
+    description() {
+      return this.newsletter.description;
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/privacy-policy.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/privacy-policy.vue
new file mode 100644
index 000000000..c839370d5
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/privacy-policy.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="`${blockName}__privacy-policy`">
+    {{ translate("emailProviding") }}
+    <a :href="privacyPolicyLink.href" :target="privacyPolicyLink.target" rel="noopener">
+      {{ privacyPolicyLink.label }}</a>.
+    {{ translate("protectedBy") }}
+    <a href="https://policies.google.com/privacy">{{ translate("privacyPolicy") }}</a>
+    {{ translate("and") }}
+    <a href="https://policies.google.com/terms">{{ translate("termsOfService") }}</a>
+    {{ translate("apply") }}
+  </div>
+</template>
+
+<script>
+import i18n from '../i18n-vue';
+
+export default {
+  props: {
+    blockName: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+  methods: {
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/select-form-group.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/select-form-group.vue
new file mode 100644
index 000000000..0143a8997
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/select-form-group.vue
@@ -0,0 +1,59 @@
+<template>
+  <form-group
+    :field="field"
+    :block-name="blockName"
+    :label="label"
+    :required="required"
+  >
+    <template #default="{ id }">
+      <select
+        :id="id"
+        :value="value"
+        class="custom-select custom-select--bg-white form-control"
+        :required="required"
+        :disabled="disabled"
+        @change="$emit('input', $event.target.value)"
+        @focus="$emit('focus')"
+      >
+        <slot />
+      </select>
+    </template>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from './form-group.vue';
+
+export default {
+  components: {
+    FormGroup,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/sign-up-button.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/sign-up-button.vue
new file mode 100644
index 000000000..3165472e7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/sign-up-button.vue
@@ -0,0 +1,50 @@
+<template>
+  <button
+    class="text-nowrap"
+    type="submit"
+    :disabled="isLoading || disabled"
+  >
+    <div class="d-flex align-items-center">
+      <div
+        v-show="isLoading"
+        class="spinner-border spinner-border-sm text-light mr-1"
+        role="status"
+      >
+        <span class="sr-only">Loading...</span>
+      </div>
+      <span v-if="label">{{ label }}</span>
+      <span v-else>{{ translate("signUp") }}</span>
+    </div>
+  </button>
+</template>
+
+
+<script>
+import i18n from '../i18n-vue';
+
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+  methods: {
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/step2.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/step2.vue
new file mode 100644
index 000000000..d9671ddc3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/step2.vue
@@ -0,0 +1,279 @@
+<template>
+  <div :class="classNames">
+    <div :class="`${blockName}__card-header`">
+      <check-icon :class="`${blockName}__check-icon`" />
+      {{ translate("signedUpFor") }} {{ defaultNewsletter.name }}
+    </div>
+    <form
+      :class="`${blockName}__card-body`"
+      @submit.prevent="submit"
+    >
+      <transition
+        :leave-active-class="`${blockName}__slide-out`"
+        @after-leave="formHidden = true"
+      >
+        <div v-show="!isComplete">
+          <div :class="`${blockName}__header`">
+            {{ translate("completeSignUp") }}
+          </div>
+          <div :class="`${blockName}__about-you`">
+            {{ translate("aboutYou") }}
+          </div>
+          <div :class="`${blockName}__form`">
+            <input-form-group
+              v-model="companyName"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="company-name"
+              :label="translate('companyName')"
+              required
+              @focus="didFocus = true"
+            />
+
+            <select-form-group
+              v-model="demographicValue"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="primary-role"
+              :label="demographic.label"
+              required
+              @focus="didFocus = true"
+            >
+              <option value="">
+                {{ translate("select") }}
+              </option>
+              <option
+                v-for="value in demographic.values"
+                :key="value.id"
+                :value="value.id"
+              >
+                {{ value.label }}
+              </option>
+            </select-form-group>
+
+            <input-form-group
+              v-model="postalCode"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="postal-code"
+              label="Zip/Postal"
+              required
+              @focus="didFocus = true"
+            />
+          </div>
+
+          <div v-if="newsletters.length">
+            <div :class="`${blockName}__subscriptions-header`">
+              {{ translate("chooseSubscriptions") }}
+            </div>
+
+            <div :class="`${blockName}__subscriptions row`">
+              <div
+                v-for="newsletter in newsletters"
+                :key="newsletter.deploymentTypeId"
+                class="col-12 col-md-6"
+              >
+                <newsletter-checkbox
+                  :newsletter="newsletter"
+                  :disabled="isLoading"
+                  :in-pushdown="inPushdown"
+                  @change="selectNewsletter"
+                  @focus="didFocus = true"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div :class="`${blockName}__signup`">
+            <div>
+              <sign-up-button
+                :class="`${blockName}__form-button`"
+                :is-loading="isLoading"
+                :disabled="isComplete"
+                :lang="lang"
+              />
+            </div>
+            <privacy-policy
+              :block-name="blockName"
+              :privacy-policy-link="privacyPolicyLink"
+              :lang="lang"
+            />
+          </div>
+        </div>
+      </transition>
+
+      <transition
+        :enter-active-class="`${blockName}__slide-in`"
+      >
+        <div v-show="formHidden">
+          <div :class="`${blockName}__thank-you-header`">
+            {{ translate("thankYou") }}
+          </div>
+          <p class="mb-0">
+            {{ translate("startReceiving") }} <em>{{ siteName }}</em>.
+          </p>
+        </div>
+      </transition>
+
+      <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>An error ocurred.</strong>
+        {{ error.message }}
+      </div>
+    </form>
+  </div>
+</template>
+
+
+<script>
+import CheckIcon from './check-icon.vue';
+import InputFormGroup from './input-form-group.vue';
+import NewsletterCheckbox from './newsletter-checkbox.vue';
+import PrivacyPolicy from './privacy-policy.vue';
+import SelectFormGroup from './select-form-group.vue';
+import SignUpButton from './sign-up-button.vue';
+
+import getRecaptchaToken from './get-recaptcha-token';
+import i18n from '../i18n-vue';
+
+export default {
+  components: {
+    CheckIcon,
+    InputFormGroup,
+    NewsletterCheckbox,
+    PrivacyPolicy,
+    SelectFormGroup,
+    SignUpButton,
+  },
+
+  props: {
+    siteName: {
+      type: String,
+      required: true,
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    email: {
+      type: String,
+      default: null,
+    },
+    defaultNewsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    newsletters: {
+      type: Array,
+      default: () => [],
+    },
+    demographic: {
+      type: Object,
+      required: true,
+      validate: demo => (demo && demo.id && demo.label && demo.values),
+    },
+    asCard: {
+      type: Boolean,
+      default: false,
+    },
+    inPushdown: {
+      type: Boolean,
+      default: false,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    blockName: 'complete-newsletter-signup',
+    didFocus: false,
+    error: null,
+    formHidden: false,
+    isComplete: false,
+    isLoading: false,
+
+    companyName: null,
+    demographicValue: null,
+    postalCode: null,
+    selectedNewsletters: [],
+  }),
+
+  computed: {
+    classNames() {
+      const { blockName } = this;
+      const classNames = [blockName];
+      if (this.asCard) classNames.push(`${blockName}--as-card`);
+      if (this.inPushdown) classNames.push(`${blockName}--in-pushdown`);
+      return classNames;
+    },
+  },
+
+  watch: {
+    didFocus(value) {
+      if (value) this.$emit('focus');
+    },
+  },
+
+  mounted() {
+    this.$emit('load');
+  },
+
+  methods: {
+    selectNewsletter({ newsletter, checked }) {
+      if (checked) {
+        this.selectedNewsletters.push(newsletter);
+      } else {
+        this.selectedNewsletters = this.selectedNewsletters
+          .filter(nl => nl.deploymentTypeId !== newsletter.deploymentTypeId);
+      }
+    },
+
+    async submit() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { email, selectedNewsletters } = this;
+        if (!email) throw new Error('Unable to submit: no email address found.');
+        const token = await getRecaptchaToken(this.recaptchaSiteKey);
+        const payload = {
+          token,
+          email,
+          companyName: this.companyName,
+          postalCode: this.postalCode,
+          deploymentTypeIds: selectedNewsletters.map(nl => nl.deploymentTypeId),
+          demographics: [
+            { id: this.demographic.id, values: [this.demographicValue] },
+          ],
+        };
+        const res = await fetch('/__omeda/newsletter-signup', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        this.$emit('submit');
+        selectedNewsletters.forEach((newsletter) => {
+          this.$emit('subscribe', { newsletter });
+        });
+        this.isComplete = true;
+      } catch (e) {
+        this.error = e;
+        this.$emit('error', e);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-toggle-button.vue b/packages/marko-web-theme-monorail/browser/newsletter-toggle-button.vue
new file mode 100644
index 000000000..d4e5060fc
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/newsletter-toggle-button.vue
@@ -0,0 +1,31 @@
+<template>
+  <button
+    class="site-navbar__newsletter-toggler"
+    type="button"
+    @click="toggle"
+  >
+    <icon-mail :modifiers="['lg']" />
+  </button>
+</template>
+
+<script>
+import IconMail from '@parameter1/base-cms-marko-web-icons/browser/mail.vue';
+
+export default {
+  inject: ['EventBus'],
+  components: {
+    IconMail,
+  },
+
+  data: () => ({
+    expanded: false,
+  }),
+
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+      this.EventBus.$emit('newsletter-menu-expanded', this.expanded);
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/site-newsletter-menu.vue b/packages/marko-web-theme-monorail/browser/site-newsletter-menu.vue
new file mode 100644
index 000000000..d4a9fede3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/site-newsletter-menu.vue
@@ -0,0 +1,157 @@
+<template>
+  <aside :class="classNames">
+    <div :class="element('container')">
+      <step-1
+        v-if="step === 1"
+        :newsletter="defaultNewsletter"
+        :block-name="blockName"
+        :name="name"
+        :description="description"
+        :disabled="disabled"
+        :image-src="imageSrc"
+        :image-srcset="imageSrcset"
+        :recaptcha-site-key="recaptchaSiteKey"
+        :privacy-policy-link="privacyPolicyLink"
+        :lang="lang"
+        @submit="stepOneSubmit"
+        @subscribe="$emit('subscribe', $event)"
+        @focus="$emit('focus', { step: 1 })"
+        @error="$emit('error', { step: 1, error: $event })"
+      />
+      <step-2
+        v-if="step === 2"
+        :site-name="siteName"
+        :email="email"
+        :default-newsletter="defaultNewsletter"
+        :newsletters="newsletters"
+        :demographic="demographic"
+        :recaptcha-site-key="recaptchaSiteKey"
+        :privacy-policy-link="privacyPolicyLink"
+        :lang="lang"
+        in-pushdown
+        @submit="$emit('submit', { step: 2 })"
+        @subscribe="$emit('subscribe', $event)"
+        @focus="$emit('focus', { step: 2 })"
+        @load="$emit('load', { step: 2 })"
+        @error="$emit('error', { step: 2, error: $event })"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import Step1 from './site-newsletter-menu/step1.vue';
+import Step2 from './newsletter-signup-form/step2.vue';
+
+export default {
+  inject: ['EventBus'],
+  components: {
+    Step1,
+    Step2,
+  },
+
+  props: {
+    siteName: {
+      type: String,
+      required: true,
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    defaultNewsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    newsletters: {
+      type: Array,
+      default: () => [],
+    },
+    demographic: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    blockName: 'site-newsletter-menu',
+    didLoad: false,
+    email: null,
+    expanded: undefined,
+    step: 1,
+  }),
+
+  computed: {
+    currentlyExpanded() {
+      if (this.expanded != null) return this.expanded;
+      return this.initiallyExpanded;
+    },
+
+    classNames() {
+      const { blockName } = this;
+      const classes = [blockName];
+      if (this.currentlyExpanded) classes.push(`${blockName}--open`);
+      return classes;
+    },
+  },
+
+  watch: {
+    didLoad(value) {
+      if (value) this.$emit('load', { step: 1 });
+    },
+  },
+
+  mounted() {
+    if (this.initiallyExpanded) this.didLoad = true;
+    this.EventBus.$on('newsletter-menu-expanded', (expanded) => {
+      this.expanded = expanded;
+      if (expanded) this.didLoad = true;
+    });
+  },
+
+  methods: {
+    element(elementName) {
+      return `${this.blockName}__${elementName}`;
+    },
+
+    stepOneSubmit({ email, encryptedCustomerId }) {
+      this.$emit('submit', { step: 1, encryptedCustomerId });
+      this.email = email;
+      this.step = 2;
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue b/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue
new file mode 100644
index 000000000..aee2182e8
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="row">
+    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-5', 'col-lg-4'])">
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        :srcset="imageSrcset"
+        :alt="name"
+        :class="element('image')"
+      >
+    </div>
+    <div :class="element('form-wrapper', ['col-12', 'col-md-6', 'col-lg-5'])">
+      <div :class="element('name')">
+        {{ name }}
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div :class="element('description')" v-html="description" />
+
+      <form :class="element('form')" @submit.prevent="submit">
+        <label for="newsletter-menu-email" class="sr-only">Email</label>
+        <input
+          id="newsletter-menu-email"
+          v-model="email"
+          class="form-control"
+          :disabled="isLoading"
+          placeholder="example@gmail.com"
+          type="email"
+          name="em"
+          required
+          @focus="didFocus = true"
+        >
+        <privacy-policy
+          :block-name="blockName"
+          :privacy-policy-link="privacyPolicyLink"
+          :lang="lang"
+        />
+        <sign-up-button
+          :class="element('form-button')"
+          :is-loading="isLoading"
+          :disabled="disabled"
+          :lang="lang"
+        />
+      </form>
+
+      <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>An error ocurred.</strong>
+        {{ error.message }}
+      </div>
+    </div>
+    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1', 'col-lg-3'])">
+      <close-button
+        :class-name="element('close').join(' ')"
+        target-button=".site-navbar__newsletter-toggler"
+        :icon-modifiers="['lg']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CloseButton from '../newsletter-close-button.vue';
+import PrivacyPolicy from '../newsletter-signup-form/privacy-policy.vue';
+import SignUpButton from '../newsletter-signup-form/sign-up-button.vue';
+
+import getRecaptchaToken from '../newsletter-signup-form/get-recaptcha-token';
+
+export default {
+  components: {
+    CloseButton,
+    PrivacyPolicy,
+    SignUpButton,
+  },
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: o => (o && o.name && o.deploymentTypeId),
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    didFocus: false,
+    email: null,
+    error: null,
+    isLoading: false,
+  }),
+
+  watch: {
+    didFocus(value) {
+      if (value) this.$emit('focus');
+    },
+  },
+
+  methods: {
+    element(elementName, classNames = []) {
+      return [`${this.blockName}__${elementName}`, ...classNames];
+    },
+
+    async submit() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { email, newsletter } = this;
+        const { deploymentTypeId } = newsletter;
+
+        const token = await getRecaptchaToken(this.recaptchaSiteKey);
+        const res = await fetch('/__omeda/newsletter-signup', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ deploymentTypeIds: [deploymentTypeId], email, token }),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        const { encryptedCustomerId } = json;
+        this.$emit('submit', { email, encryptedCustomerId });
+        this.$emit('subscribe', { newsletter });
+      } catch (e) {
+        this.error = e;
+        this.$emit('error', e);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/ssr.js b/packages/marko-web-theme-monorail/browser/ssr.js
new file mode 100644
index 000000000..378d3147f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/ssr.js
@@ -0,0 +1,9 @@
+import ThemeMenuToggleButton from './menu-toggle-button.vue';
+import ThemeNewsletterToggleButton from './newsletter-toggle-button.vue';
+import ThemeSiteNewsletterMenu from './site-newsletter-menu.vue';
+
+export default {
+  ThemeMenuToggleButton,
+  ThemeNewsletterToggleButton,
+  ThemeSiteNewsletterMenu,
+};
diff --git a/packages/marko-web-theme-monorail/browser/top-stories-menu.vue b/packages/marko-web-theme-monorail/browser/top-stories-menu.vue
new file mode 100644
index 000000000..d1b6ea607
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/top-stories-menu.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div v-if="isLoading">
+      Loading top stories...
+    </div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-else-if="html" v-html="html" />
+    <div v-if="error">
+      {{ error.message }}
+    </div>
+  </div>
+</template>
+
+<script>
+import EventBus from '@parameter1/base-cms-marko-web/browser/event-bus';
+
+export default {
+  props: {
+    sectionAlias: {
+      type: String,
+      default: 'home',
+    },
+  },
+
+  data: () => ({
+    error: null,
+    hasLoaded: false,
+    html: null,
+    isLoading: false,
+  }),
+
+  created() {
+    EventBus.$on('site-menu-expanded', (expanded) => {
+      if (expanded) this.load();
+    });
+  },
+
+  methods: {
+    async load() {
+      if (!this.isLoading && !this.hasLoaded) {
+        try {
+          this.error = null;
+          this.isLoading = true;
+          const input = JSON.stringify({ sectionAlias: this.sectionAlias });
+          const href = `/__render-block/top-stories-menu?input=${encodeURIComponent(input)}`;
+          const res = await fetch(href, { credentials: 'same-origin' });
+          this.html = await res.text();
+          this.hasLoaded = true;
+        } catch (e) {
+          this.error = e;
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/browser/translations-vue.js b/packages/marko-web-theme-monorail/browser/translations-vue.js
new file mode 100644
index 000000000..6063cd936
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/translations-vue.js
@@ -0,0 +1,46 @@
+export default {
+  en: {
+    visitSiteLabel: 'Visit Site',
+    // Email Signup Privacy Policy
+    emailProviding: 'By providing your email, you agree to our',
+    protectedBy: 'This site is protected by reCAPTCHA and the Google',
+    privacyPolicy: 'Privacy Policy',
+    and: 'and',
+    termsOfService: 'Terms of Service',
+    apply: 'apply.',
+    signUp: 'Sign Up',
+    // Email Signup step 2:
+    signedUpFor: 'Signed up for the',
+    completeSignUp: 'Complete your sign-up',
+    aboutYou: 'About you',
+    companyName: 'Company Name',
+    select: 'Select',
+    chooseSubscriptions: 'Choose your subscriptions',
+    thankYou: 'Thank you for subscribing!',
+    startReceiving: 'You should start receiving your subscription in the next 24 hours along with a special welcome from the experts at',
+    // Comments
+    viewAllComments: 'View All Comments',
+  },
+  es: {
+    visitSiteLabel: 'Visite el sitio',
+    // Email Signup Privacy Policy
+    emailProviding: 'By providing your email, you agree to our',
+    protectedBy: 'This site is protected by reCAPTCHA y the Google',
+    privacyPolicy: 'Privacy Policy',
+    and: 'y',
+    termsOfService: 'Terms of Service',
+    apply: 'apply.',
+    signUp: '¡Sign Up!',
+    // Email Signup step 2:
+    signedUpFor: 'Signed up for the',
+    completeSignUp: 'Complete your sign-up',
+    aboutYou: 'About you',
+    companyName: 'Company Name',
+    select: 'Select',
+    chooseSubscriptions: 'Choose your subscriptions',
+    thankYou: 'Thank you for subscribing!',
+    startReceiving: 'You should start receiving your subscription in the next 24 hours along with a special welcome from the experts at',
+    // Comments
+    viewAllComments: 'View All Comments',
+  },
+};
diff --git a/packages/marko-web-theme-monorail/browser/wufoo-form.vue b/packages/marko-web-theme-monorail/browser/wufoo-form.vue
new file mode 100644
index 000000000..d57f13566
--- /dev/null
+++ b/packages/marko-web-theme-monorail/browser/wufoo-form.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :id="formId" />
+</template>
+
+<script>
+
+export default {
+  props: {
+    formHash: {
+      type: String,
+      required: true,
+    },
+    userName: {
+      type: String,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: '1000',
+    },
+  },
+  data: () => ({ canDownload: false }),
+  computed: {
+    formId() {
+      return `wufoo-${this.formHash}`;
+    },
+    formUrl() {
+      return `https://${this.userName}.wufoo.com/forms/${this.formHash}`;
+    },
+  },
+  async mounted() {
+    if (!window.WufooForm) {
+      await (new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = 'https://secure.wufoo.com/scripts/embed/form.js';
+        s.async = 1;
+        s.onerror = () => reject(new Error('Unable to load Wufoo form script.'));
+        s.onload = resolve;
+        const scr = document.getElementsByTagName('script')[0];
+        scr.parentNode.insertBefore(s, scr);
+      }));
+    }
+    this.init();
+  },
+  methods: {
+    init() {
+      const options = {
+        userName: this.userName,
+        formHash: this.formHash,
+        autoResize: true,
+        header: 'hide',
+        height: this.height,
+        async: true,
+        ssl: true,
+      };
+      const instance = new window.WufooForm();
+      instance.initialize(options);
+      instance.display();
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-theme-monorail/components/blocks/callout-cards.marko b/packages/marko-web-theme-monorail/components/blocks/callout-cards.marko
new file mode 100644
index 000000000..efe1ca5ab
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/callout-cards.marko
@@ -0,0 +1,15 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const blockName = "callout-cards";
+$ const slots = getAsArray(input, "slots");
+
+<marko-web-block name=blockName>
+  <marko-web-element block-name=blockName name="row">
+    <marko-web-element block-name=blockName name="col">
+      <${slots[0].renderBody} />
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="col" modifiers=["last"]>
+      <${slots[1].renderBody} />
+    </marko-web-element>
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/blocks/full-width-native-ad.marko b/packages/marko-web-theme-monorail/components/blocks/full-width-native-ad.marko
new file mode 100644
index 000000000..75c7c27de
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/full-width-native-ad.marko
@@ -0,0 +1,21 @@
+import { get } from "@parameter1/base-cms-object-path";
+
+$ const blockName = "full-width-native-ad";
+
+<theme-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+  name="default"
+  when=true
+>
+  <if(nxNode)>
+    <marko-web-block name=blockName>
+      <theme-section-feed-content-node
+        modifiers=[blockName]
+        node=nxNode
+        sponsored-by=get(nxNode, "company.name")
+        with-dates=false
+        link-attrs=linkAttrs
+        container-attrs=containerAttrs
+      />
+    </marko-web-block>
+  </if>
+</theme-native-x-render>
diff --git a/packages/marko-web-theme-monorail/components/blocks/hero-card.marko b/packages/marko-web-theme-monorail/components/blocks/hero-card.marko
new file mode 100644
index 000000000..7f065de8e
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/hero-card.marko
@@ -0,0 +1,91 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/content-list";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+<!-- @todo determine how to display the sponsor logo -->
+$ const queryParams = {
+  ... input.queryParams,
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const name = defaultValue(input.name, "");
+$ const description = defaultValue(input.description, "");
+$ const blockName = "hero-card";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section && section.name || name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section && section.description || description}
+      </marko-web-element>
+      <if(section)>
+        <marko-web-element block-name=blockName name="view-more">
+          <marko-web-link href=section.canonicalPath>
+            ${i18n("View more")} &raquo;
+          </marko-web-link>
+        </marko-web-element>
+      </if>
+    </marko-web-element>
+    <div class="row">
+      <div class="col-md col-md-9">
+        <default-theme-card-deck-flow
+          cols=1
+          nodes=nodes.slice(0,1)
+          modifiers=[blockName, "hero"]
+        >
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="top"
+              full-height=true
+              card=true
+              flush=false
+              modifiers=[blockName]
+              node=node
+              with-teaser=false
+              with-dates=false
+            >
+              <@image fluid=true width=790 ar="16:9" />
+            </theme-content-node>
+          </@slot>
+        </default-theme-card-deck-flow>
+      </div>
+      <div class="col-md col-md-3">
+        <default-theme-card-deck-flow
+          cols=1
+          nodes=nodes.slice(1)
+          modifiers=[blockName]
+        >
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="top"
+              full-height=true
+              card=true
+              flush=false
+              modifiers=[blockName]
+              node=node
+              with-teaser=false
+              with-dates=false
+            >
+              <@image fluid=true width=240 ar="16:9" />
+            </theme-content-node>
+          </@slot>
+        </default-theme-card-deck-flow>
+      </div>
+    </div>
+    <if(section)>
+      <marko-web-element block-name=blockName name="view-more-bottom">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </if>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/latest-podcast.marko b/packages/marko-web-theme-monorail/components/blocks/latest-podcast.marko
new file mode 100644
index 000000000..d0dff4dca
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/latest-podcast.marko
@@ -0,0 +1,64 @@
+import queryFragment from "../../graphql/fragments/latest-podcast-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  includeContentTypes: ["Podcast"],
+  limit: 1,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const { site, i18n } = out.global;
+$ const podcastLinks = site.getAsArray("podcastLinks");
+$ const blockName = "latest-podcast";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  $ const [node] = nodes;
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      <marko-web-icon name="file" modifiers=[blockName] />
+      ${section.name}
+    </marko-web-element>
+
+    <marko-web-node
+      type=`${node.type}-content`
+      card=true
+      flush=true
+      full-height=false
+      modifiers=[blockName]
+    >
+      <@body>
+        <@header>
+          <@left>
+            ${i18n("Latest Episode")}
+          </@left>
+        </@header>
+        <@title tag="h5">
+          <marko-web-content-short-name tag=null obj=node link=true />
+        </@title>
+        <@text modifiers=["more-episodes"]>
+          <marko-web-website-section-name|{ value }| tag=null obj=section link=true>
+            ${i18n("More episodes")} &raquo;
+          </marko-web-website-section-name>
+        </@text>
+        <if(podcastLinks.length)>
+          <@footer>
+            <@left modifiers=["buttons"]>
+              <for|link| of=podcastLinks>
+                <marko-web-link
+                  class=`btn btn-light ${blockName}__btn`
+                  href=link.href
+                  title=link.label
+                  target="_blank"
+                >
+                  ${link.label}
+                </marko-web-link>
+              </for>
+            </@left>
+          </@footer>
+        </if>
+      </@body>
+    </marko-web-node>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/latest-products-feed.marko b/packages/marko-web-theme-monorail/components/blocks/latest-products-feed.marko
new file mode 100644
index 000000000..ecd02877b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/latest-products-feed.marko
@@ -0,0 +1,57 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/latest-products-feed-block";
+
+$ const queryParams = {
+  ...input.queryParams,
+  sectionAlias: input.alias,
+  queryFragment,
+};
+
+$ const blockName = "latest-products-feed";
+$ const countOnly = defaultValue(input.countOnly, false);
+
+<if(countOnly)>
+  <theme-query-total-count|data| name="website-scheduled-content" params=queryParams>
+    <${input.renderBody} ...data />
+  </theme-query-total-count>
+</if>
+<else>
+  <marko-web-query|{ nodes }| name="website-scheduled-content" params=queryParams>
+    <marko-web-node-list
+      inner-justified=false
+      flush-x=true
+      flush-y=false
+      modifiers=[blockName]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-product-feed-content-node node=node />
+        </@slot>
+        <@slot position="after" index=2 modifiers=["ad"]>
+          <theme-gam-define-display-ad
+            name="rotation-1-mobile"
+            position="content_page"
+            aliases=[input.alias]
+            modifiers=["max-width-300", "center", "margin-auto-x", "inline-feed"]
+          />
+        </@slot>
+        <@slot position="after" index=5 modifiers=["ad"]>
+          <theme-gam-define-display-ad
+            name="rotation-2-mobile"
+            position="content_page"
+            aliases=[input.alias]
+            modifiers=["max-width-300", "center", "margin-auto-x", "inline-feed"]
+          />
+        </@slot>
+        <@slot position="after" index=8 modifiers=["ad"]>
+          <theme-gam-define-display-ad
+            name="rotation-3-mobile"
+            position="content_page"
+            aliases=[input.alias]
+            modifiers=["max-width-300", "center", "margin-auto-x", "inline-feed"]
+          />
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-query>
+</else>
diff --git a/packages/marko-web-theme-monorail/components/blocks/marko.json b/packages/marko-web-theme-monorail/components/blocks/marko.json
new file mode 100644
index 000000000..e21fad9f8
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/marko.json
@@ -0,0 +1,111 @@
+{
+  "taglib-imports": [],
+  "<theme-callout-cards-block>": {
+    "template": "./callout-cards.marko",
+    "@slots <slot>[]": {}
+  },
+  "<theme-full-width-native-ad-block>": {
+    "template": "./full-width-native-ad.marko"
+  },
+  "<theme-hero-card-block>": {
+    "template": "./hero-card.marko",
+    "@alias": "string",
+    "@description": "string",
+    "@name": "string",
+    "@query-params": "object"
+  },
+  "<theme-latest-podcast-block>": {
+    "template": "./latest-podcast.marko"
+  },
+  "<theme-latest-products-feed-block>": {
+    "template": "./latest-products-feed.marko",
+    "<query-params>": {},
+    "@alias": "string",
+    "@count-only": "boolean"
+  },
+  "<theme-more-products-block>": {
+    "template": "./more-products.marko"
+  },
+  "<theme-most-popular-block>": {
+    "template": "./most-popular.marko"
+  },
+  "<theme-native-x-card-deck-block>": {
+    "template": "./native-x-card-deck.marko"
+  },
+  "<theme-newsletter-signup-banner-block>": {
+    "template": "./newsletter-signup-banner.marko"
+  },
+  "<theme-newsletter-signup-banner-large-block>": {
+    "template": "./newsletter-signup-banner-large.marko"
+  },
+  "<theme-opinion-block>": {
+    "template": "./opinion.marko",
+    "@alias" : "string"
+  },
+  "<theme-primary-image-block>": {
+    "template": "./primary-image.marko"
+  },
+  "<theme-products-block>": {
+    "template": "./products.marko"
+  },
+  "<theme-read-next-block>": {
+    "template": "./read-next.marko"
+  },
+  "<theme-related-stories-block>": {
+    "template": "./related-stories.marko"
+  },
+  "<theme-resource-library-block>": {
+    "template": "./resource-library.marko"
+  },
+  "<theme-section-body-feed-block>": {
+    "template": "./section-body-feed.marko",
+    "<query-params>": {},
+    "<node>": {},
+    "@alias": "string",
+    "@count-only": "boolean"
+  },
+  "<theme-section-card-deck-block>": {
+    "template": "./section-card-deck.marko",
+    "@alias" : "string",
+    "@default-description": "string"
+  },
+  "<theme-section-card-deck-featured-block>": {
+    "template": "./section-card-deck-featured.marko"
+  },
+  "<theme-section-card-list-block>": {
+    "template": "./section-card-list.marko"
+  },
+  "<theme-section-feed-block>": {
+    "template": "./section-feed.marko",
+    "<query-params>": {},
+    "<node>": {},
+    "@alias": "string",
+    "@count-only": "boolean",
+    "@display-image": "boolean",
+    "@with-section": "boolean",
+    "@lazyload": "boolean",
+    "@modifiers": "array",
+    "@query-name": "string"
+  },
+  "<theme-section-list-deck-block>": {
+    "template": "./section-list-deck.marko"
+  },
+  "<theme-section-list-block>": {
+    "template": "./section-list.marko"
+  },
+  "<theme-section-title-feed-block>": {
+    "template": "./section-title-feed.marko",
+    "<query-params>": {},
+    "@alias": "string",
+    "@count-only": "boolean"
+  },
+  "<theme-top-stories-block>": {
+    "template": "./top-stories.marko"
+  },
+  "<theme-top-stories-menu-block>": {
+    "template": "./top-stories-menu.marko"
+  },
+  "<theme-white-papers-block>": {
+    "template": "./white-papers.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/blocks/more-products.marko b/packages/marko-web-theme-monorail/components/blocks/more-products.marko
new file mode 100644
index 000000000..1620c0a37
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/more-products.marko
@@ -0,0 +1,49 @@
+import queryFragment from "../../graphql/fragments/products-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  requiresImage: true,
+  ...input.params,
+  sectionAlias: input.alias,
+  limit: 6,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "more-products";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header-wrapper">
+      <marko-web-element block-name=blockName name="header">
+        ${i18n("More")} ${section.name}
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="view-more">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </marko-web-element>
+    <default-theme-card-deck-flow
+      cols=2
+      nodes=nodes
+      modifiers=[blockName]
+    >
+      <@slot|{ node }|>
+        <theme-content-node
+          image-position="right"
+          card=true
+          flush=false
+          modifiers=[blockName]
+          node=node
+          with-teaser=false
+          with-dates=false
+        >
+          <@image width=112 ar="1:1" />
+        </theme-content-node>
+      </@slot>
+    </default-theme-card-deck-flow>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/most-popular.marko b/packages/marko-web-theme-monorail/components/blocks/most-popular.marko
new file mode 100644
index 000000000..05fd2e582
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/most-popular.marko
@@ -0,0 +1,89 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import gql from "graphql-tag";
+import fetch from "node-fetch";
+import { extractFragmentData } from "@parameter1/base-cms-web-common/utils";
+import queryFragment from "../../graphql/fragments/most-popular-block";
+
+$ const { MOST_POPULAR_API_URI } = process.env;
+$ const { site, config, apollo, i18n } = out.global;
+
+$ const blockName = "most-popular";
+
+$ const getMostPopular = async () => {
+  const uri = MOST_POPULAR_API_URI || 'https://most-popular-content.base.parameter1.com';
+  const tenant = site.get("p1events.tenant");
+  const realm = config.website("id");
+
+  const url = `${uri}/retrieve?tenant=${tenant}&realm=${realm}`;
+  const res = await fetch(url);
+  const json = await res.json();
+  if (!res.ok) {
+    const e = json.message || res.statusText;
+    throw new Error(e || "An unknown fatal error occurred.");
+  }
+  return json.data;
+};
+
+$ const buildContentQuery = () => {
+  const { spreadFragmentName, processedFragment } = extractFragmentData(queryFragment);
+  return gql`
+    query WebsiteMostPopularBlock(
+      $ids: [Int!]!
+      $limit: Int!
+    ) {
+      allContent(input: {
+        ids: $ids,
+        status: any,
+        pagination: { limit: $limit }
+      }) {
+        edges {
+          node {
+            ${spreadFragmentName}
+          }
+        }
+      }
+    }
+
+    ${processedFragment}
+  `;
+};
+
+<marko-web-resolve|{ resolved }| promise=getMostPopular()>
+  $ const ids = resolved.map(({ id }) => id);
+  <if(ids.length)>
+    $ const query = buildContentQuery();
+    $ const variables = { ids, limit: 6 };
+    <marko-web-resolve|{ resolved: response }| promise=apollo.query({ query, variables })>
+      $ const nodes = getAsArray(response, "data.allContent.edges").map((edge) => edge.node);
+      $ const map = nodes.reduce((m, r) => m.set(`${r.id}`, r), new Map());
+      $ const ordered = ids.map(id => map.get(`${id}`)).filter(id => id);
+      <if(ordered.length)>
+        <marko-web-block name=blockName>
+          <marko-web-element block-name=blockName name="header">
+            ${i18n("Most Popular")}
+          </marko-web-element>
+          <default-theme-card-deck-flow
+            modifiers=[blockName]
+            cols=3
+            nodes=ordered
+          >
+            <@slot|{ node, index }|>
+              <marko-web-element block-name=blockName name="card-wrapper">
+                <marko-web-element block-name=blockName name="position">
+                  ${index + 1}
+                </marko-web-element>
+                <theme-content-node
+                  display-image=false
+                  with-teaser=false
+                  with-dates=false
+                  modifiers=[blockName]
+                  node=node
+                />
+              </marko-web-element>
+            </@slot>
+          </default-theme-card-deck-flow>
+        </marko-web-block>
+      </if>
+    </marko-web-resolve>
+  </if>
+</marko-web-resolve>
diff --git a/packages/marko-web-theme-monorail/components/blocks/native-x-card-deck.marko b/packages/marko-web-theme-monorail/components/blocks/native-x-card-deck.marko
new file mode 100644
index 000000000..d24844e4e
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/native-x-card-deck.marko
@@ -0,0 +1,55 @@
+import { defaultValue } from "@parameter1/base-cms-marko-web/utils";
+import convertAdToContent from "@parameter1/base-cms-marko-web-native-x/utils/convert-ad-to-content";
+
+$ const { nativeX: nxConfig, i18n } = out.global;
+$ const { section } = input;
+$ const limit = defaultValue(input.limit, 3);
+$ const placementName = defaultValue(input.placementName, "default");
+$ const aliases = defaultValue(input.aliases, []);
+
+$ const blockName = "section-card-deck";
+$ const uri = nxConfig.getUri();
+$ const placement = nxConfig.getPlacement({ name: placementName, aliases });
+
+<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id opts={ n: limit }>
+  $ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+  <if(hasAd)>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        ${section.name}
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="description-wrapper">
+        <marko-web-element block-name=blockName name="description">
+          $!{section.description || input.defaultDescription}
+        </marko-web-element>
+      </marko-web-element>
+
+      <marko-web-element block-name=blockName name="deck-wrapper">
+
+        <marko-web-element block-name=blockName name="row">
+          <for|ad| of=ads>
+            <if(ad.hasCampaign)>
+              $ const node = convertAdToContent(ad, { sectionName: `${i18n("Sponsored by")} ${ad.campaign.advertiserName}` });
+              <marko-web-element block-name=blockName name="col">
+                <theme-content-node
+                  image-position="top"
+                  card=true
+                  flush=true
+                  modifiers=[blockName]
+                  node=node
+                  with-section=true
+                  with-teaser=false
+                  with-dates=false
+                  attrs=ad.attributes.container
+                  link-attrs=ad.attributes.link
+                >
+                  <@image fluid=true width=330 ar="4:3" />
+                </theme-content-node>
+              </marko-web-element>
+            </if>
+          </for>
+        </marko-web-element>
+      </marko-web-element>
+    </marko-web-block>
+  </if>
+</marko-web-native-x-fetch-elements>
diff --git a/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner-large.marko b/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner-large.marko
new file mode 100644
index 000000000..382bfc686
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner-large.marko
@@ -0,0 +1,36 @@
+$ const blockName = "newsletter-signup-banner-large";
+
+$ const { site } = out.global;
+$ const {
+  action,
+  hiddenInputs,
+  name,
+  description,
+  disabled
+} = site.getAsObject('newsletter.signupBannerLarge');
+
+<if(action && description && name)>
+  <marko-web-block name=blockName class=input.class>
+    <marko-web-element block-name=blockName name="name">
+      ${name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description">
+      $!{description}
+    </marko-web-element>
+    <form method="GET" action=action class=`${blockName}__form`>
+      <label for="newsletter-signup-banner-large-email" class="sr-only">Email</label>
+      <input
+        id="newsletter-signup-banner-large-email"
+        class="form-control"
+        placeholder="example@gmail.com"
+        type="email"
+        name="em"
+        required
+      />
+      <for|item| of=hiddenInputs>
+        <input type="hidden" name=item.name value=item.value />
+      </for>
+      <button class="btn btn-primary" type="submit" disabled=(disabled && "disabled")>Sign Up</button>
+    </form>
+  </marko-web-block>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner.marko b/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner.marko
new file mode 100644
index 000000000..8c227fc5c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/newsletter-signup-banner.marko
@@ -0,0 +1,39 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+
+$ const blockName = "newsletter-signup-banner";
+
+$ const { config, site, recaptcha } = out.global;
+$ const {
+  name,
+  description,
+  imagePath,
+  defaultNewsletter,
+  newsletters,
+  demographic,
+  disabled,
+  privacyPolicy,
+} = site.getAsObject("newsletter.signupBanner");
+
+$ const lang = site.config.lang || "en";
+$ const imageSrc = imagePath ? buildImgixUrl(`https://${config.website("imageHost")}/${imagePath}`, { w: 120, auto: "format,compress" }) : null;
+$ const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
+
+<if(name && description)>
+  <marko-web-browser-component
+    name="ThemeInlineNewsletterForm"
+    props={
+      siteName: config.website("name"),
+      name,
+      description,
+      defaultNewsletter,
+      newsletters,
+      demographic,
+      disabled,
+      imageSrc,
+      imageSrcset,
+      recaptchaSiteKey: recaptcha.siteKey,
+      privacyPolicyLink: privacyPolicy,
+      lang
+    }
+  />
+</if>
diff --git a/packages/marko-web-theme-monorail/components/blocks/opinion.marko b/packages/marko-web-theme-monorail/components/blocks/opinion.marko
new file mode 100644
index 000000000..ecb930a0b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/opinion.marko
@@ -0,0 +1,34 @@
+import queryFragment from "../../graphql/fragments/opinion-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+<!-- @todo likely should change the name of this component -->
+$ const queryParams = {
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "opinion";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-website-section-name obj=section link=true block-name=blockName class=`${blockName}__header` />
+    <default-theme-card-deck-flow
+      cols=3
+      nodes=nodes
+      modifiers=[blockName]
+    >
+      <@slot|{ node }|>
+        <theme-content-node
+          card=true
+          flush=true
+          full-height=true
+          node=node
+          modifiers=[blockName]
+          with-attribution=true
+        />
+      </@slot>
+    </default-theme-card-deck-flow>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/primary-image.marko b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko
new file mode 100644
index 000000000..fbe2d768a
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko
@@ -0,0 +1,82 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import { getAsObject, getAsArray, get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const blockName = "primary-image";
+$ const image = getAsObject(input, "obj");
+$ const hasImage = Boolean(image.src);
+
+$ const forceDisplay = defaultValue(input.forceDisplay);
+$ let display = forceDisplay || image.primaryImageDisplay || "center";
+$ const aspectRatio = get(image, "cropDimensions.aspectRatio");
+$ const { isLogo } = image;
+
+$ const withCaption = defaultValue(input.withCaption, true);
+$ const withCredit = defaultValue(input.withCredit, true);
+$ const withDisplayName = defaultValue(input.withDisplayName, true);
+
+$ const fluidWidth = defaultValue(input.fluidWidth, 700);
+$ const alignedWidth = defaultValue(input.alignedWidth, 300);
+$ const shouldFill = defaultValue(input.shouldFill, false);
+$ const lazyload = defaultValue(input.lazyload, false);
+
+$ if (display === "center" && isLogo) {
+  // force logos to the right when set to center
+  display = "right";
+}
+
+$ const modifiers = [...getAsArray(input, "modifiers")];
+$ if (["left", "right"].includes(display)) {
+  modifiers.push("aligned");
+}
+$ modifiers.push(`aligned-${display}`);
+
+$ const maxWidth = input.maxWidth || 700;
+$ const fluid = !["left", "right"].includes(display);
+$ if (fluid) modifiers.push("fluid");
+$ if (fluid && aspectRatio === "16x9") modifiers.push("fluid-16by9")
+
+$ const imageOptions = {};
+$ if (fluid) {
+  imageOptions.w = fluidWidth;
+  if (shouldFill && !isLogo) {
+    imageOptions.fit = "fillmax";
+    imageOptions.fill = "blur";
+  }
+} else {
+  imageOptions.w = alignedWidth;
+};
+
+$ const imageAttrs = {};
+$ if (image.id) imageAttrs["data-image-id"] = image.id;
+
+<if(hasImage && display !== "none")>
+  $ const src = buildImgixUrl(image.src, imageOptions);
+  $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+
+  <marko-web-block
+    name=blockName
+    modifiers=modifiers
+  >
+    <if(withDisplayName)>
+      <marko-web-image-display-name block-name=blockName obj=image />
+    </if>
+    <div class=`${blockName}__wrapper`>
+      <marko-web-img
+        src=src
+        srcset=srcset
+        alt=image.alt
+        class=`${blockName}__image`
+        attrs=imageAttrs
+        lazyload=lazyload
+      />
+    </div>
+
+    <if(withCaption)>
+      <marko-web-image-caption block-name=blockName obj=image />
+    </if>
+    <if(withCredit)>
+      <marko-web-image-credit block-name=blockName obj=image />
+    </if>
+  </marko-web-block>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/blocks/products.marko b/packages/marko-web-theme-monorail/components/blocks/products.marko
new file mode 100644
index 000000000..9159377d7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/products.marko
@@ -0,0 +1,57 @@
+import queryFragment from "../../graphql/fragments/products-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "products-block";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section.description || input.defaultDescription}
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="view-more">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </marko-web-element>
+    <default-theme-card-deck-flow
+      cols=3
+      nodes=nodes
+      modifiers=[blockName]
+    >
+      <@slot|{ node }|>
+        <theme-content-node
+          image-position="right"
+          full-height=true
+          card=true
+          flush=false
+          modifiers=[blockName]
+          node=node
+          with-teaser=false
+          with-dates=false
+        >
+          <@image width=112 ar="1:1" />
+        </theme-content-node>
+      </@slot>
+    </default-theme-card-deck-flow>
+
+    <marko-web-element block-name=blockName name="view-more-bottom">
+      <marko-web-link href=section.canonicalPath>
+        ${i18n("View more")} &raquo;
+      </marko-web-link>
+    </marko-web-element>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/read-next.marko b/packages/marko-web-theme-monorail/components/blocks/read-next.marko
new file mode 100644
index 000000000..08fbba4c0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/read-next.marko
@@ -0,0 +1,42 @@
+import queryFragment from "../../graphql/fragments/read-next-block";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  publishedAfter: input.published,
+  excludeContentIds: [input.contentId],
+  sectionId: input.sectionId,
+  limit: 1,
+  queryFragment,
+};
+$ const blockName = "read-next";
+
+<marko-web-query|{ nodes }| name="all-published-content" params=queryParams>
+  <if(nodes.length)>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        ${i18n("Read Next")}
+      </marko-web-element>
+
+      <marko-web-node-list
+        inner-justified=false
+        flush-x=true
+        flush-y=true
+        modifiers=[blockName]
+      >
+        <@nodes nodes=nodes>
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="left"
+              flush=true
+              node=node
+              modifiers=[blockName]
+            >
+              <@image width=160 ar="3:2" />
+            </theme-content-node>
+          </@slot>
+        </@nodes>
+      </marko-web-node-list>
+    </marko-web-block>
+  </if>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/related-stories.marko b/packages/marko-web-theme-monorail/components/blocks/related-stories.marko
new file mode 100644
index 000000000..9d75229c5
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/related-stories.marko
@@ -0,0 +1,70 @@
+import { defaultValue } from "@parameter1/base-cms-marko-web/utils";
+import queryFragment from "../../graphql/fragments/related-stories-block";
+
+$ const { i18n } = out.global;
+$ const { contentId, sectionId, published } = input;
+
+$ const withNativeX = defaultValue(input.withNativeX, false);
+$ const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: "Sponsor Content",
+  ...input.nativeX,
+};
+
+$ const limit = 4;
+$ const queryParams = {
+  contentId,
+  limit,
+  requiresImage: true,
+  queryFragment,
+};
+
+$ const title = `${i18n("Related Stories")}`;
+$ const blockName = "related-stories";
+
+<marko-web-query|{ nodes }| name="related-published-content" params=queryParams collapsible=false>
+  <if(nodes.length < limit)>
+    <!-- query for more content -->
+    $ const excludeContentIds = [contentId, ...nodes.map(node => node.id)];
+    $ const sinceParams = {
+      sectionId,
+      since: published,
+      limit: limit - nodes.length,
+      excludeContentIds,
+      requiresImage: true,
+      excludeContentTypes: ["Contact", "Company", "Document", "Product", "Promotion"],
+      queryFragment
+    };
+    <marko-web-query|{ nodes: related }|
+      name="all-published-content"
+      params=sinceParams
+    >
+      $ nodes.push(...related);
+      <if(nodes.length)>
+        <marko-web-block name=blockName>
+          <marko-web-element block-name=blockName name="header">
+            ${title}
+          </marko-web-element>
+          <theme-content-card-deck-col-flow
+            nodes=nodes
+            modifiers=[blockName]
+            ...(withNativeX && { nativeX })
+          >
+            <@node modifiers=[blockName] />
+          </theme-content-card-deck-col-flow>
+        </marko-web-block>
+      </if>
+    </marko-web-query>
+  </if>
+  <else>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        ${title}
+      </marko-web-element>
+      <theme-content-card-deck-col-flow nodes=nodes modifiers=[blockName]>
+        <@node modifiers=[blockName] />
+      </theme-content-card-deck-col-flow>
+    </marko-web-block>
+  </else>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/resource-library.marko b/packages/marko-web-theme-monorail/components/blocks/resource-library.marko
new file mode 100644
index 000000000..0be1a01b5
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/resource-library.marko
@@ -0,0 +1,76 @@
+import queryFragment from "../../graphql/fragments/resource-library-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+<!-- @todo likely should change the name of this component -->
+$ const queryParams = {
+  ...input.queryParams,
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 4,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "resource-library";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section && section.name || input.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section && section.description || input.defaultDescription}
+      </marko-web-element>
+      <if(section)>
+        <marko-web-element block-name=blockName name="view-more">
+          <marko-web-link href=section.canonicalPath>
+            ${i18n("View more")} &raquo;
+          </marko-web-link>
+        </marko-web-element>
+      </if>
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="deck-wrapper">
+
+      <marko-web-element block-name=blockName name="row">
+        <for|node| of=nodes>
+          <marko-web-element block-name=blockName name="col">
+            <marko-web-node
+              type=`${node.type}-content`
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=[blockName]
+            >
+              <@image
+                fluid=true
+                gradient=true
+                width=250
+                ar="3:4"
+                src=node.primaryImage.src
+                alt=node.primaryImage.alt
+                link=true
+              >
+                <@body>
+                  <@title tag="h5">
+                    <marko-web-content-short-name tag=null obj=node link=true />
+                  </@title>
+                </@body>
+              </@image>
+            </marko-web-node>
+          </marko-web-element>
+        </for>
+      </marko-web-element>
+    </marko-web-element>
+
+    <if(section)>
+      <marko-web-element block-name=blockName name="view-more-bottom">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </if>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-body-feed.marko b/packages/marko-web-theme-monorail/components/blocks/section-body-feed.marko
new file mode 100644
index 000000000..b5e0375de
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-body-feed.marko
@@ -0,0 +1,39 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/section-body-feed-block";
+
+$ const queryParams = {
+  ...input.queryParams,
+  sectionAlias: input.alias,
+  queryFragment,
+};
+
+$ const blockName = "section-feed";
+$ const countOnly = defaultValue(input.countOnly, false);
+
+<if(countOnly)>
+  <theme-query-total-count|data| name="website-scheduled-content" params=queryParams>
+    <${input.renderBody} ...data />
+  </theme-query-total-count>
+</if>
+<else>
+  <marko-web-query|{ nodes }| name="website-scheduled-content" params=queryParams>
+    <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=false
+      modifiers=[blockName]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-section-feed-content-node
+            node=node
+            with-section=false
+            with-teaser=false
+            with-dates=false
+            with-body=true
+          />
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-query>
+</else>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-card-deck-featured.marko b/packages/marko-web-theme-monorail/components/blocks/section-card-deck-featured.marko
new file mode 100644
index 000000000..8aebf31d3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-card-deck-featured.marko
@@ -0,0 +1,37 @@
+import queryFragment from "../../graphql/fragments/section-card-deck-featured-block";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  limit: 3,
+  requiresImage: true,
+  sectionAlias: input.alias,
+  queryFragment,
+};
+
+$ const blockName = "section-card-deck-featured";
+
+
+<marko-web-query|{ nodes }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="title">
+      ${i18n("Featured")}
+    </marko-web-element>
+  </marko-web-block>
+  <default-theme-card-deck-flow cols=3 nodes=nodes modifiers=[blockName]>
+    <@slot|{ node }|>
+      <theme-content-node
+        image-position="top"
+        card=true
+        flush=true
+        full-height=true
+        with-teaser=true
+        with-dates=false
+        modifiers=[blockName]
+        node=node
+      >
+        <@image ar="3:2" fluid=true />
+      </theme-content-node>
+    </@slot>
+  </default-theme-card-deck-flow>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-card-deck.marko b/packages/marko-web-theme-monorail/components/blocks/section-card-deck.marko
new file mode 100644
index 000000000..d84653642
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-card-deck.marko
@@ -0,0 +1,60 @@
+import queryFragment from "../../graphql/fragments/section-card-deck-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "section-card-deck";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section.description || input.defaultDescription}
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="view-more">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </marko-web-element>
+
+    <marko-web-element block-name=blockName name="deck-wrapper">
+
+      <marko-web-element block-name=blockName name="row">
+        <for|node| of=nodes>
+          <marko-web-element block-name=blockName name="col">
+            <theme-content-node
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=[blockName]
+              node=node
+              with-section=false
+              with-teaser=false
+              with-dates=false
+            >
+              <@image fluid=true width=330 ar="4:3" />
+            </theme-content-node>
+          </marko-web-element>
+        </for>
+      </marko-web-element>
+    </marko-web-element>
+
+    <marko-web-element block-name=blockName name="view-more-bottom">
+      <marko-web-link href=section.canonicalPath>
+        ${i18n("View more")} &raquo;
+      </marko-web-link>
+    </marko-web-element>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-card-list.marko b/packages/marko-web-theme-monorail/components/blocks/section-card-list.marko
new file mode 100644
index 000000000..27a4fd0b1
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-card-list.marko
@@ -0,0 +1,86 @@
+import queryFragment from "../../graphql/fragments/section-card-list-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  limit: 3,
+  requiresImage: true,
+  sectionAlias: input.alias,
+  queryFragment,
+  sectionFragment,
+};
+$ const blockName = "section-card-list";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  $ const heroNode = nodes.slice(0, 1)[0];
+  $ const heroImageNode = {
+    id: heroNode.id,
+    type: heroNode.type,
+    siteContext: heroNode.siteContext,
+    primaryImage: heroNode.primaryImage,
+  };
+  $ const listNodes = nodes.slice(1);
+
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description">
+      ${section.description || input.defaultDescription}
+    </marko-web-element>
+
+    <marko-web-element block-name=blockName name="row">
+      <marko-web-element block-name=blockName name="col">
+        <theme-content-node
+          image-position="top"
+          card=true
+          flush=true
+          image-only=true
+          modifiers=[`${blockName}-hero-image`]
+          node=heroImageNode
+        >
+          <@image fluid=true width=340 ar="3:2" />
+        </theme-content-node>
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="col">
+        <theme-content-node
+          full-height=true
+          card=true
+          display-image=false
+          flush=true
+          modifiers=[`${blockName}-hero`]
+          with-dates=false
+          with-section=false
+          node=heroNode
+        />
+      </marko-web-element>
+      <marko-web-element block-name=blockName name="col">
+        <marko-web-node-list
+          flush-x=true
+          flush-y=true
+          modifiers=[blockName]
+        >
+          <@nodes nodes=listNodes>
+            <@slot|{ node }|>
+              <theme-content-node
+                display-image=false
+                flush=true
+                modifiers=[`${blockName}-item`]
+                with-teaser=false
+                with-dates=false
+                with-section=false
+                node=node
+              />
+            </@slot>
+          </@nodes>
+        </marko-web-node-list>
+        <marko-web-element block-name=blockName name="btn-wrapper">
+          <marko-web-link href=section.canonicalPath class="btn btn-secondary">
+            ${i18n("More")} ${section.name}
+          </marko-web-link>
+        </marko-web-element>
+      </marko-web-element>
+    </marko-web-element>
+  </marko-web-block>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-feed.marko b/packages/marko-web-theme-monorail/components/blocks/section-feed.marko
new file mode 100644
index 000000000..370ca25bc
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-feed.marko
@@ -0,0 +1,44 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/section-feed-block";
+
+$ const queryName = input.queryName ? input.queryName : "website-scheduled-content";
+$ const queryParams = {
+  ...input.queryParams,
+  ...(queryName === "website-scheduled-content") && {
+    sectionAlias: input.alias,
+    queryFragment,
+  }
+};
+
+$ const blockName = "section-feed";
+$ const countOnly = defaultValue(input.countOnly, false);
+$ const modifiers = defaultValue(input.modifiers, []);
+$ const lazyload = defaultValue(input.lazyload, true);
+$ const withSection = defaultValue(input.withSection, true);
+
+<if(countOnly)>
+  <theme-query-total-count|data| name=queryName params=queryParams>
+    <${input.renderBody} ...data />
+  </theme-query-total-count>
+</if>
+<else>
+  <marko-web-query|{ nodes }| name=queryName params=queryParams>
+    <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=false
+      modifiers=[blockName, ...modifiers]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-section-feed-content-node
+            node=node
+            display-image=input.displayImage
+            with-section=withSection
+            lazyload=lazyload
+          />
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-query>
+</else>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-list-deck.marko b/packages/marko-web-theme-monorail/components/blocks/section-list-deck.marko
new file mode 100644
index 000000000..0b316140d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-list-deck.marko
@@ -0,0 +1,18 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const blockName = "section-list-deck";
+$ const aliases = getAsArray(input, "aliases");
+
+<marko-web-block name=blockName>
+  <marko-web-element block-name=blockName name="row">
+    <marko-web-element block-name=blockName name="col">
+      <theme-section-list-block alias=aliases[0] />
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="col">
+      <theme-section-list-block alias=aliases[1] />
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="col">
+      <theme-section-list-block alias=aliases[2] />
+    </marko-web-element>
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-list.marko b/packages/marko-web-theme-monorail/components/blocks/section-list.marko
new file mode 100644
index 000000000..84b83aa7f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-list.marko
@@ -0,0 +1,86 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import cardFragment from "../../graphql/fragments/section-list-card-block";
+import listFragment from "../../graphql/fragments/section-list-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const { alias } = input;
+
+$ const withSection = defaultValue(input.withSection, true);
+$ const withViewMore = defaultValue(input.withViewMore, true);
+
+$ const queryParams = {
+  limit: 4,
+  ...getAsObject(input, "queryParams"),
+  queryFragment: listFragment,
+  sectionFragment,
+  sectionAlias: alias,
+};
+$ const heroParams = {
+  ...queryParams,
+  limit: 1,
+  requiresImage: true,
+  queryFragment: cardFragment,
+};
+
+$ const blockName = "section-list";
+
+<marko-web-query|{ nodes: heroNodes, section }| name="website-scheduled-content" params=heroParams>
+  $ const listParams = {
+    ...queryParams,
+    limit: queryParams.limit - 1,
+    excludeContentIds: heroNodes.map((node) => node.id),
+    sectionFragment: undefined,
+  };
+  <marko-web-query|{ nodes: listNodes }| name="website-scheduled-content" params=listParams>
+    $ const nodes = [...heroNodes, ...listNodes];
+    <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=true
+      modifiers=[blockName]
+    >
+      <@header>
+        <marko-web-website-section-name obj=section link=true />
+      </@header>
+      <@nodes nodes=nodes>
+        <@slot|{ node, index }|>
+          <if(index === 0)>
+            <theme-content-node
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=[`${blockName}-card`]
+              with-teaser=false
+              with-dates=false
+              with-section=withSection
+              node=node
+            >
+              <@image fluid=true width=330 ar="3:2" />
+            </theme-content-node>
+          </if>
+          <else>
+            <theme-content-node
+              display-image=false
+              flush=true
+              modifiers=[`${blockName}-item`]
+              with-teaser=false
+              with-dates=false
+              with-section=withSection
+              node=node
+            />
+          </else>
+        </@slot>
+      </@nodes>
+      <if(withViewMore)>
+        <@footer modifiers=["view-more"]>
+          <marko-web-website-section-name obj=section link=true>
+            ${i18n("View More")} &raquo;
+          </marko-web-website-section-name>
+        </@footer>
+      </if>
+    </marko-web-node-list>
+  </marko-web-query>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/section-title-feed.marko b/packages/marko-web-theme-monorail/components/blocks/section-title-feed.marko
new file mode 100644
index 000000000..6826fcdba
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/section-title-feed.marko
@@ -0,0 +1,40 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/section-body-feed-block";
+
+$ const queryParams = {
+  ...input.queryParams,
+  sectionAlias: input.alias,
+  queryFragment,
+};
+
+$ const blockName = "section-feed";
+$ const countOnly = defaultValue(input.countOnly, false);
+
+<if(countOnly)>
+  <theme-query-total-count|data| name="website-scheduled-content" params=queryParams>
+    <${input.renderBody} ...data />
+  </theme-query-total-count>
+</if>
+<else>
+  <marko-web-query|{ nodes }| name="website-scheduled-content" params=queryParams>
+    <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=false
+      modifiers=[blockName]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-content-node
+            node=node
+            with-section=false
+            with-teaser=false
+            with-dates=false
+            with-body=false
+            display-image=false
+          />
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-query>
+</else>
diff --git a/packages/marko-web-theme-monorail/components/blocks/top-stories-menu.marko b/packages/marko-web-theme-monorail/components/blocks/top-stories-menu.marko
new file mode 100644
index 000000000..547208a94
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/top-stories-menu.marko
@@ -0,0 +1,40 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/top-stories-menu-block";
+
+$ const { i18n } = out.global;
+
+$ const sectionAlias = defaultValue(input.sectionAlias, 'home');
+
+$ const queryParams = {
+  limit: 5,
+  queryFragment,
+  sectionAlias,
+};
+
+$ const blockName = "top-stories-menu";
+
+<marko-web-query|{ nodes }| name="website-scheduled-content" params=queryParams>
+  <marko-web-node-list
+    inner-justified=false
+    flush-x=true
+    flush-y=true
+    modifiers=[blockName]
+  >
+    <@header>
+      ${i18n("Top Stories")}
+    </@header>
+    <@nodes nodes=nodes>
+      <@slot|{ node }|>
+        <theme-content-node
+          display-image=false
+          flush=true
+          modifiers=[blockName]
+          with-teaser=false
+          with-dates=false
+          node=node
+        />
+      </@slot>
+    </@nodes>
+  </marko-web-node-list>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/top-stories.marko b/packages/marko-web-theme-monorail/components/blocks/top-stories.marko
new file mode 100644
index 000000000..b2c853992
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/top-stories.marko
@@ -0,0 +1,75 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/top-stories-block";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  limit: 5,
+  requiresImage: true,
+  queryFragment,
+  sectionAlias: "home",
+  ...input.queryParams,
+};
+$ const blockName = "top-stories";
+$ const withHeader = defaultValue(input.withHeader, true);
+$ const withNativeX = defaultValue(input.withNativeX, true);
+$ const lazyload = defaultValue(input.lazyload, true);
+$ const queryName = (queryParams.optionName) ? "website-optioned-content" : "website-scheduled-content";
+
+<marko-web-query|{ nodes }| name=queryName params=queryParams>
+  <if(nodes.length)>
+    $ const heroNode = nodes.slice(0, 1)[0];
+    $ const heroImageNode = {
+      id: heroNode.id,
+      type: heroNode.type,
+      siteContext: heroNode.siteContext,
+      primaryImage: heroNode.primaryImage,
+    };
+    $ const cardNodes = nodes.slice(1);
+
+    <marko-web-block name=blockName>
+      <if(withHeader)>
+        <marko-web-element block-name=blockName name="header">
+          ${i18n("Top Stories")}
+        </marko-web-element>
+      </if>
+
+      <marko-web-element block-name=blockName name="row">
+        <marko-web-element block-name=blockName name="col" modifiers=["hero"]>
+          <theme-content-node
+            image-position="top"
+            card=true
+            flush=true
+            image-only=true
+            modifiers=[`${blockName}-hero-image`]
+            node=heroImageNode
+          >
+            <@image fluid=true width=600 ar="3:2" lazyload=lazyload />
+          </theme-content-node>
+        </marko-web-element>
+        <marko-web-element block-name=blockName name="col" modifiers=["list"]>
+          <theme-content-node
+            full-height=true
+            card=true
+            display-image=false
+            flush=true
+            modifiers=[`${blockName}-hero`]
+            node=heroNode
+          />
+        </marko-web-element>
+      </marko-web-element>
+
+      <if(cardNodes.length)>
+        <theme-content-card-deck-col-flow
+          nodes=cardNodes
+          modifiers=[blockName]
+          ...(withNativeX && { nativeX: { name: "default", index: 3, sectionName: "Sponsor Content" } })
+        >
+          <@node modifiers=[`${blockName}-card`]>
+            <@image lazyload=lazyload />
+          </@node>
+        </theme-content-card-deck-col-flow>
+      </if>
+    </marko-web-block>
+  </if>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/blocks/white-papers.marko b/packages/marko-web-theme-monorail/components/blocks/white-papers.marko
new file mode 100644
index 000000000..3d74fa044
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/blocks/white-papers.marko
@@ -0,0 +1,74 @@
+import { get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/white-papers-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const sectionAlias = defaultValue(input.sectionAlias, "white-papers");
+$ const contentTypes = defaultValue(input.contentTypes, ["Whitepaper"]);
+
+$ const queryParams = {
+  sectionAlias,
+  includeContentTypes: contentTypes,
+  ...input.queryParams,
+  limit: 1,
+  queryFragment,
+  sectionFragment,
+};
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <if(nodes.length)>
+    $ const node = nodes[0];
+    $ const blockName = "white-papers";
+
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        <marko-web-icon name="file" modifiers=[blockName] />
+        ${section.name}
+      </marko-web-element>
+
+      <marko-web-node
+        type=`${node.type}-content`
+        card=true
+        flush=true
+        full-height=false
+        modifiers=[blockName]
+      >
+        <@body>
+          <@header>
+            <@left modifiers=["company-name"]>
+              <marko-web-content-name|{ value }| obj=node.company>
+                ${i18n("Sponsored by")} ${value}
+              </marko-web-content-name>
+            </@left>
+          </@header>
+          <@title tag="h5">
+            <marko-web-content-short-name tag=null obj=node link=true />
+          </@title>
+          <@text modifiers=["teaser"] show=(Boolean(node.teaser))>
+            <marko-web-content-teaser tag=null obj=node link=true />
+          </@text>
+          <@footer modifiers=["buttons"]>
+            <@left>
+              <marko-web-link
+                class=`btn btn-primary ${blockName}__download-btn`
+                href=node.siteContext.path
+                title="Download"
+              >
+                ${i18n("Download")}
+              </marko-web-link>
+              <marko-web-link
+                class="btn btn-secondary"
+                href=`/${sectionAlias}`
+                title="View All"
+              >
+                ${i18n("View All")}
+              </marko-web-link>
+            </@left>
+          </@footer>
+        </@body>
+      </marko-web-node>
+    </marko-web-block>
+  </if>
+</marko-web-query>
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/content-page.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/content-page.marko
new file mode 100644
index 000000000..9043c7846
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/content-page.marko
@@ -0,0 +1,6 @@
+<theme-website-section-breadcrumbs
+  display-home=false
+  section=input.section
+  display-self=input.displaySelf
+  modifiers=["content-page"]
+/>
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/index.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/index.marko
new file mode 100644
index 000000000..74a3398ad
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/index.marko
@@ -0,0 +1,20 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const items = getAsArray(input, "items");
+$ const modifiers = getAsArray(input, "modifiers");
+$ const blockName = "breadcrumbs";
+$ const classes = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`)];
+
+<if(items.length)>
+  <nav class=classes aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <for|item| of=items>
+        <if(item.renderBody)>
+          <li class="breadcrumb-item">
+            <${item.renderBody} />
+          </li>
+        </if>
+      </for>
+    </ol>
+  </nav>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/marko.json b/packages/marko-web-theme-monorail/components/breadcrumbs/marko.json
new file mode 100644
index 000000000..8ae0e762a
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/marko.json
@@ -0,0 +1,30 @@
+{
+  "<theme-breadcrumbs>": {
+    "template": "./index.marko",
+    "@items <item>[]": {},
+    "@modifiers": "array"
+  },
+  "<theme-breadcrumbs-with-home>": {
+    "template": "./with-home.marko",
+    "@items <item>[]": {},
+    "@home-title": "string"
+  },
+  "<theme-content-page-breadcrumbs>": {
+    "template": "./content-page.marko",
+    "@section": "object",
+    "@home-title": "string",
+    "@home-alias": "string",
+    "@display-self": "boolean",
+    "@display-home": "boolean",
+    "@modifiers": "array"
+  },
+  "<theme-website-section-breadcrumbs>": {
+    "template": "./website-section.marko",
+    "@section": "object",
+    "@home-title": "string",
+    "@home-alias": "string",
+    "@display-self": "boolean",
+    "@display-home": "boolean",
+    "@modifiers": "array"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/scss/_breadcrumbs.scss b/packages/marko-web-theme-monorail/components/breadcrumbs/scss/_breadcrumbs.scss
new file mode 100644
index 000000000..118a50187
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/scss/_breadcrumbs.scss
@@ -0,0 +1,35 @@
+.breadcrumbs {
+  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+    font-size: $theme-breadcrumbs-font-size-sm;
+    line-height: $theme-breadcrumbs-line-height-sm;
+  }
+
+  font-family: $theme-breadcrumbs-font-family;
+  font-size: $theme-breadcrumbs-font-size;
+  font-weight: $theme-breadcrumbs-font-weight;
+  line-height: $theme-breadcrumbs-line-height;
+  text-transform: $theme-breadcrumbs-transform;
+  letter-spacing: $theme-breadcrumbs-letter-spacing;
+
+  .breadcrumb {
+    padding-top: 0;
+    background-color: $theme-breadcrumbs-background-color;
+  }
+
+  a {
+    color: $theme-breadcrumbs-link-color;
+    text-decoration: $theme-breadcrumbs-link-decoration;
+
+    &:hover {
+      color: $theme-breadcrumbs-link-hover-color;
+      text-decoration: $theme-breadcrumbs-link-hover-decoration;
+    }
+  }
+
+  &--content-page {
+    @include skin-typography($style: "slug-medium", $link-style: "primary");
+    .breadcrumb {
+      padding-bottom: 1rem;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/website-section.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/website-section.marko
new file mode 100644
index 000000000..29fbd3ff9
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/website-section.marko
@@ -0,0 +1,31 @@
+import { getAsObject, getAsArray } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const section = getAsObject(input, "section");
+$ const children = getAsArray(section, "hierarchy");
+$ const homeTitle = input.homeTitle || "Home";
+$ const homeAlias = input.homeAlias || "home";
+$ const displaySelf = defaultValue(input.displaySelf, true);
+$ const displayHome = defaultValue(input.displayHome, true);
+
+<theme-breadcrumbs modifiers=input.modifiers>
+  <if(displayHome)>
+    <@item>
+      <marko-web-link href="/" title=homeTitle>${homeTitle}</marko-web-link>
+    </@item>
+  </if>
+  <for|child| of=children>
+    <if(section.alias !== homeAlias)>
+      <if(displaySelf)>
+        <@item>
+          <marko-web-link title=child.name href=`/${child.alias}`>$!{child.name}</marko-web-link>
+        </@item>
+      </if>
+      <else-if(child.alias !== section.alias)>
+        <@item>
+          <marko-web-link title=child.name href=`/${child.alias}`>$!{child.name}</marko-web-link>
+        </@item>
+      </else-if>
+    </if>
+  </for>
+</theme-breadcrumbs>
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/with-home.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/with-home.marko
new file mode 100644
index 000000000..0e588d6b6
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/breadcrumbs/with-home.marko
@@ -0,0 +1,13 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const items = getAsArray(input, "items");
+$ const homeTitle = input.homeTitle || "Home";
+
+<theme-breadcrumbs>
+  <@item>
+    <marko-web-link href="/" title=homeTitle>$!{homeTitle}</marko-web-link>
+  </@item>
+  <for|item| of=items>
+    <@item ...item />
+  </for>
+</theme-breadcrumbs>
diff --git a/packages/marko-web-theme-monorail/components/client-side-block-loader.marko b/packages/marko-web-theme-monorail/components/client-side-block-loader.marko
new file mode 100644
index 000000000..7205831b0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/client-side-block-loader.marko
@@ -0,0 +1 @@
+<marko-web-browser-component name="ThemeBlockLoader" props=input />
diff --git a/packages/marko-web-theme-monorail/components/client-side-blocks/marko.json b/packages/marko-web-theme-monorail/components/client-side-blocks/marko.json
new file mode 100644
index 000000000..8865e2e00
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/client-side-blocks/marko.json
@@ -0,0 +1,5 @@
+{
+  "<theme-client-side-most-popular-block>": {
+    "template": "./most-popular.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/client-side-blocks/most-popular.marko b/packages/marko-web-theme-monorail/components/client-side-blocks/most-popular.marko
new file mode 100644
index 000000000..15f6cda7d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/client-side-blocks/most-popular.marko
@@ -0,0 +1 @@
+<theme-client-side-block-loader name="most-popular" label="Most Popular Stories" ...input />
diff --git a/packages/marko-web-theme-monorail/components/flows/content/card-deck-col.marko b/packages/marko-web-theme-monorail/components/flows/content/card-deck-col.marko
new file mode 100644
index 000000000..527eed7f4
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/flows/content/card-deck-col.marko
@@ -0,0 +1,49 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { nativeX: nxConfig } = out.global;
+$ const nativeX = getAsObject(input, "nativeX");
+$ const cols = defaultValue(input.cols, 4);
+$ const nodeImageInput = getAsObject(input, "node.image");
+
+<default-theme-card-deck-flow cols=cols nodes=input.nodes modifiers=input.modifiers>
+  <@slot|{ node, index }|>
+    <if(nxConfig)>
+      <marko-web-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+        ...nativeX
+        when=(index === nativeX.index)
+        node=node
+        config=nxConfig
+      >
+        <theme-content-node
+          image-position="top"
+          card=true
+          flush=true
+          full-height=true
+          with-teaser=false
+          with-dates=false
+          ...input.node
+          node=nxNode
+          link-attrs=linkAttrs
+          attrs=containerAttrs
+        >
+          <@image ar="3:2" fluid=true ...nodeImageInput />
+        </theme-content-node>
+      </marko-web-native-x-render>
+    </if>
+    <else>
+      <theme-content-node
+        image-position="top"
+        card=true
+        flush=true
+        full-height=true
+        with-teaser=false
+        with-dates=false
+        ...input.node
+        node=node
+      >
+        <@image ar="3:2" fluid=true ...nodeImageInput />
+      </theme-content-node>
+    </else>
+  </@slot>
+</default-theme-card-deck-flow>
diff --git a/packages/marko-web-theme-monorail/components/flows/content/directory-section.marko b/packages/marko-web-theme-monorail/components/flows/content/directory-section.marko
new file mode 100644
index 000000000..541a09b44
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/flows/content/directory-section.marko
@@ -0,0 +1,41 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { nodes, header } = input
+$ const image = getAsObject(input, "node.image");
+
+$ const withSection = defaultValue(input.withSection, false);
+
+$ const blockName = "read-next";
+
+<if(nodes.length)>
+  <marko-web-block name=blockName>
+    <if(header && header.renderBody)>
+      <marko-web-element block-name=blockName name="header">
+        <${header.renderBody} />
+      </marko-web-element>
+    </if>
+    <marko-web-node-list
+      inner-justified=false
+      flush-x=true
+      flush-y=true
+      modifiers=[blockName]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-content-node
+            image-position="left"
+            ...input.node
+            flush=true
+            node=node
+            with-dates=false
+            with-section=withSection
+            modifiers=[blockName]
+          >
+            <@image width=160 ar="3:2" ...image />
+          </theme-content-node>
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-block>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/flows/content/list.marko b/packages/marko-web-theme-monorail/components/flows/content/list.marko
new file mode 100644
index 000000000..6037c5ba2
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/flows/content/list.marko
@@ -0,0 +1,44 @@
+import { getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { nativeX: nxConfig } = out.global;
+$ const nodes = getAsArray(input, "nodes");
+$ const nativeX = getAsObject(input, "nativeX");
+
+<marko-web-node-list
+  inner-justified=defaultValue(input.innerJustified, true)
+  class=input.class
+  flush-x=defaultValue(input.flushX, true)
+  flush-y=defaultValue(input.flushY, false)
+  modifiers=input.modifiers
+  header=input.header
+  body=input.body
+  footer=input.footer
+  collapsible=input.collapsible
+>
+  <@nodes nodes=nodes>
+    <@slot|{ node, index }|>
+      <if(nxConfig)>
+        <marko-web-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+          ...nativeX
+          when=(index === nativeX.index)
+          node=node
+          config=nxConfig
+        >
+          <theme-content-node
+            ...input.node
+            node=nxNode
+            attrs=containerAttrs
+            link-attrs=linkAttrs
+          />
+        </marko-web-native-x-render>
+      </if>
+      <else>
+        <theme-content-node
+          ...input.node
+          node=node
+        />
+      </else>
+    </@slot>
+  </@nodes>
+</marko-web-node-list>
diff --git a/packages/marko-web-theme-monorail/components/flows/content/marko.json b/packages/marko-web-theme-monorail/components/flows/content/marko.json
new file mode 100644
index 000000000..d53283b59
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/flows/content/marko.json
@@ -0,0 +1,36 @@
+{
+  "<theme-content-list-flow>": {
+    "template": "./list.marko",
+    "<header>": {},
+    "<body>": {},
+    "<footer>": {},
+    "<node>": {
+      "<attribution>": {},
+      "<image>": {}
+    },
+    "<native-x>": {
+      "@index": "number",
+      "@name": "string",
+      "@aliases": "array"
+    },
+    "@nodes": "array",
+    "@inner-justified": "boolean",
+    "@flush-x": "boolean",
+    "@flush-y": "boolean",
+    "@class": "string",
+    "@collapsible": "boolean",
+    "@modifiers": "array"
+  },
+  "<theme-content-directory-section-flow>": {
+    "template": "./directory-section.marko",
+    "<header>": {},
+    "<node>": {
+      "<image>": {}
+    },
+    "@nodes": "array",
+    "@with-section": "boolean"
+  },
+  "<theme-content-card-deck-col-flow>": {
+    "template": "./card-deck-col.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/flows/marko.json b/packages/marko-web-theme-monorail/components/flows/marko.json
new file mode 100644
index 000000000..95c280dd8
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/flows/marko.json
@@ -0,0 +1,5 @@
+{
+  "taglib-imports": [
+    "./content/marko.json"
+  ]
+}
diff --git a/packages/marko-web-theme-monorail/components/gam/components/define-display-ad.marko b/packages/marko-web-theme-monorail/components/gam/components/define-display-ad.marko
new file mode 100644
index 000000000..65e737ce3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/components/define-display-ad.marko
@@ -0,0 +1,104 @@
+<!-- @todo: MERGE ~ marko-web-gam/components/defined-display-ad.marko -->
+<!-- @todo: replace with <marko-web-gam-define-display-ad> once logic is referrer and position targeting is migrated -->
+import { BEM, warn } from "@parameter1/base-cms-utils";
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import generateId from "@parameter1/base-cms-marko-web-gam/utils/generate-id";
+import buildSlots from "@parameter1/base-cms-marko-web-gam/utils/build-slots";
+import slotStyle from "@parameter1/base-cms-marko-web-gam/utils/slot-size-style";
+import incrementPos from "../utils/increment-pos";
+
+$ const { req, res, site } = out.global;
+
+$ const parseReferrer = () => {
+  const referrer = req.get('referrer');
+  if (!referrer) return 'none';
+  return `${referrer}`.includes(req.hostname) ? 'internal' : 'external';
+};
+
+$ const { isArray } = Array;
+$ const {
+  path,
+  inc,
+  targeting,
+  sizeMapping,
+  withWrapper,
+  collapseBeforeAdFetch,
+  requestOnMediaMatch,
+  position,
+} = input;
+$ const id = input.id || generateId({ inc });
+$ if (position) targeting.pos = incrementPos({ position, inc, res });
+$ targeting.referrer = parseReferrer();
+
+$ const collapse = defaultValue(input.collapse, true);
+$ const oop = defaultValue(input.oop, false);
+$ const size = typeof input.size === "string" ? [input.size] : (isArray(input.size) ? input.size : []);
+$ const applyStyle = input.applyStyle == null ? false : input.applyStyle;
+$ const style = applyStyle ? slotStyle(size) : null;
+
+$ const calls = [];
+$ const slots = {
+  [id]: {
+    path,
+    size,
+    sizeMapping,
+    targeting,
+    oop,
+    collapse,
+    collapseBeforeAdFetch: input.collapseBeforeAdFetch,
+  },
+};
+$ calls.push(...buildSlots(slots));
+
+$ const attrs = {
+  ...getAsObject(input.attrs),
+  "data-gam-path": path,
+  "data-gam-size": JSON.stringify(size),
+  "data-gam-size-mapping": sizeMapping ? JSON.stringify(sizeMapping) : undefined,
+  "data-gam-targeting": targeting ? JSON.stringify(targeting) : undefined,
+  "data-gam-collapse": `${collapse}`,
+  ...(collapseBeforeAdFetch && { "data-gam-collapse-before-ad-fetch": "true" }),
+  ...(oop && { "data-gam-oop": "true" }),
+};
+
+$ const blockName = input.blockName || "ad-container";
+$ const classNames = [blockName, ...BEM.applyModifiers(blockName, input.modifiers), input.class];
+
+$ const debugMediaQuery = Boolean(defaultValue(input.debugMediaQuery, false));
+$ if (requestOnMediaMatch) calls.push(`
+  var hasRequested = false; var debugMediaQuery = ${debugMediaQuery};
+  var handler = function(media) {
+    if (hasRequested) return;
+    if (media.matches) {
+      googletag.display('${id}'); hasRequested = true;
+      if (debugMediaQuery) console.log('GAM ad request sent based on media query', '${id}', '${requestOnMediaMatch}');
+    } else {
+      if (debugMediaQuery) console.log('GAM ad request ineligble based on media query', '${id}', '${requestOnMediaMatch}');
+    }
+  };
+  var mql = window.matchMedia('${requestOnMediaMatch}');
+  mql.addEventListener('change', function(event) { handler(event); });
+  handler(mql);
+`);
+$ if (!requestOnMediaMatch) calls.push(`googletag.display('${id}');`);
+
+<if(path)>
+  <div
+    id=(withWrapper ? null : id)
+    style=style
+    class=classNames
+    ...attrs
+  >
+    <marko-web-gam-ad-wrapper id=id enabled=withWrapper block-name=blockName>
+      <if(input.renderBody)>
+        <${input.renderBody} block-name=blockName />
+      </if>
+
+      <script>googletag.cmd.push(function() { ${calls.join(" ")} });</script>
+    </marko-web-gam-ad-wrapper>
+  </div>
+</if>
+<else>
+  $ warn("Unable to render ad unit: no `path` was provided.");
+</else>
diff --git a/packages/marko-web-theme-monorail/components/gam/define-display-ad.marko b/packages/marko-web-theme-monorail/components/gam/define-display-ad.marko
new file mode 100644
index 000000000..1d59b03da
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/define-display-ad.marko
@@ -0,0 +1,27 @@
+<!-- @todo: MERGE ~ marko-web-gam/defined-display-ad.marko -->
+<!-- @todo here: Merge this component into marko-web-gam's define-display-ad. Bring over the utility function and add the referrer and position targeting. -->
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import { dasherize } from "@parameter1/base-cms-inflector";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { GAM, req } = out.global;
+
+$ const adUnit = GAM.getAdUnit({ name: input.name, aliases: input.aliases });
+$ const { templateName } = adUnit;
+$ const showLabel = defaultValue(input.showLabel, true);
+$ const targeting = defaultValue(input.targeting, {});
+$ const modifiers = [
+  ...(showLabel ? ["with-label"] : []),
+  ...getAsArray(input.modifiers),
+];
+$ if (templateName) modifiers.push(`template-${dasherize(templateName)}`);
+
+<define-display-ad
+  ...adUnit
+  position=input.position
+  targeting=targeting
+  modifiers=modifiers
+  with-wrapper=true
+  class=input.class
+  collapse-before-ad-fetch=true
+/>
diff --git a/packages/marko-web-theme-monorail/components/gam/inject-ads.marko b/packages/marko-web-theme-monorail/components/gam/inject-ads.marko
new file mode 100644
index 000000000..10d177404
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/inject-ads.marko
@@ -0,0 +1,28 @@
+<!-- @todo: MERGE ~ marko-web-gam/inject-ads.marko -->
+<!-- @todo: Merge this with <marko-web-gam-inject-ads>. The $global: out.global trick is providing access to the express request and response objects for retrieving the referrer and incrementing/storing the position counter. Investigate if this can be done better -- perhaps passing the referrer directly, along with the res.local prop (or a reference to it). -->
+
+<!-- This line and the default value for position are the only differences. -->
+
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import DefineDisplayAd from "./define-display-ad";
+
+$ const props = {
+  selector: input.selector,
+  childSelector: input.childSelector,
+  detectEmbeds: input.detectEmbeds,
+};
+
+$ const inject = getAsArray(input, "inject").filter(o => o && o.at);
+$ props.toInject = inject.reduce((o, i) => {
+  const { at } = i;
+  delete i.at;
+  i.position = defaultValue(input.position, "content_body");
+  // Ensure closing HMTL tags are escaped.
+  const html = DefineDisplayAd.renderToString({ ...i, $global: out.global }).replace(/<\/(.+?)>/g, '<\\/$1>');
+  return { ...o, [at]: html };
+}, {});
+
+<if(Object.keys(props.toInject).length)>
+  <marko-web-browser-component name="GAMInjectAds" props=props />
+</if>
diff --git a/packages/marko-web-theme-monorail/components/gam/marko.json b/packages/marko-web-theme-monorail/components/gam/marko.json
new file mode 100644
index 000000000..fce222ded
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/marko.json
@@ -0,0 +1,17 @@
+{
+  "<theme-gam-define-display-ad>": {
+    "template": "./define-display-ad.marko"
+  },
+  "<theme-gam-wallpaper-ad>": {
+    "template": "./wallpaper-ad.marko",
+    "@aliases": "array",
+    "@position": "string"
+  },
+  "<theme-gam-inject-ads>": {
+    "template": "./inject-ads.marko",
+    "@inject <inject>[]": {},
+    "@detect-embeds": "boolean",
+    "@selector": "string",
+    "@child-selector": "string"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/gam/utils/increment-pos.js b/packages/marko-web-theme-monorail/components/gam/utils/increment-pos.js
new file mode 100644
index 000000000..8dc2b9b27
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/utils/increment-pos.js
@@ -0,0 +1,13 @@
+// @todo: MERGE ~ marko-web-gam/utils/increment-pos.js
+// @todo: Move this logic into the <marko-web-gam-inject-ads> component when consolidating.
+module.exports = ({ res, position, inc = 1 } = {}) => {
+  // Do nothing if no position key is passed.
+  if (!position) return position;
+  res.locals.pos = res.locals.pos || {};
+
+  const val = parseInt(res.locals.pos[position], 10) || 0;
+  const n = inc + val;
+  res.locals.pos[position] = n;
+
+  return `${position}|${n}`;
+};
diff --git a/packages/marko-web-theme-monorail/components/gam/wallpaper-ad.marko b/packages/marko-web-theme-monorail/components/gam/wallpaper-ad.marko
new file mode 100644
index 000000000..757bf5513
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/gam/wallpaper-ad.marko
@@ -0,0 +1,12 @@
+$ const { aliases, position } = input;
+
+$ const blockName = "wallpaper-ad";
+
+<marko-web-block name=blockName>
+  <marko-web-element block-name=blockName name="left">
+    <theme-gam-define-display-ad name="wallpaper-left" position=position aliases=aliases show-label=false />
+  </marko-web-element>
+  <marko-web-element block-name=blockName name="right">
+    <theme-gam-define-display-ad name="wallpaper-right" position=position aliases=aliases show-label=false />
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/identity-x/comment-stream.marko b/packages/marko-web-theme-monorail/components/identity-x/comment-stream.marko
new file mode 100644
index 000000000..7b4a29a10
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/identity-x/comment-stream.marko
@@ -0,0 +1,32 @@
+<!-- @todo: MERGE with marko-web-identity-x/comopnents/comment-stream.marko -->
+<!-- @todo: Use toggler based on input (default false)-->
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { site } = out.global;
+$ const content = getAsObject(input, "content");
+$ const lang = site.config.lang || "en";
+
+<div class="comment-stream">
+  <div class="idx-comment-stream-wrapper">
+    <marko-web-identity-x-comment-stream
+      identifier=`${content.id}`
+      title=content.name
+      description=content.teaser
+      url=content.siteContext.canonicalUrl
+      load-more-button-class="btn btn-secondary"
+      login-button-labels={ continue: "Continue", logout: "Logout"}
+    />
+    <marko-web-browser-component
+      name="ThemeCommentToggleButton"
+      props={
+        identifier: `${content.id}`,
+        isExpanded: false,
+        classes: "btn btn-secondary comment-stream__toggle-btn",
+        targets: [".idx-comment-stream-wrapper"],
+        toggleClass: "idx-comment-stream-wrapper--open",
+        lang
+      }
+    />
+  </div>
+</div>
diff --git a/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko b/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko
new file mode 100644
index 000000000..17a50274b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko
@@ -0,0 +1,75 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue  from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { config, site } = out.global;
+
+$ const blockName = "content-page-gate";
+$ const {
+  canAccess,
+  isLoggedIn,
+  hasRequiredAccessLevel,
+  requiresAccessLevel,
+  requiresUserInput,
+  profileCallToAction,
+  profileButtonLabel,
+  loginEventName,
+  profileEventName,
+} = input;
+$ const messages = getAsObject(input, "messages");
+$ const title = defaultValue(input.title, "Log in to view the full article");
+$ const profileConfirmation= defaultValue(input.profielConfirmation, 'Email Confirmed!')
+$ const userInputTitle = defaultValue(input.userInputTitle, "Complete your profile to view the full article");
+$ const additionalEventData = {
+  promoCode: site.get("contentMetering.promoCode", undefined),
+};
+
+<marko-web-block name=blockName>
+  <if(!canAccess)>
+    <marko-web-element tag="h5" name="title" block-name=blockName>
+      ${title}
+    </marko-web-element>
+    <if(isLoggedIn && !hasRequiredAccessLevel)>
+      <marko-web-element name="body" block-name=blockName>
+        $!{messages.loggedInNoAccess}
+      </marko-web-element>
+    </if>
+    <else>
+      <marko-web-element name="body" block-name=blockName>
+        <if(!requiresAccessLevel)>
+          $!{messages.loggedOutNoAccess}
+        </if>
+        <else>
+          <p>Register on ${config.website("name")} and gain access to premium content, including this article and much more.</p>
+          <p>To log in or register, begin by entering your email address below.</p>
+        </else>
+      </marko-web-element>
+
+      <marko-web-element name="form-wrapper" block-name=blockName>
+        <marko-web-identity-x-form-login
+          additional-event-data=additionalEventData
+          source=loginEventName
+        />
+      </marko-web-element>
+    </else>
+  </if>
+  <else-if(isLoggedIn && requiresUserInput)>
+    <if(profileConfirmation)>
+      <marko-web-element name="confirmation" block-name=blockName>
+        ${profileConfirmation}
+      </marko-web-element>
+    </if>
+    <marko-web-element tag="h5" name="title" block-name=blockName>
+      ${userInputTitle}
+    </marko-web-element>
+
+    <marko-web-element name="form-wrapper" block-name=blockName>
+      <marko-web-identity-x-form-profile
+        call-to-action=profileCallToAction
+        button-label=profileButtonLabel
+        reload-page-on-submit=true
+        additional-event-data=additionalEventData
+        login-source=profileEventName
+      />
+    </marko-web-element>
+  </else-if>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/identity-x/marko.json b/packages/marko-web-theme-monorail/components/identity-x/marko.json
new file mode 100644
index 000000000..5d21082f3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/identity-x/marko.json
@@ -0,0 +1,21 @@
+{
+  "<theme-identity-x-comment-stream>": {
+    "template": "./comment-stream.marko"
+  },
+  "<theme-content-page-gate>": {
+    "template": "./content-page-gate.marko",
+    "@can-access": "boolean",
+    "@is-logged-in": "boolean",
+    "@has-required-access-level": "boolean",
+    "@requires-access-level": "boolean",
+    "@requires-user-input": "boolean",
+    "@messages": "object",
+    "@title": "string",
+    "@user-input-title": "string",
+    "@profile-confirmation": "string",
+    "@profile-call-to-action": "string",
+    "@profile-button-label": "string",
+    "@login-event-name": "string",
+    "@profile-event-name": "string"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/marko.json b/packages/marko-web-theme-monorail/components/marko.json
new file mode 100644
index 000000000..9f03de519
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/marko.json
@@ -0,0 +1,40 @@
+{
+  "taglib-imports": [
+    "./breadcrumbs/marko.json",
+    "./blocks/marko.json",
+    "./client-side-blocks/marko.json",
+    "./flows/marko.json",
+    "./gam/marko.json",
+    "./identity-x/marko.json",
+    "./native-x/marko.json",
+    "./nodes/marko.json",
+    "./page/marko.json"
+  ],
+  "<theme-client-side-block-loader>": {
+    "template": "./client-side-block-loader.marko"
+  },
+  "<theme-menu-toggle-button>": {
+    "template": "./menu-toggle-button.marko"
+  },
+  "<theme-pagination-controls>": {
+    "template": "./pagination-controls.marko"
+  },
+  "<theme-recaptcha>": {
+    "template": "./recaptcha.marko"
+  },
+  "<theme-site-footer>": {
+    "template": "./site-footer.marko"
+  },
+  "<theme-site-menu>": {
+    "template": "./site-menu/index.marko"
+  },
+  "<theme-site-newsletter-menu>": {
+    "template": "./site-newsletter-menu.marko"
+  },
+  "<theme-social-follow>": {
+    "template": "./social-follow.marko"
+  },
+  "<theme-query-total-count>": {
+    "template": "./query-total-count.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/menu-toggle-button.marko b/packages/marko-web-theme-monorail/components/menu-toggle-button.marko
new file mode 100644
index 000000000..b6a0d66c0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/menu-toggle-button.marko
@@ -0,0 +1,19 @@
+<marko-web-browser-component
+  name="ThemeMenuToggleButton"
+  props={
+    className: input.class,
+    before: input.before,
+    beforeExpanded: input.beforeExpanded,
+    beforeCollapsed: input.beforeCollapsed,
+    after: input.after,
+    afterExpanded: input.afterExpanded,
+    afterCollapsed: input.afterCollapsed,
+    targets: input.targets,
+    toggleClass: input.toggleClass,
+    iconModifiers: input.iconModifiers,
+    iconName: input.iconName,
+    initiallyExpanded: input.initiallyExpanded,
+    expandedIconName: input.expandedIconName,
+  }
+  ssr=true
+/>
diff --git a/packages/marko-web-theme-monorail/components/native-x/marko.json b/packages/marko-web-theme-monorail/components/native-x/marko.json
new file mode 100644
index 000000000..037d895cd
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/native-x/marko.json
@@ -0,0 +1,5 @@
+{
+  "<theme-native-x-render>": {
+    "template": "./render.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/native-x/render.marko b/packages/marko-web-theme-monorail/components/native-x/render.marko
new file mode 100644
index 000000000..6b47b2a54
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/native-x/render.marko
@@ -0,0 +1,13 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { nativeX: nxConfig } = out.global;
+
+<if(nxConfig)>
+  <marko-web-native-x-render|results|
+    name=input.name
+    when=input.when
+    config=nxConfig
+  >
+    <${input.renderBody} ...results />
+  </marko-web-native-x-render>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/nodes/author-card.marko b/packages/marko-web-theme-monorail/components/nodes/author-card.marko
new file mode 100644
index 000000000..db7e7e9ac
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/author-card.marko
@@ -0,0 +1,42 @@
+import { getAsObject, get } from "@parameter1/base-cms-object-path";
+
+$ const { i18n } = out.global;
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const withTitle = input.withTitle != null ? input.withTitle : true;
+
+<marko-web-node
+  image-position="left"
+  card=false
+  full-height=false
+  attrs=input.attrs
+  modifiers=["image-headshot"]
+>
+  <@image
+    src=primaryImage.src
+    alt=primaryImage.alt
+    options={ fit: "facearea", facepad: 2 }
+    width=100
+    ar="1:1"
+    link=false
+    use-placeholder=false
+  />
+  <@body>
+    <@title tag="h5" modifiers=input.titleModifiers>
+      <marko-web-content-name tag=null obj=content link=false />
+    </@title>
+    <@text modifiers=["teaser"] show=(withTitle && content.title)>
+      <marko-web-content-title tag=null obj=content />
+    </@text>
+    <@footer>
+      <@right>
+        <if(input.withEmail && content.publicEmail)>
+          <marko-web-content-public-email obj=content link={ href: `mailto:${content.publicEmail}`, class:"btn btn-sm btn-primary" }>
+            ${i18n("Email")}
+          </marko-web-content-public-email>
+        </if>
+      </@right>
+    </@footer>
+  </@body>
+</marko-web-node>
diff --git a/packages/marko-web-theme-monorail/components/nodes/author-published.marko b/packages/marko-web-theme-monorail/components/nodes/author-published.marko
new file mode 100644
index 000000000..569bded90
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/author-published.marko
@@ -0,0 +1,41 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { author, content } = input;
+$ const blockName = "author-published-node";
+$ const showPublished = defaultValue(input.showPublished, true);
+$ const lazyload = defaultValue(input.lazyload, true);
+$ const displayUpdatedDate = defaultValue(input.displayUpdatedDate, true);
+
+<marko-web-block name=blockName>
+  $ const { primaryImage } = author;
+  <if(primaryImage && primaryImage.src)>
+    $ const src = buildImgixUrl(primaryImage.src, {
+      w: 48,
+      h: 48,
+      crop: "faces",
+      fit: "crop",
+    });
+    $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+    <marko-web-img
+      src=src
+      srcset=srcset
+      alt=primaryImage.alt
+      class=`${blockName}__image`
+      link={ href: author.siteContext.path }
+      lazyload=lazyload
+    />
+  </if>
+  <marko-web-element block-name=blockName name="details">
+    <marko-web-content-name block-name=blockName obj=author link=true />
+    <if(showPublished)>
+      <theme-content-published-node
+        block-name=blockName
+        obj=content
+        format=input.format
+        published-prefix=input.publishedPrefix
+        display-updated-date=displayUpdatedDate
+      />
+    </if>
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/nodes/author.marko b/packages/marko-web-theme-monorail/components/nodes/author.marko
new file mode 100644
index 000000000..15f7c28ec
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/author.marko
@@ -0,0 +1,28 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+
+$ const { author } = input;
+$ const blockName = "author-node";
+
+<marko-web-block name=blockName>
+  $ const { primaryImage } = author;
+  <if(primaryImage && primaryImage.src)>
+    $ const src = buildImgixUrl(primaryImage.src, {
+      w: 48,
+      h: 48,
+      crop: "faces",
+      fit: "crop",
+    });
+    $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+    <marko-web-img
+      src=src
+      srcset=srcset
+      alt=primaryImage.alt
+      class=`${blockName}__image`
+      link={ href: author.siteContext.path }
+    />
+  </if>
+  <marko-web-element block-name=blockName name="details">
+    <marko-web-content-name block-name=blockName obj=author link=true />
+    <marko-web-content-title block-name=blockName obj=author />
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/nodes/components/attribution.marko b/packages/marko-web-theme-monorail/components/nodes/components/attribution.marko
new file mode 100644
index 000000000..201e4ac88
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/components/attribution.marko
@@ -0,0 +1,13 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { content } = input;
+$ const company = getAsObject(content, "company");
+$ const displayCompany = defaultValue(input.displayCompany, true);
+
+<if(company.id && displayCompany)>
+  <company-name company=company />
+</if>
+<else>
+  <authors content=content />
+</else>
diff --git a/packages/marko-web-theme-monorail/components/nodes/components/authors.marko b/packages/marko-web-theme-monorail/components/nodes/components/authors.marko
new file mode 100644
index 000000000..7c0516205
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/components/authors.marko
@@ -0,0 +1,7 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const blockName = "node-author";
+
+<marko-web-content-authors|{ node: author }| obj=input.content>
+  <theme-author-node author=author />
+</marko-web-content-authors>
diff --git a/packages/marko-web-theme-monorail/components/nodes/components/company-name.marko b/packages/marko-web-theme-monorail/components/nodes/components/company-name.marko
new file mode 100644
index 000000000..d085864c6
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/components/company-name.marko
@@ -0,0 +1 @@
+<marko-web-content-name modifiers=["company-name"] obj=input.company link=true />
diff --git a/packages/marko-web-theme-monorail/components/nodes/components/dates.marko b/packages/marko-web-theme-monorail/components/nodes/components/dates.marko
new file mode 100644
index 000000000..84460a052
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/components/dates.marko
@@ -0,0 +1,11 @@
+$ const { content, blockName } = input;
+
+<if(content.type === "event" || content.type === "webinar")>
+  <div class=`${blockName}__content-event-dates`>
+    <marko-web-content-starts tag="span" block-name=blockName obj=content />
+    <marko-web-content-ends tag="span" block-name=blockName obj=content />
+  </div>
+</if>
+<else>
+  <marko-web-content-published obj=content />
+</else>
diff --git a/packages/marko-web-theme-monorail/components/nodes/components/section-sponsor.marko b/packages/marko-web-theme-monorail/components/nodes/components/section-sponsor.marko
new file mode 100644
index 000000000..716c22957
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/components/section-sponsor.marko
@@ -0,0 +1,14 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const { blockName } = input;
+$ const labels = getAsArray(input, "labels");
+$ const sponsors = labels.filter((label) => /^sponsored by/i.test(label));
+
+<if(sponsors.length)>
+  <marko-web-element block-name=blockName name="website-section-name">
+    ${labels[0]}
+  </marko-web-element>
+</if>
+<else>
+  <marko-web-website-section-name block-name=blockName obj=input.section link=true />
+</else>
diff --git a/packages/marko-web-theme-monorail/components/nodes/content-published.marko b/packages/marko-web-theme-monorail/components/nodes/content-published.marko
new file mode 100644
index 000000000..6725f04ca
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/content-published.marko
@@ -0,0 +1,46 @@
+import moment from "moment-timezone";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { i18n } = out.global;
+
+$ const config = getAsObject(out.global, "markoCoreDate");
+
+$ const { obj, blockName } = input;
+
+$ const format = defaultValue(input.format, "MMM D, YYYY");
+$ const timezone = defaultValue(input.timezone, config.timezone || "America/Chicago");
+$ const locale = defaultValue(input.locale, config.locale);
+$ if (locale) moment.locale(locale);
+
+$ const publishedDate = defaultValue(obj.published, null, v => moment(v).tz(timezone));
+$ const updatedDate = defaultValue(obj.updated, null, v => moment(v).tz(timezone));
+$ const displayUpdatedDate = defaultValue(input.displayUpdatedDate, true);
+
+<marko-web-obj-date|{ value }|
+  type="content"
+  block-name=blockName
+  obj=obj
+  field="published"
+  format=format
+  locale=locale
+>
+  <if(input.publishedPrefix)>
+    ${input.publishedPrefix} ${value}
+  </if>
+  <else>
+    ${value}
+  </else>
+</marko-web-obj-date>
+<if(updatedDate && updatedDate.isAfter(publishedDate, "day") && displayUpdatedDate)>
+  <marko-web-obj-date|{ value }|
+    type="content"
+    block-name=blockName
+    obj=obj
+    field="updated"
+    format=format
+    locale=locale
+  >
+    ${i18n("Updated")} ${value}
+  </marko-web-obj-date>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/nodes/content.marko b/packages/marko-web-theme-monorail/components/nodes/content.marko
new file mode 100644
index 000000000..6cdd9331c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/content.marko
@@ -0,0 +1,148 @@
+import { getAsObject, getAsArray, get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+
+$ const imageOnly = defaultValue(input.imageOnly, false);
+$ const withTeaser = defaultValue(input.withTeaser, true);
+$ const withBody = defaultValue(input.withBody, false);
+$ const withSection = defaultValue(input.withSection, true);
+$ const withAttribution = defaultValue(input.withAttribution, false);
+$ const withDates = defaultValue(input.withDates, true);
+$ const withPrimarySectionModifier = defaultValue(input.withPrimarySectionModifier, true);
+$ const displayButton = defaultValue(input.displayButton, false);
+$ const callToAction = defaultValue(input.callToAction, "View Profile");
+
+$ const isWebinar = content.type === "webinar";
+$ const isPromotion = content.type === "promotion";
+$ const isEvent = ["event", "webinar"].includes(content.type);
+$ const isUpcoming = content.startDate > Date.now();
+
+$ const aspectRatio = get(input, "image.ar", "3:2");
+
+$ const { linkAttrs } = input;
+$ const headerAttributes = {};
+$ const modifiers = getAsArray(input, "modifiers");
+$ const { alias } = primarySection;
+
+$ if (withSection && alias && withPrimarySectionModifier) {
+  headerAttributes['data-section-alias'] = alias;
+  modifiers.push(`section-${primarySection.alias}`);
+}
+
+$ const imageLink = primaryImage.src ? { href: content.siteContext.path, attrs: linkAttrs } : false;
+
+<marko-web-node
+  type=`${content.type}-content`
+  image-position=defaultValue(input.imagePosition, "left")
+  card=defaultValue(input.card, false)
+  flush=defaultValue(input.flush, true)
+  full-height=defaultValue(input.fullHeight, false)
+  attrs=input.attrs
+  modifiers=modifiers
+>
+  <if(defaultValue(input.displayImage, true))>
+    <@image
+      width=250
+      align="top"
+      use-placeholder=false
+      fluid=false
+      ...input.image
+      ar=aspectRatio
+      src=primaryImage.src
+      alt=primaryImage.alt
+      is-logo=primaryImage.isLogo
+      link=imageLink
+    />
+  </if>
+  <if(!imageOnly)>
+    <@body>
+      <if(withSection || isEvent)>
+        <@header attrs=headerAttributes>
+          <@left|{ blockName }|>
+            <if(withSection)>
+              <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+            </if>
+            <else-if(isEvent)>
+              <marko-web-element tag="span" name="upcoming-archived" block-name=blockName>
+                <if(isUpcoming)>
+                  Upcoming ${content.type}
+                </if>
+                <else>
+                  Archived ${content.type}
+                </else>
+              </marko-web-element>
+            </else-if>
+          </@left>
+        </@header>
+      </if>
+      <@title tag="h5" ...input.title>
+        <marko-web-content-short-name tag=null obj=content link={ attrs: linkAttrs } />
+      </@title>
+      <@text|{ blockName }|
+        modifiers=["event-details"]
+        show=(Boolean(isEvent && (content.startDate || content.endDate || content.linkUrl)))
+      >
+        <if(content.startDate || content.endDate)>
+          <div class=`${blockName}__content-event-dates`>
+            <marko-web-content-start-date tag="span" block-name=blockName obj=content />
+            <marko-web-content-end-date tag="span" block-name=blockName obj=content />
+          </div>
+        </if>
+        <if(isWebinar && content.linkUrl)>
+          <marko-web-link
+            class=`${blockName}__content-link-url`
+            href=content.linkUrl
+            title="View / Register"
+            target="_blank"
+          >
+            <if(isUpcoming)>Register</if>
+            <else>View</else>
+          </marko-web-link>
+        </if>
+      </@text>
+      <@text
+        modifiers=["teaser", ...getAsArray(input, "teaser.modifiers").map(mod => `teaser-${mod}`)]
+        show=(Boolean(withTeaser && content.teaser))
+      >
+        <marko-web-content-teaser tag=null obj=content link={ attrs: linkAttrs } />
+      </@text>
+      <@text
+        modifiers=["body"]
+        show=(Boolean(withBody && content.body))
+      >
+        <marko-web-content-body tag=null obj=content />
+      </@text>
+      <@text
+        modifiers=["promotion-link-button"]
+        show=(Boolean(isPromotion && content.linkUrl && content.linkText))
+      >
+        <marko-web-link
+          class="btn btn-primary btn-block"
+          href=content.linkUrl
+          title=content.linkText
+          target="_blank"
+        >
+          ${content.linkText}
+        </marko-web-link>
+      </@text>
+      <@text modifiers=["attribution"] show=(Boolean(withAttribution))>
+        <attribution ...input.attribution content=content />
+      </@text>
+      <@text|{ blockName }| show=(Boolean(withDates && !isEvent))>
+        <marko-web-content-published block-name=blockName obj=content format="MMMM D, YYYY" />
+      </@text>
+      <@text show=displayButton>
+        <marko-web-link
+          class="btn btn-primary btn-block"
+          href=content.siteContext.path
+          title=content.shortName
+        >
+          ${callToAction}
+        </marko-web-link>
+      </@text>
+    </@body>
+  </if>
+</marko-web-node>
diff --git a/packages/marko-web-theme-monorail/components/nodes/directory-section-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/directory-section-feed-content.marko
new file mode 100644
index 000000000..907d8482f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/directory-section-feed-content.marko
@@ -0,0 +1,98 @@
+import { getAsObject, get } from "@parameter1/base-cms-object-path";
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { i18n } = out.global;
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+$ const containerAttrs = getAsObject(input, "containerAttrs");
+$ const linkAttrs = getAsObject(input, "linkAttrs");
+
+$ const withSection = defaultValue(input.withSection, false);
+$ const displayImage = defaultValue(input.displayImage, true);
+$ const isFeatured = defaultValue(input.isFeatured, false);
+$ const displayFeaturedTeaser = defaultValue(input.displayFeaturedTeaser, true);
+$ const requestQuote = defaultValue(input.requestQuote, true);
+
+$ const imageOptions = {
+  w: 250,
+  h: 167,
+  fit: "fill",
+};
+
+$ const blockName = "section-feed-content-node";
+
+<marko-web-block name=blockName modifiers=input.modifiers attrs=containerAttrs>
+  <marko-web-element block-name=blockName name="contents">
+    <marko-web-element block-name=blockName name="body">
+      <if(input.sponsoredBy)>
+        <marko-web-element block-name=blockName name="sponsored-by">
+          ${i18n("Sponsored By")} ${input.sponsoredBy}
+        </marko-web-element>
+      </if>
+      <else-if(withSection)>
+        <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+      </else-if>
+      <marko-web-content-short-name
+        tag="h5"
+        block-name=blockName
+        obj=content
+        link={ attrs: linkAttrs }
+      />
+      <if(isFeatured)>
+        <marko-web-block name=blockName modifiers=["listing-details"] >
+          <if(displayFeaturedTeaser)>
+            <marko-web-content-teaser
+              block-name=blockName
+              obj=content
+              link={ attrs: linkAttrs }
+            />
+          </if>
+          <marko-web-block name=blockName modifiers=["contact-info"] >
+            <marko-web-content-address1 block-name=blockName obj=content />
+            <marko-web-content-address2 block-name=blockName obj=content />
+            <marko-web-content-city-state-zip block-name=blockName obj=content />
+            <marko-web-content-tollfree block-name=blockName obj=content />
+            <if(requestQuote)>
+              <marko-web-link
+                href=content.siteContext.path
+                attrs=linkAttrs
+              >
+                ${i18n("Request Quote")} &raquo;
+              </marko-web-link>
+            </if>
+            <marko-web-content-website
+              block-name=blockName
+              obj=content
+              link=true
+              attrs={ target: "_blank" }
+            >
+              ${i18n("Website")} &raquo;
+            </marko-web-content-website>
+          </marko-web-block>
+        </marko-web-block>
+      </if>
+      <else-if(content.city && content.state)>
+        <marko-web-content-city-state-zip block-name=blockName obj=content>
+          ${content.city}, ${content.state}
+        </marko-web-content-city-state-zip>
+      </else-if>
+    </marko-web-element>
+  </marko-web-element>
+  <if(displayImage && primaryImage.src)>
+    <marko-web-element block-name=blockName name="image-wrapper">
+      $ const src = buildImgixUrl(primaryImage.src, imageOptions);
+      $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+      <marko-web-link href=get(content, "siteContext.path") attrs=linkAttrs>
+        <marko-web-img
+          src=src
+          srcset=srcset
+          alt=primaryImage.alt
+          class=[`${blockName}__image`]
+        />
+      </marko-web-link>
+    </marko-web-element>
+  </if>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/nodes/featured-products-card.marko b/packages/marko-web-theme-monorail/components/nodes/featured-products-card.marko
new file mode 100644
index 000000000..e94340c79
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/featured-products-card.marko
@@ -0,0 +1,52 @@
+import { getAsArray, getAsObject, get } from "@parameter1/base-cms-object-path";
+import eventLinkAttrs from "@parameter1/base-cms-marko-web-p1-events/utils/link-attrs";
+import eventEntity from "@parameter1/base-cms-marko-web-p1-events/utils/base-content-entity";
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const displayImage = input.displayImage != null ? input.displayImage : true;
+$ const title = get(content, "linkText") || get(content, "shortName");
+$ const withTeaser = input.withTeaser != null ? input.withTeaser : true;
+
+$ const href = get(content, "siteContext.path");
+$ const link = {
+  href,
+  target: "_blank",
+  attrs: {
+    ...input.linkAttrs,
+    ...eventLinkAttrs({
+      category: "Company Profile Page",
+      label: "Promotion Item", // matches the same label as the data card
+      entity: eventEntity(input.companyId, "company"),
+      context: eventEntity(content.id, content.type),
+    }),
+  }
+};
+
+<marko-web-node
+  type=`${content.type}-content`
+  image-position="top"
+  card=true
+  full-height=true
+  attrs=input.attrs
+>
+  <if(displayImage)>
+    <@image
+      src=primaryImage.src
+      alt=primaryImage.alt
+      is-logo=primaryImage.isLogo
+      fluid=true
+      ar="4:3"
+      width=(input.imageWidth || 300)
+      link=link
+    />
+  </if>
+  <@body>
+  <@title tag="h5" modifiers=input.titleModifiers>
+    <marko-core-text value=title link=link />
+  </@title>
+  <@text modifiers=["teaser"] show=(withTeaser && content.teaser)>
+    <marko-web-content-teaser tag=null obj=content link=link />
+  </@text>
+  </@body>
+</marko-web-node>
diff --git a/packages/marko-web-theme-monorail/components/nodes/marko.json b/packages/marko-web-theme-monorail/components/nodes/marko.json
new file mode 100644
index 000000000..fe84956eb
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/marko.json
@@ -0,0 +1,77 @@
+{
+  "<theme-author-node>": {
+    "template": "./author.marko"
+  },
+  "<theme-author-published-node>": {
+    "template": "./author-published.marko"
+  },
+  "<theme-content-node>": {
+    "template": "./content.marko",
+    "<image>": {},
+    "<title>": {},
+    "<teaser>": {
+      "@modifiers": "array"
+    },
+    "<attribution>": {},
+    "@node": "object",
+
+    "@display-image": "boolean",
+    "@image-position": "string",
+    "@card": "boolean",
+    "@flush": "boolean",
+    "@full-height": "boolean",
+
+    "@image-only": "boolean",
+    "@with-teaser": "boolean",
+    "@with-body": "boolean",
+    "@with-section": "boolean",
+    "@with-attribution": "boolean",
+    "@with-dates": "boolean",
+    "@with-primary-section-modifier": "boolean",
+    "@display-button": "boolean",
+    "@call-to-action": "string",
+
+    "@modifiers": "array",
+    "@attrs": "object",
+    "@link-attrs": "object"
+  },
+  "<theme-content-published-node>": {
+    "template": "./content-published.marko"
+  },
+  "<theme-directory-section-feed-content-node>": {
+    "template": "./directory-section-feed-content.marko"
+  },
+  "<theme-product-feed-content-node>": {
+    "template": "./product-feed-content.marko"
+  },
+  "<theme-section-feed-content-node>": {
+    "template": "./section-feed-content.marko"
+  },
+  "<theme-youtube-card-node>": {
+    "template": "./youtube-card.marko",
+    "@image-position": "string",
+    "@modifiers": "array",
+    "@node": "object",
+    "@company-id": "number",
+    "@link-attrs": "object"
+  },
+  "<theme-author-card-node>": {
+    "template": "./author-card.marko",
+    "@node": "object",
+    "@with-email": "boolean"
+  },
+  "<theme-featured-products-card-node>": {
+    "template": "./featured-products-card.marko",
+    "@node": "object",
+    "@company-id": "number",
+    "@image-width": {
+      "type": "number",
+      "default-value": 300
+    },
+    "@with-teaser": {
+      "type": "boolean",
+      "default-value": true
+    },
+    "@link-attrs": "object"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/nodes/product-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/product-feed-content.marko
new file mode 100644
index 000000000..d6053c998
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/product-feed-content.marko
@@ -0,0 +1,52 @@
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+$ const withSection = defaultValue(input.withSection, true);
+
+$ const imageOptions = {
+  w: 176,
+  h: 176,
+  fit: "crop",
+};
+
+$ const blockName = "product-feed-content-node";
+
+<marko-web-block name=blockName>
+  <marko-web-element block-name=blockName name="contents">
+    <marko-web-element block-name=blockName name="body">
+      <if(withSection)>
+        <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+      </if>
+      <marko-web-content-short-name
+        tag="h5"
+        block-name=blockName
+        obj=content
+        link=true
+      />
+      <marko-web-content-teaser
+        block-name=blockName
+        obj=content
+        link=true
+      />
+    </marko-web-element>
+  </marko-web-element>
+
+  <marko-web-element block-name=blockName name="image-wrapper">
+    <if(primaryImage.src)>
+      $ const src = buildImgixUrl(primaryImage.src, imageOptions);
+      $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+      <marko-web-link href=get(content, "siteContext.path")>
+        <marko-web-img
+          src=src
+          srcset=srcset
+          alt=primaryImage.alt
+          class=[`${blockName}__image`]
+        />
+      </marko-web-link>
+    </if>
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko
new file mode 100644
index 000000000..b147fcfe9
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko
@@ -0,0 +1,97 @@
+import { getAsObject, get } from "@parameter1/base-cms-object-path";
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { i18n } = out.global;
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+$ const containerAttrs = getAsObject(input, "containerAttrs");
+$ const linkAttrs = getAsObject(input, "linkAttrs");
+
+$ const withBody = defaultValue(input.withBody, false);
+$ const withDates = defaultValue(input.withDates, true);
+$ const isUpcoming = content.startDate > Date.now();
+$ const withSection = defaultValue(input.withSection, true);
+$ const withTeaser = defaultValue(input.withTeaser, true);
+$ const displayImage = defaultValue(input.displayImage, true);
+$ const lazyload = defaultValue(input.lazyload, true);
+
+$ const imageOptions = {
+  w: 250,
+  h: 167,
+  fit: "crop",
+};
+
+$ const blockName = "section-feed-content-node";
+
+<marko-web-block name=blockName modifiers=input.modifiers attrs=containerAttrs>
+  <marko-web-element block-name=blockName name="contents">
+    <marko-web-element block-name=blockName name="body">
+      <if(input.sponsoredBy)>
+        <marko-web-element block-name=blockName name="sponsored-by">
+          ${i18n("Sponsored By")} ${input.sponsoredBy}
+        </marko-web-element>
+      </if>
+      <else-if(withSection)>
+        <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+      </else-if>
+      <marko-web-content-short-name
+        tag="h5"
+        block-name=blockName
+        obj=content
+        link={ attrs: linkAttrs }
+      />
+      <if(withTeaser)>
+        <marko-web-content-teaser
+          block-name=blockName
+          obj=content
+          link={ attrs: linkAttrs }
+        />
+      </if>
+      <if(withBody)>
+        <marko-web-content-body
+          block-name=blockName
+          obj=content
+        />
+      </if>
+      <if(withDates && content.startDate)>
+        <div class=`${blockName}__content-event-dates`>
+          <marko-web-content-start-date tag="span" block-name=blockName obj=content />
+        </div>
+        <if(content.linkUrl)>
+          <default-theme-content-link-url
+            obj=content
+            label=(isUpcoming ? `${i18n("Register for Webinar")}` : `${i18n("View Webinar")}`)
+            target="_blank"
+          />
+        </if>
+      </if>
+      <else-if(withDates)>
+        <marko-web-content-published
+          block-name=blockName
+          obj=content
+          format="MMMM D, YYYY"
+        />
+      </else-if>
+    </marko-web-element>
+  </marko-web-element>
+  <if(displayImage)>
+    <marko-web-element block-name=blockName name="image-wrapper">
+      <if(primaryImage.src)>
+        $ const src = buildImgixUrl(primaryImage.src, imageOptions);
+        $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+        <marko-web-link href=get(content, "siteContext.path") attrs=linkAttrs>
+          <marko-web-img
+            src=src
+            srcset=srcset
+            alt=primaryImage.alt
+            class=[`${blockName}__image`]
+            lazyload=lazyload
+          />
+        </marko-web-link>
+      </if>
+    </marko-web-element>
+  </if>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/nodes/youtube-card.marko b/packages/marko-web-theme-monorail/components/nodes/youtube-card.marko
new file mode 100644
index 000000000..1145d58f7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/nodes/youtube-card.marko
@@ -0,0 +1,53 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import eventLinkAttrs from "@parameter1/base-cms-marko-web-p1-events/utils/link-attrs";
+import eventEntity from "@parameter1/base-cms-marko-web-p1-events/utils/base-content-entity";
+
+$ const video = getAsObject(input, "node");
+$ const primaryImage = getAsObject(video, "primaryImage");
+$ const withDescription = input.withDescription != null ? input.withDescription : true;
+$ const imagePosition = defaultValue(input.imagePosition, 'left');
+
+$ const href = video.url;
+$ const link = {
+  href,
+  target: "_blank",
+  attrs: {
+    ...input.linkAttrs,
+    ...eventLinkAttrs({
+      category: "Company Profile Page",
+      label: "YouTube Video", // matches the same label as the data card
+      entity: eventEntity(input.companyId, "company"),
+    }),
+  },
+};
+
+<marko-web-node
+  type="video-content"
+  image-position=imagePosition
+  flush=true
+  attrs=input.attrs
+  modifiers=input.modifiers
+>
+  <@image
+    src=video.thumbnail
+    alt=video.title
+    width=160
+    fluid=true
+    ar="16:9"
+    link=link
+  />
+  <@body>
+    <@title tag="h5" modifiers=input.titleModifiers>
+      <marko-web-obj-text type="content" obj=video field="title" tag=null link=link />
+    </@title>
+    <@text modifiers=["teaser"] show=(withDescription && video.description)>
+      <marko-web-obj-text type="content" obj=video field="description" tag=null />
+    </@text>
+    <@footer>
+      <@right|{ blockName }|>
+        <marko-web-content-published obj=video />
+      </@right>
+    </@footer>
+  </@body>
+</marko-web-node>
diff --git a/packages/marko-web-theme-monorail/components/page/content.marko b/packages/marko-web-theme-monorail/components/page/content.marko
new file mode 100644
index 000000000..196139785
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/page/content.marko
@@ -0,0 +1,23 @@
+$ const {
+  id,
+  type,
+  head,
+  page,
+  abovePage,
+  belowPage,
+  ...rest
+} = input;
+$ const { document } = out.global;
+
+<${document} ...rest>
+  <@head>
+    <marko-web-content-page-metadata id=id />
+    <${head} />
+  </@head>
+  <!-- Note: camelcased vars due to nest input of dynamic document. perhaps a marko bug -->
+  <@container abovePage=abovePage belowPage=belowPage>
+    <@page for="content" tag="article" id=id type=type>
+      <${page} />
+    </@page>
+  </@container>
+</>
diff --git a/packages/marko-web-theme-monorail/components/page/default.marko b/packages/marko-web-theme-monorail/components/page/default.marko
new file mode 100644
index 000000000..ec9c244f3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/page/default.marko
@@ -0,0 +1,24 @@
+$ const {
+  type = "default",
+  title,
+  description,
+  head,
+  page,
+  abovePage,
+  belowPage,
+  ...rest
+} = input;
+$ const { document } = out.global;
+
+<${document} ...rest>
+  <@head>
+    <marko-web-default-page-metadata title=title description=description />
+    <${head} />
+  </@head>
+  <!-- Note: camelcased vars due to nest input of dynamic document. perhaps a marko bug -->
+  <@container abovePage=abovePage belowPage=belowPage>
+    <@page for=type>
+      <${page} />
+    </@page>
+  </@container>
+</>
diff --git a/packages/marko-web-theme-monorail/components/page/marko.json b/packages/marko-web-theme-monorail/components/page/marko.json
new file mode 100644
index 000000000..107302bcb
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/page/marko.json
@@ -0,0 +1,11 @@
+{
+  "<theme-content-page>": {
+    "template": "./content.marko"
+  },
+  "<theme-default-page>": {
+    "template": "./default.marko"
+  },
+  "<theme-website-section-page>": {
+    "template": "./website-section.marko"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/components/page/website-section.marko b/packages/marko-web-theme-monorail/components/page/website-section.marko
new file mode 100644
index 000000000..a97c770cf
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/page/website-section.marko
@@ -0,0 +1,30 @@
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const {
+  id,
+  alias,
+  name,
+  withRss = true,
+  head,
+  abovePage,
+  belowPage,
+  page,
+  ...rest
+} = input;
+$ const { document } = out.global;
+
+<${document} ...rest>
+  <@head>
+    <marko-web-website-section-page-metadata alias=alias />
+    <if(withRss)>
+      <marko-web-website-section-rss query-name="website-scheduled-content" query-params={ sectionAlias: alias } name=name />
+    </if>
+    <${head} />
+  </@head>
+  <!-- Note: camelcased vars due to nest input of dynamic document. perhaps a marko bug -->
+  <@container abovePage=abovePage belowPage=belowPage>
+    <@page for="website-section" id=id>
+      <${page} />
+    </@page>
+  </@container>
+</>
diff --git a/packages/marko-web-theme-monorail/components/pagination-controls.marko b/packages/marko-web-theme-monorail/components/pagination-controls.marko
new file mode 100644
index 000000000..2a1ebc596
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/pagination-controls.marko
@@ -0,0 +1,53 @@
+import { URLSearchParams } from "url";
+import { cleanPath } from "@parameter1/base-cms-utils";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { perPage, totalCount, path } = input;
+$ const asRels = defaultValue(input.asRels, false);
+$ const { pagination: p, i18n } = out.global;
+
+$ const totalPages = p.totalPages({ perPage, totalCount });
+$ const nextPage = p.nextPage({ perPage, totalCount });
+$ const prevPage = p.prevPage();
+
+$ const nextQuery = new URLSearchParams({ ...input.query, page: nextPage });
+$ const prevQuery = new URLSearchParams({ ...input.query, page: prevPage });
+
+$ const nextHref = `/${cleanPath(path)}?${nextQuery}`;
+$ const prevHref = `/${cleanPath(path)}?${prevQuery}`;
+
+$ const blockName = "pagination-controls";
+
+<if(totalCount)>
+  <if(asRels)>
+    <if(prevPage)>
+      <link rel="prev" href=prevHref />
+    </if>
+    <if(nextPage)>
+      <link rel="next" href=nextHref />
+    </if>
+  </if>
+  <else>
+    <marko-web-block name=blockName class=input.class>
+      <if(prevPage)>
+        <marko-web-link
+          class=`btn btn-primary ${blockName}__prev`
+          href=prevHref
+        >
+          ${i18n("Previous Page")}
+        </marko-web-link>
+      </if>
+      <marko-web-element block-name=blockName name="pages">
+        ${i18n("Page")} ${p.page} ${i18n("of")} ${totalPages}
+      </marko-web-element>
+      <if(nextPage)>
+        <marko-web-link
+          class=`btn btn-primary ${blockName}__next`
+          href=nextHref
+        >
+          ${i18n("Next Page")}
+        </marko-web-link>
+      </if>
+    </marko-web-block>
+  </else>
+</if>
diff --git a/packages/marko-web-theme-monorail/components/query-total-count.marko b/packages/marko-web-theme-monorail/components/query-total-count.marko
new file mode 100644
index 000000000..7cdd1ec5e
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/query-total-count.marko
@@ -0,0 +1,68 @@
+import gql from "graphql-tag";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { apollo } = out.global;
+
+$ const params = { ...getAsObject(input, "params") };
+$ delete params.queryFragment;
+$ delete params.sectionFragment;
+
+$ const optionsMap = {
+  "website-scheduled-content": {
+    query: gql`
+      query WebsiteScheduledContentCount($input: WebsiteScheduledContentQueryInput!) {
+        result: websiteScheduledContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  },
+  "all-author-content": {
+    query: gql`
+      query AllAuthorContentCount($input: AllAuthorContentQueryInput!) {
+        result: allAuthorContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  },
+  "all-published-content": {
+    query: gql`
+      query AllPublishedContentCount($input: AllPublishedContentQueryInput!) {
+        result: allPublishedContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  },
+  "magazine-active-issues": {
+    query: gql`
+      query MagazineActiveIssuesCount($input: MagazineActiveIssuesQueryInput!) {
+        result: magazineActiveIssues(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  },
+  "magazine-scheduled-content": {
+    query: gql`
+      query MagazineScheduledContent($input: MagazineScheduledContentQueryInput!) {
+        result: magazineScheduledContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  }
+};
+$ const options = optionsMap[input.name];
+$ if (!options) throw new Error(`No query options have been defined for ${input.name}`);
+
+<marko-web-resolve|{ resolved }| promise=apollo.query(options)>
+  $ const { data } = resolved;
+  <${input.renderBody} total-count=data.result.totalCount />
+</marko-web-resolve>
diff --git a/packages/marko-web-theme-monorail/components/recaptcha.marko b/packages/marko-web-theme-monorail/components/recaptcha.marko
new file mode 100644
index 000000000..3c0c71646
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/recaptcha.marko
@@ -0,0 +1,6 @@
+<!-- @todo: Test if defer/async will work here. Also review version loaded with vue components for conflict/unification. -->
+$ const { recaptcha } = out.global;
+
+$ const src = `https://www.google.com/recaptcha/api.js?render=${recaptcha.siteKey}`;
+
+<script src=src></script>
diff --git a/packages/marko-web-theme-monorail/components/site-footer.marko b/packages/marko-web-theme-monorail/components/site-footer.marko
new file mode 100644
index 000000000..330feacd0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-footer.marko
@@ -0,0 +1,141 @@
+import getNavItems from "@parameter1/base-cms-marko-web-theme-default/components/site-navbar/utils/get-nav-items";
+import { asObject } from "@parameter1/base-cms-utils";
+
+$ const { config, site, i18n } = out.global;
+
+$ const newsletterConfig = site.getAsObject('newsletter.signupFooter');
+$ const blockName = input.blockName || "site-footer";
+$ const tagline = site.get("tagline");
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "footer")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <default-theme-site-footer-container block-name=blockName modifiers=["secondary"]>
+    <marko-web-element block-name=blockName name="inner-container">
+
+      <default-theme-site-navbar-brand block-name=blockName title=`${config.website("name")} Homepage`>
+        <default-theme-site-navbar-logo
+          block-name=blockName
+          alt=config.website("name")
+          src=site.get("logos.footer.src")
+          srcset=site.getAsArray("logos.footer.srcset").join(",")
+          lazyload=true
+        />
+      </default-theme-site-navbar-brand>
+
+      <if(tagline)>
+        <marko-web-element block-name=blockName name="tagline" modifiers="tagline">${tagline}</marko-web-element>
+      </if>
+
+      <div class="row">
+        <marko-web-element block-name=blockName name="section">
+          $ const newsletterBlock = "site-footer-newsletter";
+          <if(newsletterConfig.action)>
+            <marko-web-block name=newsletterBlock>
+              <marko-web-element block-name=newsletterBlock name="header">
+                $!{newsletterConfig.name}
+              </marko-web-element>
+              <if(newsletterConfig.description)>
+                <marko-web-element block-name=newsletterBlock name="description">
+                  $!{newsletterConfig.description}
+                </marko-web-element>
+              </if>
+              <form action=newsletterConfig.action method="GET">
+                <div class="form-group">
+                  <label for="footer-newsletter-signup-email">${i18n("Email")}</label>
+                  <input
+                    id="footer-newsletter-signup-email"
+                    class="form-control"
+                    type="email"
+                    placeholder="example@gmail.com"
+                    name="em"
+                    required
+                  />
+                  <for|item| of=newsletterConfig.hiddenInputs>
+                    <input type="hidden" name=item.name value=item.value />
+                  </for>
+                </div>
+                <button class="btn btn-primary" type="submit" disabled=(newsletterConfig.disabled && "disabled")>${i18n("Sign Up")}</button>
+              </form>
+            </marko-web-block>
+          </if>
+        </marko-web-element>
+        <marko-web-element block-name=blockName name="section">
+          <theme-social-follow dark=false modifiers=["site-footer"] />
+        </marko-web-element>
+        <marko-web-element block-name=blockName name="section">
+
+          <div class="row">
+            $ const navBlockName = "site-footer-nav";
+            <marko-web-block name=navBlockName class="col-6">
+              $ const topics = site.getAsArray("navigation.footer.topics");
+              <if(topics.length)>
+                <default-theme-site-menu-section
+                  tag="nav"
+                  block-name=navBlockName
+                  label=`${i18n("Topics")}`
+                  items=topics
+                  reg-enabled=false
+                  has-user=false
+                />
+              </if>
+            </marko-web-block>
+            <marko-web-block name=navBlockName class="col-6">
+              $ const more = site.getAsArray("navigation.footer.more");
+              <if(more.length)>
+                <default-theme-site-menu-section
+                  tag="nav"
+                  block-name=navBlockName
+                  label=`${i18n("More")}`
+                  items=more
+                  reg-enabled=false
+                  has-user=false
+                />
+              </if>
+            </marko-web-block>
+          </div>
+
+        </marko-web-element>
+      </div>
+
+    </marko-web-element>
+  </default-theme-site-footer-container>
+  <default-theme-site-footer-container block-name=blockName modifiers=["primary"]>
+    <marko-web-element block-name=blockName name="inner-container">
+      $ const corporateSrc = site.get("logos.corporate.src");
+      $ const corporateSrcset = site.getAsArray("logos.corporate.srcset");
+      $ const corporateHref = site.get("logos.corporate.href");
+      $ const corporateAlt = site.get("logos.corporate.alt") || site.get("company");
+      <if(corporateSrc)>
+        <marko-web-img
+          alt=corporateAlt
+          src=corporateSrc
+          srcset=corporateSrcset
+          link={ href: corporateHref, class: `${blockName}__corporate-link`, target: '_blank' }
+          class=`${blockName}__corporate-logo lazyload`
+        />
+      </if>
+
+      $ const footerItems = site.getAsArray("navigation.footer.items");
+      <theme-breadcrumbs modifiers=["site-footer"]>
+        <for|item| of=getNavItems({ items: footerItems, hasUser: input.hasUser, regEnabled: input.regEnabled })>
+          <@item>
+            $ const obj = asObject(item);
+            <marko-web-link href=obj.href title=obj.title target=obj.target>
+              $!{obj.label}
+            </marko-web-link>
+          </@item>
+        </for>
+      </theme-breadcrumbs>
+
+      <default-theme-site-footer-copyright
+        company=site.get("company")
+        notice=site.get("copyrightNotice")
+      />
+    </marko-web-element>
+  </default-theme-site-footer-container>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/site-menu/components/search.marko b/packages/marko-web-theme-monorail/components/site-menu/components/search.marko
new file mode 100644
index 000000000..4c0b1db39
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-menu/components/search.marko
@@ -0,0 +1,13 @@
+<marko-web-element block-name=input.blockName name="section" modifiers=["search"]>
+  <form method="GET" action="/search">
+    <label class="sr-only" for="site-menu-search">Search Site</label>
+    <div class="input-group">
+      <input id="site-menu-search" class="form-control" placeholder="Search" type="search" name="searchQuery" />
+      <div class="input-group-append">
+        <button class="btn btn-primary" type="submit" aria-label="Search">
+          <marko-web-icon name="search" modifiers=["light"] />
+        </button>
+      </div>
+    </div>
+  </form>
+</marko-web-element>
diff --git a/packages/marko-web-theme-monorail/components/site-menu/components/social-icons.marko b/packages/marko-web-theme-monorail/components/site-menu/components/social-icons.marko
new file mode 100644
index 000000000..4506c2172
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-menu/components/social-icons.marko
@@ -0,0 +1 @@
+<theme-social-follow dark=true modifiers=[input.blockName] />
diff --git a/packages/marko-web-theme-monorail/components/site-menu/index.marko b/packages/marko-web-theme-monorail/components/site-menu/index.marko
new file mode 100644
index 000000000..e3cd7c87f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-menu/index.marko
@@ -0,0 +1,106 @@
+import { asObject } from "@parameter1/base-cms-utils";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const blockName = input.blockName || "site-menu";
+
+$ const { site, config } = out.global;
+
+$ const regEnabled = defaultValue(input.regEnabled, false);
+$ const hasUser = defaultValue(input.hasUser, false);
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "aside")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <!-- desktop -->
+  <marko-web-element block-name=blockName name="contents-desktop">
+    <div class="row">
+      <div class="col-6 col-md-4 col-lg-4">
+        <!-- search box -->
+        <search block-name=blockName />
+        <!-- user section || IDX_NAV_ENABLE -->
+        <if(site.getAsArray("navigation.desktopMenu.user"))>
+          <!-- user section -->
+            <default-theme-site-menu-section
+            tag="nav"
+            block-name=blockName
+            label="Account"
+            items=site.getAsArray("navigation.desktopMenu.user")
+            modifiers=["user"]
+            reg-enabled=regEnabled
+            has-user=hasUser
+          />
+        </if>
+        <!-- social -->
+        <social-icons block-name=blockName />
+        <!-- about section -->
+        <default-theme-site-menu-section
+          tag="nav"
+          block-name=blockName
+          label="About"
+          items=site.getAsArray("navigation.desktopMenu.about")
+          modifiers=["secondary"]
+          reg-enabled=regEnabled
+          has-user=hasUser
+        />
+      </div>
+      <div class="col-6 col-md-4 col-lg-3">
+        <!-- sections -->
+        <default-theme-site-menu-section
+          tag="nav"
+          block-name=blockName
+          label="Sections"
+          items=site.getAsArray("navigation.desktopMenu.sections")
+          modifiers=["primary"]
+          reg-enabled=regEnabled
+          has-user=hasUser
+        />
+      </div>
+      <div class="d-none d-md-flex col-md-4">
+        <!-- top stories (defer to client-side loader) -->
+        <marko-web-browser-component name="ThemeTopStoriesMenu" />
+      </div>
+    </div>
+  </marko-web-element>
+  <!-- mobile -->
+  <marko-web-element block-name=blockName name="contents-mobile">
+    <!-- search box -->
+    <search block-name=blockName />
+    <!-- user section || IDX_NAV_ENABLE -->
+    <if(site.getAsArray("navigation.mobileMenu.user"))>
+      <!-- user section -->
+        <default-theme-site-menu-section
+        tag="nav"
+        block-name=blockName
+        label="Account"
+        items=site.getAsArray("navigation.mobileMenu.user")
+        modifiers=["user"]
+        reg-enabled=regEnabled
+        has-user=hasUser
+      />
+    </if>
+    <!-- social -->
+    <social-icons block-name=blockName />
+    <!-- primary section -->
+    <default-theme-site-menu-section
+      tag="nav"
+      block-name=blockName
+      items=site.getAsArray("navigation.mobileMenu.primary")
+      modifiers=["primary"]
+      reg-enabled=regEnabled
+      has-user=hasUser
+    />
+    <!-- secondary section -->
+    <default-theme-site-menu-section
+      tag="nav"
+      block-name=blockName
+      items=site.getAsArray("navigation.mobileMenu.secondary")
+      modifiers=["secondary"]
+      reg-enabled=regEnabled
+      has-user=hasUser
+    />
+  </marko-web-element>
+</marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/site-newsletter-menu.marko b/packages/marko-web-theme-monorail/components/site-newsletter-menu.marko
new file mode 100644
index 000000000..b83ccedf0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/site-newsletter-menu.marko
@@ -0,0 +1,41 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const { site, config, recaptcha } = out.global;
+$ const {
+  name,
+  description,
+  imagePath,
+  defaultNewsletter,
+  newsletters,
+  demographic,
+  disabled,
+  privacyPolicy,
+} = site.getAsObject("newsletter.pushdown");
+
+$ const lang = site.config.lang || "en";
+$ const { initiallyExpanded } = getAsObject(out.global, "newsletterState");
+$ const imageSrc = imagePath ? buildImgixUrl(`https://${config.website("imageHost")}/${imagePath}`, { w: 280, auto: "format,compress" }) : null;
+$ const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
+
+<if(name && description)>
+  <marko-web-browser-component
+    name="ThemeSiteNewsletterMenu"
+    ssr=true
+    props={
+      siteName: config.website("name"),
+      name,
+      description,
+      defaultNewsletter,
+      newsletters,
+      demographic,
+      disabled,
+      imageSrc,
+      imageSrcset,
+      initiallyExpanded,
+      recaptchaSiteKey: recaptcha.siteKey,
+      privacyPolicyLink: privacyPolicy,
+      lang
+    }
+  />
+</if>
diff --git a/packages/marko-web-theme-monorail/components/social-follow.marko b/packages/marko-web-theme-monorail/components/social-follow.marko
new file mode 100644
index 000000000..99bf2147e
--- /dev/null
+++ b/packages/marko-web-theme-monorail/components/social-follow.marko
@@ -0,0 +1,32 @@
+import { asObject, asArray } from "@parameter1/base-cms-utils";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { site, config } = out.global;
+$ const socialLinks = site.getAsArray("socialMediaLinks").map(link => asObject(link));
+$ const blockName = input.blockName || "social-follow";
+$ const dark = defaultValue(input.dark, true);
+$ const color = dark ? "dark" : "light";
+
+<if(socialLinks.length)>
+  <marko-web-block
+    name=blockName
+    tag=input.tag
+    class=input.class
+    modifiers=[color, ...asArray(input.modifiers)]
+    attrs=input.attrs
+  >
+    <marko-web-element block-name=blockName name="header">
+      Follow ${config.website('name')}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="section">
+      <for|link| of=socialLinks>
+        <default-theme-social-icon-link
+          provider=link.provider
+          href=link.href
+          target=link.target
+          modifiers=[blockName, color]
+        />
+      </for>
+    </marko-web-element>
+  </marko-web-block>
+</if>
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/content-list.js b/packages/marko-web-theme-monorail/graphql/fragments/content-list.js
new file mode 100644
index 000000000..3fb5dbb0b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/content-list.js
@@ -0,0 +1,45 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment WebsiteContentListFragment on Content {
+  id
+  type
+  shortName
+  teaser(input: { useFallback: false, maxLength: null })
+  labels
+  siteContext {
+    path
+  }
+  published
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+  ... on ContentPromotion {
+    linkText
+    linkUrl
+  }
+  ... on ContentContact {
+    title
+    phone
+    publicEmail
+  }
+  ... on ContentWebinar {
+    starts
+  }
+  ... on ContentEvent {
+    starts
+    ends
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/content-meter.js b/packages/marko-web-theme-monorail/graphql/fragments/content-meter.js
new file mode 100644
index 000000000..7214551c3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/content-meter.js
@@ -0,0 +1,17 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment ContentMeterFragment on Content {
+  id
+  name
+  labels
+  siteContext {
+    path
+    canonicalUrl
+  }
+  primarySection {
+    id
+    alias
+  }
+}
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/content-page.js b/packages/marko-web-theme-monorail/graphql/fragments/content-page.js
new file mode 100644
index 000000000..0f52b0850
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/content-page.js
@@ -0,0 +1,155 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment ContentPageFragment on Content {
+  id
+  name
+  teaser(input: { useFallback: false, maxLength: null })
+  labels
+  body
+  published
+  updated
+  siteContext {
+    path
+    canonicalUrl
+  }
+  company {
+    id
+    name
+    canonicalPath
+    enableRmi
+  }
+  primarySection {
+    id
+    name
+    alias
+    canonicalPath
+    hierarchy {
+      id
+      name
+      alias
+      canonicalPath
+    }
+  }
+  primaryImage {
+    id
+    src(input: { useCropRectangle: true, options: { auto: "format,compress" } })
+    alt
+    caption
+    credit
+    isLogo
+    cropDimensions {
+      aspectRatio
+    }
+    primaryImageDisplay
+  }
+  gating {
+    surveyType
+    surveyId
+  }
+  userRegistration {
+    isCurrentlyRequired
+    accessLevels
+  }
+  ... on ContentVideo {
+    embedCode
+  }
+  ... on ContentNews {
+    source
+    byline
+  }
+  ... on ContentEvent {
+    ends
+    starts
+  }
+  ... on SidebarEnabledInterface {
+    sidebars: sidebarStubs {
+      name
+      body
+      label
+    }
+  }
+  ... on ContentWebinar {
+    linkUrl
+    starts
+    sponsors {
+      edges {
+        node {
+          id
+          name
+          canonicalPath
+        }
+      }
+    }
+  }
+  ... on Addressable {
+    address1
+    address2
+    cityStateZip
+    country
+  }
+  ... on Contactable {
+    phone
+    tollfree
+    fax
+    website
+    title
+    mobile
+    publicEmail
+  }
+  ... on ContentCompany {
+    email
+  }
+  ... on SocialLinkable {
+    socialLinks {
+      provider
+      url
+      label
+    }
+  }
+  ... on Media {
+    fileSrc
+  }
+  ... on Inquirable {
+    enableRmi
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+          type
+          body
+          labels
+          siteContext {
+            path
+          }
+          primaryImage {
+            id
+            src(input: { options: { auto: "format,compress" } })
+            alt
+          }
+        }
+      }
+    }
+  }
+  images(input:{ pagination: { limit: 0 }, sort: { order: values } }) {
+    edges {
+      node {
+        id
+        src(input: { options: { auto: "format,compress" } })
+        alt
+        displayName
+        caption
+        credit
+        inCarousel
+        source {
+          width
+          height
+        }
+      }
+    }
+  }
+}
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/dynamic-page.js b/packages/marko-web-theme-monorail/graphql/fragments/dynamic-page.js
new file mode 100644
index 000000000..23499004b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/dynamic-page.js
@@ -0,0 +1,9 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment DynamicPageFragment on ContentPage {
+  id
+  name
+  body
+}
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/featured-companies.js b/packages/marko-web-theme-monorail/graphql/fragments/featured-companies.js
new file mode 100644
index 000000000..a72a76098
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/featured-companies.js
@@ -0,0 +1,16 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment FeaturedCompaniesInContentFragment on Content {
+  id
+  type
+  typeTitled: type(input: { format: titleize })
+  shortName
+  canonicalPath
+  ... on ContentCompany {
+    website
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/latest-podcast-block.js b/packages/marko-web-theme-monorail/graphql/fragments/latest-podcast-block.js
new file mode 100644
index 000000000..eb662a86d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/latest-podcast-block.js
@@ -0,0 +1,14 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment LatestPodcastBlockContentFragment on Content {
+  id
+  type
+  shortName
+  siteContext {
+    path
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/latest-products-feed-block.js b/packages/marko-web-theme-monorail/graphql/fragments/latest-products-feed-block.js
new file mode 100644
index 000000000..661015bcb
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/latest-products-feed-block.js
@@ -0,0 +1,28 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment LatestProductsFeedBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/most-popular-block.js b/packages/marko-web-theme-monorail/graphql/fragments/most-popular-block.js
new file mode 100644
index 000000000..7552d085f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/most-popular-block.js
@@ -0,0 +1,21 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment MostPopularBlockFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/native-x-image.js b/packages/marko-web-theme-monorail/graphql/fragments/native-x-image.js
new file mode 100644
index 000000000..8f25b415c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/native-x-image.js
@@ -0,0 +1,12 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+  fragment NativeXImageFragment on Image {
+    id
+    src
+    focalPoint {
+      x
+      y
+    }
+  }
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/native-x-story.js b/packages/marko-web-theme-monorail/graphql/fragments/native-x-story.js
new file mode 100644
index 000000000..1d44d10a0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/native-x-story.js
@@ -0,0 +1,27 @@
+const gql = require('graphql-tag');
+const imageFragment = require('./native-x-image');
+
+module.exports = gql`
+  fragment NativeXStoryFragment on Story {
+    id
+    title
+    teaser
+    body
+    publishedAt
+    url
+    primaryImage {
+      ...NativeXImageFragment
+    }
+    publisher {
+      id
+    }
+    advertiser {
+      id
+      name
+      logo {
+        ...NativeXImageFragment
+      }
+    }
+  }
+  ${imageFragment}
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/opinion-block.js b/packages/marko-web-theme-monorail/graphql/fragments/opinion-block.js
new file mode 100644
index 000000000..f6dcf8c74
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/opinion-block.js
@@ -0,0 +1,41 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment OpinionBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+          title
+          type
+          siteContext {
+            path
+          }
+          primaryImage {
+            id
+            src(input: { options: { auto: "format,compress" } })
+            alt
+          }
+        }
+      }
+    }
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/products-block.js b/packages/marko-web-theme-monorail/graphql/fragments/products-block.js
new file mode 100644
index 000000000..c0db285f1
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/products-block.js
@@ -0,0 +1,27 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment ProductsBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/read-next-block.js b/packages/marko-web-theme-monorail/graphql/fragments/read-next-block.js
new file mode 100644
index 000000000..30a64ee87
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/read-next-block.js
@@ -0,0 +1,28 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment ReadNextBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  published
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/related-stories-block.js b/packages/marko-web-theme-monorail/graphql/fragments/related-stories-block.js
new file mode 100644
index 000000000..8b0a38306
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/related-stories-block.js
@@ -0,0 +1,27 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment RelatedStoriesBlockFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/resource-library-block.js b/packages/marko-web-theme-monorail/graphql/fragments/resource-library-block.js
new file mode 100644
index 000000000..bab192af6
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/resource-library-block.js
@@ -0,0 +1,20 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment ResourceLibraryBlockContentFragment on Content {
+  id
+  type
+  shortName
+  siteContext {
+    path
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-body-feed-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-body-feed-block.js
new file mode 100644
index 000000000..ba5b5b4a0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-body-feed-block.js
@@ -0,0 +1,30 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionBodyFeedBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  teaser(input: { useFallback: false, maxLength: null })
+  body
+  siteContext {
+    path
+  }
+  published
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-block.js
new file mode 100644
index 000000000..b399f4ad8
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-block.js
@@ -0,0 +1,20 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionCardDeckBlockContentFragment on Content {
+  id
+  type
+  shortName
+  siteContext {
+    path
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-featured-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-featured-block.js
new file mode 100644
index 000000000..a3456f14f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-card-deck-featured-block.js
@@ -0,0 +1,21 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionCardDeckFeaturedBlockFragment on Content {
+  id
+  type
+  shortName
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-card-list-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-card-list-block.js
new file mode 100644
index 000000000..c657f3b16
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-card-list-block.js
@@ -0,0 +1,22 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionCardListBlockFragment on Content {
+  id
+  type
+  shortName
+  labels
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-feed-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-feed-block.js
new file mode 100644
index 000000000..932849202
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-feed-block.js
@@ -0,0 +1,33 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionFeedBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  published
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+  ... on ContentWebinar {
+    linkUrl
+    startDate
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-info.js b/packages/marko-web-theme-monorail/graphql/fragments/section-info.js
new file mode 100644
index 000000000..4f1975245
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-info.js
@@ -0,0 +1,13 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment GlobalSectionInfoFragment on WebsiteSection {
+  id
+  name
+  description
+  fullName
+  canonicalPath
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-list-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-list-block.js
new file mode 100644
index 000000000..e47f9fe67
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-list-block.js
@@ -0,0 +1,21 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionListBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/section-list-card-block.js b/packages/marko-web-theme-monorail/graphql/fragments/section-list-card-block.js
new file mode 100644
index 000000000..31c794d10
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/section-list-card-block.js
@@ -0,0 +1,27 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment SectionListCardBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/top-stories-block.js b/packages/marko-web-theme-monorail/graphql/fragments/top-stories-block.js
new file mode 100644
index 000000000..b779b7900
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/top-stories-block.js
@@ -0,0 +1,28 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment TopStoriesBlockFragment on Content {
+  id
+  type
+  shortName
+  labels
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+    isLogo
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/top-stories-menu-block.js b/packages/marko-web-theme-monorail/graphql/fragments/top-stories-menu-block.js
new file mode 100644
index 000000000..3d8dfe858
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/top-stories-menu-block.js
@@ -0,0 +1,21 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment TopStoriesMenuBlockContentFragment on Content {
+  id
+  type
+  shortName
+  labels
+  siteContext {
+    path
+  }
+  primarySection {
+    id
+    name
+    fullName
+    canonicalPath
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/website-section-page.js b/packages/marko-web-theme-monorail/graphql/fragments/website-section-page.js
new file mode 100644
index 000000000..5893da17a
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/website-section-page.js
@@ -0,0 +1,16 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment WebsiteSectionPageFragment on WebsiteSection {
+  id
+  name
+  alias
+  fullName
+  description
+  hierarchy {
+    id
+    alias
+    name
+  }
+}
+`;
diff --git a/packages/marko-web-theme-monorail/graphql/fragments/white-papers-block.js b/packages/marko-web-theme-monorail/graphql/fragments/white-papers-block.js
new file mode 100644
index 000000000..b6a2afd71
--- /dev/null
+++ b/packages/marko-web-theme-monorail/graphql/fragments/white-papers-block.js
@@ -0,0 +1,27 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment WhitePapersBlockFragment on Content {
+  id
+  type
+  shortName
+  teaser(input: { useFallback: false, maxLength: null })
+  siteContext {
+    path
+  }
+  company {
+    id
+    type
+    name
+    siteContext {
+      path
+    }
+  }
+  primarySection {
+    id
+    name
+  }
+}
+
+`;
diff --git a/packages/marko-web-theme-monorail/marko.json b/packages/marko-web-theme-monorail/marko.json
new file mode 100644
index 000000000..271c44fce
--- /dev/null
+++ b/packages/marko-web-theme-monorail/marko.json
@@ -0,0 +1,5 @@
+{
+  "taglib-imports": [
+    "./components/marko.json"
+  ]
+}
diff --git a/packages/marko-web-theme-monorail/package.json b/packages/marko-web-theme-monorail/package.json
new file mode 100644
index 000000000..3909cec89
--- /dev/null
+++ b/packages/marko-web-theme-monorail/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@parameter1/base-cms-marko-web-theme-monorail",
+  "version": "2.88.1",
+  "author": "Brian Miller <brian@parameter1.com>",
+  "repository": "https://github.com/parameter1/base-cms/tree/master/packages/marko-web-theme-monorail",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint --ext .js --ext .vue --max-warnings 5 --ignore-path ../../.eslintignore ./",
+    "test": "yarn lint"
+  },
+  "dependencies": {
+    "@parameter1/base-cms-image": "^2.81.0",
+    "@parameter1/base-cms-inflector": "^2.0.0",
+    "@parameter1/base-cms-marko-core": "^2.80.0",
+    "@parameter1/base-cms-marko-web": "^2.81.0",
+    "@parameter1/base-cms-marko-web-deferred-script-loader": "^2.77.0",
+    "@parameter1/base-cms-marko-web-gam": "^2.77.0",
+    "@parameter1/base-cms-marko-web-gtm": "^2.88.0",
+    "@parameter1/base-cms-marko-web-html-sitemap": "^2.80.0",
+    "@parameter1/base-cms-marko-web-icons": "^2.46.3",
+    "@parameter1/base-cms-marko-web-identity-x": "^2.88.1",
+    "@parameter1/base-cms-marko-web-inquiry": "^2.75.1",
+    "@parameter1/base-cms-marko-web-native-x": "^2.88.0",
+    "@parameter1/base-cms-marko-web-omeda": "^2.79.0",
+    "@parameter1/base-cms-marko-web-omeda-identity-x": "^2.88.1",
+    "@parameter1/base-cms-marko-web-p1-events": "^2.77.0",
+    "@parameter1/base-cms-marko-web-search": "^2.80.0",
+    "@parameter1/base-cms-marko-web-social-sharing": "^2.75.1",
+    "@parameter1/base-cms-marko-web-theme-default": "^2.75.1",
+    "@parameter1/base-cms-object-path": "^2.75.1",
+    "@parameter1/base-cms-utils": "^2.75.1",
+    "@parameter1/base-cms-web-common": "^2.80.0",
+    "bootstrap": "4.3.1",
+    "cheerio": "^1.0.0-rc.10",
+    "graphql-tag": "^2.10.1",
+    "http-errors": "^1.7.3",
+    "moment": "^2.29.1",
+    "node-fetch": "^2.6.1"
+  }
+}
diff --git a/packages/marko-web-theme-monorail/routes/render-block.js b/packages/marko-web-theme-monorail/routes/render-block.js
new file mode 100644
index 000000000..728361f15
--- /dev/null
+++ b/packages/marko-web-theme-monorail/routes/render-block.js
@@ -0,0 +1,27 @@
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+const createError = require('http-errors');
+const MostPopular = require('../components/blocks/most-popular');
+const TopStoriesMenu = require('../components/blocks/top-stories-menu');
+
+const blocks = {
+  'most-popular': MostPopular,
+  'top-stories-menu': TopStoriesMenu,
+};
+
+const parseJSON = (value) => {
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return {};
+  }
+};
+
+module.exports = (app) => {
+  app.get('/__render-block/:name', asyncRoute(async (req, res) => {
+    const { name } = req.params;
+    const input = parseJSON(req.query.input);
+    const Component = blocks[name];
+    if (!Component) throw createError(404, `No block component found for '${name}'`);
+    return res.marko(Component, input);
+  }));
+};
diff --git a/packages/marko-web-theme-monorail/routes/search.js b/packages/marko-web-theme-monorail/routes/search.js
new file mode 100644
index 000000000..617a63d9d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/routes/search.js
@@ -0,0 +1,26 @@
+const { get, getAsObject } = require('@parameter1/base-cms-object-path');
+const MarkoWebSearchConfig = require('@parameter1/base-cms-marko-web-search/config');
+const middleware = require('@parameter1/base-cms-marko-web-search/middleware');
+const template = require('../templates/search');
+
+module.exports = (app, siteConfig) => {
+  const {
+    contentTypes = ['Article', 'Blog', 'Company', 'Podcast', 'Product', 'Video', 'Whitepaper'],
+    assignedToWebsiteSectionIds,
+  } = getAsObject(siteConfig, 'search');
+  const config = new MarkoWebSearchConfig({
+    resultsPerPage: { default: 18 },
+    contentTypes,
+    assignedToWebsiteSectionIds,
+  });
+  app.get('/search', (req, res, next) => {
+    if (!get(req, 'query.searchQuery') && get(req, 'query.sortField')) {
+      const params = new URLSearchParams(get(req, 'query'));
+      params.delete('sortField');
+      params.delete('searchQuery');
+      if (`${params}`) res.redirect(301, `${get(req, 'route.path')}?${params}`);
+      else res.redirect(301, '/search');
+    }
+    next();
+  }, middleware({ config, template }));
+};
diff --git a/packages/marko-web-theme-monorail/routes/taxonomy.js b/packages/marko-web-theme-monorail/routes/taxonomy.js
new file mode 100644
index 000000000..aebf17b46
--- /dev/null
+++ b/packages/marko-web-theme-monorail/routes/taxonomy.js
@@ -0,0 +1,29 @@
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+const gql = require('graphql-tag');
+const createError = require('http-errors');
+const template = require('../templates/taxonomy');
+
+const query = gql`
+  query WithTaxonomy($input: TaxonomyQueryInput!) {
+    taxonomy(input: $input) {
+      id
+      name
+      type
+      description
+    }
+  }
+`;
+
+module.exports = (app) => {
+  app.get('/t/:id(\\d+)', asyncRoute(async (req, res) => {
+    const { apollo } = res.locals;
+    const id = parseInt(req.params.id, 10);
+    const input = { id };
+    const variables = { input };
+    const { data } = await apollo.query({ query, variables });
+    const { taxonomy } = data;
+    if (!taxonomy) throw createError(404, `No taxonomy term was found for ID '${id}'`);
+
+    return res.marko(template, { ...taxonomy });
+  }));
+};
diff --git a/packages/marko-web-theme-monorail/scss/_functions.scss b/packages/marko-web-theme-monorail/scss/_functions.scss
new file mode 100644
index 000000000..1b7e82ec2
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/_functions.scss
@@ -0,0 +1,29 @@
+@import "../../node_modules/@parameter1/base-cms-marko-web-theme-default/scss/functions";
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@function non-destructive-map-merge($parent-map, $child-map) {
+  $result: $parent-map;
+  @each $key, $value in $child-map {
+    @if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+      $result: map-merge($result, ($key: $value));
+    } @else {
+      $result: map-merge($result, ($key: non-destructive-map-merge(map-get($result, $key), $value)));
+    }
+  }
+  @return $result;
+}
+
+@function skin-typography-prop($style, $prop) {
+  @return map-deep-get($typography, $style, $prop);
+}
+
+@function skin-typography-link-prop($style, $link-style, $prop) {
+  $link: map-deep-get($typography-links, $style, $link-style);
+  @return map-get($link, $prop);
+}
diff --git a/packages/marko-web-theme-monorail/scss/_mixins.scss b/packages/marko-web-theme-monorail/scss/_mixins.scss
new file mode 100644
index 000000000..5c6abc1f7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/_mixins.scss
@@ -0,0 +1,132 @@
+@mixin skin-button($style) {
+  $vars: map-get($skin-buttons, $style);
+  $props: background-color, border-radius, color, font-family, font-weight, font-size, letter-spacing, line-height, padding, text-transform;
+
+  @each $prop in $props {
+    #{ $prop }: map-get($vars, $prop);
+  }
+
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+
+  $border: map-get($vars, "border");
+  @if $border {
+    border: $border;
+  } @else {
+    border: none;
+  }
+
+  $hover-background-color: map-get($vars, "hover-background-color");
+  $hover-border: map-get($vars, "hover-border");
+  $hover-color: map-get($vars, "hover-color");
+
+  $focus-background-color: if(map-get($vars, "focus-background-color"), map-get($vars, "focus-background-color"), $hover-background-color);
+  $focus-color: if(map-get($vars, "focus-color"), map-get($vars, "focus-color"), $hover-color);
+  $focus-border: if(map-get($vars, "focus-border"), map-get($vars, "focus-border"), $hover-border);
+
+  $active-background-color: if(map-get($vars, "active-background-color"), map-get($vars, "active-background-color"), $focus-background-color);
+  $active-color: if(map-get($vars, "active-color"), map-get($vars, "active-color"), $focus-color);
+  $active-border: if(map-get($vars, "active-border"), map-get($vars, "active-border"), $focus-border);
+
+  &:hover {
+    @if $hover-border {
+      border: $hover-border;
+    }
+    color: $hover-color;
+    background-color: $hover-background-color;
+  }
+
+  &:focus,
+  &.focus {
+    @if $focus-border {
+      border: $focus-border;
+    }
+    color: $focus-color;
+    background-color: $focus-background-color;
+    outline: 0;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    @if $active-border {
+      border: $active-border;
+    }
+    color: $active-color;
+    background-color: $active-background-color;
+    outline: 0;
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+  }
+
+}
+
+@mixin skin-typography(
+  $style,
+  $link-style: false,
+  $max-lines: null,
+  $breakpoint: $theme-responsive-text-breakpoint
+) {
+  $vars: map-get($typography, $style);
+  $props: font-family, font-size, font-weight, line-height, color, text-transform, letter-spacing;
+
+  @each $prop in $props {
+    #{ $prop }: map-get($vars, $prop);
+  }
+
+  @include theme-apply-responsive-fonts(
+    $font-size: map-get($vars, font-size-mobile),
+    $line-height: map-get($vars, line-height-mobile),
+    $breakpoint: $breakpoint
+  );
+
+  @if $link-style {
+    $link: map-deep-get($typography-links, $style, $link-style);
+    a {
+      @include skin-typography-link($style, $link-style, $max-lines);
+    }
+  }
+}
+
+@mixin skin-typography-link(
+  $style,
+  $link-style,
+  $max-lines: null,
+  $breakpoint: $theme-responsive-text-breakpoint
+) {
+  $vars: map-get($typography, $style);
+  $link: map-deep-get($typography-links, $style, $link-style);
+
+  @if map-get($link, max-lines) or $max-lines {
+    @include theme-max-lines(
+      $font-size: map-get($vars, font-size),
+      $font-size-sm: map-get($vars, font-size-mobile),
+      $line-height: map-get($vars, line-height),
+      $line-height-sm: map-get($vars, line-height-mobile),
+      $num: if($max-lines, $max-lines, map-get($link, max-lines)),
+      $breakpoint: $breakpoint
+    );
+  }
+
+  // if no link color specified, fallback to the main color.
+  $link-color: if(map-get($link, "color"), map-get($link, "color"), map-get($vars, "color"));
+  color: $link-color;
+  text-decoration: map-get($link, text-decoration);
+  &:hover {
+    // if no hover color specified, fallback to the link color
+    $hover-color: if(map-get($link, "hover-color"), map-get($link, "hover-color"), $link-color);
+    color: $hover-color;
+    text-decoration: map-get($link, hover-text-decoration);
+  }
+}
+
+@mixin section-header-underline() {
+  margin-bottom: 30px;
+
+  @include skin-typography($style: "section-header");
+}
diff --git a/packages/marko-web-theme-monorail/scss/_variables.scss b/packages/marko-web-theme-monorail/scss/_variables.scss
new file mode 100644
index 000000000..666047144
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/_variables.scss
@@ -0,0 +1,320 @@
+// Fonts
+//
+// Skin primary + secondary fonts. By default, set secondary to primary.
+$skin-font-family-primary: Arial, sans-serif !default;
+$skin-font-family-secondary: Arial, sans-serif !default;
+
+// Set bootstrap font to primary skin font
+$font-family-sans-serif: $skin-font-family-primary;
+
+// Set theme's font family and page title to primary skin font.
+$theme-font-family-sans-serif: $skin-font-family-primary !default;
+$theme-font-family-page-title: $skin-font-family-primary !default;
+
+// Use secondary font for content body headings, by default.
+$theme-heading-font-family: $skin-font-family-secondary !default;
+
+// Reduced the z-index to prevent overlaying the welcome ad.
+$theme-site-header-z-index: 15000;
+
+// Low-Level Vars
+//
+// Disable rounding and shadows
+$enable-shadows: false;
+$enable-rounded: false;
+// Disable box shadow on button focus
+$btn-active-box-shadow: none;
+$btn-focus-width: 0;
+// Override bredcrumb divider
+$breadcrumb-divider: "|" !default;
+// Set gutter and block spacer
+$grid-gutter-width: 20px;
+$block-spacer: 24px;
+$spacers: (
+  block-xl: $block-spacer * 2.5,
+  block-lg: $block-spacer * 1.5,
+  block: $block-spacer,
+  block-sm: $block-spacer / 2,
+  block-xs: $block-spacer / 4,
+);
+
+// Determine the response text breakpoint
+$theme-responsive-text-breakpoint: md;
+
+$hr-margin-y: $grid-gutter-width / 2;
+
+// Marko Web Document and Page Settings
+//
+$marko-web-document-container-max-width: 1080px;
+$marko-web-document-container-gutter: 0;
+$marko-web-page-wrapper-padding: 10px;
+$marko-web-page-padding: 0;
+
+// Colors
+//
+// Set default grayscale
+$black:    #000 !default;
+$gray-900: #232325 !default;
+$gray-800: #3f4043 !default;
+$gray-700: #68686c !default;
+$gray-600: #8c8e97 !default;
+$gray-500: #91939c !default;
+$gray-400: #c4c6cb !default;
+$gray-300: #dee2e6 !default;
+$gray-200: #e3e4e5 !default;
+$gray-100: #f0f1f2 !default;
+$white:    #fff !default;
+
+// Set default body bg, font color, and primary/secondary color
+$body-bg: $white !default;
+$body-color: $gray-800 !default;
+$blue: #134f8c !default;
+// Primary/secondary
+$primary: $blue !default;
+$secondary: $gray-800 !default;
+// Default hover colors
+$skin-primary-hover-color: darken($primary, 13%) !default;
+$skin-secondary-hover-color: $gray-900 !default;
+// Newsletter signup colors
+$skin-newsletter-signup-inline-btn-color: #103a57 !default;
+$skin-newsletter-signup-bg-color: #0d9dc9 !default;
+
+// Ad background colors
+$skin-ad-bg-color: $gray-100 !default;
+$skin-ad-label-color: $gray-700 !default;
+// HR color
+$hr-border-color: $gray-700 !default;
+
+$colors: (
+  "blue": $blue,
+  "tar-black": $gray-900,
+  "charcoal": $gray-800,
+  "smokey-gray": $gray-700,
+  "silver-fox": $gray-600,
+  "cloud": $gray-400,
+  "concrete": $gray-200,
+  "fog": $gray-100,
+  "sponsor-blue": $blue,
+);
+
+// Marko Web Nodes
+//
+$marko-web-node-padding: 20px;
+
+$marko-web-node-placeholder-image: none;
+$marko-web-node-placeholder-image-bg-color: transparent;
+
+$marko-web-node-overlay-image-text-shadow: none;
+$marko-web-node-overlay-image-gradient: linear-gradient(to top, rgba($gray-800, .1), rgba($gray-800, .1));
+
+// Marko Web Node Lists
+//
+$marko-web-node-list-padding: 16px;
+$marko-web-node-list-border-color: $gray-200 !default;
+
+// Font Weights
+//
+$font-weight-bold: 700;
+$font-weight-semibold: 600;
+$font-weight-medium: 500;
+$font-weight-normal: 400;
+
+// Buttons, Inputs, and Typography
+//
+@import "./variables/buttons";
+@import "./variables/inputs";
+@import "./variables/typography";
+
+// Marko Icons
+$marko-web-icon-fill-dark: $gray-800 !default;
+$marko-web-icon-fill-light: $white !default;
+
+// Skin content body and image widths
+$skin-aligned-image-width: 300px;
+$skin-aligned-body-image-spacer: .75rem;
+$skin-content-body-max-width: 700px;
+$skin-content-primary-image-max-width: 880px;
+
+// Page
+$theme-page-title-font-weight: $font-weight-bold;
+
+// Header
+$navbarStyle: "navbar" !default;
+$theme-site-header-box-shadow: none !default;
+$theme-site-header-breakpoints: () !default;
+$theme-site-header-breakpoints: map-merge(
+  (
+    hide-primary: 100000px, // effectively always hide the primary nav
+    hide-secondary: 700px,
+    small-logo: 775px,
+    small-text-primary: 0,
+    small-text-secondary: 830px
+  ),
+  $theme-site-header-breakpoints
+);
+
+// Navbar
+$skin-desktop-menu-breakpoint: map-get($theme-site-header-breakpoints, hide-secondary);
+$theme-site-navbar-brand-margin-x: 36px !default;
+
+$theme-site-navbar-logo-height: 46px !default;
+$theme-site-navbar-logo-height-sm: 35px !default;
+
+$theme-site-navbar-primary-link-color: $gray-800 !default;
+$theme-site-navbar-primary-link-active-color: $gray-800 !default;
+$theme-site-navbar-primary-link-hover-color: $gray-800 !default;
+$theme-site-navbar-primary-bg-color: $white !default;
+$theme-site-navbar-primary-height-sm: 0 !default;
+
+$theme-site-navbar-secondary-link-color: $gray-800 !default;
+$theme-site-navbar-secondary-bg-color: $white !default;
+$theme-site-navbar-secondary-font-size: 18px !default;
+$theme-site-navbar-secondary-font-size-sm: $theme-site-navbar-secondary-font-size - 2;
+$theme-site-navbar-secondary-line-height: get-line-height($theme-site-navbar-secondary-font-size, 26px);
+$theme-site-navbar-secondary-line-height-sm: get-line-height($theme-site-navbar-secondary-font-size-sm, 24px);
+$theme-site-navbar-secondary-font-weight: $font-weight-semibold !default;
+$theme-site-navbar-secondary-padding-y: 15px !default;
+$theme-site-navbar-secondary-type: light !default;
+$theme-site-navbar-secondary-link-active-decoration: none !default;
+$theme-site-navbar-secondary-link-hover-decoration: none !default;
+
+$theme-site-navbar-secondary-link-color: $gray-800 !default;
+$theme-site-navbar-secondary-link-active-color: $primary !default;
+$theme-site-navbar-secondary-link-hover-color: $primary !default;
+$theme-site-navbar-secondary-link-padding: 15px !default;
+
+// Site Menu
+$theme-site-navbar-menu-width: 500px;
+$theme-site-navbar-menu-max-width: 100%;
+
+$theme-site-navbar-menu-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, .15);
+$theme-site-navbar-menu-padding-x: 24px;
+$theme-site-navbar-menu-padding-y: 24px;
+$theme-site-navbar-menu-bg-color: $white;
+$theme-site-navbar-menu-hover-background-color: transparent;
+
+$theme-site-navbar-menu-item-font-size: 24px;
+$theme-site-navbar-menu-item-font-weight: $font-weight-bold;
+$theme-site-navbar-menu-item-border-color: transparent;
+
+$theme-site-navbar-menu-active-item-font-weight: $font-weight-bold;
+
+$theme-site-navbar-menu-link-padding-x: 10px !default;
+$theme-site-navbar-menu-link-padding-y: 0;
+$theme-site-navbar-menu-link-color: $black !default;
+$theme-site-navbar-menu-link-hover-color: $primary !default;
+
+// Site Footer
+$global-site-footer-color: $white;
+
+$theme-site-footer-font-size: 16px;
+$theme-site-footer-line-height: get-line-height($theme-site-footer-font-size, 30px);
+
+$theme-site-footer-secondary-bg-color: $gray-800 !default;
+$theme-site-footer-primary-bg-color: $gray-900 !default;
+
+$theme-site-footer-copyright-color: $white;
+$theme-site-footer-copyright-font-size: $theme-site-footer-font-size;
+
+$theme-site-footer-spacer: 14px;
+$theme-site-footer-spacer-sm: 14px;
+
+$theme-site-footer-logo-height: 35px !default;
+$theme-site-footer-logo-height-sm: 35px !default;
+
+$theme-site-footer-corporate-logo-height: 30px !default;
+
+// Items/Nodes
+$theme-item-link-hover-decoration: none;
+
+$theme-item-header-color: $black;
+$theme-item-header-font-family: $skin-font-family-primary;
+$theme-item-header-font-size: 15px;
+$theme-item-header-font-weight: $font-weight-bold;
+
+$theme-item-header-link-hover-color: $primary !default;
+
+$theme-item-title-link-hover-color: $primary !default;
+
+$theme-item-description-max-lines: 3;
+$theme-item-description-margin: 10px;
+
+// Ads
+$theme-ad-box-shadow: none;
+
+// Cards and Card Headers
+$theme-card-header-background-color: transparent;
+$theme-card-header-color: $black;
+$theme-card-header-font-size: 22px;
+$theme-card-header-font-weight: $font-weight-bold;
+$theme-card-header-text-transform: none;
+$theme-card-header-border: none;
+
+$theme-card-header-link-hover-color: $primary;
+$theme-card-header-link-hover-decoration: none;
+
+$marko-web-node-bg-color: transparent;
+$theme-card-background-color: transparent;
+
+// Pages
+$theme-page-body-font-family: $theme-font-family-sans-serif;
+
+$theme-page-body-font-size: 19px;
+$theme-page-body-font-size-sm: $theme-page-body-font-size;
+$theme-page-body-line-height: get-line-height($theme-page-body-font-size, 25px);
+$theme-page-body-line-height-sm: $theme-page-body-line-height;
+
+// Caption / Credit / Media
+$theme-media-footer-font-size: 16px;
+
+$theme-media-footer-line-height: get-line-height($theme-media-footer-font-size, 22px);
+$theme-media-caption-color: #6c6972;
+$theme-media-credit-font-size: 14px !default;
+
+// Headings
+$theme-heading-large-font-size:       28px !default;
+$theme-heading-large-font-size-sm:    28px !default;
+$theme-heading-large-line-height:     1.2 !default;
+$theme-heading-large-line-height-sm:  1.2 !default;
+
+$theme-heading-h4-font-size:          24px !default;
+$theme-heading-h4-font-size-sm:       24px !default;
+$theme-heading-h4-line-height:        1.2 !default;
+$theme-heading-h4-line-height-sm:     1.2 !default;
+
+$theme-heading-h5-font-size:          24px !default;
+$theme-heading-h5-font-size-sm:       24px !default;
+$theme-heading-h5-line-height:        1.2 !default;
+$theme-heading-h5-line-height-sm:     1.2 !default;
+
+$theme-heading-h6-font-size:          20px !default;
+$theme-heading-h6-font-size-sm:       20px !default;
+$theme-heading-h6-line-height:        1.2 !default;
+$theme-heading-h6-line-height-sm:     1.2 !default;
+
+// Content Headings
+$theme-content-heading-large-margin-bottom:     1rem !default;
+$theme-content-heading-large-margin-bottom-sm:  1rem !default;
+
+$theme-content-heading-h2-margin-bottom:        1rem !default;
+$theme-content-heading-h2-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h3-margin-bottom:        1rem !default;
+$theme-content-heading-h3-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h4-margin-bottom:        1rem !default;
+$theme-content-heading-h4-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h5-margin-bottom:        1rem !default;
+$theme-content-heading-h5-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h6-margin-bottom:        1rem !default;
+$theme-content-heading-h6-margin-bottom-sm:     1rem !default;
+
+
+// Embedded media
+$theme-embedded-media-align-left-width: $skin-aligned-image-width;
+$theme-embedded-media-align-left-margin: $skin-aligned-body-image-spacer;
+
+$theme-embedded-media-align-right-width: $skin-aligned-image-width;
+$theme-embedded-media-align-right-margin: $skin-aligned-body-image-spacer;
diff --git a/packages/marko-web-theme-monorail/scss/components/_ads.scss b/packages/marko-web-theme-monorail/scss/components/_ads.scss
new file mode 100644
index 000000000..bd78c2d44
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_ads.scss
@@ -0,0 +1,247 @@
+.ad-container {
+  $self: &;
+  text-align: left;
+
+  $container-bottom-padding: 30px;
+  $wrapper-first-child-padding: 16px;
+  $label-bottom-padding: 4px;
+  $label-font-size: 10px;
+  $label-line-height: 1;
+  $container-height: $container-bottom-padding + $wrapper-first-child-padding + ($label-font-size * $label-line-height) + $label-bottom-padding;
+
+  $leaderboard-min-height-mobile: 50px !default;
+  $leaderboard-min-height-desktop: 90px !default;
+  $billboard-min-height-mobile: 210px !default;
+  $billboard-min-height-desktop: 596px !default;
+  $rotation-min-height-mobile: 50px !default;
+  $rotation-min-height-desktop: 90px !default;
+
+  $rail-ad-bg-color: $skin-ad-bg-color !default;
+
+  &--inter-block {
+    margin-right: -#{$marko-web-page-wrapper-padding};
+    margin-bottom: 0;
+    margin-left: -#{$marko-web-page-wrapper-padding};
+    background-color: $skin-ad-bg-color;
+    @media (min-width: $marko-web-document-container-max-width) {
+      $margin: calc((((100vw - #{$marko-web-document-container-max-width}) / 2) + #{$marko-web-page-wrapper-padding}) * -1);
+      margin-right: $margin;
+      margin-left: $margin;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+
+    #{ $self } {
+      &__wrapper {
+        padding-bottom: $container-bottom-padding;
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+
+        @media (min-width: 970px) {
+          max-width: 970px;
+        }
+      }
+    }
+  }
+
+  &--inline {
+    margin-right: $marko-web-page-wrapper-padding * -1;
+    margin-bottom: 0;
+    margin-left: $marko-web-page-wrapper-padding * -1;
+    background-color: $skin-ad-bg-color;
+    @media (min-width: $marko-web-document-container-max-width) {
+      $margin: calc((((100vw - #{$marko-web-document-container-max-width}) / 2) + #{$marko-web-page-wrapper-padding}) * -1);
+      margin-right: $margin;
+      margin-left: $margin;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+  }
+
+  &--inline-content {
+    margin-right: $marko-web-page-wrapper-padding * -1;
+    margin-bottom: 30px;
+    margin-left: $marko-web-page-wrapper-padding * -1;
+
+    clear: both;
+    background-color: $skin-ad-bg-color;
+
+    @media (min-width: $skin-content-body-max-width) {
+      $margin: calc(((100vw - #{$skin-content-body-max-width}) / 2) * -1);
+      margin-right: $margin;
+      margin-left: $margin;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+  }
+
+  &--inline,
+  &--inline-content {
+    #{ $self } {
+      &__wrapper {
+        padding-bottom: $container-bottom-padding;
+      }
+    }
+  }
+
+  &--rail {
+    background-color: $rail-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+    @media (min-width: 980px) {
+      margin-bottom: 24px;
+    }
+  }
+
+  &--rail-mobile {
+    background-color: $rail-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+    @media (min-width: 300px) {
+      margin-bottom: 24px;
+    }
+    @media (min-width: 980px) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--inline-feed {
+    background-color: $skin-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+  }
+
+  &--max-width-300 {
+    #{ $self } {
+      &__wrapper {
+        @media (min-width: 300px) {
+          max-width: 300px;
+        }
+      }
+    }
+  }
+
+  &--max-width-970 {
+    #{ $self } {
+      &__wrapper {
+        @media (min-width: 970px) {
+          max-width: 970px;
+        }
+      }
+    }
+  }
+
+  &--margin-auto-x {
+    #{ $self } {
+      &__wrapper {
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+      }
+    }
+  }
+
+  &--template-leaderboard {
+    min-height: $leaderboard-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $leaderboard-min-height-desktop + $container-height;
+    }
+  }
+
+  &--template-billboard {
+    min-height: $billboard-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $billboard-min-height-desktop + $container-height;
+    }
+  }
+
+  &--template-rotation,
+  &--template-inline-content-desktop,
+  &--template-inline-content-mobile {
+    min-height: $rotation-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $rotation-min-height-desktop + $container-height;
+    }
+  }
+
+  &--inline-content#{&}--template-inline-content-desktop {
+    display: none;
+    @media (min-width: 780px) {
+      display: block;
+    }
+  }
+
+  &--inline-content#{&}--template-inline-content-mobile {
+    @media (min-width: 780px) {
+      display: none;
+    }
+  }
+
+  &--with-label {
+    > *:first-child {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: $wrapper-first-child-padding;
+
+      &::before {
+        padding-bottom: $label-bottom-padding;
+        font-size: $label-font-size;
+        line-height: $label-line-height;
+        color: $skin-ad-label-color;
+        text-transform: uppercase;
+        content: "Advertisement";
+      }
+    }
+  }
+}
+
+.wallpaper-ad {
+  $width: 300px;
+
+  position: fixed;
+  right: 0;
+  left: 0;
+
+  display: none;
+
+  @media (min-width: 1400px) {
+    display: block;
+  }
+
+  &__left,
+  &__right {
+    position: absolute;
+    top: 0;
+  }
+
+  &__left {
+    left: 0;
+  }
+  &__right {
+    right: 0;
+  }
+
+  @media (max-width: calc(#{$marko-web-document-container-max-width} + (#{$width} * 2))) {
+    $lr: calc((100vw - #{$marko-web-document-container-max-width} - (#{$width} * 2)) / 2);
+    &__left {
+      left: $lr;
+    }
+    &__right {
+      right: $lr;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_author-node.scss b/packages/marko-web-theme-monorail/scss/components/_author-node.scss
new file mode 100644
index 000000000..9ff32b468
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_author-node.scss
@@ -0,0 +1,23 @@
+.author-node {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+
+  &__image {
+    $size: 48px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-name-list", $link-style: "primary");
+  }
+
+  &__content-title {
+    margin-top: 5px;
+    @include skin-typography($style: "author-title-list");
+    text-transform: capitalize;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_author-published-node.scss b/packages/marko-web-theme-monorail/scss/components/_author-published-node.scss
new file mode 100644
index 000000000..7b5a54989
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_author-published-node.scss
@@ -0,0 +1,43 @@
+.author-published-node {
+  display: flex;
+  align-items: center;
+  margin-top: 17px;
+
+  &__image {
+    $size: 48px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-content-page", $link-style: "primary");
+  }
+
+  &__content-published,
+  &__content-updated {
+    @include skin-typography($style: "date-content-page");
+    display: inline;
+    margin-top: 2px;
+    text-transform: none;
+  }
+
+  &__content-updated {
+    &::before {
+      content: " | ";
+    }
+  }
+}
+
+.inline-author-bio {
+  &__content-body {
+    margin-bottom: 18px;
+    font-size: 16px;
+    font-style: italic;
+
+    @include media-breakpoint-up(md) {
+      font-size: 18px;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_comments.scss b/packages/marko-web-theme-monorail/scss/components/_comments.scss
new file mode 100644
index 000000000..54db1c905
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_comments.scss
@@ -0,0 +1,265 @@
+$comment-start-height: 680px !default;
+$bottom-gradient-height: 180px !default;
+.comment-stream {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+  margin-top: 16px;
+
+  &__toggle-btn {
+    margin-top: -60px;
+    margin-right: auto;
+    margin-left: auto;
+    border-radius: 10px;
+    text-transform: initial;
+    z-index: 2;
+    &.btn-secondary,
+    &.btn-secondary:hover,
+    &.btn-secondary:focus {
+      background-color: $white;
+      border-radius: 24px;
+      box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.08), 5px 5px 5px 0 rgba(0, 0, 0, 0.05), 2px 2px 2px 0 rgba(0, 0, 0, 0.03);
+      border: solid 1px rgba(151, 151, 151, 0.37);
+    }
+  }
+}
+
+.comment-toggle-arrow {
+  margin-left: 5px;
+  svg {
+    fill: $primary;
+  }
+}
+.idx-comment-stream-wrapper {
+  max-height: $comment-start-height;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  border-radius: 4px;
+  border: 1px solid $gray-200;
+  &--open {
+    height: initial;
+    max-height: initial;
+    .idx-comment-stream ~ .comment-stream__toggle-btn {
+      display: none;
+    }
+    .idx-comment-stream .idx-comment-stream__bottom {
+      display: none;
+    }
+  }
+}
+
+.idx-comment-stream {
+  $self: &;
+  max-height: 100%;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  padding-top: map-get($spacers, block);
+  padding-right: map-get($spacers, 3);
+  padding-bottom: map-get($spacers, block);
+  padding-left: map-get($spacers, 3);
+  ~ .comment-stream__toggle-btn {
+    margin-bottom: map-get($spacers, 3);
+  }
+  &__counter {
+    &--0,
+    &--1 {
+      height: initial;
+      max-height: initial;
+      .idx-comment-stream__bottom {
+        display: none;
+      }
+      ~ .comment-stream__toggle-btn,
+      ~ .comment-stream__toggle-btn.btn-secondary {
+        display: none;
+      }
+    }
+  }
+
+
+
+  &__header {
+    margin-bottom: 24px;
+
+    font-size: 24px;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+    color: $gray-800;
+    letter-spacing: .25px;
+  }
+
+  &__latest-comments {
+    font-family: $skin-font-family-primary;
+    font-size: 20px;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+    color: $gray-800;
+    letter-spacing: .25px;
+  }
+
+  &__post {
+    .btn {
+      margin-top: 24px;
+    }
+  }
+
+  &__posts {
+    #{ $self }__post:last-of-type .idx-comment-post {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+    margin-top: 6px;
+  }
+
+  &__login-form-wrapper {
+    margin-bottom: 24px;
+    display: flex;
+    flex-direction: row;
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+    }
+    border-bottom: 1px solid $gray-200;
+  }
+
+  &__login-message {
+    @include media-breakpoint-up(sm) {
+      @include make-col-ready();
+      @include make-col(5);
+      padding-left: 0;
+    }
+    font-size: 16px;
+    line-height: 1.44;
+    &--cta {
+      font-size: 18px;
+      display: block;
+      font-weight: $font-weight-bold;
+    }
+  }
+
+  &__login-form {
+    padding-bottom: 24px;
+    @include media-breakpoint-up(sm) {
+      @include make-col-ready();
+      @include make-col(7);
+    }
+    &:only-child {
+      @include make-col(12);
+    }
+
+    .form-control {
+      margin-bottom: 14px;
+    }
+
+    h4 {
+      font-size: 20px;
+      font-weight: $font-weight-semibold;
+      line-height: 1;
+      color: $gray-800;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: $font-weight-normal;
+      line-height: 1.44;
+      color: $gray-800;
+    }
+
+    em {
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  &__close-form-wrapper {
+    display: flex;
+  }
+
+  &__close-form {
+    @include theme-toggle-button();
+    margin-left: auto;
+  }
+  &__bottom {
+    height: $bottom-gradient-height;
+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+
+    position: absolute;
+    top: $comment-start-height - $bottom-gradient-height;
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+.idx-comment-post {
+  padding-top: 24px;
+  padding-bottom: 24px;
+
+  border-bottom: 1px solid $gray-200;
+
+  &__flagged {
+    margin-bottom: 19px !important; // stylelint-disable-line
+    font-weight: $font-weight-medium;
+    color: $gray-900;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+    }
+
+    > div:nth-child(2) {
+
+      margin-left: map-get($spacers, 1);
+      @include media-breakpoint-down(md) {
+        margin-left: 0;
+      }
+      display: flex;
+      justify-content: space-between;
+      flex-grow: 2;
+    }
+    a {
+      color: $gray-700;;
+    }
+  }
+
+  &__display-name {
+    margin-bottom: 2px;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    color: $gray-800;
+  }
+
+  &__created-at {
+    font-size: 16px;
+    color: $gray-700;
+  }
+
+  &__body {
+    font-family: $skin-font-family-primary;
+    font-size: 18px;
+    font-weight: $font-weight-normal;
+    line-height: 1.44;
+    color: $gray-800;
+    letter-spacing: .25px;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.idx-create-comment {
+  padding-bottom: 24px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid $gray-200;
+
+  .form-group:first-child {
+    @include media-breakpoint-up(md) {
+      width: 50%;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_content-page.scss b/packages/marko-web-theme-monorail/scss/components/_content-page.scss
new file mode 100644
index 000000000..93e6da1e3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_content-page.scss
@@ -0,0 +1,291 @@
+.page-wrapper {
+  &__content-name {
+    @include skin-typography($style: "header-1");
+  }
+
+  &__section {
+    &--content-page-body {
+      max-width: $skin-content-body-max-width;
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}
+
+.page-attribution {
+  &__content-authors {
+    &::before {
+      content: "By";
+    }
+  }
+}
+
+.content-page-body {
+  max-width: $skin-content-body-max-width;
+  margin-right: auto;
+  margin-left: auto;
+  video {
+    max-width: 100%;
+  }
+}
+
+.content-page-header {
+  max-width: $skin-content-body-max-width;
+
+  &--full-width {
+    max-width: 100%;
+  }
+
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.page-dates {
+  &__content-published,
+  &__content-updated {
+    @include skin-typography($style: "date");
+    display: inline;
+    text-transform: none;
+  }
+  &__content-updated::before {
+    content: " | ";
+  }
+}
+
+.contact-page {
+  &__content-name {
+    margin-bottom: 16px;
+    @include skin-typography($style: "header-1");
+  }
+  &__wrapper {
+    display: flex;
+  }
+  &__image {
+    $size: 160px;
+    $size-small: 112px;
+    width: $size-small;
+    height: $size-small;
+    margin-right: 20px;
+    border-radius: $size-small;
+
+    @include media-breakpoint-up(md) {
+      width: $size;
+      height: $size;
+      border-radius: $size;
+    }
+  }
+}
+
+.content-page-header .details {
+  padding: map-get($spacers, block);
+  margin-bottom: map-get($spacers, block);
+  background-color: $gray-100;
+  &__image {
+    margin-bottom: map-get($spacers, block);
+  }
+  .page-contact-details {
+    &__content-website,
+    &__content-public-email {
+      display: inline;
+    }
+  }
+}
+
+.page-contents {
+  $self: &;
+  &__content-body,
+  &__content-profile,
+  &__content-sidebar {
+    padding-bottom: map-get($spacers, block);
+    @include skin-typography($style: "article-text", $link-style: "content-body");
+
+    .btn-primary {
+      color: map-deep-get($skin-buttons, "primary", "color");
+      text-decoration: none;
+      &:hover {
+        color: map-deep-get($skin-buttons, "primary", "hover-color");
+        text-decoration: none;
+      }
+    }
+
+    .btn-secondary {
+      color: map-deep-get($skin-buttons, "secondary", "color");
+      text-decoration: none;
+      &:hover {
+        color: map-deep-get($skin-buttons, "secondary", "hover-color");
+        text-decoration: none;
+      }
+    }
+    .node-list {
+      &--gray-background {
+        background-color: $gray-100;
+      }
+    }
+    .section-feed-content-node {
+      &__content-short-name {
+        font-size: 20px;
+        line-height: 1em;
+      }
+      &__image-wrapper {
+        width: 125px;
+        min-width: 125px;
+        height: 83px;
+        @include media-breakpoint-up(md) {
+          width: 198px;
+          min-width: 198px;
+          height: 131px;
+        }
+      }
+      &__image {
+        width: 125px;
+        height: 83px;
+        @include media-breakpoint-up(md) {
+          width: 198px;
+          height: 131px;
+        }
+      }
+    }
+
+    hr {
+      display: block;
+      clear: both;
+    }
+  }
+
+  &__content-body p {
+
+    [data-embed-type="image"][data-embed-align="right"] {
+      margin-bottom: 1rem;
+      @include media-breakpoint-up(md) {
+        text-align: right;
+      }
+      img {
+        width: auto;
+        min-width: auto;
+        max-width: 100%;
+        max-height: 300px;
+      }
+    }
+    [data-embed-type="image"][data-embed-align="left"] {
+      margin-bottom: 1rem;
+      @include media-breakpoint-up(md) {
+        text-align: left;
+      }
+      img {
+        width: auto;
+        min-width: auto;
+        max-width: 100%;
+        max-height: 300px;
+      }
+    }
+  }
+
+  &__content-body h2 {
+    margin-bottom: 0;
+    font-size: 26px;
+    @include media-breakpoint-down(sm) {
+      font-size: 23px;
+    }
+  }
+
+  &__content-body h3 {
+    margin-bottom: 0;
+    font-size: 24px;
+  }
+
+  &__content-body ol,
+  &__content-body ul {
+    list-style-position: initial;
+  }
+
+  &--download-form {
+    padding: 22px;
+    background-color: $gray-100;
+    @include media-breakpoint-up(md) {
+      padding-right: 66px;
+      padding-left: 66px;
+    }
+  }
+
+  &--contact {
+    #{ $self } {
+      &__content-body {
+        max-width: 790px;
+      }
+    }
+  }
+
+  .primary-image {
+    &__image-caption,
+    &__image-credit {
+      display: inline;
+      margin-right: .5rem;
+    }
+    &__image-credit::before {
+      content: "Source: ";
+    }
+  }
+
+  [data-embed-type] .caption,
+  [data-embed-type] .credit {
+    display: inline-block;
+    margin-right: .5rem;
+  }
+
+  [data-embed-type] .credit::before {
+    content: "Source: ";
+  }
+}
+
+.social-sharing {
+  padding-bottom: map-get($spacers, block);
+  &__button {
+    margin-right: $block-spacer / 2;
+  }
+}
+
+.content-download {
+  padding-bottom: map-get($spacers, block);
+}
+
+[data-embed-type="image"] > :last-child:not(img) {
+  border-bottom: none;
+}
+
+.content-page-preview-overlay {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  margin-top: -74px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
+}
+
+.content-page-gate {
+  padding: 24px 1rem;
+  margin-top: map-get($spacers, block);
+  margin-bottom: map-get($spacers, block);
+  border: 1px solid #e3e4e5;
+  border-radius: 4px;
+
+  &__title {
+    margin-bottom: 15px;
+    font-size: 24px;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+    color: $gray-800;
+    letter-spacing: .25px;
+  }
+
+  &__body {
+    margin-bottom: 15px;
+    font-family: $theme-font-family-serif;
+    font-size: 16px;
+    color: #222;
+    > p {
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_page-wrapper.scss b/packages/marko-web-theme-monorail/scss/components/_page-wrapper.scss
new file mode 100644
index 000000000..7a8af565f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_page-wrapper.scss
@@ -0,0 +1,81 @@
+.page-wrapper {
+  $self: &;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  @include media-breakpoint-down(md) {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  &__website-section-name {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__website-section-subhead {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__website-section-description {
+    font-size: 20px;
+  }
+
+  &__section {
+    margin-bottom: 30px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 60px;
+    }
+
+    &--break-container {
+      margin-right: $marko-web-page-wrapper-padding * -1;
+      margin-left: $marko-web-page-wrapper-padding * -1;
+      background-color: $gray-100;
+      @media (min-width: $marko-web-document-container-max-width) {
+        $margin: calc((((100vw - #{$marko-web-document-container-max-width}) / 2) + #{$marko-web-page-wrapper-padding}) * -1);
+        margin-right: $margin;
+        margin-left: $margin;
+
+        > * {
+          max-width: $marko-web-document-container-max-width;
+          margin-right: auto;
+          margin-left: auto;
+        }
+      }
+    }
+
+    &--first-sm {
+      margin-bottom: 30px;
+    }
+
+    &--first {
+      margin-bottom: 40px;
+    }
+
+    &--content-header,
+    &--nativex-story-header {
+      margin-bottom: 20px;
+      @include media-breakpoint-up(md) {
+        margin-bottom: 30px;
+      }
+    }
+
+    &--content-body {
+      margin-bottom: 2rem;
+    }
+
+    &--nativex-story-header {
+      padding-top: 30px;
+    }
+
+    &--no-spacer {
+      margin-bottom: 0;
+    }
+  }
+
+  &--no-padding-x {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_pagination-controls.scss b/packages/marko-web-theme-monorail/scss/components/_pagination-controls.scss
new file mode 100644
index 000000000..3c9bf35d7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_pagination-controls.scss
@@ -0,0 +1,38 @@
+.pagination-controls,
+.marko-web-search-pagination-controls {
+  display: flex;
+  align-items: center;
+  padding-top: map-get($spacers, block);
+
+  &__prev {
+    margin-right: map-get($spacers, block);
+  }
+
+  &__next {
+    margin-left: map-get($spacers, block);
+  }
+
+  &__before {
+    margin-right: map-get($spacers, block);
+    .btn {
+      margin-bottom: 12px;
+      &:first-child {
+        margin-right: map-get($spacers, block) / 2;
+      }
+    }
+  }
+
+  &__after {
+    .btn {
+      margin-bottom: 12px;
+      &:first-child {
+        margin-right: map-get($spacers, block) / 2;
+      }
+    }
+  }
+
+  &__pages {
+    @include skin-typography($style: "teaser-text-1");
+    line-height: 1;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_search-page.scss b/packages/marko-web-theme-monorail/scss/components/_search-page.scss
new file mode 100644
index 000000000..d8a6e66a0
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_search-page.scss
@@ -0,0 +1,154 @@
+.search-form {
+  &__group {
+    @include media-breakpoint-up(md) {
+      width: 50%;
+    }
+  }
+}
+
+.marko-web-search-sort-by {
+  @include media-breakpoint-down(lg) {
+    padding-top: 20px;
+    width: 50%
+  }
+}
+
+.page-wrapper {
+  &__section {
+    &--search-results {
+      padding-bottom: 16px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      @include marko-web-node-list-border(border-bottom);
+      @include skin-typography($style: "article-text");
+    }
+  }
+}
+
+.marko-web-search-filter-container {
+  &__website-section-name {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__title {
+    margin-bottom: 18px;
+  }
+
+  &__sections {
+    display: none;
+    &--open {
+      display: block;
+    }
+  }
+
+  &--sticky {
+    @include media-breakpoint-up(lg) {
+      position: sticky;
+      top: 0;
+      bottom: 0;
+      height: 100vh;
+      overflow-y: auto;
+    }
+  }
+}
+
+.marko-web-search-toggle-filter-container {
+  @include theme-toggle-button();
+  @include skin-typography($style: "section-header-xs");
+  padding: 0;
+}
+
+.marko-web-search-toggle-filter {
+  @include theme-toggle-button();
+  @include skin-typography($style: "input-label");
+  padding: 0;
+  margin-bottom: 12px;
+  font-size: 17px;
+  font-weight: $font-weight-semibold;
+  color: $gray-800;
+  text-transform: uppercase;
+}
+
+.marko-web-search-filter {
+  $self: &;
+
+  &__clear-item {
+    color: $gray-800;
+    &:hover {
+      color: $gray-800;
+    }
+  }
+
+  &__item {
+    margin-bottom: 10px;
+
+    &--breadcrumbs {
+      :not(:first-child) {
+        &::before {
+          padding-right: 4px;
+          padding-left: 4px;
+          color: $gray-800;
+          content: ">";
+        }
+      }
+    }
+  }
+
+  &__items {
+    @include skin-typography($style: "teaser-text-1");
+    @include theme-apply-responsive-fonts(
+      $font-size: 18px,
+      $line-height: 1,
+      $breakpoint: $theme-responsive-text-breakpoint
+    );
+    display: none;
+    padding: 0;
+    margin-bottom: 0;
+    line-height: 1;
+    list-style: none;
+
+    &--open {
+      display: block;
+      margin-bottom: 24px;
+    }
+  }
+
+  &--children {
+    display: block;
+    margin-bottom: 8px;
+    #{ $self } {
+      &__items {
+        margin-left: 4px;
+        font-size: 16px;
+      }
+      &__item {
+        &::before {
+          padding-right: 6px;
+          font-size: 14px;
+          content: ">";
+        }
+      }
+    }
+  }
+}
+
+.marko-web-search-selected-filters {
+  margin-top: 4px;
+}
+
+.marko-web-search-selected-filter {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px;
+  margin-right: 10px;
+  font-size: 16px;
+  line-height: 1;
+  background-color: $gray-100;
+  border: 1px solid $gray-400;
+  border-radius: 4px;
+
+  &__label {
+    margin-right: 4px;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_site-footer.scss b/packages/marko-web-theme-monorail/scss/components/_site-footer.scss
new file mode 100644
index 000000000..69e8f9e5b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_site-footer.scss
@@ -0,0 +1,169 @@
+.site-footer {
+  $self: &;
+  margin-top: 0;
+  color: $white;
+
+  &__container {
+    padding-top: 28px;
+    padding-bottom: 28px;
+    text-align: left;
+
+    &--secondary {
+      padding-bottom: 0;
+    }
+  }
+
+  &__inner-container {
+    display: flex;
+    flex-direction: column;
+    max-width: $marko-web-document-container-max-width;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  &__section {
+    margin-bottom: 32px;
+    @include make-col-ready();
+
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+  }
+
+  &__items {
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      font-size: $theme-site-footer-copyright-font-size;
+    }
+  }
+
+  &__link {
+    color: $global-site-footer-color;
+    &:hover {
+      color: $global-site-footer-color;
+    }
+  }
+
+  &__brand {
+    margin-right: auto;
+    margin-bottom: 33px;
+    margin-left: auto;
+  }
+
+  &__logo {
+    filter: brightness(0) invert(1);
+  }
+
+  &__copyright {
+    text-align: center;
+  }
+
+  &__corporate-link {
+    margin-right: auto;
+    margin-bottom: $theme-site-footer-spacer;
+    margin-left: auto;
+  }
+
+  &__corporate-logo {
+    height: $theme-site-footer-corporate-logo-height;
+  }
+
+  &__tagline {
+    margin-bottom: 33px;
+    font-size: 22px;
+    font-style: italic;
+    color: $white;
+    text-align: center;
+  }
+}
+
+.site-footer-nav {
+  &__header {
+    @include skin-typography($style: "footer-header-1");
+    margin-bottom: 8px;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  &__item {
+    @include skin-typography($style: "footer-text");
+    margin-bottom: 8px;
+  }
+
+  &__link {
+    color: $gray-100;
+    &:hover {
+      color: $gray-100;
+    }
+  }
+}
+
+.site-footer-newsletter {
+  padding-right: 20px;
+  &__header {
+    @include skin-typography($style: "footer-header-1");
+    margin-bottom: 8px;
+  }
+
+  &__description {
+    @include skin-typography($style: "footer-text");
+    margin-bottom: 16px;
+  }
+
+  label {
+    color: $white;
+  }
+}
+
+.breadcrumbs {
+  &--site-footer {
+    margin-bottom: $theme-site-footer-spacer;
+    text-transform: none;
+
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      font-size: $theme-site-footer-font-size;
+    }
+
+    .breadcrumb {
+      justify-content: center;
+      padding: 0;
+      background-color: transparent;
+    }
+
+    a {
+      color: $global-site-footer-color;
+      &:hover {
+        color: $global-site-footer-color;
+      }
+    }
+
+    .breadcrumb-item + .breadcrumb-item {
+      &::before {
+        color: $global-site-footer-color;
+      }
+    }
+  }
+}
+
+.social-follow {
+  $self: &;
+  &--site-footer {
+    #{ $self } {
+      &__header {
+        color: skin-typography-prop("footer-header-1", "color");
+      }
+
+      &__section {
+        // stylelint-disable-next-line
+        > .social-icon-link {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_site-menu.scss b/packages/marko-web-theme-monorail/scss/components/_site-menu.scss
new file mode 100644
index 000000000..7ebb213b3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_site-menu.scss
@@ -0,0 +1,212 @@
+.site-header {
+  position: static;
+  border-bottom: 1px solid $gray-400;
+}
+
+// prevents the page from scrolling when the nav is open
+// stylelint-disable-next-line
+body.site-menu--open {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.site-menu {
+  $self: &;
+  opacity: 1;
+
+  @media (min-width: $skin-desktop-menu-breakpoint) {
+    position: absolute;
+    bottom: auto;
+    background-color: $gray-100;
+    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+    transform: translateY(-#{$theme-site-navbar-menu-width});
+
+    &--open {
+      width: 100%;
+      transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+      transform: translateY(0);
+    }
+  }
+
+  &__contents-mobile {
+    width: 100%;
+    height: 100%;
+    padding: 24px;
+
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      display: none;
+    }
+  }
+
+  &__contents-desktop {
+    display: none;
+    max-width: $marko-web-document-container-max-width;
+    padding-top: 28px;
+    padding-right: $marko-web-page-wrapper-padding;
+    padding-bottom: 28px;
+    padding-left: $marko-web-page-wrapper-padding;
+    margin-right: auto;
+    margin-left: auto;
+
+    @media (min-width: $marko-web-document-container-max-width) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      display: block;
+    }
+  }
+
+  &__header {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  &__section {
+    background-color: transparent;
+    &--primary {
+      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
+      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;
+      border-bottom: 1px solid $gray-200;
+
+      @media (min-width: $skin-desktop-menu-breakpoint) {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-width: 0;
+      }
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-primary-header");
+          margin-bottom: 12px;
+        }
+        &__item {
+          @include skin-typography($style: "menu-item-primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            line-height: 1.22;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-primary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 8px;
+            padding-bottom: 8px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-primary", "font-weight");
+            color: skin-typography-link-prop("menu-item-primary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+
+    &--secondary {
+      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
+      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;
+
+      @media (min-width: $skin-desktop-menu-breakpoint) {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-secondary-header");
+          margin-bottom: 6px;
+        }
+
+        &__item {
+          @include skin-typography($style: "menu-item-secondary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            font-weight: $font-weight-normal;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 10px;
+            padding-bottom: 10px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
+            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+
+    &--search {
+      padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;
+
+      .input-group {
+        .form-control {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .btn {
+          padding-right: 18px;
+          padding-left: 18px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+    &--user {
+      padding-top: 0;
+      padding-bottom: 4px;
+      margin-bottom: 12px;
+      border-bottom: 1px solid $gray-200;
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-secondary-header");
+          background-color: transparent;
+          margin-bottom: 6px;
+        }
+
+        &__item {
+          @include skin-typography($style: "menu-item-secondary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            font-weight: $font-weight-normal;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 10px;
+            padding-bottom: 10px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
+            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+  }
+}
+
+.social-follow {
+  $self: &;
+
+  &--site-menu {
+    padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;
+    border-bottom: 1px solid $gray-200;
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      border-width: 0;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_site-navbar-b.scss b/packages/marko-web-theme-monorail/scss/components/_site-navbar-b.scss
new file mode 100644
index 000000000..e772f94cd
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_site-navbar-b.scss
@@ -0,0 +1,127 @@
+@if $navbarStyle == "navbar-b" {
+  .site-navbar {
+    $self: &;
+    &__container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: $marko-web-document-container-max-width;
+      @include media-breakpoint-up(xl, $grid-breakpoints) {
+        max-width: $marko-web-document-container-max-width;
+      }
+    }
+    &__logo {
+      filter: none;
+    }
+    &__brand {
+      margin: 0;
+    }
+    &--top {
+      width: 100%;
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        height: 58px;
+      }
+      background-color: $theme-site-navbar-secondary-bg-color;
+      #{ $self } {
+        &__container {
+          height: $theme-site-navbar-logo-height + 30px;
+          @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            height: $theme-site-navbar-logo-height-sm + 20px;
+          }
+        }
+        &__left {
+          align-self: flex-end;
+          padding-left: 0;
+          @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            display: none;
+          }
+        }
+        &__center {
+          display: flex;
+          @media (min-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            justify-content: center;
+          }
+        }
+        &__center.col-lg-6 {
+          justify-content: flex-start;
+          padding-left: 0;
+        }
+        &__right {
+          display: flex;
+          justify-content: flex-end;
+          @media (min-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+            padding-right: 0;
+          }
+          .btn,
+          #{ $self }__toggler {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            margin: 0 0 0 12px;
+            font-size: 1rem;
+            background-color: $gray-100;
+            border-radius: 4px;
+          }
+        }
+      }
+      .subscribe-box {
+        display: flex;
+        &--cover-image {
+          align-self: flex-end;
+        }
+        &--call-to-action {
+          align-self: center;
+          .btn-primary {
+            padding: 8px;
+            margin-left: 16px;
+            font-size: 12px;
+            text-transform: initial;
+          }
+          &:only-child {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: $theme-site-navbar-logo-height + 30px;
+            @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+              height: $theme-site-navbar-logo-height-sm + 20px;
+            }
+            .btn-primary {
+              @media (min-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    &--primary {
+      background-color: $theme-site-navbar-primary-bg-color;
+      border-top: 1px solid $gray-400;
+      #{ $self } {
+        &__link {
+          color: $theme-site-navbar-primary-link-color;
+          text-transform: initial;
+          &--active {
+            color: $theme-site-navbar-primary-link-active-color;
+            font-weight: 700;
+            text-decoration: none;
+            text-shadow: none;
+          }
+        }
+        &__items {
+          justify-content: space-between;
+        }
+      }
+      .site-navbar {
+        &__item {
+          flex-grow: unset;
+          padding-right: 0;
+          padding-left: 0;
+        }
+      }
+    }
+    .magazine-cover {
+      height: 78px;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_site-navbar.scss b/packages/marko-web-theme-monorail/scss/components/_site-navbar.scss
new file mode 100644
index 000000000..30e628f02
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_site-navbar.scss
@@ -0,0 +1,75 @@
+@if $navbarStyle == "navbar" {
+  .site-navbar {
+    $self: &;
+
+    &__container {
+      max-width: $marko-web-document-container-max-width;
+      @include media-breakpoint-up(xl, $grid-breakpoints) {
+        max-width: $marko-web-document-container-max-width;
+      }
+    }
+
+    &__brand {
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        // reduce padding on small logo
+        margin-right: $theme-site-navbar-brand-margin-x / 2;
+        margin-left: $theme-site-navbar-brand-margin-x / 2;
+      }
+    }
+
+    &__logo {
+      filter: none;
+    }
+
+    &__newsletter-toggler {
+      @include theme-toggle-button();
+      padding: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      @media (min-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+        margin-left: auto;
+      }
+
+      & > .marko-web-icon {
+        @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
+      }
+    }
+
+    &--secondary {
+      #{ $self } {
+        &__container {
+          @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+
+    &__items {
+      text-transform: none;
+
+      &--secondary {
+        @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+          display: none;
+        }
+        margin-top: auto;
+        margin-bottom: auto;
+
+        // set letter spacing per design
+        letter-spacing: .5px;
+
+        #{ $self } {
+          &__link {
+            padding-top: 0;
+
+            @media (max-width: map-get($theme-site-header-breakpoints, small-text-secondary)) {
+              padding-right: 8px;
+              padding-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss b/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss
new file mode 100644
index 000000000..5ec63dedc
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss
@@ -0,0 +1,443 @@
+@keyframes slideOutUpAndFade {
+  from {
+    max-height: 1000px;
+    opacity: 1;
+  }
+
+  to {
+    max-height: 0;
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+@keyframes slideInDownAndFade {
+  from {
+    max-height: 0;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  to {
+    max-height: 300px;
+    opacity: 1;
+  }
+}
+
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
+.site-newsletter-menu {
+  max-height: 0;
+
+  will-change: visibility, max-height;
+  visibility: hidden;
+  background: linear-gradient($gray-100, $white);
+
+  transition: max-height .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
+
+  &__container {
+    position: relative;
+    max-width: $marko-web-document-container-max-width;
+    padding-top: 30px;
+    padding-right: $marko-web-page-wrapper-padding;
+    padding-left: $marko-web-page-wrapper-padding;
+    margin-right: auto;
+    margin-left: auto;
+
+    @media (min-width: $marko-web-document-container-max-width) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding-top: 24px;
+    }
+
+    & .row {
+      position: relative;
+    }
+  }
+
+  &__form-wrapper {
+    padding-bottom: 30px;
+    @include media-breakpoint-down(sm) {
+      max-width: 450px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+
+  &__form-button {
+    @include skin-button("primary");
+  }
+
+  &__image-wrapper {
+    display: flex;
+  }
+
+  &__image {
+    width: 280px;
+    margin-top: auto;
+    margin-right: auto;
+    margin-left: auto;
+    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, .4));
+  }
+
+  &__name {
+    @include skin-typography($style: "section-header");
+    margin-bottom: 6px;
+    line-height: 1.25;
+    text-transform: none;
+  }
+
+  &__description {
+    @include skin-typography($style: "teaser-text-1");
+    margin-bottom: 16px;
+  }
+
+  &__privacy-policy {
+    @include skin-typography($style: "credit-disclaimer");
+    margin-top: 10px;
+    margin-bottom: 14px;
+
+    line-height: 1.428;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  &__form {
+    input {
+      max-width: 312px;
+    }
+  }
+
+  &__close-container {
+    right: 0;
+    display: flex;
+  }
+
+  &__close {
+    @include theme-toggle-button();
+    width: 25px;
+    height: 25px;
+    padding: 0;
+    margin-right: 0;
+    margin-left: auto;
+
+    > .marko-web-icon {
+      position: relative;
+      top: -1px;
+      @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
+    }
+  }
+
+  .newsletter-name {
+    font-weight: $font-weight-bold;
+  }
+
+  &--open {
+    max-height: 1000px;
+    visibility: visible;
+
+    transition: max-height .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+  }
+}
+
+.complete-newsletter-signup {
+  $self: &;
+
+  &__slide-out {
+    animation-name: slideOutUpAndFade;
+    animation-duration: 500ms;
+    animation-fill-mode: both;
+  }
+
+  &__slide-in {
+    animation-name: slideInDownAndFade;
+    animation-duration: 500ms;
+    animation-fill-mode: both;
+  }
+
+  &__card-header {
+    display: inline-flex;
+    align-items: center;
+    padding: 15px 17px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    background-color: $skin-newsletter-signup-bg-color;
+
+    @include media-breakpoint-up(md) {
+      font-size: 20px;
+    }
+  }
+
+  &__card-body {
+    max-width: 652px;
+    overflow: hidden;
+  }
+
+  &__check-icon {
+    margin-right: 12px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: #fff;
+    }
+  }
+
+  &__header {
+    margin-bottom: 19px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.14;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 24px;
+    }
+  }
+
+  &__thank-you-header {
+    margin-bottom: 12px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.14;
+  }
+
+  &__about-you {
+    margin-bottom: 6px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.14;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 12px;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 13px;
+
+    @include media-breakpoint-up(md) {
+      flex-direction: row;
+      margin-bottom: 36px;
+    }
+  }
+
+  &__form-group {
+    margin-bottom: 19px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+
+    &--company-name {
+      max-width: 250px;
+      @include media-breakpoint-up(md) {
+        margin-right: 12px;
+      }
+    }
+    &--primary-role {
+      max-width: 250px;
+      @include media-breakpoint-up(md) {
+        max-width: 238px;
+        margin-right: 12px;
+      }
+    }
+    &--postal-code {
+      max-width: 140px;
+    }
+  }
+
+  &__form-label {
+    margin-bottom: 9px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.13;
+  }
+
+  &__form-button {
+    @include skin-button("primary");
+  }
+
+  &__subscriptions-header {
+    margin-bottom: 12px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.14;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 15px;
+    }
+  }
+
+  &__subscriptions {
+    margin-bottom: 15px;
+  }
+
+  &__signup {
+    display: flex;
+    flex-direction: column-reverse;
+
+    @include media-breakpoint-up(md) {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .btn {
+      white-space: nowrap;
+    }
+  }
+
+  &__privacy-policy {
+    @include skin-typography($style: "credit-disclaimer");
+    margin-bottom: 15px;
+
+    @include media-breakpoint-up(md) {
+      max-width: 100%;
+      margin-bottom: 0;
+      margin-left: 17px;
+    }
+  }
+
+  &--as-card {
+    background-color: $gray-100;
+    border-radius: 4px;
+
+    #{ $self } {
+      &__card-header {
+        display: flex;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+      &__card-body {
+        padding-right: 15px;
+        padding-bottom: 24px;
+        padding-left: 15px;
+      }
+    }
+  }
+
+  &--in-pushdown {
+    padding-bottom: 24px;
+    margin-left: 0;
+    @include media-breakpoint-up(md) {
+      padding-bottom: 30px;
+      margin-left: 64px;
+    }
+  }
+}
+
+.newsletter-checkbox-group {
+  &__name {
+    display: inline-block;
+    margin-bottom: 2px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.22;
+  }
+
+  &__description {
+    display: inline-block;
+    max-width: 250px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.38;
+  }
+
+  .custom-control-label {
+    margin-bottom: 9px;
+  }
+}
+
+.inline-newsletter-form {
+  margin-bottom: 24px;
+}
+
+.inline-newsletter-form-step1 {
+  display: flex;
+  align-items: center;
+  padding: 22px 16px;
+  background-color: $skin-newsletter-signup-bg-color;
+  border-radius: 4px;
+
+  &__left-col {
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+      width: 100px;
+      margin-top: auto;
+      margin-right: 20px;
+      margin-bottom: auto;
+    }
+
+    img {
+      width: 100px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 8px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.14;
+    color: #fff;
+  }
+
+  &__description {
+    max-width: 525px;
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.38;
+    color: #fff;
+  }
+
+  &__form {
+    display: flex;
+    max-width: 435px;
+  }
+
+  &__email-group {
+    flex-grow: 1;
+  }
+
+  &__email-input {
+    background-color: #fff;
+    border-color: $skin-newsletter-signup-bg-color;
+    &:hover:not(:focus) {
+      border-color: $skin-newsletter-signup-inline-btn-color;
+    }
+    &:focus {
+      border-color: $skin-newsletter-signup-inline-btn-color;
+      box-shadow: 0 0 0 1px $skin-newsletter-signup-inline-btn-color;
+    }
+  }
+
+  &__form-button {
+    margin-left: 10px;
+    @include skin-button("inline-newsletter-signup");
+  }
+
+  &__privacy-policy {
+    max-width: 525px;
+    margin-top: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.28;
+    color: $gray-100;
+
+    a {
+      color: $gray-100;
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_spec-guide.scss b/packages/marko-web-theme-monorail/scss/components/_spec-guide.scss
new file mode 100644
index 000000000..e34d488d2
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_spec-guide.scss
@@ -0,0 +1,37 @@
+$common-spec-guide-container-max-width: 1400px;
+
+// Require Bootstrap tables and input groups
+@import "../../node_modules/bootstrap/scss/tables";
+// @import "../../node_modules/bootstrap/scss/input-group";
+
+
+.spec-guide-container {
+  position: relative;
+  width: 100%;
+  padding-right: $marko-web-document-container-gutter;
+  padding-left: $marko-web-document-container-gutter;
+  margin-right: auto;
+  margin-left: auto;
+
+  @media (min-width: $common-spec-guide-container-max-width) {
+    max-width: $common-spec-guide-container-max-width;
+  }
+
+  & .table {
+    &.small {
+      font-size: 70%;
+    }
+  }
+}
+
+.spec-guide-button {
+  @extend .btn;
+  @extend .btn-block;
+}
+
+.spec-guide-tagline {
+  font-size: 18px;
+  font-weight: $font-weight-bold;
+  text-align: center;
+  text-transform: uppercase;
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/_sponsor-logo.scss b/packages/marko-web-theme-monorail/scss/components/_sponsor-logo.scss
new file mode 100644
index 000000000..6fdc097b3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/_sponsor-logo.scss
@@ -0,0 +1,31 @@
+.sponsor-logo {
+  $self: &;
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+
+  &--content-page {
+    margin-top: 0;
+  }
+
+  &--section-page {
+    margin-bottom: 30px;
+    @media (max-width: 970px) {
+      justify-content: center;
+      margin-top: 0;
+      margin-bottom: 24px;
+    }
+  }
+
+  &__label {
+    margin-right: 8px;
+    @include skin-typography($style: "pib-partners");
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  &__logo {
+    max-width: 100%;
+    height: 50px;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_callout-cards.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_callout-cards.scss
new file mode 100644
index 000000000..d07b9f96d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_callout-cards.scss
@@ -0,0 +1,19 @@
+.callout-cards {
+  &__row {
+    @include make-row();
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(6);
+    }
+
+    &--last {
+      margin-top: 30px;
+      @include media-breakpoint-up(md) {
+        margin-top: 0;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_hero-card.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_hero-card.scss
new file mode 100644
index 000000000..e30ef85e9
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_hero-card.scss
@@ -0,0 +1,59 @@
+.hero-card {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 4px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+  .card-deck-flow {
+    .node {
+      padding: 0;
+      &__title {
+        font-weight: $font-weight-bold;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+    &--hero {
+      .node {
+        @include media-breakpoint-up(md) {
+          &__title {
+            @include skin-typography($style: "header-2", $link-style: "primary");
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_latest-podcast.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_latest-podcast.scss
new file mode 100644
index 000000000..9873b33f3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_latest-podcast.scss
@@ -0,0 +1,69 @@
+.latest-podcast {
+  $padding: 24px;
+  $button-spacer: 8px;
+
+  height: 100%;
+  padding: $padding;
+  padding-bottom: $padding - $button-spacer;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 24px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__btn {
+    margin-right: $button-spacer;
+    margin-bottom: $button-spacer;
+  }
+}
+
+.marko-web-icon {
+  $self: &;
+  &--latest-podcast {
+    margin-right: 5px;
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: map-deep-get($typography, "section-header-small", "color");
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--latest-podcast {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 20px;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__header {
+        margin-bottom: 10px;
+      }
+
+      &__header-left {
+        @include skin-typography($style: "slug-small");
+        color: $gray-700;
+      }
+
+      &__contents--body {
+        margin-bottom: 0;
+      }
+
+      &__text--more-episodes {
+        @include skin-typography($style: "view-more", $link-style: "primary");
+      }
+
+      &__footer-left--buttons {
+        max-width: 85%;
+        margin-top: 24px;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_latest-products-feed.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_latest-products-feed.scss
new file mode 100644
index 000000000..55be0840d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_latest-products-feed.scss
@@ -0,0 +1,97 @@
+.product-feed-content-node {
+  $image-size: 112px;
+  $image-desktop-width: 176px;
+  $image-desktop-height: 176px;
+
+  display: flex;
+  width: 100%;
+
+  padding: 16px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__contents {
+    width: 100%;
+  }
+
+  &__body {
+    @include media-breakpoint-up(md) {
+      max-width: 700px;
+    }
+  }
+
+  &__image-wrapper {
+    width: $image-size;
+    min-width: $image-size;
+    height: $image-size;
+    margin-left: 15px;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      min-width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__image {
+    width: $image-size;
+    height: $image-size;
+    object-fit: cover;
+    object-position: left;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__website-section-name {
+    margin-bottom: 6px;
+    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-short-name {
+    width: 100%;
+    @include skin-typography($style: "header-1.5", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-teaser {
+    display: none;
+    margin-top: 10px;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  $node-spacer: 12px;
+  &--latest-products-feed {
+    #{ $self } {
+      &__node {
+        padding-top: $node-spacer;
+        padding-bottom: $node-spacer;
+        border-bottom: none;
+
+        &:first-child {
+          padding-top: 0;
+        }
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+
+      &__node--ad {
+        @media (min-width: 980px) {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_more-products.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_more-products.scss
new file mode 100644
index 000000000..af8a9ddb3
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_more-products.scss
@@ -0,0 +1,35 @@
+.more-products {
+  &__header-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+
+  &__header {
+    margin-bottom: 6px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+  }
+}
+
+.node {
+  $self: &;
+
+  &--more-products {
+    padding: 16px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary", $max-lines: 4);
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_most-popular.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_most-popular.scss
new file mode 100644
index 000000000..32685d65b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_most-popular.scss
@@ -0,0 +1,70 @@
+$most-popular-position-size: 40px;
+
+.card-deck-flow {
+  $self: &;
+  &--most-popular {
+    #{ $self } {
+      &__node {
+        margin-bottom: 20px;
+        @include media-breakpoint-up(md) {
+          margin-top: 30px;
+          margin-bottom: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.most-popular {
+  &__header {
+    padding-bottom: 10px;
+    margin-bottom: 24px;
+
+    border-bottom: 1px solid $gray-700;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+    @include skin-typography($style: "section-header");
+  }
+
+  &__card-wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__position {
+    $font-size: 30px;
+    position: absolute;
+    width: $most-popular-position-size;
+    height: $most-popular-position-size;
+    padding-top: 1px;
+    font-family: $skin-font-family-primary;
+    font-size: $font-size;
+    font-weight: $font-weight-bold;
+    line-height: 1;
+    color: $gray-800;
+    text-align: center;
+    border: 2px solid $gray-800;
+  }
+}
+
+.node {
+  $self: &;
+  &--most-popular {
+    margin-left: $most-popular-position-size + 20px;
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+        margin-bottom: 1px;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner-large.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner-large.scss
new file mode 100644
index 000000000..fc7d6fa95
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner-large.scss
@@ -0,0 +1,51 @@
+.newsletter-signup-banner-large {
+  display: block;
+  flex-direction: column;
+  padding: 16px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__form {
+    display: flex;
+    justify-content: center;
+    input {
+      display: inline;
+      max-width: 312px;
+      margin-right: $block-spacer / 2;
+    }
+  }
+
+  &__name {
+    @include skin-typography($style: "header-1.5");
+    margin-bottom: 6px;
+    text-align: center;
+  }
+
+  &__description {
+    @include skin-typography($style: "teaser-text-1");
+    max-width: 520px;
+    margin-right: auto;
+    margin-bottom: 14px;
+    margin-left: auto;
+    text-align: center;
+  }
+
+  &__button {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @media (max-width: 530px) {
+    &__name,
+    &__description {
+      text-align: left;
+    }
+
+    &__form {
+      display: block;
+      input {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner.scss
new file mode 100644
index 000000000..40e73dcdb
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_newsletter-signup-banner.scss
@@ -0,0 +1,40 @@
+.newsletter-signup-banner {
+  display: block;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 730px;
+  padding: 16px;
+  margin-top: 16px;
+  margin-bottom: 38px;
+  background-color: $gray-100;
+  border-radius: 4px;
+  @include skin-typography($style: "teaser-text-1");
+
+  &__form {
+    display: flex;
+    input {
+      display: inline;
+      max-width: 312px;
+      margin-right: $block-spacer / 2;
+    }
+  }
+
+  &__button-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .newsletter-name {
+    font-weight: $font-weight-bold;
+  }
+
+  @media (max-width: 530px) {
+    &__form {
+      display: block;
+      input {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_node-author.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_node-author.scss
new file mode 100644
index 000000000..4dda423a4
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_node-author.scss
@@ -0,0 +1,27 @@
+.node {
+  $self: &;
+  &--author {
+    padding-top: 16px;
+    background-color: transparent;
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "author-name-list", $link-style: "primary");
+        margin-bottom: 5px;
+      }
+
+      &__text {
+        @include skin-typography($style: "author-title-list");
+        text-transform: capitalize;
+      }
+
+      &__image {
+        border-radius: 50px;
+      }
+
+      &__image-wrapper + #{ $self}__body {
+        margin-left: 10px;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_opinion.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_opinion.scss
new file mode 100644
index 000000000..b66bccdfe
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_opinion.scss
@@ -0,0 +1,76 @@
+.opinion {
+  background-color: $white;
+
+  @include media-breakpoint-up(md) {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    background-color: $gray-100;
+  }
+
+  &__header {
+    padding-bottom: 10px;
+    margin-right: 10px;
+    margin-bottom: 24px;
+    margin-left: 10px;
+
+    border-bottom: 1px solid $gray-700;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    a {
+      @include skin-typography($style: "section-header");
+    }
+  }
+}
+
+.node {
+  $self: &;
+  &--opinion {
+    padding-bottom: 16px;
+    background-color: $white;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      background-color: $gray-100;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--opinion {
+    margin-right: 0;
+    margin-left: 0;
+
+    background-color: $white;
+
+    @include media-breakpoint-up(md) {
+      background-color: $gray-100;
+    }
+
+    #{ $self } {
+      &__node {
+        margin-bottom: 16px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss
new file mode 100644
index 000000000..8e6435d52
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss
@@ -0,0 +1,92 @@
+$marko-web-primary-image-margin: 1.5rem !default;
+
+.primary-image {
+  $self: &;
+  margin-bottom: $marko-web-primary-image-margin;
+  clear: both;
+
+  &__image-caption {
+    @include theme-media-caption();
+  }
+
+  &__image-credit {
+    @include theme-media-credit();
+  }
+
+  // > :last-child:not(#{ $self }__wrapper) {
+  //   border-bottom: 1px solid #ccc;
+  // }
+
+  &--fluid {
+    #{ $self } {
+      &__image {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  &--aligned {
+    max-width: $skin-aligned-image-width;
+    margin-bottom: 0;
+
+    @include media-breakpoint-down(xs) {
+      max-width: 100%;
+      margin: $skin-aligned-body-image-spacer auto;
+
+      #{ $self } {
+        &__image {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  &--aligned-right {
+    float: right;
+    margin-left: $skin-aligned-body-image-spacer;
+    @include media-breakpoint-down(xs) {
+      float: none;
+      margin-left: auto;
+    }
+  }
+
+  &--aligned-left {
+    float: left;
+    margin-right: $skin-aligned-body-image-spacer;
+    @include media-breakpoint-down(xs) {
+      float: none;
+      margin-right: auto;
+    }
+  }
+
+  &--aligned-center {
+    @media (min-width: 900px) {
+      $margin: ($skin-content-primary-image-max-width - $skin-content-body-max-width) / 2 * -1;
+      position: relative;
+      width: $skin-content-primary-image-max-width;
+      margin-left: $margin;
+    }
+  }
+
+  &--forced-left {
+    margin-bottom: 1.5rem;
+  }
+
+  @each $ar in $marko-web-node-image-aspect-ratios {
+    $x: nth($ar, 1);
+    $y: nth($ar, 2);
+
+    &--fluid-#{$x}by#{$y} {
+      #{ $self } {
+        &__wrapper {
+          @include marko-web-node-fluid-image($x, $y);
+        }
+        &__image {
+          @include marko-web-node-fluid-image-item();
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_products.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_products.scss
new file mode 100644
index 000000000..b7c42dd70
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_products.scss
@@ -0,0 +1,71 @@
+.products-block {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 4px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--products-block {
+    #{ $self } {
+      &__node {
+        margin-bottom: 20px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--products-block {
+    padding: 16px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary", $max-lines: 4);
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_promo-card.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_promo-card.scss
new file mode 100644
index 000000000..61980fb67
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_promo-card.scss
@@ -0,0 +1,67 @@
+.promo-card {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 16px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__logo {
+    height: 48px;
+  }
+}
+
+.node {
+  $self: &;
+
+  &--promo-card {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__contents--body {
+        margin-bottom: 24px;
+      }
+
+      &__text--teaser {
+        margin-top: 8px;
+        margin-bottom: 0;
+        @include skin-typography($style: "small-body-text", $link-style: "primary", $max-lines: 10);
+      }
+    }
+  }
+}
+
+.pib-page-card {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__title {
+    margin-bottom: 8px;
+    @include skin-typography($style: "header-2");
+  }
+
+  &__description {
+    margin-bottom: 16px;
+    @include skin-typography($style: "small-body-text");
+  }
+
+  &__inner-wrapper {
+    display: flex;
+  }
+
+  &__issue-cover {
+    align-self: flex-start;
+    width: 120px;
+    margin-left: 24px;
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_read-next.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_read-next.scss
new file mode 100644
index 000000000..8975ca797
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_read-next.scss
@@ -0,0 +1,53 @@
+.node {
+  $self: &;
+
+  &--read-next {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+
+      &__image-wrapper {
+        display: none;
+        @include media-breakpoint-up(md) {
+          display: block;
+        }
+      }
+
+      &__image-wrapper + #{$self}__body {
+        margin-left: 0;
+        @include media-breakpoint-up(md) {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.read-next {
+  $self: &;
+  margin-top: 1rem;
+  margin-bottom: 3rem;
+  &__header {
+    margin-bottom: 16px;
+    @include skin-typography($style: "section-header-xs");
+  }
+  &--featured {
+    #{ $self } {
+      &__footer {
+        text-transform: uppercase;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        border-top: 1px solid $gray-200;
+      }
+    }
+    .node__image-wrapper+.node__body {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_related-stories.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_related-stories.scss
new file mode 100644
index 000000000..c7baaeb61
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_related-stories.scss
@@ -0,0 +1,102 @@
+.node {
+  $self: &;
+
+  &--related-stories {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-top: 16px;
+      padding-bottom: 0;
+      border-bottom: none;
+      @include marko-web-node-list-border(border-top);
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+      border-top: none;
+    }
+
+    #{ $self } {
+      &__title {
+        width: 100%;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__contents {
+        flex-direction: row-reverse;
+        @include media-breakpoint-up(lg) {
+          flex-direction: column;
+        }
+      }
+
+      $image-size: 112px;
+      &__node-image {
+        width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &__image-inner-wrapper--fluid-3by2 {
+        width: $image-size;
+        min-width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          min-width: 100%;
+          height: auto;
+        }
+
+        &::before {
+          // use bp-down (max-width) instead, since the padding is a calculated % at all widths by default
+          @include media-breakpoint-down(md) {
+            padding-top: 0;
+          }
+        }
+      }
+
+      &__image-wrapper + #{ $self }__body {
+        margin-top: 0;
+        margin-right: 15px;
+        @include media-breakpoint-up(lg) {
+          margin-top: 14px;
+          margin-right: 0;
+        }
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.related-stories {
+  &__header {
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    @include skin-typography($style: "section-header");
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--related-stories {
+    #{ $self } {
+      &__node {
+        margin-bottom: 16px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_resource-library.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_resource-library.scss
new file mode 100644
index 000000000..becbae349
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_resource-library.scss
@@ -0,0 +1,79 @@
+.resource-library {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 24px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+
+  &__deck-wrapper {
+    margin-right: -#{$marko-web-page-wrapper-padding};
+    margin-left: -#{$marko-web-page-wrapper-padding};
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 1000px;
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include make-col(3);
+  }
+}
+
+.node {
+  $self: &;
+
+  &--resource-library {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "overlay-header-2", $link-style: "primary");
+      }
+
+      &__body--overlay {
+        padding: 16px;
+      }
+
+      &__contents--body {
+        padding: 16px 10px;
+        text-align: center;
+        background-color: rgba($gray-900, .9);
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck-featured.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck-featured.scss
new file mode 100644
index 000000000..3d2e53bde
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck-featured.scss
@@ -0,0 +1,22 @@
+.section-card-deck-featured {
+  &__title {
+    padding-top: 20px;
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+}
+
+.node {
+  $self: &;
+  &--section-card-deck-featured {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-1.5", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        @include skin-typography($style: "teaser-text-1", $link-style: "primary");
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck.scss
new file mode 100644
index 000000000..8ecf9f0ef
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-deck.scss
@@ -0,0 +1,82 @@
+.section-card-deck {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 24px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+
+  &__deck-wrapper {
+    margin-right: -#{$marko-web-page-wrapper-padding};
+    margin-left: -#{$marko-web-page-wrapper-padding};
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 750px;
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include make-col(4);
+  }
+}
+
+.node {
+  $self: &;
+
+  &__website-section-name {
+    margin-bottom: 6px;
+    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &--section-card-deck {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__image-wrapper + #{$self}__body {
+        margin-top: 12px;
+
+        @include media-breakpoint-up(md) {
+          margin-top: 14px;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-list.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-list.scss
new file mode 100644
index 000000000..f4078b908
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-card-list.scss
@@ -0,0 +1,81 @@
+.section-card-list {
+  &__row {
+    @include make-row();
+    margin-top: 24px;
+    @include media-breakpoint-up(lg) {
+      margin-top: 30px;
+    }
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+  }
+
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description {
+    margin-top: 6px;
+    @include skin-typography($style: "article-text");
+  }
+
+  &__btn-wrapper {
+    padding-top: 24px;
+    margin-top: 16px;
+    @include marko-web-node-list-border($property: border-top);
+  }
+}
+
+.node {
+  $self: &;
+
+  &--section-card-list-hero-image {
+    margin-bottom: 16px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--section-card-list-hero {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        margin-top: 10px;
+        @include skin-typography($style: "teaser-text-1", $link-style: "primary", $max-lines: 4);
+      }
+    }
+  }
+
+  &--section-card-list-item {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.node-list {
+  &--section-card-list {
+    padding-top: 16px;
+    @include media-breakpoint-up(md) {
+      padding-top: 0;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
new file mode 100644
index 000000000..09b2eee33
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
@@ -0,0 +1,160 @@
+.section-feed-content-node {
+  $self: &;
+
+  $image-size: 112px;
+  $image-desktop-width: 250px;
+  $image-desktop-height: 167px;
+
+  display: flex;
+  width: 100%;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row-reverse;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  &__sponsored-by {
+    margin-bottom: 6px;
+    @include skin-typography($style: "sponsored-by");
+  }
+
+  &__contents {
+    width: 100%;
+  }
+
+  &__body {
+    @include media-breakpoint-up(md) {
+      max-width: 700px;
+    }
+  }
+
+  &__image-wrapper {
+    width: $image-size;
+    min-width: $image-size;
+    height: $image-size;
+    margin-left: 15px;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      min-width: $image-desktop-width;
+      height: $image-desktop-height;
+      margin-right: 15px;
+      margin-left: 0;
+    }
+  }
+
+  &__image {
+    width: $image-size;
+    height: $image-size;
+    object-fit: cover;
+    object-position: left;
+    border: 1px solid rgba(239, 239, 239, .9);
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__website-section-name {
+    margin-bottom: 6px;
+    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-short-name {
+    width: 100%;
+    @include skin-typography($style: "header-1.5", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-teaser {
+    display: none;
+    margin-top: 10px;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__content-event-dates {
+    margin-top: 10px;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+  }
+  &__content-start-date {
+    &::before {
+      font-weight: $font-weight-bold;
+      content: "Date: ";
+    }
+  }
+
+  .btn-primary {
+    margin-top: 10px;
+  }
+
+  &__content-published {
+    margin-top: 10px;
+    @include skin-typography($style: "date");
+  }
+
+  &--full-width-native-ad {
+    padding: 24px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__content-teaser {
+        display: block;
+      }
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  &--section-feed {
+    #{ $self } {
+      &__node {
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-bottom: none;
+        @include marko-web-node-list-border(border-bottom);
+        @include media-breakpoint-up(md) {
+          padding-top: 15px;
+          padding-bottom: 15px;
+          border-bottom: none;
+        }
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 0;
+        @include marko-web-node-list-border(border-top);
+        @include media-breakpoint-up(md) {
+          border-top: none;
+        }
+      }
+    }
+  }
+  &--company-related-feed,
+  &--company-categories-feed {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "section-header");
+        padding-bottom: 10px;
+        margin-top: 20px;
+        font-size: 26px;
+        border-bottom: 1px solid $gray-700;
+      }
+    }
+    .section-feed-content-node {
+      @include media-breakpoint-up(md) {
+        flex-direction: row;
+      }
+    }
+  }
+  &--company-categories-feed {
+    #{ $self } {
+      &__node {
+        padding-top: .5rem;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-list.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-list.scss
new file mode 100644
index 000000000..558d999e9
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-list.scss
@@ -0,0 +1,80 @@
+.node-list {
+  $self: &;
+  &--section-list {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "section-header-small", $link-style: "primary");
+        margin-bottom: 16px;
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 16px;
+      }
+    }
+  }
+
+  &__footer {
+    &--view-more {
+      @include skin-typography($style: "view-more", $link-style: "primary");
+    }
+  }
+}
+
+.node {
+  $self: &;
+  &--section-list-card {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+  &--section-cards {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+  &--section-list-item {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.section-list-deck {
+  &__row {
+    @include make-row();
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+      margin-bottom: 0;
+    }
+    margin-bottom: 30px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_social-follow.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_social-follow.scss
new file mode 100644
index 000000000..9dff03ef7
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_social-follow.scss
@@ -0,0 +1,28 @@
+.social-follow {
+  $self: &;
+  &__header {
+    margin-bottom: 12px;
+    @include skin-typography($style: "social-follow-header");
+  }
+
+  &__section {
+    > .social-icon-link {
+      margin-right: 15px;
+    }
+  }
+}
+
+.marko-web-icon {
+  &--social-follow {
+    svg {
+      width: 36px;
+      height: 36px;
+    }
+    @media (max-width: 1080px) {
+      svg {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories-menu.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories-menu.scss
new file mode 100644
index 000000000..875533d1b
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories-menu.scss
@@ -0,0 +1,38 @@
+.node {
+  $self: &;
+
+  &--top-stories-menu {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+        margin-bottom: 1px;
+      }
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  &--top-stories-menu {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "menu-item-primary-header");
+        margin-bottom: 12px;
+      }
+
+      &__nodes {
+        padding-top: 0;
+      }
+
+      &__node {
+        padding-top: 8px;
+        padding-bottom: 16px;
+        border-bottom: none;
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories.scss
new file mode 100644
index 000000000..459a45de2
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_top-stories.scss
@@ -0,0 +1,179 @@
+.top-stories {
+  &__header {
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    @include skin-typography($style: "section-header");
+  }
+
+  &__row {
+    @include make-row();
+    margin-bottom: 16px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__col {
+    @include make-col-ready();
+
+    &--hero {
+      @include media-breakpoint-up(md) {
+        @include make-col(6);
+      }
+      @include media-breakpoint-up(lg) {
+        @include make-col(7);
+      }
+    }
+
+    &--list {
+      @include media-breakpoint-up(md) {
+        @include make-col(6);
+      }
+      @include media-breakpoint-up(lg) {
+        @include make-col(5);
+      }
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--top-stories-hero-image {
+    margin-bottom: 14px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--top-stories-hero {
+    padding-bottom: 20px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__header {
+        @include media-breakpoint-up(md) {
+          margin-bottom: 12px;
+        }
+      }
+
+      &__title {
+        width: 100%;
+        margin-bottom: 0;
+        @include skin-typography($style: "header-1", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        margin-top: 10px;
+        margin-bottom: 0;
+        @include media-breakpoint-up(lg) {
+          margin-top: 16px;
+        }
+        @include skin-typography($style: "article-text", $link-style: "primary");
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+
+  &--top-stories-card {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-top: 16px;
+      padding-bottom: 0;
+      border-bottom: none;
+      @include marko-web-node-list-border(border-top);
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+      border-top: none;
+    }
+
+    #{ $self } {
+      &__title {
+        width: 100%;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__contents {
+        flex-direction: row-reverse;
+        @include media-breakpoint-up(lg) {
+          flex-direction: column;
+        }
+      }
+
+      $image-size: 112px;
+      &__node-image {
+        width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &__image-inner-wrapper--fluid-3by2 {
+        width: $image-size;
+        min-width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          min-width: 100%;
+          height: auto;
+        }
+
+        &::before {
+          // use bp-down (max-width) instead, since the padding is a calculated % at all widths by default
+          @include media-breakpoint-down(md) {
+            padding-top: 0;
+          }
+        }
+      }
+
+      &__image-wrapper + #{ $self }__body {
+        margin-top: 0;
+        margin-right: 15px;
+        @include media-breakpoint-up(lg) {
+          margin-top: 14px;
+          margin-right: 0;
+        }
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--top-stories {
+    #{ $self } {
+      &__node {
+        @include media-breakpoint-up(md) {
+          margin-top: 16px;
+          margin-bottom: 0;
+        }
+        @include media-breakpoint-up(lg) {
+          margin-top: 20px;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_white-papers.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_white-papers.scss
new file mode 100644
index 000000000..69a3718ce
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_white-papers.scss
@@ -0,0 +1,60 @@
+.white-papers {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 24px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__download-btn {
+    margin-right: 16px;
+  }
+}
+
+.marko-web-icon {
+  $self: &;
+  &--white-papers {
+    margin-right: 5px;
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: map-deep-get($typography, "section-header-small", "color");
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--white-papers {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__header {
+        margin-bottom: 10px;
+      }
+
+      &__contents--body {
+        margin-bottom: 24px;
+      }
+
+      &__text--teaser {
+        margin-top: 8px;
+        margin-bottom: 0;
+        @include skin-typography($style: "small-body-text", $link-style: "primary");
+      }
+
+      &__header-left--company-name {
+        @include skin-typography($style: "sponsored-by");
+      }
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/core.scss b/packages/marko-web-theme-monorail/scss/core.scss
new file mode 100644
index 000000000..96a27b96d
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/core.scss
@@ -0,0 +1,59 @@
+@import "functions";
+@import "variables";
+
+@import "../../node_modules/@parameter1/base-cms-marko-web-theme-default/scss/theme";
+@import "../../node_modules/bootstrap/scss/spinners";
+
+@import "../../node_modules/@parameter1/base-cms-marko-web-social-sharing/scss/buttons";
+@import "../../node_modules/bootstrap/scss/input-group";
+@import "../../node_modules/@parameter1/base-cms-marko-web-html-sitemap/scss/index";
+
+// skin mixins
+@import "./mixins";
+
+// components
+@import "../components/breadcrumbs/scss/breadcrumbs";
+
+// theme components
+@import "./components/ads";
+@import "./components/author-node";
+@import "./components/author-published-node";
+@import "./components/comments";
+@import "./components/content-page";
+@import "./components/page-wrapper";
+@import "./components/pagination-controls";
+@import "./components/search-page";
+@import "./components/site-footer";
+@import "./components/site-menu";
+@import "./components/site-navbar";
+@import "./components/site-navbar-b";
+@import "./components/site-newsletter-menu";
+@import "./components/spec-guide";
+@import "./components/sponsor-logo";
+
+// theme component blocks
+@import "./components/blocks/callout-cards";
+@import "./components/blocks/hero-card";
+@import "./components/blocks/latest-podcast";
+@import "./components/blocks/latest-products-feed";
+@import "./components/blocks/more-products";
+@import "./components/blocks/most-popular";
+@import "./components/blocks/newsletter-signup-banner";
+@import "./components/blocks/newsletter-signup-banner-large";
+@import "./components/blocks/node-author";
+@import "./components/blocks/opinion";
+@import "./components/blocks/primary-image";
+@import "./components/blocks/products";
+@import "./components/blocks/promo-card";
+@import "./components/blocks/read-next";
+@import "./components/blocks/related-stories";
+@import "./components/blocks/resource-library";
+@import "./components/blocks/section-card-deck-featured";
+@import "./components/blocks/section-card-deck";
+@import "./components/blocks/section-card-list";
+@import "./components/blocks/section-feed";
+@import "./components/blocks/section-list";
+@import "./components/blocks/social-follow";
+@import "./components/blocks/top-stories";
+@import "./components/blocks/top-stories-menu";
+@import "./components/blocks/white-papers";
diff --git a/packages/marko-web-theme-monorail/scss/variables/_buttons.scss b/packages/marko-web-theme-monorail/scss/variables/_buttons.scss
new file mode 100644
index 000000000..b8ce7056c
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/variables/_buttons.scss
@@ -0,0 +1,66 @@
+$skin-buttons: () !default;
+$skin-buttons: non-destructive-map-merge(
+  (
+    "primary": (
+      "background-color": $primary,
+      "border-radius": 4px,
+      "color": $white,
+      "hover-background-color": $skin-primary-hover-color,
+      "hover-color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 16px,
+      "letter-spacing": .8px,
+      "line-height": 1.25,
+      "padding": 12px 27px,
+      "text-transform": uppercase,
+    ),
+    "secondary": (
+      "background-color": transparent,
+      "border": 2px solid $gray-700,
+      "border-radius": 4px,
+      "color": $gray-700,
+      "hover-background-color": transparent,
+      "hover-border": 2px solid $skin-primary-hover-color,
+      "hover-color": $skin-primary-hover-color,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 16px,
+      "letter-spacing": .8px,
+      "line-height": 1.25,
+      "padding": 10px 24px,
+      "text-transform": uppercase,
+    ),
+    "light": (
+      "background-color": transparent,
+      "border": 1px solid $gray-500,
+      "border-radius": 6px,
+      "color": $gray-800,
+      "hover-background-color": transparent,
+      "hover-border": 1px solid $gray-900,
+      "hover-color": $gray-900,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 14px,
+      "letter-spacing": .25px,
+      "line-height": 1.285,
+      "padding": 4px 16px 7px,
+      "text-transform": none,
+    ),
+    "inline-newsletter-signup": (
+      "background-color": $skin-newsletter-signup-inline-btn-color,
+      "border-radius": 4px,
+      "color": $white,
+      "hover-background-color": darken($skin-newsletter-signup-inline-btn-color, 5%),
+      "hover-color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 16px,
+      "letter-spacing": .8px,
+      "line-height": 1.25,
+      "padding": 12px 27px,
+      "text-transform": uppercase,
+    ),
+  ),
+  $skin-buttons
+);
diff --git a/packages/marko-web-theme-monorail/scss/variables/_inputs.scss b/packages/marko-web-theme-monorail/scss/variables/_inputs.scss
new file mode 100644
index 000000000..179da3e48
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/variables/_inputs.scss
@@ -0,0 +1,24 @@
+$input-bg: #f8f8f8 !default;
+$input-border-color: $gray-500 !default;
+$input-border-radius: 4px !default;
+$input-border-width: 1px !default;
+$input-box-shadow: none !default;
+$input-color: $gray-800 !default;
+$input-font-family: $skin-font-family-primary !default;
+$input-font-size: 16px !default;
+$input-font-weight: $font-weight-normal !default;
+$input-line-height: 1 !default;
+$input-padding-y: .9375rem;
+$input-padding-x: 1.125rem;
+$input-placeholder-color: $gray-700 !default;
+
+$input-focus-border-color: $blue !default;
+$input-focus-box-shadow: 0 0 0 1px $blue !default;
+
+// custom
+$skin-input-letter-spacing: .25px !default;
+$skin-input-hover-border-color: $gray-900 !default;
+
+$custom-select-focus-box-shadow: $input-focus-box-shadow !default;
+
+$custom-control-indicator-size: 1.25rem !default;
diff --git a/packages/marko-web-theme-monorail/scss/variables/_typography.scss b/packages/marko-web-theme-monorail/scss/variables/_typography.scss
new file mode 100644
index 000000000..17dd372ed
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/variables/_typography.scss
@@ -0,0 +1,525 @@
+$typography: () !default;
+$typography: non-destructive-map-merge(
+  (
+    "header-1": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 40px,
+      "font-size-mobile": 28px,
+      "line-height": 1.15,
+      "line-height-mobile": 1.15,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "header-2": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "header-3": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "article-text": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 20px,
+      "font-size-mobile": 18px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.44,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "small-body-text": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.5,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "credit-disclaimer": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1.28,
+      "line-height-mobile": 1.28,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "section-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 32px,
+      "font-size-mobile": 28px,
+      "line-height": 1.13,
+      "line-height-mobile": 1.14,
+      "letter-spacing": 1px,
+      "text-transform": uppercase,
+    ),
+    "section-header-small": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .75px,
+      "text-transform": uppercase,
+    ),
+    "slug-medium": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "slug-small": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "sponsored-by": (
+      "color": $blue,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "input-label": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "date": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": uppercase,
+    ),
+    // added
+    "date-content-page": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.3125,
+      "line-height-mobile": 1.3125,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "author-content-page": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.3125,
+      "line-height-mobile": 1.3125,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "author-name-list": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "author-title-list": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "view-more": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "footer-header-1": (
+      "color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "footer-text": (
+      "color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.5,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "teaser-text-1": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.44,
+      "line-height-mobile": 1.44,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "header-1.5": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 24px,
+      "font-size-mobile": 18px,
+      "line-height": 1.2,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "section-header-xs": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .75px,
+      "text-transform": uppercase,
+    ),
+    "social-follow-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "menu-item-primary": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 20px,
+      "font-size-mobile": 20px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "menu-item-primary-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 24px,
+      "font-size-mobile": 24px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "menu-item-secondary": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "menu-item-secondary-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "overlay-header-2": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-title": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 40px,
+      "font-size-mobile": 40px,
+      "line-height": 1.1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-description": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-partners": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 15px,
+      "font-size-mobile": 15px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .25px,
+      "text-transform": uppercase,
+    ),
+    "content-meter-header": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 28px,
+      "font-size-mobile": 28px,
+      "line-height": 1,
+      "line-height-mobile": 1.15,
+      "letter-spacing": .3px,
+      "text-transform": none,
+    ),
+    "content-meter-cta": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-medium,
+      "font-size": 22px,
+      "font-size-mobile": 20px,
+      "line-height": 1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .24px,
+      "text-transform": none,
+    ),
+  ),
+  $typography
+);
+
+$typography-links: () !default;
+$typography-links: non-destructive-map-merge(
+  (
+    "header-1": (
+      "primary": (
+        "max-lines": 4,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "header-2": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "overlay-header-2": (
+      "primary": (
+        "max-lines": 2,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "header-3": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "section-header-small": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "article-text": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "article-text", "color"),
+        "hover-text-decoration": none,
+      ),
+      "content-body": (
+        "max-lines": false,
+        "text-decoration": underline,
+        "color": $primary,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "small-body-text": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "small-body-text", "color"),
+        "hover-text-decoration": none,
+      ),
+      "with-hover-color": (
+        "max-lines": 3,
+        "text-decoration": underline,
+        "color": $primary,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "slug-medium": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "slug-small": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "author-name-list": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "author-content-page": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "view-more": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "teaser-text-1": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "teaser-text-1", "color"),
+        "hover-text-decoration": none,
+      ),
+    ),
+    "header-1.5": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "menu-item-primary": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "menu-item-secondary": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+  ),
+  $typography-links,
+);
diff --git a/packages/marko-web-theme-monorail/templates/search.marko b/packages/marko-web-theme-monorail/templates/search.marko
new file mode 100644
index 000000000..a53ffd880
--- /dev/null
+++ b/packages/marko-web-theme-monorail/templates/search.marko
@@ -0,0 +1,119 @@
+import queryFragment from "../graphql/fragments/section-feed-block";
+import { get } from '@parameter1/base-cms-object-path';
+
+$ const { config, req, $markoWebSearch: search, site, i18n } = out.global;
+
+$ const type = "search";
+$ const title = "Search";
+$ const description = `Search ${config.siteName()}`;
+
+$ const currentPage = search.getCurrentPage();
+
+$ const overrideSortField = get(site, 'config.setSearchSortFieldToScore');
+$ const searchQueryPresent = (search.query.searchQuery && search.query.searchQuery !== '');
+$ const setDefaultSortField = (searchQueryPresent && !search.query.sortField && overrideSortField);
+$ const sortField = setDefaultSortField ? 'SCORE' : search.input.sortField;
+
+<marko-web-default-page-layout type=type title=title description=description>
+  <@head>
+    <marko-web-gtm-default-context|{ context }| type=type>
+      <marko-web-gtm-push data=context />
+    </marko-web-gtm-default-context>
+    <meta name="robots" content="noindex">
+  </@head>
+  <@page>
+    <marko-web-page-wrapper>
+      <@section modifiers=["first"]>
+        <theme-gam-define-display-ad
+          name="leaderboard"
+          position="static_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+      <@section|{ blockName }|>
+        <div class="row">
+          <div class="col-lg-3">
+            <marko-web-search-filter-container modifiers=["sticky"]>
+              <@before-title|{ blockName }|>
+                <marko-web-website-section-name|{ value }| tag="h1" block-name=blockName obj={ name: title }>
+                  <if(currentPage > 1)>${value}: ${i18n("Page")} ${currentPage}</if>
+                  <else>${value}</else>
+                </marko-web-website-section-name>
+              </@before-title>
+              <marko-web-search-content-types-filter />
+              <marko-web-search-website-sections-filter />
+            </marko-web-search-filter-container>
+          </div>
+
+          <div class="col-lg-9">
+            <div class="row">
+              <div class="col-xl-9">
+                <marko-web-search-form>
+                  <@block class="search-form" />
+                  <div class="form-group search-form__group">
+                    <label for="search-phrase" class="sr-only">Enter search phrase</label>
+                    <marko-web-search-input
+                      id="search-phrase"
+                      class="form-control"
+                      placeholder="Enter search phrase..."
+                    />
+                  </div>
+                  <button type="submit" class="btn btn-primary search-form__btn">
+                    ${i18n("Search")}
+                  </button>
+                </marko-web-search-form>
+                </div>
+                <div class="col-xl-3">
+                  <marko-web-search-sort-by sort-field=sortField />
+                </div>
+              </div>
+
+            <marko-web-search-query|{ nodes, totalCount }|
+              limit=search.getLimit()
+              skip=search.getSkip()
+              sort-field=sortField
+              sort-order=search.input.sortOrder
+              content-types=search.input.contentTypes
+              search-query=search.input.searchQuery
+              assigned-to-website-section-ids=search.input.assignedToWebsiteSectionIds
+              query-fragment=queryFragment
+            >
+              <marko-web-page-wrapper modifiers=["no-padding-x"]>
+                <@section modifiers=["search-results"]>
+                  <div>${new Intl.NumberFormat().format(totalCount)} ${i18n("Results")}</div>
+                  <marko-web-search-selected-filters />
+                </@section>
+                <if(nodes.length)>
+                  <@section>
+                    <marko-web-node-list
+                      inner-justified=true
+                      flush-x=true
+                      flush-y=false
+                      modifiers=["section-feed"]
+                    >
+                      <@nodes nodes=nodes>
+                        <@slot|{ node }|>
+                          <theme-section-feed-content-node node=node />
+                        </@slot>
+                      </@nodes>
+                    </marko-web-node-list>
+                    <marko-web-search-pagination-controls total-count=totalCount>
+                      <@link class="btn btn-primary" />
+                    </marko-web-search-pagination-controls>
+                  </@section>
+                </if>
+              </marko-web-page-wrapper>
+            </marko-web-search-query>
+          </div>
+        </div>
+      </@section>
+      <@section>
+        <theme-gam-define-display-ad
+          name="rotation"
+          position="static_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>
diff --git a/packages/marko-web-theme-monorail/templates/taxonomy.marko b/packages/marko-web-theme-monorail/templates/taxonomy.marko
new file mode 100644
index 000000000..9603ffd99
--- /dev/null
+++ b/packages/marko-web-theme-monorail/templates/taxonomy.marko
@@ -0,0 +1,73 @@
+import hierarchyAliases from "@parameter1/base-cms-marko-web/utils/hierarchy-aliases";
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import queryFragment from "../graphql/fragments/section-feed-block";
+
+$ const { id, name, type, description, i18n } = input;
+$ const { GAM, req } = out.global;
+
+$ const { pagination: p } = out.global;
+$ const perPage = 12;
+
+$ const queryParams = {
+  limit: perPage,
+  skip: p.skip({ perPage }),
+  includeTaxonomyIds: [id],
+  queryFragment,
+};
+
+$ const title = `${type}: ${name}`;
+
+<marko-web-default-page-layout type="taxonomy" title=title description=description>
+  <@head>
+    <meta name="robots" content="noindex">
+  </@head>
+  <@page>
+    <marko-web-page-wrapper>
+      <@section modifiers=["first"]>
+        <theme-gam-define-display-ad
+          name="leaderboard"
+          position="section_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+
+      <@section|{ blockName }|>
+        <marko-web-website-section-name|{ value }| tag="h1" block-name=blockName obj={ name: title }>
+          <if(p.page > 1)>${value}: ${i18n("Page")} ${p.page}</if>
+          <else>${value}</else>
+        </marko-web-website-section-name>
+
+        <marko-web-query|{ nodes }| name="all-published-content" params=queryParams>
+          <marko-web-node-list
+            inner-justified=true
+            flush-x=true
+            flush-y=false
+            modifiers=["section-feed"]
+          >
+            <@nodes nodes=nodes>
+              <@slot|{ node }|>
+                <theme-section-feed-content-node node=node />
+              </@slot>
+            </@nodes>
+          </marko-web-node-list>
+        </marko-web-query>
+
+        <theme-query-total-count|{ totalCount }| name="all-published-content" params={ includeTaxonomyIds: [id] }>
+          <theme-pagination-controls
+            per-page=perPage
+            total-count=totalCount
+            path=req.path
+          />
+        </theme-query-total-count>
+      </@section>
+
+      <@section>
+        <theme-gam-define-display-ad
+          name="rotation"
+          position="section_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>
diff --git a/packages/marko-web-theme-monorail/utils/get-content-preview.js b/packages/marko-web-theme-monorail/utils/get-content-preview.js
new file mode 100644
index 000000000..880111d52
--- /dev/null
+++ b/packages/marko-web-theme-monorail/utils/get-content-preview.js
@@ -0,0 +1,7 @@
+const cheerio = require('cheerio');
+
+module.exports = ({ body, selector } = {}) => {
+  if (!body) return '';
+  const $ = cheerio.load(body);
+  return $.html(selector);
+};