diff --git a/package.json b/package.json
index a2d848095..d116c0e7b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@carbon/grid": "^11.19.0",
     "@carbon/icons-vue": "^10.30.0",
     "@carbon/vue": "^2.37.1",
     "carbon-components": "^10.33.0",
@@ -67,8 +68,10 @@
       "json",
       "vue"
     ],
-   "setupFiles": ["./tests/setup.js"],
-   "transform": {
+    "setupFiles": [
+      "./tests/setup.js"
+    ],
+    "transform": {
       "^.+\\.vue$": "vue-jest",
       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
       "^.+\\.jsx?$": "babel-jest"
diff --git a/src/styles/_carbon-utils.scss b/src/styles/_carbon-utils.scss
new file mode 100644
index 000000000..33cc42953
--- /dev/null
+++ b/src/styles/_carbon-utils.scss
@@ -0,0 +1,4 @@
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss';
+@import 'carbon-components/scss/globals/scss/typography.scss';
+@import 'carbon-components/scss/globals/scss/vars.scss';
diff --git a/src/styles/_carbon.scss b/src/styles/_carbon.scss
index b6a292d0c..1854f9040 100644
--- a/src/styles/_carbon.scss
+++ b/src/styles/_carbon.scss
@@ -1,2 +1,6 @@
+$feature-flags: (
+  grid-columns-16: true
+);
+
 @import 'carbon-components/scss/globals/scss/styles';
 @import './carbon-fixes';
diff --git a/src/views/LandingPage/LandingPage.vue b/src/views/LandingPage/LandingPage.vue
index d2ab93188..b9d5a2a2c 100644
--- a/src/views/LandingPage/LandingPage.vue
+++ b/src/views/LandingPage/LandingPage.vue
@@ -1,3 +1,126 @@
 <template>
-  <div>LANDING PAGE</div>
+  <div class="bx--grid bx--grid--full-width landing-page">
+    <div class="bx--row landing-page__banner">
+      <div class="bx--col-lg-16">
+        <cv-breadcrumb noTrailingSlash aria-label="Page navigation">
+          <cv-breadcrumb-item>
+            <cv-link href="/">Getting started</cv-link>
+          </cv-breadcrumb-item>
+        </cv-breadcrumb>
+        <h1 class="landing-page__heading">Design &amp; build with Carbon</h1>
+      </div>
+    </div>
+    <div class="bx--row landing-page__r2">
+      <div class="bx--col bx--no-gutter">
+        <cv-tabs selected="0" aria-label="Tab navigation">
+          <cv-tab label="About">
+            <div class="bx--grid bx--grid--no-gutter bx--grid--full-width">
+              <div class="bx--row landing-page__tab-content">
+                <div class="bx--col-md-4 bx--col-lg-7">
+                  <h2 class="landing-page__subheading">What is Carbon?</h2>
+                  <p class="landing-page__p">
+                    Carbon is IBM’s open-source design system for digital
+                    products and experiences. With the IBM Design Language as
+                    its foundation, the system consists of working code, design
+                    tools and resources, human interface guidelines, and a
+                    vibrant community of contributors.
+                  </p>
+                  <cv-button>Learn more</cv-button>
+                </div>
+                <div class="bx--col-md-4 bx--offset-lg-1 bx--col-lg-8">
+                  <img
+                    class="landing-page__illo"
+                    src="../../assets/tab-illo.png"
+                    alt="Carbon illustration"
+                  />
+                </div>
+              </div>
+            </div>
+          </cv-tab>
+          <cv-tab label="Design">
+            <div class="bx--grid bx--grid--no-gutter bx--grid--full-width">
+              <div class="bx--row landing-page__tab-content">
+                <div class="bx--col-lg-16">
+                  Rapidly build beautiful and accessible experiences. The Carbon
+                  kit contains all resources you need to get started.
+                </div>
+              </div>
+            </div>
+          </cv-tab>
+          <cv-tab label="Develop">
+            <div class="bx--grid bx--grid--no-gutter bx--grid--full-width">
+              <div class="bx--row landing-page__tab-content">
+                <div class="bx--col-lg-16">
+                  Carbon provides styles and components in Vanilla, React,
+                  Angular, and Vue for anyone building on the web.
+                </div>
+              </div>
+            </div>
+          </cv-tab>
+        </cv-tabs>
+      </div>
+    </div>
+    <div class="bx--row landing-page__r3">
+      <div class="bx--col-md-4 bx--col-lg-4">
+        <h3 class="landing-page__label">The Principles</h3>
+      </div>
+      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Open</div>
+      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Modular</div>
+      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Consistent</div>
+    </div>
+  </div>
 </template>
+
+<style lang="scss">
+@import '../../styles/carbon-utils';
+@import './carbon-overrides';
+@import './mixins';
+
+.landing-page__illo {
+  max-width: 100%;
+}
+
+.landing-page__banner {
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-07 * 4;
+  @include landing-page-background;
+}
+
+.landing-page__heading {
+  @include carbon--type-style('productive-heading-05');
+}
+
+.landing-page__r2 {
+  margin-top: rem(-40px);
+}
+
+.landing-page__tab-content {
+  padding-top: $layout-05;
+  padding-bottom: $layout-05;
+}
+
+.landing-page__subheading {
+  @include carbon--type-style('productive-heading-03');
+  @include carbon--font-weight('semibold');
+}
+
+.landing-page__p {
+  @include carbon--type-style('productive-heading-03');
+  margin-top: $spacing-06;
+  margin-bottom: $spacing-08;
+
+  @include carbon--breakpoint-between((320px + 1), md) {
+    max-width: 75%;
+  }
+}
+
+.landing-page__r3 {
+  padding-top: $spacing-09;
+  padding-bottom: $spacing-09;
+  @include landing-page-background;
+}
+
+.landing-page__label {
+  @include carbon--type-style('heading-01');
+}
+</style>
diff --git a/src/views/LandingPage/_carbon-overrides.scss b/src/views/LandingPage/_carbon-overrides.scss
new file mode 100644
index 000000000..0bc1a2ce8
--- /dev/null
+++ b/src/views/LandingPage/_carbon-overrides.scss
@@ -0,0 +1,3 @@
+.landing-page__r2 .bx--tabs__nav {
+  right: 0;
+}
diff --git a/src/views/LandingPage/_mixins.scss b/src/views/LandingPage/_mixins.scss
new file mode 100644
index 000000000..a503748e8
--- /dev/null
+++ b/src/views/LandingPage/_mixins.scss
@@ -0,0 +1,19 @@
+@mixin landing-page-background() {
+  background-color: $ui-01;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -$spacing-06;
+    top: 0;
+    right: -$spacing-06;
+    bottom: 0;
+    background: $ui-01;
+  }
+
+  > * {
+    /* lift above position absolute */
+    position: relative;
+  }
+}
diff --git a/src/views/RepoPage/RepoPage.vue b/src/views/RepoPage/RepoPage.vue
index e82a6e6a9..3380a29e8 100644
--- a/src/views/RepoPage/RepoPage.vue
+++ b/src/views/RepoPage/RepoPage.vue
@@ -1,3 +1,95 @@
 <template>
-  <div>REPO PAGE</div>
+  <div class="cds--grid cds--grid--full-width cds--grid--no-gutter repo-page">
+    <div class="cds--row repo-page__r1">
+      <div class="cds--col-lg-16">
+        <repo-table
+          :headers="headers"
+          :rows="rows"
+          title="Carbon Repositories"
+          helperText="A collection of public Carbon repositories."
+        />
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import RepoTable from './RepoTable';
+
+const headers = [
+  {
+    key: 'name',
+    header: 'Name'
+  },
+  {
+    key: 'createdAt',
+    header: 'Created'
+  },
+  {
+    key: 'updatedAt',
+    header: 'Updated'
+  },
+  {
+    key: 'issueCount',
+    header: 'Open Issues'
+  },
+  {
+    key: 'stars',
+    header: 'Stars'
+  },
+  {
+    key: 'links',
+    header: 'Links'
+  }
+];
+
+const rows = [
+  {
+    id: '1',
+    name: 'Repo 1',
+    createdAt: 'Date',
+    updatedAt: 'Date',
+    issueCount: '123',
+    stars: '456',
+    links: 'Links'
+  },
+  {
+    id: '2',
+    name: 'Repo 2',
+    createdAt: 'Date',
+    updatedAt: 'Date',
+    issueCount: '123',
+    stars: '456',
+    links: 'Links'
+  },
+  {
+    id: '3',
+    name: 'Repo 3',
+    createdAt: 'Date',
+    updatedAt: 'Date',
+    issueCount: '123',
+    stars: '456',
+    links: 'Links'
+  }
+];
+
+export default {
+  name: 'RepoPage',
+  components: { RepoTable },
+  data() {
+    return {
+      headers,
+      rows
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/carbon-utils';
+
+.repo-page .cds--row {
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+}
+</style>
diff --git a/src/views/RepoPage/RepoTable.vue b/src/views/RepoPage/RepoTable.vue
new file mode 100644
index 000000000..835ec0b96
--- /dev/null
+++ b/src/views/RepoPage/RepoTable.vue
@@ -0,0 +1,46 @@
+<template>
+  <cv-data-table :columns="columns" :title="title" :helper-text="helperText">
+    <template slot="data">
+      <cv-data-table-row v-for="(row, rowIndex) in data" :key="`${rowIndex}`">
+        <cv-data-table-cell
+          v-for="(cell, cellIndex) in row.data"
+          :key="`${cellIndex}`"
+          >{{ cell }}</cv-data-table-cell
+        >
+        <template slot="expandedContent">
+          {{ row.description }}
+        </template>
+      </cv-data-table-row>
+    </template>
+  </cv-data-table>
+</template>
+
+<script>
+export default {
+  name: 'RepoTable',
+  props: {
+    headers: Array,
+    rows: Array,
+    title: String,
+    helperText: String
+  },
+  computed: {
+    columns() {
+      return this.headers.map(header => header.header);
+    },
+    data() {
+      return this.rows.map(row => ({
+        data: [
+          row.name,
+          row.createdAt,
+          row.updatedAt,
+          row.issueCount,
+          row.stars,
+          row.links
+        ],
+        description: 'Row description'
+      }));
+    }
+  }
+};
+</script>
diff --git a/yarn.lock b/yarn.lock
index 91c41bb78..18d0fe796 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -886,6 +886,13 @@
     "@babel/helper-validator-identifier" "^7.12.11"
     to-fast-properties "^2.0.0"
 
+"@carbon/grid@^11.19.0":
+  version "11.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.19.0.tgz#a0af90b4625fd60bb9ad947b7f8360af09488e3f"
+  integrity sha512-Ie8C0yifTPOF58rhkeRhINJ6KPiTVbdJwPCE+aEWTpUrwGSnuqIYZ8zQBlYQtNGQX72TSfnGY0qijPmpnIwNsg==
+  dependencies:
+    "@carbon/layout" "^11.19.0"
+
 "@carbon/icon-helpers@^10.16.0", "@carbon/icon-helpers@^10.9.0":
   version "10.16.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.16.0.tgz#66f20b9bba49c6ec4c956b8e9e7ec65bdf40da8f"
@@ -905,6 +912,11 @@
   dependencies:
     "@carbon/icon-helpers" "^10.16.0"
 
+"@carbon/layout@^11.19.0":
+  version "11.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.19.0.tgz#cd0f97457a91058792d13b09293281270d2b7d91"
+  integrity sha512-BI9ct+yVKrgL90l4nijMhj8dokXGBJu1Xtve9fz/lcveTyxxn7YvRu8mosGhCyw77KSU6vN2yRLJnQwqwqrLJQ==
+
 "@carbon/telemetry@0.0.0-alpha.6", "@carbon/telemetry@^0.0.0-alpha.6":
   version "0.0.0-alpha.6"
   resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.0.0-alpha.6.tgz#1d11e64f310e98f32c3db0c55f02e047f2398087"