diff --git a/apollo.config.js b/apollo.config.js
index 15cf81dbab..5e55dc7407 100644
--- a/apollo.config.js
+++ b/apollo.config.js
@@ -9,6 +9,6 @@ module.exports = {
       localSchemaFile: path.join(__dirname, 'packages/graphql/schemas/schema.graphql'),
     },
     tagName: 'gql',
-    includes: [path.join(__dirname, 'packages/launchpad/src/**/*.vue')],
+    includes: [path.join(__dirname, 'packages/{launchpad,app}/src/**/*.vue')],
   },
 }
diff --git a/packages/app/.windicss/icon-color-plugins.ts b/packages/app/.windicss/icon-color-plugins.ts
deleted file mode 100644
index 883152ff4c..0000000000
--- a/packages/app/.windicss/icon-color-plugins.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * This package adds support for targeting
- * light vs dark classes in duotone icons.
- *
- * It works by adding utility classes and specific selectors
- */
-
-import createPlugin from 'windicss/plugin'
-import { reduce, kebabCase, isObject } from 'lodash'
-import Colors from 'windicss/colors'
-
-interface RuleConfig {
-  name: string
-  theme?: (key: string) => string
-  weight?: string
-  color?: string
-}
-
-const makeRuleForClass = ({ name, theme, weight, color }: RuleConfig) => {
-  const resolvedColor = color ? color : weight ? theme?.(`colors.${name}.${weight}`) : theme?.(`colors.${name}`)
-  let [lightKey, darkKey] = [`.icon-light-${name}`, `.icon-dark-${name}`]
-
-  // transparent, black, and white
-  if (weight) {
-    lightKey += `-${weight}`
-    darkKey += `-${weight}`
-  }
-
-  return {
-    // When we're targeting an svg with icon-light-red-500
-    // only attach the fill and stroke for those same icons
-    // and vice versa for icon-dark
-    [lightKey]: {
-      '> *[fill].icon-light': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-light': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-light-fill': {
-        fill: resolvedColor,
-      },
-    },
-    [darkKey]: {
-      '> *[fill].icon-dark-fill': {
-        fill: resolvedColor,
-      },
-      '> *[fill].icon-dark': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-dark': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-dark-stroke': {
-        stroke: resolvedColor,
-      },
-    },
-  }
-}
-
-function addIconUtilityClasses (theme) {
-  return reduce(Colors, (acc, variants, colorName) => {
-    // lightGray => light-gray
-    const name = kebabCase(colorName)
-
-    // Collect the classes we're going to add to the windicss class registry
-    let additionalClasses = {}
-
-    // There are both nested and not-nested colors (e.g. black, white)
-    if (isObject(variants)) {
-      // multiple levels of colors
-      additionalClasses = reduce(variants, (variantAcc, _, weight) => {
-        const rules = makeRuleForClass({ name, theme, weight })
-
-        return { ...variantAcc, ...rules }
-      }, {})
-    } else {
-      // single values like black, white
-      additionalClasses = makeRuleForClass({ name, theme })
-    }
-
-    // Output is an object where each new class is a key
-    // And the selectors and values affected are values
-    /**
-      * {
-      *  `.icon-light-green-500`: {
-      *    '> *[stroke].icon-light': {
-      *      stroke: resolvedColor
-      *    },
-      *    '> *[fill].icon-light': {
-      *      fill: resolvedColor
-      *    }
-      *  }
-      * }
-      */
-    return { ...acc, ...additionalClasses }
-  }, {
-
-    // These technically aren't under "colors"
-    ...makeRuleForClass({ name: 'transparent', color: 'transparent' }),
-    ...makeRuleForClass({ name: 'current', color: 'currentColor' }),
-  })
-}
-
-export const IconDuotoneColorsPlugin = createPlugin(({ theme, addUtilities }) => {
-  addUtilities(addIconUtilityClasses(theme))
-})
diff --git a/packages/app/.windicss/safelist.ts b/packages/app/.windicss/safelist.ts
deleted file mode 100644
index 8e76023c02..0000000000
--- a/packages/app/.windicss/safelist.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WindiCSS will strip out any styles that aren't used.
- * We do a lot of dynamic stuff, and we're not too concerned
- * ith bundle size, so this is a pretty greedy list
- */
-import Colors from 'windicss/colors'
-import { map, reduce, kebabCase, isObject } from 'lodash'
-
-export const safelist = reduce(Colors, (acc, variants, colorName) => {
-  const name = kebabCase(colorName)
-
-  const classesForColor = map(variants, (_: string, k: string) => {
-    const classes = `before:bg-${name}
-    before:text-${name}
-    bg-${name}
-    text-${name}
-    `
-
-    if (isObject(variants)) {
-      // weighted colors
-      return classes.split(' ').map((selector) => `${selector}-${k}`)
-    }
-
-    // else, black + white
-    return classes
-  })
-
-  return `${acc} ${classesForColor.join(' ')}`
-}, '')
diff --git a/packages/app/cypress.json b/packages/app/cypress.json
index e8f8834a5f..e8db560fab 100644
--- a/packages/app/cypress.json
+++ b/packages/app/cypress.json
@@ -9,7 +9,7 @@
     "openMode": 0
   },
   "nodeVersion": "system",
-  "testFiles": "**/*.spec.{js,ts,tsx,jsx}",
+  "testFiles": "**/*.spec.{j,ts,tsx,jsx}",
   "reporter": "../../node_modules/cypress-multi-reporters/index.js",
   "reporterOptions": {
     "configFile": "../../mocha-reporter-config.json"
diff --git a/packages/app/cypress/support/fixtures.ts b/packages/app/cypress/support/fixtures.ts
new file mode 100644
index 0000000000..d69550a478
--- /dev/null
+++ b/packages/app/cypress/support/fixtures.ts
@@ -0,0 +1,152 @@
+// @ts-nocheck
+// @ts-ignore
+import * as JustMyLuck from 'just-my-luck'
+import faker from 'faker'
+import { template, keys, reduce, templateSettings } from 'lodash'
+import combineProperties from 'combine-properties'
+
+templateSettings.interpolate = /{{([\s\S]+?)}}/g
+
+let jml
+const setupSeeds = () => {
+  const seed = 2
+
+  faker.seed(seed)
+  jml = new JustMyLuck(JustMyLuck.MersenneTwister(seed))
+}
+
+setupSeeds()
+
+beforeEach(() => setupSeeds)
+
+/**
+ * Component Naming Fixtures
+ */
+export const modifiers = [
+  'Async',
+  'Dynamic',
+  'Static',
+  'Virtual',
+  'Lazy',
+]
+
+export const domainModels = [
+  'Person',
+  'Product',
+  'Spec',
+  'Settings',
+  'Account',
+  'Login',
+  'Logout',
+  'Launchpad',
+  'Wizard',
+]
+
+export const componentNames = [
+  'List',
+  'Table',
+  'Header',
+  'Footer',
+  'Button',
+  'Cell',
+  'Row',
+  'Skeleton',
+  'Loader',
+  'Layout',
+]
+
+export const specPattern = ['.spec', '_spec']
+
+export const fileExtension = ['.tsx', '.jsx', '.ts', '.js']
+
+export const directories = {
+  rootDedicated: template('tests'),
+  rootSrc: template('src'),
+  monorepo: template('packages/{{component}}/test'),
+  jestRoot: template('__test__'),
+  jestNestedLib: template('lib/{{component}}{{component2}}/__test__'),
+  dedicatedNested: template('lib/{{component}}/test'),
+  jestNested: template('src/{{component}}/__test__'),
+  componentsNested: template('src/components/{{component}}'),
+  componentsFlat: template('src/{{component}}'),
+  viewsFlat: template('src/views'),
+  frontendFlat: template('frontend'),
+  frontendComponentsFlat: template('frontend/components'),
+}
+
+const nameTemplates = {
+  // Business Logic Components
+  longDomain: template(`{{prefix}}{{modifier}}{{domain}}{{component}}`),
+  longDomain2: template(`{{prefix}}{{domain}}{{component}}{{component2}}`),
+
+  // App Components
+  page1: template(`{{domain}}Page`),
+  layout: template(`{{domain}}Layout`),
+
+  presentationalShort: template(`Base{{component}}`),
+  presentationalLong: template(`Base{{component}}{{component2}}`),
+  medium1: template(`{{prefix}}{{modifier}}{{component}}`),
+  medium2: template(`{{prefix}}{{component}}{{component2}}`),
+  short: template(`{{prefix}}{{component}}`),
+}
+
+const prefixes = ['I', 'V', 'Cy', null]
+
+export const componentNameGenerator = (options: { template: any, omit: any, overrides: any } = { template: nameTemplates.medium1, omit: [], overrides: {} }) => {
+  const withoutValues = reduce(options.omit, (acc, v) => {
+    acc[v] = null
+
+    return acc
+  }, {})
+
+  const components = jml.pickCombination(componentNames, 2)
+  const defaultOptions = {
+    modifier: jml.pick(modifiers),
+    domain: jml.pick(domainModels),
+    prefix: jml.pick(prefixes),
+    component: components[0],
+    component2: components[1],
+  }
+
+  return options.template({
+    ...defaultOptions,
+    ...withoutValues,
+    ...options.overrides,
+  })
+}
+
+const allRandomComponents = combineProperties({
+  domain: domainModels,
+  modifier: modifiers,
+  prefix: prefixes,
+  component: componentNames,
+  component2: componentNames,
+  fileExtension,
+  specPattern,
+  directory: keys(directories),
+})
+
+export const randomComponents = (n = 200) => {
+  return faker.random.arrayElements(allRandomComponents, n).map((d) => {
+    const name = componentNameGenerator({
+      overrides: d,
+      template: faker.random.objectElement(nameTemplates),
+    })
+
+    const gitFileState = jml.pick(['modified', 'unmodified', 'added', 'deleted'])
+
+    return {
+      componentName: name,
+      relativePath: directories[d.directory](d),
+      specExtension: d.specPattern,
+      fileExtension: d.fileExtension,
+      name: `${name}${d.specPattern}${d.fileExtension}`,
+      id: faker.datatype.uuid(),
+      gitInfo: {
+        comitter: gitFileState ? faker.internet.userName() : undefined,
+        timeAgo: gitFileState ? faker.datatype.datetime() : undefined,
+        fileState: gitFileState,
+      },
+    }
+  }, n)
+}
diff --git a/packages/app/package.json b/packages/app/package.json
index 5ee543dc09..997948a64f 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -28,6 +28,7 @@
     "@intlify/vite-plugin-vue-i18n": "2.4.0",
     "@packages/frontend-shared": "0.0.0-development",
     "@testing-library/cypress": "8.0.0",
+    "@types/faker": "5.5.8",
     "@urql/core": "2.3.1",
     "@urql/vue": "0.4.3",
     "@vitejs/plugin-vue": "1.2.4",
@@ -36,11 +37,14 @@
     "@windicss/plugin-interaction-variants": "1.0.0",
     "bluebird": "3.5.3",
     "classnames": "2.3.1",
+    "combine-properties": "0.1.0",
     "concurrently": "^6.2.0",
     "cross-env": "6.0.3",
+    "faker": "5.5.3",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
     "javascript-time-ago": "2.3.8",
+    "just-my-luck": "3.0.0",
     "prismjs": "1.24.0",
     "rimraf": "3.0.2",
     "rollup-plugin-polyfill-node": "^0.7.0",
@@ -55,7 +59,7 @@
     "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "2.1.1",
     "vue": "3.2.6",
-    "vue-i18n": "9.2.0-beta.1",
+    "vue-i18n": "9.2.0-beta.7",
     "vue-prism-component": "2.0.0",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "4",
diff --git a/packages/app/src/Foo.spec.tsx b/packages/app/src/Foo.spec.tsx
index 07a4acd27f..db03e292aa 100644
--- a/packages/app/src/Foo.spec.tsx
+++ b/packages/app/src/Foo.spec.tsx
@@ -4,6 +4,9 @@ import Foo from './Foo.vue'
 describe('Foo', () => {
   it('renders something', () => {
     cy.mountFragment(FooFragmentDoc, {
+      onResult: (ctx) => {
+        return ctx
+      },
       render: (gqlVal) => {
         return <Foo gql={gqlVal} />
       },
diff --git a/packages/app/src/assets/icons/chevron-down-double_x16.svg b/packages/app/src/assets/icons/chevron-down-double_x16.svg
new file mode 100644
index 0000000000..eb77f6cf59
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-down-double_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9L8 12L11 9M5 4L8 7L11 4" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-down-large_x16.svg b/packages/app/src/assets/icons/chevron-down-large_x16.svg
new file mode 100644
index 0000000000..73aad905a6
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-down-large_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5L8 11L14 5" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-down-small_x16.svg b/packages/app/src/assets/icons/chevron-down-small_x16.svg
new file mode 100644
index 0000000000..88536c7cbb
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-down-small_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6L8 10L12 6" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-down-small_x8.svg b/packages/app/src/assets/icons/chevron-down-small_x8.svg
new file mode 100644
index 0000000000..238bd71869
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-down-small_x8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2.5L4 5.5L7 2.5" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-left-double_x16.svg b/packages/app/src/assets/icons/chevron-left-double_x16.svg
new file mode 100644
index 0000000000..fff033acbc
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-left-double_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 11L4 8L7 5M12 11L9 8L12 5" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-left-large_x16.svg b/packages/app/src/assets/icons/chevron-left-large_x16.svg
new file mode 100644
index 0000000000..fb31ccb93e
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-left-large_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9999 13.9999L4.99994 7.99988L10.9999 1.99988" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-left-small_x16.svg b/packages/app/src/assets/icons/chevron-left-small_x16.svg
new file mode 100644
index 0000000000..6d796c8bcd
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-left-small_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4L6 8L10 12" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-left-small_x8.svg b/packages/app/src/assets/icons/chevron-left-small_x8.svg
new file mode 100644
index 0000000000..e240665dd6
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-left-small_x8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 1L2.5 4L5.5 7" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-right-double_x16.svg b/packages/app/src/assets/icons/chevron-right-double_x16.svg
new file mode 100644
index 0000000000..b22fa8b8d3
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-right-double_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 11L12 8L9 5M4 11L7 8L4 5" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-right-large_x16.svg b/packages/app/src/assets/icons/chevron-right-large_x16.svg
new file mode 100644
index 0000000000..3baca53747
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-right-large_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99994 13.9999L10.9999 7.99988L4.99994 1.99988" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-right-small_x16.svg b/packages/app/src/assets/icons/chevron-right-small_x16.svg
new file mode 100644
index 0000000000..0c2d8736e7
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-right-small_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L10 8L6 4" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-right-small_x8.svg b/packages/app/src/assets/icons/chevron-right-small_x8.svg
new file mode 100644
index 0000000000..2ebfeb4731
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-right-small_x8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 1L5.5 4L2.5 7" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-up-double_x16.svg b/packages/app/src/assets/icons/chevron-up-double_x16.svg
new file mode 100644
index 0000000000..76b2ea66f3
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-up-double_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7L8 4L11 7M5 12L8 9L11 12" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-up-large_x16.svg b/packages/app/src/assets/icons/chevron-up-large_x16.svg
new file mode 100644
index 0000000000..651ffc455a
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-up-large_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 11L8 5L14 11" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-up-small_x16.svg b/packages/app/src/assets/icons/chevron-up-small_x16.svg
new file mode 100644
index 0000000000..09fe4ae6a3
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-up-small_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 9.99988L7.99991 5.99988L3.99991 9.99988" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/chevron-up-small_x8.svg b/packages/app/src/assets/icons/chevron-up-small_x8.svg
new file mode 100644
index 0000000000..9ab86cba68
--- /dev/null
+++ b/packages/app/src/assets/icons/chevron-up-small_x8.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5.5L4 2.5L7 5.5" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-added_x16.svg b/packages/app/src/assets/icons/document-added_x16.svg
new file mode 100644
index 0000000000..9d22a1c214
--- /dev/null
+++ b/packages/app/src/assets/icons/document-added_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 10L6.5 9M10 10L9.5 9M6.5 9L8 6L9.5 9M6.5 9H9.5M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-blank_x16.svg b/packages/app/src/assets/icons/document-blank_x16.svg
new file mode 100644
index 0000000000..4c70f19a6c
--- /dev/null
+++ b/packages/app/src/assets/icons/document-blank_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3C2.44772 15 2 14.5523 2 14Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M5 8H8M5 5H11M5 11H10M13 1L3 1C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-blank_x24.svg b/packages/app/src/assets/icons/document-blank_x24.svg
new file mode 100644
index 0000000000..60870616d5
--- /dev/null
+++ b/packages/app/src/assets/icons/document-blank_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H14L20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8M14 2L20 8M14 2V8H20" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-blank_x48.svg b/packages/app/src/assets/icons/document-blank_x48.svg
new file mode 100644
index 0000000000..55e8a4ecf2
--- /dev/null
+++ b/packages/app/src/assets/icons/document-blank_x48.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 39V9C10 8.44772 10.4477 8 11 8H37C37.5523 8 38 8.44772 38 9V39C38 39.5523 37.5523 40 37 40H11C10.4477 40 10 39.5523 10 39Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M17 24H24M17 17.1429H31M17 30.8571H28.6667M37 8L11 8C10.4477 8 10 8.44772 10 9V39C10 39.5523 10.4477 40 11 40H37C37.5523 40 38 39.5523 38 39V9C38 8.44772 37.5523 8 37 8Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-deleted_x16.svg b/packages/app/src/assets/icons/document-deleted_x16.svg
new file mode 100644
index 0000000000..1d6a9c6f10
--- /dev/null
+++ b/packages/app/src/assets/icons/document-deleted_x16.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071
+11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14
+14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0"
+stroke="#1B1E2E" class="icon-dark-stroke icon-light-fill" stroke-width="2" stroke-linecap="round"
+stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-download_x16.svg b/packages/app/src/assets/icons/document-download_x16.svg
new file mode 100644
index 0000000000..e796e43032
--- /dev/null
+++ b/packages/app/src/assets/icons/document-download_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M8 5V11M8 11L10 9M8 11L6 9M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-download_x24.svg b/packages/app/src/assets/icons/document-download_x24.svg
new file mode 100644
index 0000000000..67c46c1be9
--- /dev/null
+++ b/packages/app/src/assets/icons/document-download_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 16V8M12 16L15 13M12 16L9 13M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-minus_x16.svg b/packages/app/src/assets/icons/document-minus_x16.svg
new file mode 100644
index 0000000000..a7f21d3639
--- /dev/null
+++ b/packages/app/src/assets/icons/document-minus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 8H10M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-minus_x24.svg b/packages/app/src/assets/icons/document-minus_x24.svg
new file mode 100644
index 0000000000..017597e1c2
--- /dev/null
+++ b/packages/app/src/assets/icons/document-minus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M15 12H9M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-modified_x16.svg b/packages/app/src/assets/icons/document-modified_x16.svg
new file mode 100644
index 0000000000..b6121ca4b3
--- /dev/null
+++ b/packages/app/src/assets/icons/document-modified_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M5 10L6 6L8 9L10 6L11 10M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-plus-minus_x16.svg b/packages/app/src/assets/icons/document-plus-minus_x16.svg
new file mode 100644
index 0000000000..1fb411487e
--- /dev/null
+++ b/packages/app/src/assets/icons/document-plus-minus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1L13 1C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 6.5H10M8 8.5V4.5M6 11.5H10M13 1L3 1C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-plus-minus_x24.svg b/packages/app/src/assets/icons/document-plus-minus_x24.svg
new file mode 100644
index 0000000000..b7c1ded711
--- /dev/null
+++ b/packages/app/src/assets/icons/document-plus-minus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 13V10M12 7V10M12 10H15M12 10H9M9 17H15M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-plus_x16.svg b/packages/app/src/assets/icons/document-plus_x16.svg
new file mode 100644
index 0000000000..acff88169a
--- /dev/null
+++ b/packages/app/src/assets/icons/document-plus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 8H10M8 10V6M13 1H3C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-plus_x24.svg b/packages/app/src/assets/icons/document-plus_x24.svg
new file mode 100644
index 0000000000..d5d5144727
--- /dev/null
+++ b/packages/app/src/assets/icons/document-plus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 15V12M12 9V12M12 12H15M12 12H9M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-script_x24.svg b/packages/app/src/assets/icons/document-script_x24.svg
new file mode 100644
index 0000000000..22466f7a21
--- /dev/null
+++ b/packages/app/src/assets/icons/document-script_x24.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 1H17C18.6569 1 20 2.34315 20 4V19M4 1H3C1.89543 1 1 1.89543 1 3V3C1 4.10457 1.89543 5 3 5H4M4 1V5M11 6H16M11 10H16M11 14H16M4 5V20C4 21.6569 5.34315 23 7 23V23M20 19H21C22.1046 19 23 19.8954 23 21V21C23 22.1046 22.1046 23 21 23H20H7M20 19H7V19C8.10457 20.1046 8.10457 21.8954 7 23V23" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6C7 5.44772 7.44772 5 8 5C8.55228 5 9 5.44772 9 6Z" fill="#1B1E2E"/>
+<path d="M9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44772 7.44772 9 8 9C8.55228 9 9 9.44772 9 10Z" fill="#1B1E2E"/>
+<path d="M9 14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14Z" fill="#1B1E2E"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-sheet_x24.svg b/packages/app/src/assets/icons/document-sheet_x24.svg
new file mode 100644
index 0000000000..1832049770
--- /dev/null
+++ b/packages/app/src/assets/icons/document-sheet_x24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C9.73481 1.00006 9.48049 1.10545 9.293 1.293L3.293 7.293C3.10545 7.48049 3.00006 7.73481 3 8V20C3 20.7956 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H7C7.26522 23 7.51957 22.8946 7.70711 22.7071C7.89464 22.5196 8 22.2652 8 22C8 21.7348 7.89464 21.4804 7.70711 21.2929C7.51957 21.1054 7.26522 21 7 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V9H10C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8V3H18C18.2652 3 18.5196 3.10536 18.7071 3.29289C18.8946 3.48043 19 3.73478 19 4V9C19 9.26522 19.1054 9.51957 19.2929 9.70711C19.4804 9.89464 19.7348 10 20 10C20.2652 10 20.5196 9.89464 20.7071 9.70711C20.8946 9.51957 21 9.26522 21 9V4C21 3.20435 20.6839 2.44129 20.1213 1.87868C19.5587 1.31607 18.7956 1 18 1H10ZM9 7H6.414L9 4.414V7ZM11 12C10.7348 12 10.4804 12.1054 10.2929 12.2929C10.1054 12.4804 10 12.7348 10 13V21C10 21.2652 10.1054 21.5196 10.2929 21.7071C10.4804 21.8946 10.7348 22 11 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12H11ZM12 16V14H14V16H12ZM16 16V14H20V16H16ZM16 20V18H20V20H16ZM14 18V20H12V18H14Z" fill="#1B1E2E"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-star_x16.svg b/packages/app/src/assets/icons/document-star_x16.svg
new file mode 100644
index 0000000000..ee921c4635
--- /dev/null
+++ b/packages/app/src/assets/icons/document-star_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M8.00001 5.75001L8.00133 7.99819M8.00133 7.99819L10.1399 7.30472M8.00133 7.99819L9.32253 9.8203M8.00133 7.99819L6.67749 9.8203M8.00133 7.99819L5.86013 7.30472M13 1H3C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/document-star_x24.svg b/packages/app/src/assets/icons/document-star_x24.svg
new file mode 100644
index 0000000000..1278cdac00
--- /dev/null
+++ b/packages/app/src/assets/icons/document-star_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 8.84375V12.0032M12 12.0032L15.0018 11.0247M12 12.0032L13.8552 14.5535M12 12.0032L10.1448 14.5535M12 12.0032L8.99823 11.0247M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/icons/magnifying-glass_x16.svg b/packages/app/src/assets/icons/magnifying-glass_x16.svg
new file mode 100644
index 0000000000..267d5df531
--- /dev/null
+++ b/packages/app/src/assets/icons/magnifying-glass_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7C12 8.38071 11.4404 9.63071 10.5355 10.5355C9.63071 11.4404 8.38071 12 7 12C4.23858 12 2 9.76142 2 7C2 4.23858 4.23858 2 7 2C9.76142 2 12 4.23858 12 7Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M10.5355 10.5355C11.4404 9.63071 12 8.38071 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12C8.38071 12 9.63071 11.4404 10.5355 10.5355ZM10.5355 10.5355L14 14" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/app/src/assets/logos/github.svg b/packages/app/src/assets/logos/github.svg
new file mode 100644
index 0000000000..b37b0e82ef
--- /dev/null
+++ b/packages/app/src/assets/logos/github.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9997 17.0024C20.1345 17.0024 17 20.1364 17 24.0021C17 27.095 19.0055 29.718 21.7868 30.644C22.1369 30.7088 22.2656 30.4918 22.2656 30.3068C22.2656 30.1399 22.2586 29.5885 22.2558 29.0041C20.3082 29.4276 19.8976 28.1778 19.8976 28.1778C19.5793 27.3686 19.1204 27.1534 19.1204 27.1534C18.4854 26.7186 19.1688 26.7281 19.1688 26.7281C19.8715 26.7772 20.2415 27.449 20.2415 27.449C20.8663 28.5192 21.8796 28.2094 22.2787 28.0308C22.3418 27.5784 22.5226 27.2694 22.7231 27.0945C21.1683 26.918 19.5338 26.3176 19.5338 23.6352C19.5338 22.8712 19.8077 22.2465 20.2549 21.7566C20.1821 21.5799 19.9423 20.8683 20.3224 19.9043C20.3224 19.9043 20.9102 19.716 22.248 20.6218C22.8061 20.4671 23.4047 20.389 23.9992 20.3864C24.5942 20.389 25.1939 20.4668 25.7528 20.6218C27.0888 19.7165 27.6761 19.9043 27.6761 19.9043C28.0567 20.8686 27.8179 21.5806 27.7451 21.7566C28.1939 22.2465 28.4654 22.8712 28.4654 23.6352C28.4654 26.3238 26.8273 26.9149 25.2691 27.0883C25.5202 27.3053 25.7445 27.7314 25.7445 28.384C25.7445 29.3201 25.7365 30.0745 25.7365 30.3047C25.7365 30.491 25.8626 30.7088 26.2176 30.6406C28.9974 29.7141 31.0003 27.0909 31.0003 23.9997C31.0003 20.1345 27.8663 17 24.0003 17L23.9998 17.0023L23.9997 17.0024Z" fill="black"/>
+</svg>
diff --git a/packages/app/src/components/button/Button.vue b/packages/app/src/components/button/Button.vue
new file mode 100644
index 0000000000..d7c02d2854
--- /dev/null
+++ b/packages/app/src/components/button/Button.vue
@@ -0,0 +1,90 @@
+<template>
+  <button
+    style="width: fit-content"
+    class="flex items-center border rounded-sm gap-8px focus:border-indigo-600 focus:outline-transparent"
+    :class="classes"
+  >
+    <span
+      v-if="prefixIcon || $slots.prefix"
+      :class="iconClasses"
+      class="justify-self-start"
+    >
+      <slot name="prefix">
+        <component
+          :is="prefixIcon"
+          :class="prefixIconClass"
+        />
+      </slot>
+    </span>
+    <span class="flex-grow">
+      <slot />
+    </span>
+    <span
+      v-if="suffixIcon || $slots.suffix"
+      :class="iconClasses"
+      class="justify-self-end"
+    >
+      <slot name="suffix">
+        <component
+          :is="suffixIcon"
+          :class="suffixIconClass"
+        />
+      </slot>
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  inheritAttrs: true,
+})
+</script>
+
+<script lang="ts" setup>
+import { computed, defineComponent, useAttrs, ButtonHTMLAttributes, FunctionalComponent, SVGAttributes } from 'vue'
+
+const VariantClassesTable = {
+  primary: 'border-indigo-600 bg-indigo-600 text-white',
+  outline: 'border-gray-200 text-indigo-600 bg-white',
+  link: 'border-transparent text-indigo-600',
+  text: 'border-0',
+}
+
+const SizeClassesTable = {
+  sm: 'px-1 py-1 text-xs',
+  md: 'px-2 py-1 text-sm',
+  lg: 'px-4 py-2 text-sm',
+  xl: 'px-6 py-3 text-lg',
+}
+
+const IconClassesTable = {
+  md: 'min-h-1.25em min-w-1.25em max-h-1.25em max-w-1.25em',
+  lg: 'min-h-2em min-w-2em max-h-2em max-w-2em',
+  xl: 'min-h-2.5em min-w-2.5em max-w-2.5em max-h-2.5em ',
+}
+
+const props = defineProps<{
+  prefixIcon?: FunctionalComponent<SVGAttributes>
+  suffixIcon?: FunctionalComponent<SVGAttributes>
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  variant?: 'primary' | 'outline' | 'link' | 'text'
+  prefixIconClass?: string
+  suffixIconClass?: string
+}>()
+
+const attrs = useAttrs() as ButtonHTMLAttributes
+
+const variantClasses = VariantClassesTable[props.variant || 'primary']
+const sizeClasses = SizeClassesTable[props.size || 'md']
+
+const iconClasses = ['flex', 'items-center', IconClassesTable[props.size || 'md']]
+
+const classes = computed(() => {
+  return [
+    variantClasses,
+    sizeClasses,
+    attrs.class,
+    attrs.disabled ? 'opacity-50' : '',
+  ]
+})
+</script>
diff --git a/packages/app/src/components/input/Input.vue b/packages/app/src/components/input/Input.vue
new file mode 100644
index 0000000000..de31c5c53f
--- /dev/null
+++ b/packages/app/src/components/input/Input.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="p-0 m-0 border-0 h-full"
+    :class="$attrs.class"
+  >
+    <div class="relative rounded-md h-full">
+      <div
+        v-if="hasPrefix"
+        class="absolute inset-y-0 left-0 pl-4 flex items-center"
+      >
+        <span class="text-gray-500 flex items-center justify-center">
+          <slot name="prefix">
+            <component
+              :is="prefixIcon"
+              v-if="prefixIcon"
+              class="pointer-events-none"
+              :class="prefixIconClasses"
+            />
+            <IconMagnify
+              v-else-if="type === 'search'"
+              :class="prefixIconClasses"
+            />
+          </slot>
+        </span>
+      </div>
+      <input
+        v-model="localValue"
+        :type="type"
+        :class="_inputClasses"
+        class="h-full placeholder-gray-400 disabled:bg-gray-100 disabled:text-gray-400 leading-tight focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 py-2 border-gray-300 rounded-md"
+        v-bind="inputAttrs"
+      >
+      <div
+        v-if="hasSuffix"
+        class="absolute inset-y-0 right-0 pr-3 flex items-center"
+      >
+        <span class="text-gray-500 flex items-center justify-center">
+          <slot name="suffix">
+            <component
+              :is="suffixIcon"
+              class="pointer-events-none"
+              :class="suffixIconClasses"
+            />
+          </slot>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import _ from 'lodash'
+import IconMagnify from '~icons/cy/magnifying-glass_x16'
+import { computed, useSlots, useAttrs, InputHTMLAttributes, FunctionalComponent, SVGAttributes } from 'vue'
+import { useModelWrapper } from '../../composables'
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const inputAttrs = _.omit(attrs, 'class')
+
+const props = withDefaults(defineProps<{
+  type?: InputHTMLAttributes['type']
+  inputClasses?: string | string[] | Record<string, string>
+  prefixIcon?: FunctionalComponent<SVGAttributes, {}>
+  prefixIconClasses?: string | string[] | Record<string, string>
+  suffixIcon?: FunctionalComponent<SVGAttributes, {}>
+  suffixIconClasses?: string | string[] | Record<string, string>
+  modelValue?: string
+}>(), {
+  type: 'text',
+  modelValue: '',
+  inputClasses: undefined,
+  prefixIcon: undefined,
+  prefixIconClasses: undefined,
+  suffixIcon: undefined,
+  suffixIconClasses: undefined,
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const localValue = useModelWrapper(props, emits, 'modelValue')
+
+const hasPrefix = computed(() => {
+  return !!(slots.prefix || props.prefixIcon || props.type === 'search')
+})
+
+const hasSuffix = computed(() => {
+  return !!(slots.suffix || props.suffixIcon)
+})
+
+const _inputClasses = computed(() => {
+  return ([
+    props.inputClasses,
+    hasPrefix.value ? 'pl-10' : 'pl-4',
+    hasSuffix.value ? 'pr-6' : 'pr-0',
+  ])
+})
+
+</script>
diff --git a/packages/app/src/composables/index.ts b/packages/app/src/composables/index.ts
new file mode 100644
index 0000000000..6fa55aa5c5
--- /dev/null
+++ b/packages/app/src/composables/index.ts
@@ -0,0 +1,24 @@
+import { computed } from 'vue'
+import { useI18n as _useI18n } from 'vue-i18n'
+import type { MessageSchema } from '@packages/frontend-shared/src/locales/schema'
+
+/**
+ * This snippet comes from Thorsten Lünborg and is explained in this blog post https://www.vuemastery.com/blog/vue-3-data-down-events-up/
+ * @example const localValue = useModelWrapper(props, emit, 'modelValue')
+ */
+export function useModelWrapper<T, N extends string = 'modelValue'> (
+  props: T,
+  emit: (event: N, ...args: any[]) => void,
+  name = 'modelValue',
+) {
+  return computed({
+    get: () => props[name],
+    set: (value: any) => {
+      emit(`update:${name}` as any, value)
+    },
+  })
+}
+
+export function useI18n () {
+  return _useI18n<{ message: MessageSchema }>({ useScope: 'global' })
+}
diff --git a/packages/app/src/locales/en-US.json b/packages/app/src/locales/en-US.json
new file mode 100644
index 0000000000..f307f8d610
--- /dev/null
+++ b/packages/app/src/locales/en-US.json
@@ -0,0 +1,30 @@
+{
+  "links": {
+    "learnMore": "Learn more."
+  },
+  "components": {
+    "modal": {
+      "dismiss": "Dismiss"
+    },
+    "select": {
+      "placeholder": "Choose an option..."
+    }
+  },
+  "clipboard": {
+    "copy": "Copy",
+    "copied": "Copied"
+  },
+  "file": {
+    "edit": "Edit"
+  },
+  "status": {
+    "enabled": "Enabled",
+    "disabled": "Disabled"
+  },
+  "specsPage": {
+    "searchPlaceholder": "Search Specs",
+    "newSpecButton": "New Spec",
+    "componentSpecsHeader": "Component Specs",
+    "gitStatusHeader": "Git Status"
+  }
+}
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 1a4ed6c95b..834bab8525 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0 bg-gray-800">
+  <div class="flex flex-col flex-1 min-h-0 bg-gray-1000">
     <div class="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
       <div class="flex items-center flex-shrink-0 px-4">
         <i-cy-bookmark_x24
-          class="icon-dark-gray-300
-          icon-light-gray-800
+          class="icon-dark-gray-200
+          icon-light-gray-900
           w-24px
           h-24px"
         />
         <i-bi-bookmark-star class="text-white w-18px h-18px" />
       </div>
       <nav
-        class="flex-1 px-2 mt-5 space-y-1 bg-gray-800"
+        class="flex-1 px-2 mt-5 space-y-1 bg-gray-1000"
         aria-label="Sidebar"
       >
         <router-link
diff --git a/packages/app/src/navigation/SidebarNavigationRow.vue b/packages/app/src/navigation/SidebarNavigationRow.vue
index 18e1f719c5..ce14667555 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.vue
+++ b/packages/app/src/navigation/SidebarNavigationRow.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     href="#"
-    :class="[active ? 'before:bg-green-300' : 'before:bg-transparent']"
+    :class="[active ? 'before:bg-jade-300' : 'before:bg-transparent']"
     class="w-full
       min-w-40px
       relative
@@ -33,11 +33,11 @@
       <component
         :is="icon"
         v-if="icon"
-        :class="[active ? 'icon-dark-green-300 icon-light-green-800' : 'icon-dark-gray-500 icon-light-gray-800']"
-        class="min-w-24px min-h-24px group-hover:icon-dark-indigo-300 group-hover:icon-light-indigo-900 group-focus:icon-dark-indigo-300 group-focus:icon-light-indigo-900"
+        :class="[active ? 'icon-dark-jade-300 icon-light-jade-800' : 'icon-dark-gray-800 icon-light-gray-900']"
+        class="min-w-24px min-h-24px group-hover:icon-dark-indigo-300 group-hover:icon-light-indigo-600 group-focus:icon-dark-indigo-300 group-focus:icon-light-indigo-600"
       />
       <span
-        :class="[active ? 'text-green-300' : 'text-gray-500']"
+        :class="[active ? 'text-jade-300' : 'text-gray-400']"
         class="truncate"
       >
         <slot />
diff --git a/packages/app/src/pages/Runner/[...all].vue b/packages/app/src/pages/Runner/[...all].vue
new file mode 100644
index 0000000000..15036ca8a9
--- /dev/null
+++ b/packages/app/src/pages/Runner/[...all].vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h2>Runs Page</h2>
+    <h4 v-if="!ready">
+      Loading
+    </h4>
+    <h4 v-else>
+      Error: TODO add gql backend for getting the base64Config into the browser
+    </h4>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { renderRunner } from '../../runner/renderRunner'
+
+const ready = ref(false)
+
+// @ts-ignore
+window.__Cypress__ = true
+
+renderRunner(() => {
+  setTimeout(function () {
+    // @ts-ignore
+    window.Runner.start(document.getElementById('app'), '{{base64Config | safe}}')
+  }, 0)
+
+  ready.value = true
+})
+</script>
+<route>
+{
+  name: "Runner"
+}
+</route>
diff --git a/packages/app/src/pages/Specs.vue b/packages/app/src/pages/Specs.vue
index 24f6496033..88142d3426 100644
--- a/packages/app/src/pages/Specs.vue
+++ b/packages/app/src/pages/Specs.vue
@@ -1,9 +1,34 @@
 <template>
   <div>
     <h2>Specs Page</h2>
+    <template v-if="query.data.value?.app">
+      <SpecsList :gql="query.data.value?.app" />
+    </template>
+    <p v-else>
+      Loading...
+    </p>
   </div>
 </template>
 
+<script lang="ts" setup>
+import { gql } from '@urql/core'
+import { useQuery } from '@urql/vue'
+import { Specs_AppDocument } from '../generated/graphql'
+import SpecsList from '../specs/SpecsList.vue'
+
+gql`
+query Specs_App {
+  app {
+    ...SpecsList
+  } 
+}
+`
+
+const query = useQuery({
+  query: Specs_AppDocument,
+})
+
+</script>
 <route>
 {
   name: "Specs Page"
diff --git a/packages/app/src/specs/SpecListHeader.spec.tsx b/packages/app/src/specs/SpecListHeader.spec.tsx
new file mode 100644
index 0000000000..735170d8be
--- /dev/null
+++ b/packages/app/src/specs/SpecListHeader.spec.tsx
@@ -0,0 +1,11 @@
+import SpecsListHeader from './SpecsListHeader.vue'
+
+describe('<SpecsListHeader />', () => {
+  beforeEach(() => {
+    cy.mount(() => (
+      <div class="py-4 px-8">
+        <SpecsListHeader modelValue='' />
+      </div>
+    ))
+  })
+})
diff --git a/packages/app/src/specs/SpecsList.spec.tsx b/packages/app/src/specs/SpecsList.spec.tsx
new file mode 100644
index 0000000000..ee338abd4e
--- /dev/null
+++ b/packages/app/src/specs/SpecsList.spec.tsx
@@ -0,0 +1,68 @@
+import SpecsList from './SpecsList.vue'
+import { SpecsListFragmentDoc, SpecListRowFragment } from '../generated/graphql-test'
+import { defaultMessages } from '@cy/i18n'
+
+const rowSelector = '[data-testid=specs-list-row]'
+const inputSelector = 'input'
+const fullFile = (s) => `${s.node.fileName}${s.node.specFileExtension}${s.node.fileExtension}`
+const hasSpecText = (_node: JQuery<HTMLElement>, spec: SpecListRowFragment) => {
+  const $node = _node as JQuery<HTMLDivElement>
+
+  expect($node).to.contain(spec.node.fileName)
+  expect($node).to.contain(spec.node.fileExtension)
+  expect($node).to.contain(spec.node.gitInfo?.author)
+  expect($node).to.contain(defaultMessages.file.git.modified)
+
+  return $node
+}
+
+let specs: Array<SpecListRowFragment> = []
+
+describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
+  beforeEach(() => {
+    cy.mountFragment(SpecsListFragmentDoc, {
+      onResult: (ctx) => {
+        specs = ctx.activeProject?.specs?.edges || []
+
+        return ctx
+      },
+      render: (gqlVal) => {
+        return <SpecsList gql={gqlVal} />
+      },
+    })
+  })
+
+  it('renders specs', () => {
+    cy.get(rowSelector).first()
+    .should(($node) => hasSpecText($node, specs[0]))
+  })
+
+  it('filters the specs', () => {
+    cy.get(rowSelector).first()
+    // Establish a baseline for what the spec rendered is
+    .should(($node) => hasSpecText($node, specs[0]))
+    .should('be.visible')
+
+    // Cause an empty spec state
+    .get(inputSelector).type('garbage 🗑', { delay: 0 })
+    .get(rowSelector)
+    .should('not.exist')
+
+    // Clear the input, make sure that the right spec is showing up
+    .get(inputSelector)
+    .type('{selectall}{backspace}', { delay: 0 })
+
+    // Check the spec and its values
+    .get(rowSelector).first()
+    .should('be.visible')
+    .should(($node) => hasSpecText($node, specs[0]))
+    .get(inputSelector)
+    .type(fullFile(specs[0]), { delay: 0 })
+    .get(rowSelector).first()
+    .should('contain.text', specs[0].node.fileName)
+    .and('contain.text', specs[0].node.fileExtension)
+    .click()
+    .url()
+    .should('contain', fullFile(specs[0]))
+  })
+})
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
new file mode 100644
index 0000000000..8e83892a5d
--- /dev/null
+++ b/packages/app/src/specs/SpecsList.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="p-24px">
+    <SpecsListHeader
+      v-model="search"
+      class="pb-32px"
+    />
+    <div class="grid items-center divide-y-1 children:h-40px">
+      <div class="grid grid-cols-2 children:text-gray-800 children:font-medium">
+        <div>{{ t('specPage.componentSpecsHeader') }}</div>
+        <div>{{ t('specPage.gitStatusHeader') }}</div>
+      </div>
+      <router-link
+        v-for="spec in filteredSpecs"
+        v-slot="{ navigate }"
+        :key="spec.node.id"
+        :to="path(spec)"
+        custom
+      >
+        <SpecsListRow
+          :gql="spec"
+          @click="navigate"
+          @keypress.enter="navigate"
+        />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SpecsListHeader from './SpecsListHeader.vue'
+import SpecsListRow from './SpecsListRow.vue'
+import { gql } from '@urql/vue'
+import { computed, ref } from 'vue'
+import type { SpecsListFragment } from '../generated/graphql'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+const path = (spec) => `/runner/tests/${spec.node.specType}/${spec.node.name}${spec.node.fileExtension}`
+
+gql`
+fragment SpecsList on App {
+  activeProject {
+    id
+    projectRoot
+    specs(first: 1) {
+      edges {
+        node {
+          name
+          specType
+          relative
+        }
+        ...SpecListRow
+      }
+    }
+  }
+}
+`
+
+const props = defineProps<{
+  gql: SpecsListFragment
+}>()
+
+const search = ref('')
+const specs = computed(() => props.gql.activeProject?.specs?.edges)
+
+// If this search becomes any more complex, push it into the server
+const sortByGitStatus = (a, b) => a.node.gitInfo ? 1 : -1
+const filteredSpecs = computed(() => {
+  return specs.value?.filter((s) => {
+    return s.node.relative.toLowerCase().includes(search.value.toLowerCase())
+  })?.sort(sortByGitStatus)
+})
+</script>
diff --git a/packages/app/src/specs/SpecsListHeader.spec.tsx b/packages/app/src/specs/SpecsListHeader.spec.tsx
new file mode 100644
index 0000000000..5d3d9bc446
--- /dev/null
+++ b/packages/app/src/specs/SpecsListHeader.spec.tsx
@@ -0,0 +1,33 @@
+import SpecsListHeader from './SpecsListHeader.vue'
+import { ref } from 'vue'
+
+const buttonSelector = '[data-testid=new-spec-button]'
+const inputSelector = 'input[type=search]'
+
+describe('<SpecsListHeader />', { keystrokeDelay: 0 }, () => {
+  it('can be searched', () => {
+    const search = ref('')
+    const searchString = 'my/component.cy.tsx'
+
+    cy.mount(<SpecsListHeader modelValue={search.value} />)
+    .get(inputSelector)
+    .type(searchString, { delay: 0 })
+    .should(() => {
+      expect(search.value).to.equal(searchString)
+    })
+  })
+
+  it('emits a new spec event', () => {
+    const onNewSpec = cy.spy().as('new-spec')
+    const search = ref('')
+
+    cy.mount(<SpecsListHeader
+      modelValue={search.value}
+      onNewSpec={onNewSpec}
+    />)
+    .get(buttonSelector)
+    .click()
+    .get('@new-spec')
+    .should('have.been.called')
+  })
+})
diff --git a/packages/app/src/specs/SpecsListHeader.vue b/packages/app/src/specs/SpecsListHeader.vue
new file mode 100644
index 0000000000..6634310176
--- /dev/null
+++ b/packages/app/src/specs/SpecsListHeader.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex w-full gap-16px">
+    <Input
+      type="search"
+      class="flex-grow h-full min-w-200px"
+      prefix-icon-classes="icon-light-gray-50 icon-dark-gray-500"
+      :prefix-icon="IconMagnifyingGlass"
+      :model-value="inputValue"
+      :placeholder="t('specPage.searchPlaceholder')"
+      @input="onInput"
+    />
+
+    <div class="flex h-40px gap-16px min-w-127px">
+      <Button
+        data-testid="new-spec-button"
+        :prefix-icon="IconAdd"
+        prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white"
+        class="min-w-127px text-size-16px focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
+        @click="$emit('newSpec')"
+      >
+        {{ t('specPage.newSpecButton') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+import Button from '@cy/components/Button.vue'
+import Input from '@cy/components/Input.vue'
+import IconMagnifyingGlass from '~icons/cy/magnifying-glass_x16'
+import IconAdd from '~icons/cy/add-large_x16'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void,
+  (e: 'newSpec'): void
+}>()
+
+const inputValue = useVModel(props, 'modelValue', emit)
+
+const onInput = (e) => {
+  inputValue.value = (e as Event & { target: HTMLInputElement | null }).target?.value || ''
+}
+</script>
diff --git a/packages/app/src/specs/SpecsListRow.vue b/packages/app/src/specs/SpecsListRow.vue
new file mode 100644
index 0000000000..e5ffa2857b
--- /dev/null
+++ b/packages/app/src/specs/SpecsListRow.vue
@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="grid grid-cols-2 outline-none children:cursor-pointer group"
+    data-testid="specs-list-row"
+    role="link"
+    tabindex="0"
+  >
+    <div class="grid grid-cols-[16px,auto,auto] items-center gap-10px">
+      <component
+        :is="icon.component"
+        :class="icon.classes"
+      />
+      <div>
+        <span class="font-medium text-gray-700 group-hocus:text-indigo-500">{{ spec.fileName }}</span>
+        <span class="font-light text-gray-400 group-hocus:text-indigo-500">{{ spec.specFileExtension + spec.fileExtension }}</span>
+      </div>
+    </div>
+    <div class="grid git-info-row grid-cols-[16px,auto] items-center gap-9px">
+      <span class="flex items-center justify-center w-16px">
+        <span
+          v-if="fileState !== 'unmodified'"
+          class="rounded-full min-w-6px max-w-6px min-h-6px max-h-6px border-1"
+          :class="classes?.indicator"
+        />
+        <IconGithub
+          v-else
+          class="min-w-16px max-w-16px min-h-16px icon-dark-gray-300 group-hocus:icon-dark-indigo-500 max-h-16px"
+        />
+      </span>
+      <div :class="classes?.gitText">
+        {{ gitInfoText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { gql } from '@urql/core'
+import type { SpecListRowFragment } from '../generated/graphql'
+import { computed } from 'vue'
+import { useTimeAgo } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+import DocumentIconBlank from '~icons/cy/document-blank_x16'
+import DocumentIconPlus from '~icons/cy/document-plus_x16'
+import DocumentIconPlusMinus from '~icons/cy/document-plus-minus_x16'
+import DocumentIconMinus from '~icons/cy/document-minus_x16'
+import IconGithub from '~icons/cy/github'
+
+const { t } = useI18n()
+
+gql`
+fragment SpecListRow on SpecEdge {
+  node {
+    id
+    specFileExtension
+    fileExtension
+    fileName
+    gitInfo {
+      lastModifiedTimestamp
+      author
+    }
+  }
+}
+`
+
+const props = defineProps<{
+  gql: SpecListRowFragment
+}>()
+
+const spec = computed(() => props.gql.node)
+const timeAgo = useTimeAgo(spec.value.gitInfo?.lastModifiedTimestamp || '')
+
+// TODO: File state needs to come from git,
+// but the data context doesn't contain this info yet
+const fileState = computed(() => spec.value.gitInfo ? 'unmodified' : 'modified')
+
+const classes = computed(() => {
+  return {
+    created: {
+      indicator: 'border-jade-400 bg-jade-300',
+      gitText: 'text-jade-500',
+      icon: DocumentIconPlus,
+      iconClasses: 'icon-dark-jade-400 icon-light-jade-50',
+    },
+    modified: {
+      indicator: 'border-orange-400 bg-orange-300',
+      gitText: 'text-orange-500',
+      icon: DocumentIconPlusMinus,
+      iconClasses: 'icon-dark-orange-400 icon-light-orange-50',
+    },
+    unmodified: {
+      indicator: 'border-transparent bg-transparent',
+      gitText: 'text-gray-600 group-hocus:text-indigo-500',
+    },
+    deleted: {
+      indicator: 'border-red-400 bg-red-300',
+      gitText: 'text-red-500',
+      iconClasses: 'icon-dark-red-400 icon-light-red-50',
+      icon: DocumentIconMinus,
+    },
+  }[fileState.value]
+})
+
+const icon = computed(() => {
+  return {
+    component: classes.value?.icon || DocumentIconBlank,
+    classes: classes.value?.iconClasses || 'icon-light-gray-50 icon-dark-gray-200',
+  }
+})
+
+const gitInfoText = computed(() => {
+  if (fileState.value === 'unmodified') {
+    // Modified x days ago by AuthorName
+    return t('specPage.rows.gitInfoWithAuthor', {
+      fileState: t('file.git.modified'),
+      timeAgo: timeAgo.value,
+      author: spec.value.gitInfo?.author,
+    })
+  }
+
+  // TODO: implement the backend for git to report this info
+  // Created|Deleted|Modified x days ago by AuthorName
+  return t('specPage.rows.gitInfo', {
+    fileState: t(`file.git.${fileState.value}`),
+    timeAgo: timeAgo.value,
+  })
+})
+
+</script>
diff --git a/packages/app/windi.config.ts b/packages/app/windi.config.ts
index 4a5295851a..e68499f935 100644
--- a/packages/app/windi.config.ts
+++ b/packages/app/windi.config.ts
@@ -1,3 +1,4 @@
-import WindiConfig from '@packages/frontend-shared/windi.config'
+import { defaultConfig } from '@packages/frontend-shared/windi.config'
+import { defineConfig } from 'windicss/helpers'
 
-export default WindiConfig
+export default defineConfig(defaultConfig)
diff --git a/packages/data-context/src/actions/ProjectActions.ts b/packages/data-context/src/actions/ProjectActions.ts
index 441cc5e10f..bdfa4ade2f 100644
--- a/packages/data-context/src/actions/ProjectActions.ts
+++ b/packages/data-context/src/actions/ProjectActions.ts
@@ -55,7 +55,7 @@ export class ProjectActions {
     return this
   }
 
-  async findSpecs (projectRoot: string, specType: Maybe<SpecType>) {
+  async findSpecs (projectRoot: string, specType: Maybe<SpecType>): Promise<FoundSpec[]> {
     const config = await this.ctx.loaders.projectConfig(projectRoot)
     const specs = await this.api.findSpecs({
       projectRoot,
@@ -63,7 +63,7 @@ export class ProjectActions {
       supportFile: config.supportFile ?? false,
       testFiles: config.testFiles ?? [],
       ignoreTestFiles: config.ignoreTestFiles as string[] ?? [],
-      componentFolder: config.componentFolder ?? false,
+      componentFolder: config.projectRoot ?? false,
       integrationFolder: config.integrationFolder ?? '',
     })
 
diff --git a/packages/frontend-shared/.windicss/icon-color-plugins.ts b/packages/frontend-shared/.windicss/icon-color-plugins.ts
index ba9f0821a5..1ddd509adf 100644
--- a/packages/frontend-shared/.windicss/icon-color-plugins.ts
+++ b/packages/frontend-shared/.windicss/icon-color-plugins.ts
@@ -83,7 +83,7 @@ function addIconUtilityClasses (theme) {
     // And the selectors and values affected are values
     /**
       * {
-      *  `.icon-light-green-500`: {
+      *  `.icon-light-jade-500`: {
       *    '> *[stroke].icon-light': {
       *      stroke: resolvedColor
       *    },
diff --git a/packages/frontend-shared/.windicss/safelist.ts b/packages/frontend-shared/.windicss/safelist.ts
index 10f99edce9..eb8fedc5cb 100644
--- a/packages/frontend-shared/.windicss/safelist.ts
+++ b/packages/frontend-shared/.windicss/safelist.ts
@@ -12,7 +12,12 @@ const colorSafelist = reduce(colors, (acc, variants, colorName) => {
 
   return `${acc}
     ${map(variants, (_: string, k: string) => {
-    return `bg-${name}-${k}
+    if (k === 'DEFAULT') return ``
+
+    return `
+    icon-light-${name}-${k}
+    icon-dark-${name}-${k}
+    bg-${name}-${k}
     text-${name}-${k}
     before:bg-${name}-${k}
     before:text-${name}-${k}`
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts
index df030a1cd8..72638c1a72 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { randomComponents } from '../../../src/graphql/specs/testStubSpecs'
 
 import type {
   Project,
@@ -9,6 +10,7 @@ import { MaybeResolver, testNodeId } from './clientTestUtils'
 export const createTestProject = (title: string): CodegenTypeMap['Project'] => {
   const snakeTitle = _.kebabCase(title)
 
+  // TODO: What a mess, type this without all the hacks
   return {
     ...testNodeId('Project'),
     isFirstTimeCT: true,
@@ -16,6 +18,27 @@ export const createTestProject = (title: string): CodegenTypeMap['Project'] => {
     projectId: `${snakeTitle}-id`,
     title,
     projectRoot: `/usr/local/dev/projects/${snakeTitle}`,
+    specs: {
+      pageInfo: {
+        __typename: 'PageInfo',
+        hasNextPage: true,
+        hasPreviousPage: false,
+      },
+      __typename: 'SpecConnection' as const,
+      edges: [
+        ...randomComponents(200).map((c) => {
+          return {
+            __typename: 'SpecEdge' as const,
+            cursor: 'eoifjew',
+            node: {
+              id: c.absolute,
+              __typename: 'Spec' as const,
+              ...c,
+            },
+          }
+        }),
+      ],
+    },
   }
 }
 
diff --git a/packages/frontend-shared/src/assets/icons/add-large_x16.svg b/packages/frontend-shared/src/assets/icons/add-large_x16.svg
new file mode 100644
index 0000000000..2f998d7e41
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/add-large_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 8H8M14 8H8M8 8V2M8 8V14" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/add-medium_x16.svg b/packages/frontend-shared/src/assets/icons/add-medium_x16.svg
new file mode 100644
index 0000000000..8185c7fdb5
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/add-medium_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 3V13M13 8H3" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/add-small_x16.svg b/packages/frontend-shared/src/assets/icons/add-small_x16.svg
new file mode 100644
index 0000000000..9983fd07dc
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/add-small_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4V12M12 8H4" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/add.svg b/packages/frontend-shared/src/assets/icons/add.svg
new file mode 100644
index 0000000000..69a7657a35
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/add.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 1V7M7 4H1" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/arrow-down_x16.svg b/packages/frontend-shared/src/assets/icons/arrow-down_x16.svg
new file mode 100644
index 0000000000..0683cf76e1
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/arrow-down_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 9L8 13M8 13L12 9M8 13V3" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/arrow-left_x16.svg b/packages/frontend-shared/src/assets/icons/arrow-left_x16.svg
new file mode 100644
index 0000000000..a95b070088
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/arrow-left_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 4L3 8M3 8L7 12M3 8L13 8" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/arrow-right_x16.svg b/packages/frontend-shared/src/assets/icons/arrow-right_x16.svg
new file mode 100644
index 0000000000..0bd5485dd1
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/arrow-right_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 12L13 8M13 8L9 4M13 8L3 8" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/arrow-up_x16.svg b/packages/frontend-shared/src/assets/icons/arrow-up_x16.svg
new file mode 100644
index 0000000000..2913dc3ba3
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/arrow-up_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 6.99994L7.99994 2.99994M7.99994 2.99994L3.99994 6.99994M7.99994 2.99994L7.99994 12.9999" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-added_x16.svg b/packages/frontend-shared/src/assets/icons/document-added_x16.svg
new file mode 100644
index 0000000000..9d22a1c214
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-added_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 10L6.5 9M10 10L9.5 9M6.5 9L8 6L9.5 9M6.5 9H9.5M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-blank_x16.svg b/packages/frontend-shared/src/assets/icons/document-blank_x16.svg
new file mode 100644
index 0000000000..4c70f19a6c
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-blank_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3C2.44772 15 2 14.5523 2 14Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M5 8H8M5 5H11M5 11H10M13 1L3 1C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-blank_x24.svg b/packages/frontend-shared/src/assets/icons/document-blank_x24.svg
new file mode 100644
index 0000000000..8a7c2c74eb
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-blank_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H14L20 8V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8M14 2L20 8M14 2V8H20" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-blank_x48.svg b/packages/frontend-shared/src/assets/icons/document-blank_x48.svg
new file mode 100644
index 0000000000..bcf421c2e0
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-blank_x48.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 39V9C10 8.44772 10.4477 8 11 8H37C37.5523 8 38 8.44772 38 9V39C38 39.5523 37.5523 40 37 40H11C10.4477 40 10 39.5523 10 39Z" class="icon-light" fill="#D0D2E0"/>
+<path d="M17 24H24M17 17.1429H31M17 30.8571H28.6667M37 8L11 8C10.4477 8 10 8.44772 10 9V39C10 39.5523 10.4477 40 11 40H37C37.5523 40 38 39.5523 38 39V9C38 8.44772 37.5523 8 37 8Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-deleted_x16.svg b/packages/frontend-shared/src/assets/icons/document-deleted_x16.svg
new file mode 100644
index 0000000000..da2928faa5
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-deleted_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" stroke="#1B1E2E" class="icon-dark-stroke icon-light-fill" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-download_x16.svg b/packages/frontend-shared/src/assets/icons/document-download_x16.svg
new file mode 100644
index 0000000000..65218d4784
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-download_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M8 5V11M8 11L10 9M8 11L6 9M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-download_x24.svg b/packages/frontend-shared/src/assets/icons/document-download_x24.svg
new file mode 100644
index 0000000000..b5836ca94e
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-download_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" class="icon-light" fill="#D0D2E0"/>
+<path d="M12 16V8M12 16L15 13M12 16L9 13M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-minus_x16.svg b/packages/frontend-shared/src/assets/icons/document-minus_x16.svg
new file mode 100644
index 0000000000..48436b6206
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-minus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 8H10M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-minus_x24.svg b/packages/frontend-shared/src/assets/icons/document-minus_x24.svg
new file mode 100644
index 0000000000..73b9fedb70
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-minus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M15 12H9M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-modified_x16.svg b/packages/frontend-shared/src/assets/icons/document-modified_x16.svg
new file mode 100644
index 0000000000..b6121ca4b3
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-modified_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M5 10L6 6L8 9L10 6L11 10M14 4.82843V13C14 14.1046 13.1046 15 12 15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10.1716C10.702 1 11.2107 1.21071 11.5858 1.58579L13.4142 3.41421C13.7893 3.78929 14 4.29799 14 4.82843Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-plus-minus_x16.svg b/packages/frontend-shared/src/assets/icons/document-plus-minus_x16.svg
new file mode 100644
index 0000000000..ef571fbc9d
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-plus-minus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1L13 1C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 6.5H10M8 8.5V4.5M6 11.5H10M13 1L3 1C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-plus-minus_x24.svg b/packages/frontend-shared/src/assets/icons/document-plus-minus_x24.svg
new file mode 100644
index 0000000000..46644ead06
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-plus-minus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 13V10M12 7V10M12 10H15M12 10H9M9 17H15M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-plus_x16.svg b/packages/frontend-shared/src/assets/icons/document-plus_x16.svg
new file mode 100644
index 0000000000..1af0e20f5b
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-plus_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M6 8H10M8 10V6M13 1H3C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-plus_x24.svg b/packages/frontend-shared/src/assets/icons/document-plus_x24.svg
new file mode 100644
index 0000000000..8fdfd2beaf
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-plus_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 15V12M12 9V12M12 12H15M12 12H9M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-script_x24.svg b/packages/frontend-shared/src/assets/icons/document-script_x24.svg
new file mode 100644
index 0000000000..08312deedc
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-script_x24.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 1H17C18.6569 1 20 2.34315 20 4V19M4 1H3C1.89543 1 1 1.89543 1 3V3C1 4.10457 1.89543 5 3 5H4M4 1V5M11 6H16M11 10H16M11 14H16M4 5V20C4 21.6569 5.34315 23 7 23V23M20 19H21C22.1046 19 23 19.8954 23 21V21C23 22.1046 22.1046 23 21 23H20H7M20 19H7V19C8.10457 20.1046 8.10457 21.8954 7 23V23" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6C7 5.44772 7.44772 5 8 5C8.55228 5 9 5.44772 9 6Z" fill="#1B1E2E" class="icon-dark"/>
+<path d="M9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44772 7.44772 9 8 9C8.55228 9 9 9.44772 9 10Z" fill="#1B1E2E" class="icon-dark"/>
+<path d="M9 14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14Z" fill="#1B1E2E" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-sheet_x24.svg b/packages/frontend-shared/src/assets/icons/document-sheet_x24.svg
new file mode 100644
index 0000000000..f7369de4c4
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-sheet_x24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C9.73481 1.00006 9.48049 1.10545 9.293 1.293L3.293 7.293C3.10545 7.48049 3.00006 7.73481 3 8V20C3 20.7956 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H7C7.26522 23 7.51957 22.8946 7.70711 22.7071C7.89464 22.5196 8 22.2652 8 22C8 21.7348 7.89464 21.4804 7.70711 21.2929C7.51957 21.1054 7.26522 21 7 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V9H10C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8V3H18C18.2652 3 18.5196 3.10536 18.7071 3.29289C18.8946 3.48043 19 3.73478 19 4V9C19 9.26522 19.1054 9.51957 19.2929 9.70711C19.4804 9.89464 19.7348 10 20 10C20.2652 10 20.5196 9.89464 20.7071 9.70711C20.8946 9.51957 21 9.26522 21 9V4C21 3.20435 20.6839 2.44129 20.1213 1.87868C19.5587 1.31607 18.7956 1 18 1H10ZM9 7H6.414L9 4.414V7ZM11 12C10.7348 12 10.4804 12.1054 10.2929 12.2929C10.1054 12.4804 10 12.7348 10 13V21C10 21.2652 10.1054 21.5196 10.2929 21.7071C10.4804 21.8946 10.7348 22 11 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12H11ZM12 16V14H14V16H12ZM16 16V14H20V16H16ZM16 20V18H20V20H16ZM14 18V20H12V18H14Z" class="icon-dark" fill="#1B1E2E"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-star_x16.svg b/packages/frontend-shared/src/assets/icons/document-star_x16.svg
new file mode 100644
index 0000000000..ee921c4635
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-star_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M8.00001 5.75001L8.00133 7.99819M8.00133 7.99819L10.1399 7.30472M8.00133 7.99819L9.32253 9.8203M8.00133 7.99819L6.67749 9.8203M8.00133 7.99819L5.86013 7.30472M13 1H3C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V2C14 1.44772 13.5523 1 13 1Z" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/document-star_x24.svg b/packages/frontend-shared/src/assets/icons/document-star_x24.svg
new file mode 100644
index 0000000000..4fcdaef65e
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/document-star_x24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264V20C20 21.1046 19.1046 22 18 22H6Z" fill="#D0D2E0" class="icon-light"/>
+<path d="M12 8.84375V12.0032M12 12.0032L15.0018 11.0247M12 12.0032L13.8552 14.5535M12 12.0032L10.1448 14.5535M12 12.0032L8.99823 11.0247M20 9.24264V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H12.7574C13.553 2 14.3161 2.31607 14.8787 2.87868L19.1213 7.12132C19.6839 7.68393 20 8.44699 20 9.24264Z" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/github.svg b/packages/frontend-shared/src/assets/icons/github.svg
new file mode 100644
index 0000000000..5c3c5e13b2
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99974 1.00236C4.13453 1.00236 1 4.13637 1 8.00208C1 11.095 3.00546 13.718 5.78682 14.644C6.13691 14.7088 6.26557 14.4918 6.26557 14.3068C6.26557 14.1399 6.2586 13.5885 6.25575 13.0041C4.30818 13.4276 3.89763 12.1778 3.89763 12.1778C3.5793 11.3686 3.12043 11.1534 3.12043 11.1534C2.48536 10.7186 3.16875 10.7281 3.16875 10.7281C3.87151 10.7772 4.2415 11.449 4.2415 11.449C4.86625 12.5192 5.87957 12.2094 6.27874 12.0308C6.34179 11.5784 6.52265 11.2694 6.72313 11.0945C5.16826 10.918 3.53382 10.3176 3.53382 7.63519C3.53382 6.87118 3.8077 6.24646 4.25493 5.75657C4.18209 5.57986 3.94232 4.86831 4.32238 3.90432C4.32238 3.90432 4.91016 3.71598 6.24801 4.62182C6.80608 4.46706 7.40472 4.38903 7.99923 4.38645C8.59423 4.38903 9.19392 4.46679 9.75278 4.62182C11.0888 3.7165 11.6761 3.90432 11.6761 3.90432C12.0567 4.86857 11.8179 5.58063 11.7451 5.75659C12.1939 6.24646 12.4654 6.87118 12.4654 7.63519C12.4654 10.3238 10.8273 10.9149 9.2691 11.0883C9.52025 11.3053 9.74451 11.7314 9.74451 12.384C9.74451 13.3201 9.7365 14.0745 9.7365 14.3047C9.7365 14.491 9.86259 14.7088 10.2176 14.6406C12.9974 13.7141 15.0003 11.0909 15.0003 7.99974C15.0003 4.13453 11.8663 1 8.00026 1L7.99976 1.00234L7.99974 1.00236Z" fill="black" class="icon-dark"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/magnifying-glass_x16.svg b/packages/frontend-shared/src/assets/icons/magnifying-glass_x16.svg
new file mode 100644
index 0000000000..1c5e0c2146
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/magnifying-glass_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7C12 8.38071 11.4404 9.63071 10.5355 10.5355C9.63071 11.4404 8.38071 12 7 12C4.23858 12 2 9.76142 2 7C2 4.23858 4.23858 2 7 2C9.76142 2 12 4.23858 12 7Z" class="icon-light" fill="#D0D2E0"/>
+<path d="M10.5355 10.5355C11.4404 9.63071 12 8.38071 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12C8.38071 12 9.63071 11.4404 10.5355 10.5355ZM10.5355 10.5355L14 14" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/components/Button.vue b/packages/frontend-shared/src/components/Button.vue
index 696070eda9..8d282afa1d 100644
--- a/packages/frontend-shared/src/components/Button.vue
+++ b/packages/frontend-shared/src/components/Button.vue
@@ -9,8 +9,8 @@
       class="justify-self-start flex items-center"
     >
       <slot name="prefix">
-        <Icon
-          :icon="prefixIcon"
+        <component
+          :is="prefixIcon"
           :class="prefixIconClass"
         />
       </slot>
@@ -23,8 +23,8 @@
       class="justify-self-start flex items-center"
     >
       <slot name="suffix">
-        <Icon
-          :icon="suffixIcon"
+        <component
+          :is="suffixIcon"
           :class="suffixIconClass"
         />
       </slot>
@@ -41,7 +41,6 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import Icon from './Icon.vue'
 
 // eslint-disable-next-line no-duplicate-imports
 import { computed, useAttrs } from 'vue'
diff --git a/packages/frontend-shared/src/components/Input.vue b/packages/frontend-shared/src/components/Input.vue
index 8053853b69..e4c78bbbe8 100644
--- a/packages/frontend-shared/src/components/Input.vue
+++ b/packages/frontend-shared/src/components/Input.vue
@@ -6,20 +6,17 @@
     <div class="relative rounded-md">
       <div
         v-if="hasPrefix"
-        class="absolute inset-y-0 left-0 pl-4 flex items-center"
+        class="absolute inset-y-0 left-0 flex items-center pl-4"
       >
-        <span class="text-gray-500 flex items-center justify-center">
+        <span class="flex items-center justify-center text-gray-500">
           <slot name="prefix">
-            <Icon
+            <component
+              :is="prefixIcon"
               v-if="prefixIcon"
               class="pointer-events-none"
-              :icon="prefixIcon"
               :class="prefixIconClasses"
             />
-            <Icon
-              v-else-if="type === 'search'"
-              :icon="IconSearch"
-            />
+            <i-cy-magnifying-glass_x16 v-else-if="type === 'search'" />
           </slot>
         </span>
       </div>
@@ -27,17 +24,18 @@
         v-model="localValue"
         :type="type"
         :class="_inputClasses"
-        class="placeholder-gray-400 disabled:bg-gray-100 disabled:text-gray-400 leading-tight focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 py-2 border-gray-300 rounded-md"
+        class="block w-full pl-10 leading-tight placeholder-gray-400 border-gray-300 rounded-md disabled:bg-gray-100 disabled:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500 py-9px"
         v-bind="inputAttrs"
       >
       <div
         v-if="hasSuffix"
-        class="absolute inset-y-0 right-0 pr-3 flex items-center"
+        class="absolute inset-y-0 right-0 flex items-center pr-3"
       >
-        <span class="text-gray-500 flex items-center justify-center">
+        <span class="flex items-center justify-center text-gray-500">
           <slot name="suffix">
-            <Icon
-              :icon="suffixIcon"
+            <component
+              :is="suffixIcon"
+              v-if="suffixIcon"
               class="pointer-events-none"
               :class="suffixIconClasses"
             />
@@ -56,8 +54,6 @@ export default {
 
 <script lang="ts" setup>
 import _ from 'lodash'
-import Icon from './Icon.vue'
-import IconSearch from '~icons/mdi/magnify'
 
 import type { InputHTMLAttributes, FunctionalComponent, SVGAttributes } from 'vue'
 // eslint-disable-next-line no-duplicate-imports
diff --git a/packages/frontend-shared/src/components/StatusIndicator.vue b/packages/frontend-shared/src/components/StatusIndicator.vue
index 64a994361e..91b0708b54 100644
--- a/packages/frontend-shared/src/components/StatusIndicator.vue
+++ b/packages/frontend-shared/src/components/StatusIndicator.vue
@@ -17,7 +17,7 @@ import { computed } from 'vue'
 export type StatusIndicatorType = 'success' | 'warning' | 'error' | 'disabled'
 
 const typeClasses: Record<StatusIndicatorType, string> = {
-  success: 'text-green-600',
+  success: 'text-jade-600',
   error: 'text-red-600',
   warning: 'text-amber-600',
   disabled: 'text-cool-gray-400',
diff --git a/packages/frontend-shared/src/graphql/specs/testStubSpecs.ts b/packages/frontend-shared/src/graphql/specs/testStubSpecs.ts
new file mode 100644
index 0000000000..5af1fc828f
--- /dev/null
+++ b/packages/frontend-shared/src/graphql/specs/testStubSpecs.ts
@@ -0,0 +1,162 @@
+import * as JustMyLuck from 'just-my-luck'
+import faker from 'faker'
+import { template, keys, reduce, templateSettings } from 'lodash'
+import combineProperties from 'combine-properties'
+import type { FoundSpec } from '@packages/types'
+
+templateSettings.interpolate = /{{([\s\S]+?)}}/g
+
+let jml
+const setupSeeds = () => {
+  const seed = 2
+
+  faker.seed(seed)
+  jml = new JustMyLuck(JustMyLuck.MersenneTwister(seed))
+}
+
+setupSeeds()
+
+// TODO BEFORE MERGE, REMOVE
+beforeEach(() => setupSeeds)
+
+/**
+ * Component Naming Fixtures
+ */
+export const modifiers = [
+  'Async',
+  'Dynamic',
+  'Static',
+  'Virtual',
+  'Lazy',
+]
+
+export const domainModels = [
+  'Person',
+  'Product',
+  'Spec',
+  'Settings',
+  'Account',
+  'Login',
+  'Logout',
+  'Launchpad',
+  'Wizard',
+]
+
+export const componentNames = [
+  'List',
+  'Table',
+  'Header',
+  'Footer',
+  'Button',
+  'Cell',
+  'Row',
+  'Skeleton',
+  'Loader',
+  'Layout',
+]
+
+export const specPattern = ['.spec', '_spec']
+
+export const fileExtension = ['.tsx', '.jsx', '.ts', '.js']
+
+export const directories = {
+  rootDedicated: template('tests'),
+  rootSrc: template('src'),
+  monorepo: template('packages/{{component}}/test'),
+  jestRoot: template('__test__'),
+  jestNestedLib: template('lib/{{component}}{{component2}}/__test__'),
+  dedicatedNested: template('lib/{{component}}/test'),
+  jestNested: template('src/{{component}}/__test__'),
+  componentsNested: template('src/components/{{component}}'),
+  componentsFlat: template('src/{{component}}'),
+  viewsFlat: template('src/views'),
+  frontendFlat: template('frontend'),
+  frontendComponentsFlat: template('frontend/components'),
+}
+
+const nameTemplates = {
+  // Business Logic Components
+  longDomain: template(`{{prefix}}{{modifier}}{{domain}}{{component}}`),
+  longDomain2: template(`{{prefix}}{{domain}}{{component}}{{component2}}`),
+
+  // App Components
+  page1: template(`{{domain}}Page`),
+  layout: template(`{{domain}}Layout`),
+
+  presentationalShort: template(`Base{{component}}`),
+  presentationalLong: template(`Base{{component}}{{component2}}`),
+  medium1: template(`{{prefix}}{{modifier}}{{component}}`),
+  medium2: template(`{{prefix}}{{component}}{{component2}}`),
+  short: template(`{{prefix}}{{component}}`),
+}
+
+const prefixes = ['I', 'V', 'Cy', null]
+
+export const componentNameGenerator = (options: { template: any, omit?: any, overrides?: any } = { template: nameTemplates.medium1, omit: [], overrides: {} }) => {
+  const withoutValues = reduce(options.omit, (acc, v) => {
+    acc[v] = null
+
+    return acc
+  }, {})
+
+  const components = jml.pickCombination(componentNames, 2)
+  const defaultOptions = {
+    modifier: jml.pick(modifiers),
+    domain: jml.pick(domainModels),
+    prefix: jml.pick(prefixes),
+    component: components[0],
+    component2: components[1],
+  }
+
+  return options.template({
+    ...defaultOptions,
+    ...withoutValues,
+    ...options.overrides,
+  })
+}
+
+const allRandomComponents = combineProperties({
+  domain: domainModels,
+  modifier: modifiers,
+  prefix: prefixes,
+  component: componentNames,
+  component2: componentNames,
+  fileExtension,
+  specPattern,
+  directory: keys(directories),
+})
+
+export const randomComponents = (n = 200): FoundSpec[] => {
+  return faker.random.arrayElements(allRandomComponents, n).map((d: ReturnType<typeof combineProperties>) => {
+    const componentName = componentNameGenerator({
+      overrides: d,
+      template: faker.random.objectElement(nameTemplates),
+    })
+
+    const name = `${componentName}${d.specPattern}${d.fileExtension}`
+
+    return {
+      baseName: componentName,
+      relative: `${directories[d.directory](d)}/${name}`,
+      absolute: `${faker.system.directoryPath()}/${directories[d.directory](d)}/${name}`,
+      name: `${componentName}${d.specPattern}`,
+      specFileExtension: d.specPattern,
+      fileExtension: d.fileExtension,
+      specType: 'component',
+      fileName: componentName,
+      __typename: 'Spec',
+
+      id: faker.datatype.uuid(),
+      gitInfo: {
+        __typename: 'GitInfo',
+        id: faker.datatype.uuid(),
+        author: faker.internet.userName(),
+        lastModifiedTimestamp: new Date(faker.random.arrayElement([
+          faker.date.recent(8),
+          faker.date.past(1),
+          faker.date.between(new Date(Date.now() - 6000000).toUTCString(), new Date().toUTCString()),
+        ])).toUTCString(),
+      },
+    }
+  }, n)
+}
diff --git a/packages/frontend-shared/src/graphql/urqlClient.ts b/packages/frontend-shared/src/graphql/urqlClient.ts
index f525458860..c8b3f9ae44 100644
--- a/packages/frontend-shared/src/graphql/urqlClient.ts
+++ b/packages/frontend-shared/src/graphql/urqlClient.ts
@@ -15,6 +15,7 @@ export function makeCacheExchange () {
     keys: {
       App: (data) => data.__typename,
       Wizard: (data) => data.__typename,
+      GitInfo: () => null,
     },
   })
 }
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 30e859ca5a..9375b13ae5 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -15,12 +15,31 @@
     "copied": "Copied"
   },
   "file": {
-    "edit": "Edit"
+    "edit": "Edit",
+    "git": {
+      "modified": "Modified",
+      "added": "Added",
+      "created": "Created",
+      "unmodified": "Unmodified",
+      "deleted": "Deleted"
+    }
   },
   "status": {
     "enabled": "Enabled",
     "disabled": "Disabled"
   },
+  "specPage": {
+    "pageTitle": "Specs",
+    "newSpecButton": "New Spec",
+    "searchPlaceholder": "Search Specs",
+    "componentSpecsHeader": "Component Specs",
+    "e2eSpecsHeader": "E2E Specs",
+    "gitStatusHeader": "Git Status",
+    "rows": {
+      "gitInfoWithAuthor": "{fileState} {timeAgo} by {author}",
+      "gitInfo": "{fileState} {timeAgo}"
+    }
+  },
   "topNav": {
     "released": "Released",
     "version": "Version",
diff --git a/packages/frontend-shared/src/styles/shared.scss b/packages/frontend-shared/src/styles/shared.scss
index 6cdcacb070..15ddab6f6d 100644
--- a/packages/frontend-shared/src/styles/shared.scss
+++ b/packages/frontend-shared/src/styles/shared.scss
@@ -14,14 +14,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-em {
-  @apply text-purple-400 not-italic;
-}
-
-a {
-  @apply text-indigo-600 hover:underline;
-}
-
 /**
  * Utilities
  * -------------------------
diff --git a/packages/frontend-shared/tsconfig.json b/packages/frontend-shared/tsconfig.json
index 18d12b1862..a077c0616f 100644
--- a/packages/frontend-shared/tsconfig.json
+++ b/packages/frontend-shared/tsconfig.json
@@ -3,6 +3,7 @@
     /* Basic Options */
     "target": "esnext",
     "module": "esnext",
+    "lib": ["dom", "ESNext"],
     /*
      * Allow javascript files to be compiled.
      * Override this in modules that need JS
diff --git a/packages/frontend-shared/vite.config.ts b/packages/frontend-shared/vite.config.ts
index fb6baddda7..df28025167 100644
--- a/packages/frontend-shared/vite.config.ts
+++ b/packages/frontend-shared/vite.config.ts
@@ -41,6 +41,7 @@ const makePlugins = (plugins) => {
       ...plugins.vueI18nOptions,
     }),
     Icons({
+      scale: 1,
       customCollections: {
       // ~icons/cy/book-x16
         cy: FileSystemIconLoader(path.resolve(__dirname, './src/assets/icons')),
diff --git a/packages/frontend-shared/windi.config.ts b/packages/frontend-shared/windi.config.ts
index 7133eae943..50f527eedf 100644
--- a/packages/frontend-shared/windi.config.ts
+++ b/packages/frontend-shared/windi.config.ts
@@ -3,8 +3,9 @@ import InteractionVariants from '@windicss/plugin-interaction-variants'
 import { IconDuotoneColorsPlugin } from './.windicss/icon-color-plugins'
 import { safelist } from './.windicss/safelist'
 import { colors } from './.windicss/colors'
+import path from 'path'
 
-export default defineConfig({
+export const defaultConfig = {
   // This adds !important to all utility classes. https://csswizardry.com/2016/05/the-importance-of-important/
   important: true,
   theme: {
@@ -23,8 +24,8 @@ export default defineConfig({
     backgroundColor: ['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
   },
   plugins: [
-    InteractionVariants,
     IconDuotoneColorsPlugin,
+    InteractionVariants,
   ],
   shortcuts: {
     'focus-default': 'focus:border focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 focus:outline-transparent transition transition-colors duration-100 disabled:hover:ring-0 disabled:hover:border-0',
@@ -32,7 +33,15 @@ export default defineConfig({
   },
   extract: {
     // accepts globs and file paths relative to project root
-    include: ['index.html', '**/*.{vue,html,tsx}', '../frontend-shared/**/*.{vue,html,tsx}'],
+    include: [
+      'index.html',
+      '**/*.{vue,html,tsx}',
+      path.join(__dirname, '../frontend-shared/**/*.{vue,html,tsx,svg}'),
+      path.join(__dirname, '../app/**/*.{vue,html,tsx,svg}'),
+      path.join(__dirname, '../launchpad/**/*.{vue,html,tsx,svg}'),
+    ],
     exclude: ['node_modules/**/*', '.git/**/*'],
   },
-})
+}
+
+export default defineConfig(defineConfig)
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 24b0cf7e5c..820741dfa7 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -458,20 +458,36 @@ type Query {
 }
 
 """Represents a spec on the file system"""
-type Spec {
-  """Absolute path to spec"""
+type Spec implements Node {
+  """
+  Absolute path to spec (e.g. /Users/jess/my-project/src/component/MySpec.test.tsx)
+  """
   absolute: String!
 
+  """The file extension (e.g. tsx, jsx)"""
+  fileExtension: String!
+
+  """The first part of the file, without extensions (e.g. MySpec)"""
+  fileName: String!
+
   """Git information about the spec file"""
   gitInfo: GitInfo
 
-  """Name of spec file"""
+  """Relay style Node ID field for the Spec field"""
+  id: ID!
+
+  """Full name of spec file (e.g. MySpec.test.tsx)"""
   name: String!
 
-  """Relative path to spec"""
+  """Relative path to spec (e.g. src/component/MySpec.test.tsx)"""
   relative: String!
 
-  """Type of spec"""
+  """
+  The spec file's extension, including "spec" patterm (e.g. .spec.tsx, -spec.tsx, -test.tsx)
+  """
+  specFileExtension: String!
+
+  """Type of spec (e.g. component | integration)"""
   specType: SpecType!
 }
 
@@ -479,7 +495,7 @@ type SpecConnection {
   """
   https://facebook.github.io/relay/graphql/connections.htm#sec-Edge-Types
   """
-  edges: [SpecEdge]
+  edges: [SpecEdge!]!
 
   """
   https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
@@ -492,7 +508,7 @@ type SpecEdge {
   cursor: String!
 
   """https://facebook.github.io/relay/graphql/connections.htm#sec-Node"""
-  node: Spec
+  node: Spec!
 }
 
 enum SpecType {
diff --git a/packages/graphql/src/schema.ts b/packages/graphql/src/schema.ts
index 3d873adb97..9f196040f2 100644
--- a/packages/graphql/src/schema.ts
+++ b/packages/graphql/src/schema.ts
@@ -29,7 +29,11 @@ export const graphqlSchema = makeSchema({
     },
   },
   plugins: [
-    connectionPlugin(),
+    connectionPlugin({
+      nonNullDefaults: {
+        output: true,
+      },
+    }),
     nodePlugin,
   ],
   formatTypegen (content, type) {
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
index 0829dc4355..fa9342c6d4 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
@@ -5,22 +5,39 @@ import { GitInfo } from './gql-GitInfo'
 export const Spec = objectType({
   name: 'Spec',
   description: 'Represents a spec on the file system',
+  node: 'absolute',
   definition (t) {
     t.nonNull.field('specType', {
       type: SpecTypeEnum,
-      description: 'Type of spec',
+      description: 'Type of spec (e.g. component | integration)',
     })
 
     t.nonNull.string('absolute', {
-      description: 'Absolute path to spec',
+      description: 'Absolute path to spec (e.g. /Users/jess/my-project/src/component/MySpec.test.tsx)',
     })
 
     t.nonNull.string('relative', {
-      description: 'Relative path to spec',
+      description: 'Relative path to spec (e.g. src/component/MySpec.test.tsx)',
+    })
+
+    t.nonNull.string('baseName', {
+      description: 'Full name of spec file (e.g. MySpec.test.tsx) without the spec extension',
     })
 
     t.nonNull.string('name', {
-      description: 'Name of spec file',
+      description: 'Full name of spec file (e.g. MySpec.test.tsx)',
+    })
+
+    t.nonNull.string('fileExtension', {
+      description: 'The file extension (e.g. tsx, jsx)',
+    })
+
+    t.nonNull.string('specFileExtension', {
+      description: `The spec file's extension, including "spec" patterm (e.g. .spec.tsx, -spec.tsx, -test.tsx)`,
+    })
+
+    t.nonNull.string('fileName', {
+      description: `The first part of the file, without extensions (e.g. MySpec)`,
     })
 
     t.field('gitInfo', {
diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
index 6faafd9c7e..c0727a6c47 100644
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -55,7 +55,7 @@
     "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "2.1.1",
     "vue": "3.2.6",
-    "vue-i18n": "9.2.0-beta.1",
+    "vue-i18n": "9.2.0-beta.7",
     "vue-prism-component": "2.0.0",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-tsc": "^0.3.0",
diff --git a/packages/launchpad/src/layouts/SideBarItem.vue b/packages/launchpad/src/layouts/SideBarItem.vue
index 6254264b64..6db295cfe1 100644
--- a/packages/launchpad/src/layouts/SideBarItem.vue
+++ b/packages/launchpad/src/layouts/SideBarItem.vue
@@ -5,13 +5,13 @@
     <!-- Can't do a border-left solution because you need to round the corners. -->
     <span
       class="absolute -left-7px rounded min-w-10px h-full"
-      :class="{ 'bg-green-300': active }"
+      :class="{ 'bg-jade-300': active }"
     />
     <Icon
       :icon="icon"
       class="pl-0.25rem py-0.25rem min-h-25px min-w-25px w-full h-full"
       :class="{
-        'text-green-300': active
+        'text-jade-300': active
       }"
     />
   </div>
diff --git a/packages/launchpad/src/runs/RunIcon.vue b/packages/launchpad/src/runs/RunIcon.vue
index dfe709e03a..9f8abbbda8 100644
--- a/packages/launchpad/src/runs/RunIcon.vue
+++ b/packages/launchpad/src/runs/RunIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <IconPass
     v-if="props.gql.status === 'PASSED'"
-    class="text-green-500 text-xl"
+    class="text-jade-500 text-xl"
   />
   <IconFail
     v-else-if="props.gql.status ==='FAILED'"
diff --git a/packages/launchpad/src/runs/RunResults.vue b/packages/launchpad/src/runs/RunResults.vue
index ad2a86da3f..f140556706 100644
--- a/packages/launchpad/src/runs/RunResults.vue
+++ b/packages/launchpad/src/runs/RunResults.vue
@@ -13,7 +13,7 @@
       {{ props.gql.totalSkipped }}
     </div>
     <div class="flex items-center p-2">
-      <IconPass class="text-green-600 text-xs mr-1" />
+      <IconPass class="text-jade-600 text-xs mr-1" />
       {{ props.gql.totalPassed }}
     </div>
     <div class="flex items-center p-2">
diff --git a/packages/launchpad/src/setup/WizardLayout.spec.tsx b/packages/launchpad/src/setup/WizardLayout.spec.tsx
index e4c825f3b9..5e9ca846ae 100644
--- a/packages/launchpad/src/setup/WizardLayout.spec.tsx
+++ b/packages/launchpad/src/setup/WizardLayout.spec.tsx
@@ -4,7 +4,7 @@ describe('<WizardLayout />', () => {
   it('playground', { viewportWidth: 800, viewportHeight: 600 }, () => {
     cy.mount(() => (
       <WizardLayout>
-        <div class="h-20 border-green-600 border flex items-center justify-center">
+        <div class="h-20 border-jade-600 border flex items-center justify-center">
           content
         </div>
       </WizardLayout>
diff --git a/packages/launchpad/windi.config.ts b/packages/launchpad/windi.config.ts
index 4a5295851a..e68499f935 100644
--- a/packages/launchpad/windi.config.ts
+++ b/packages/launchpad/windi.config.ts
@@ -1,3 +1,4 @@
-import WindiConfig from '@packages/frontend-shared/windi.config'
+import { defaultConfig } from '@packages/frontend-shared/windi.config'
+import { defineConfig } from 'windicss/helpers'
 
-export default WindiConfig
+export default defineConfig(defaultConfig)
diff --git a/packages/server/lib/configFiles.ts b/packages/server/lib/configFiles.ts
index 62cbff7327..b8a0495b1b 100644
--- a/packages/server/lib/configFiles.ts
+++ b/packages/server/lib/configFiles.ts
@@ -1 +1,2 @@
+// the first file is the default created file
 export const CYPRESS_CONFIG_FILES = ['cypress.json', 'cypress.config.js', 'cypress.config.ts']
diff --git a/packages/server/lib/modes/run.js b/packages/server/lib/modes/run.js
index 145847dffd..cea924034a 100644
--- a/packages/server/lib/modes/run.js
+++ b/packages/server/lib/modes/run.js
@@ -1545,6 +1545,14 @@ module.exports = {
           trashAssets(config),
         ])
         .spread((sys = {}, browser = {}, specs = []) => {
+          // only want these properties
+          specs = specs.map((x) => ({
+            name: x.name,
+            relative: x.relative,
+            absolute: x.absolute,
+            specType: x.specType,
+          }))
+
           // return only what is return to the specPattern
           if (specPattern) {
             specPattern = specsUtil.default.getPatternRelativeToProjectRoot(specPattern, projectRoot)
diff --git a/packages/server/lib/open_project.ts b/packages/server/lib/open_project.ts
index ba5554afd6..cfec1684ab 100644
--- a/packages/server/lib/open_project.ts
+++ b/packages/server/lib/open_project.ts
@@ -238,7 +238,17 @@ export class OpenProject {
 
   getSpecs (cfg) {
     return specsUtil.findSpecs(cfg)
-    .then((specs: Cypress.Spec[] = []) => {
+    .then((_specs: Cypress.Spec[] = []) => {
+      // only want these properties
+      const specs = _specs.map((x) => {
+        return {
+          name: x.name,
+          relative: x.relative,
+          absolute: x.absolute,
+          specType: x.specType,
+        }
+      })
+
       // TODO merge logic with "run.js"
       if (debug.enabled) {
         const names = _.map(specs, 'name')
diff --git a/packages/server/lib/project-base.ts b/packages/server/lib/project-base.ts
index 2d4f5baa13..8165976a01 100644
--- a/packages/server/lib/project-base.ts
+++ b/packages/server/lib/project-base.ts
@@ -31,8 +31,8 @@ import Watchers from './watchers'
 import devServer from './plugins/dev-server'
 import preprocessor from './plugins/preprocessor'
 import { SpecsStore } from './specs-store'
-import type { FoundBrowser, OpenProjectLaunchOptions, ResolvedConfigurationOptions } from '@packages/types'
 import { checkSupportFile, getDefaultConfigFilePath } from './project_utils'
+import type { FoundBrowser, OpenProjectLaunchOptions } from '@packages/types'
 
 // Cannot just use RuntimeConfigOptions as is because some types are not complete.
 // Instead, this is an interface of values that have been manually validated to exist
@@ -49,7 +49,6 @@ export interface Cfg extends ReceivedCypressOptions {
     lastOpened?: number
     promptsShown?: object
   }
-  resolved: ResolvedConfigurationOptions
 }
 
 const localCwd = cwd()
diff --git a/packages/server/lib/util/specs.ts b/packages/server/lib/util/specs.ts
index 40b74cbd9b..79c4d901f0 100644
--- a/packages/server/lib/util/specs.ts
+++ b/packages/server/lib/util/specs.ts
@@ -9,7 +9,7 @@ import Bluebird from 'bluebird'
 import pluralize from 'pluralize'
 import glob from './glob'
 import Table from 'cli-table3'
-import type { CommonSearchOptions, FindSpecs } from '@packages/types'
+import type { CommonSearchOptions, FindSpecs, FoundSpec } from '@packages/types'
 
 const debug = Debug('cypress:server:specs')
 
@@ -34,7 +34,7 @@ const getPatternRelativeToProjectRoot = (specPattern: string, projectRoot: strin
  * Finds all spec files that pass the config for given type. Note that "commonSearchOptions" is
  * a subset of the project's "config" object
  */
-function findSpecsOfType (searchFolder: string, commonSearchOptions: CommonSearchOptions, specPattern?: string) {
+function findSpecsOfType (searchFolder: string, commonSearchOptions: CommonSearchOptions, specPattern?: string): Bluebird<FoundSpec[]> {
   let fixturesFolderPath: string | undefined = undefined
 
   // @ts-ignore - types are incorrect
@@ -99,14 +99,26 @@ function findSpecsOfType (searchFolder: string, commonSearchOptions: CommonSearc
     return path.relative(commonSearchOptions.projectRoot, file).replace(/\\/g, '/')
   }
 
-  const setNameParts = (file) => {
+  // TODO: get types working for the glob module.
+  const setNameParts = (file: string) => {
     debug('found spec file %s', file)
 
     if (!path.isAbsolute(file)) {
       throw new Error(`Cannot set parts of file from non-absolute path ${file}`)
     }
 
+    const fileExtension = path.extname(file)
+    const specFileExtension = ['.spec', '.test', '-spec', '-test']
+    .map((ext) => ext + fileExtension)
+    .find((ext) => file.endsWith(ext)) || fileExtension
+
+    const parsedFile = path.parse(file)
+
     return {
+      baseName: parsedFile.base,
+      fileName: parsedFile.base.replace(specFileExtension, ''),
+      specFileExtension,
+      fileExtension,
       name: relativePathFromSearchFolder(file),
       relative: relativePathFromProjectRoot(file),
       absolute: file,
@@ -183,12 +195,19 @@ const findIntegrationSpecs = (searchFolder: string | undefined, commonSearchOpti
   .then(setTestType(SPEC_TYPES.INTEGRATION))
 }
 
-const findComponentSpecs = (searchFolder: string | undefined | false, commonSearchOptions: CommonSearchOptions, specPattern: string | undefined) => {
+const findComponentSpecs = (searchFolder: string | undefined | false, integrationFolder: string | undefined | false, commonSearchOptions: CommonSearchOptions, specPattern: string | undefined) => {
   if (!searchFolder) {
     return []
   }
 
-  return findSpecsOfType(searchFolder, commonSearchOptions, specPattern)
+  const ignorePatternFromConfig = Array.isArray(commonSearchOptions.ignoreTestFiles) ? commonSearchOptions.ignoreTestFiles : [commonSearchOptions.ignoreTestFiles]
+  const ignoreTestFiles = [
+    // test files can either be string[] or string.
+    ...ignorePatternFromConfig,
+    `${integrationFolder }/**/*`,
+  ]
+
+  return findSpecsOfType(searchFolder, { ...commonSearchOptions, ignoreTestFiles }, specPattern)
   .then(setTestType(SPEC_TYPES.COMPONENT))
 }
 
@@ -211,11 +230,11 @@ const printFoundSpecs = (foundSpecs: Cypress.Spec[]) => {
  * Resolves with an array of objects. Each object has a "testType" property
  * with one of TEST_TYPES values.
  */
-const findSpecs = (payload: FindSpecs, specPattern?: string) => {
+const findSpecs = (payload: FindSpecs, specPattern?: string): Bluebird<FoundSpec[]> => {
   const { componentFolder, integrationFolder, ...commonSearchOptions } = payload
 
   return Bluebird.all([
-    findComponentSpecs(componentFolder, commonSearchOptions, specPattern),
+    findComponentSpecs(componentFolder, integrationFolder, commonSearchOptions, specPattern),
     findIntegrationSpecs(integrationFolder, commonSearchOptions, specPattern),
   ]).then(([ct, e2e]) => {
     const foundSpecs = [...ct, ...e2e]
diff --git a/packages/server/test/e2e/3_config_spec.js b/packages/server/test/e2e/3_config_spec.js
index 0a5d80d10f..5a813cd7d6 100644
--- a/packages/server/test/e2e/3_config_spec.js
+++ b/packages/server/test/e2e/3_config_spec.js
@@ -70,12 +70,6 @@ describe('e2e config', () => {
     })
   })
 
-  it('supports custom configFile in a default TypeScript file', function () {
-    return e2e.exec(this, {
-      project: Fixtures.projectPath('config-with-ts'),
-    })
-  })
-
   it('throws error when multiple default config file are found in project', function () {
     const projectRoot = Fixtures.projectPath('pristine')
 
diff --git a/packages/server/test/unit/modes/run_spec.js b/packages/server/test/unit/modes/run_spec.js
index 1821baa7b3..7659e21bc3 100644
--- a/packages/server/test/unit/modes/run_spec.js
+++ b/packages/server/test/unit/modes/run_spec.js
@@ -819,7 +819,6 @@ describe('lib/modes/run', () => {
           browser,
           {
             name: 'foo_spec.js',
-            path: 'cypress/integration/foo_spec.js',
             absolute: '/path/to/spec.js',
           },
           {
diff --git a/packages/types/src/spec.ts b/packages/types/src/spec.ts
index bd0e57b742..d758dd95cc 100644
--- a/packages/types/src/spec.ts
+++ b/packages/types/src/spec.ts
@@ -13,7 +13,11 @@ export type FindSpecs = {
 
 export interface FoundSpec {
   name: string
+  baseName: string
+  fileName: string
   relative: string
   absolute: string
+  specFileExtension: string
+  fileExtension: string
   specType: Cypress.CypressSpecType
 }
diff --git a/yarn.lock b/yarn.lock
index ec93d915af..145783c8f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3690,16 +3690,6 @@
     "@intlify/shared" "9.1.7"
     "@intlify/vue-devtools" "9.1.7"
 
-"@intlify/core-base@9.2.0-beta.1":
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.0-beta.1.tgz#962f8900a6a97481a1f317b66145ff8ad16c4ae1"
-  integrity sha512-nWX67QD565+qog8qxLVJAkoKXQGazEBVyIhgr3pjXUtEUh5JasP4PY+7/KeAW776IJ2EduzLJekNI66Mfy413A==
-  dependencies:
-    "@intlify/devtools-if" "9.2.0-beta.1"
-    "@intlify/message-compiler" "9.2.0-beta.1"
-    "@intlify/shared" "9.2.0-beta.1"
-    "@intlify/vue-devtools" "9.2.0-beta.1"
-
 "@intlify/core-base@9.2.0-beta.7":
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.0-beta.7.tgz#4ecf4d8ec615e085e45b4dccec359a652d051a22"
@@ -3724,13 +3714,6 @@
   dependencies:
     "@intlify/shared" "9.1.7"
 
-"@intlify/devtools-if@9.2.0-beta.1":
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.0-beta.1.tgz#c4e38215fe53f9ca46794ddc3b3fa9dc6d2dd16a"
-  integrity sha512-XznonwirTr7ilEeGGlU8nceOhXYXqA2eil1NfeeQH0NVrmhLQQL2l+X91eadqHLfcett23XPtv8Y2uBp9U/EXA==
-  dependencies:
-    "@intlify/shared" "9.2.0-beta.1"
-
 "@intlify/devtools-if@9.2.0-beta.7":
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.0-beta.7.tgz#9e4f37364d0851dc0c10c0198ecb0d1dcf2422c2"
@@ -3756,14 +3739,6 @@
     "@intlify/shared" "9.1.7"
     source-map "0.6.1"
 
-"@intlify/message-compiler@9.2.0-beta.1":
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.0-beta.1.tgz#ee16b565408d4f13d78a461a51bd696cb71a7836"
-  integrity sha512-Bj7/udWMhB2RSy6VvM7mp48ZTN3bbSwxOVBRFrK6rvhezQHZvtod/NQG2EQJQfOV+b2A6g0TTxpPQWWYfwPhIQ==
-  dependencies:
-    "@intlify/shared" "9.2.0-beta.1"
-    source-map "0.6.1"
-
 "@intlify/message-compiler@9.2.0-beta.7":
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.0-beta.7.tgz#893b3a5e9afbb5eb735d00a37d3b92dce5423684"
@@ -3810,11 +3785,6 @@
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.7.tgz#e7d8bc90cb59dc17dd7b4c85a73db16fcb7891fc"
   integrity sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ==
 
-"@intlify/shared@9.2.0-beta.1":
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.0-beta.1.tgz#52e587a094b30582bac6a80837961aea5348a653"
-  integrity sha512-O90dCE2o212XEZoByZdwIC8WBANB2uQwxf7EIpN4pRQPlNTVCYvI+xVINsTUCxjLt83p7OHiHPZEAXPPa8Vtpw==
-
 "@intlify/shared@9.2.0-beta.7":
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.0-beta.7.tgz#1be4de81f2cc8298e85b986a1ca4c1080b460a7d"
@@ -3840,14 +3810,6 @@
     "@intlify/runtime" "9.1.7"
     "@intlify/shared" "9.1.7"
 
-"@intlify/vue-devtools@9.2.0-beta.1":
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.0-beta.1.tgz#a099bdd56bc3eba3e66dbbf86daa09a00289cdf1"
-  integrity sha512-DuxYANwKCn8EdMW1LuQjt1UzzJgNu4n3Nn47ZMRph/b+oOsJGuZZ9b96VK+ryDO+ercB8DX4P3z39bk3IXJ7UA==
-  dependencies:
-    "@intlify/core-base" "9.2.0-beta.1"
-    "@intlify/shared" "9.2.0-beta.1"
-
 "@intlify/vue-devtools@9.2.0-beta.7":
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.0-beta.7.tgz#44665d5d11e0705e3ea42e0affaae550219c540f"
@@ -8509,6 +8471,11 @@
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
+"@types/faker@5.5.8":
+  version "5.5.8"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.5.8.tgz#6649adfdfdbb0acf95361fc48f2d0ca6e88bd1cf"
+  integrity sha512-bsl0rYsaZVHlZkynL5O04q6YXDmVjcid6MbOHWqvtE2WWs/EKhp0qchDDhVWlWyQXUffX1G83X9LnMxRl8S/Mw==
+
 "@types/filesystem@*":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.29.tgz#ee3748eb5be140dcf980c3bd35f11aec5f7a3748"
@@ -15352,6 +15319,11 @@ columnify@^1.5.4, columnify@~1.5.4:
     strip-ansi "^3.0.0"
     wcwidth "^1.0.0"
 
+combine-properties@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/combine-properties/-/combine-properties-0.1.0.tgz#512c1ddab65d3f922bc8e35c2a616c80409e76f7"
+  integrity sha1-USwd2rZdP5IryONcKmFsgECedvc=
+
 combine-source-map@^0.8.0, combine-source-map@~0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.8.0.tgz#a58d0df042c186fcf822a8e8015f5450d2d79a8b"
@@ -20041,6 +20013,11 @@ fake-uuid@^1.0.0:
   resolved "https://registry.yarnpkg.com/fake-uuid/-/fake-uuid-1.0.0.tgz#7d570548f188ea5e5f4cf0d742a8b2d19b468412"
   integrity sha512-EK0o9XKlJNhW01NkMRb+9mxXe6b9vxu/jXc3XRxbCwZpFPcT3ZcEsRG8cu0IgpIU8iiRmaYBLJBMViPZVOwnmQ==
 
+faker@5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
+  integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
+
 fancy-log@^1.3.2, fancy-log@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
@@ -26257,6 +26234,11 @@ just-extend@^4.0.2:
   resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.1.1.tgz#158f1fdb01f128c411dc8b286a7b4837b3545282"
   integrity sha512-aWgeGFW67BP3e5181Ep1Fv2v8z//iBJfrvyTnq8wG86vEESwmonn1zPBJ0VfmT9CJq2FIT0VsETtrNFm2a+SHA==
 
+just-my-luck@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/just-my-luck/-/just-my-luck-3.0.0.tgz#a5567eb4fad51100436e1bfd6492f2d9613aaf4e"
+  integrity sha512-8uuZI//v2GAnSzZqcQhg4dWuFqR7DWV6hN0L9m7j3oNq24CHMI761PliccYWx7mbxjE3G2c7wTrubn3NbmvTQg==
+
 jwa@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
@@ -41641,17 +41623,7 @@ vue-i18n@9.0.0-rc.6:
     "@intlify/shared" "9.0.0-rc.6"
     "@vue/devtools-api" "^6.0.0-beta.5"
 
-vue-i18n@9.2.0-beta.1:
-  version "9.2.0-beta.1"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.0-beta.1.tgz#f871b3b5411b286dc5df94950341210c0909f888"
-  integrity sha512-W311FkT4WJfhBxOuv8hcnJbZoKbPfg0Klq3417MKGTueUqR1lnEed6OtKgqqqPX7U1aeRAIpzveibeiT5uNLgg==
-  dependencies:
-    "@intlify/core-base" "9.2.0-beta.1"
-    "@intlify/shared" "9.2.0-beta.1"
-    "@intlify/vue-devtools" "9.2.0-beta.1"
-    "@vue/devtools-api" "^6.0.0-beta.13"
-
-vue-i18n@^9.2.0-beta.7:
+vue-i18n@9.2.0-beta.7, vue-i18n@^9.2.0-beta.7:
   version "9.2.0-beta.7"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.0-beta.7.tgz#d1f68759873c4f5ea2db5c08877afd8f26482430"
   integrity sha512-SwzwGQFlHbS1rI+qp9dKJB+jP0HmlCUdWL99CugCPhhnDKm2sdd0Vw2Hiwa6cMxxWs6fpccGFTlmTwWtTpvAog==