diff --git a/package-lock.json b/package-lock.json
index c464545..aeac281 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/papaparse": "^5.3.14",
-        "marked": "^13.0.1",
         "papaparse": "^5.4.1",
+        "pinia": "^2.2.1",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3",
         "vuetify": "^3.6.10"
@@ -2737,17 +2737,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
-    "node_modules/marked": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.1.tgz",
-      "integrity": "sha512-7kBohS6GrZKvCsNXZyVVXSW7/hGBHe49ng99YPkDCckSUrrG7MSFLCexsRxptzOmyW2eT5dySh4Md1V6my52fA==",
-      "bin": {
-        "marked": "bin/marked.js"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -3151,6 +3140,58 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.1.tgz",
+      "integrity": "sha512-ltEU3xwiz5ojVMizdP93AHi84Rtfz0+yKd8ud75hr9LVyWX2alxp7vLbY1kFm7MXFmHHr/9B08Xf8Jj6IHTEiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.2.tgz",
diff --git a/package.json b/package.json
index 1e81ba7..a20ba86 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@types/papaparse": "^5.3.14",
-    "marked": "^13.0.1",
     "papaparse": "^5.4.1",
+    "pinia": "^2.2.1",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
     "vuetify": "^3.6.10"
diff --git a/src/App.vue b/src/App.vue
index e82aec0..21251ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,21 +2,27 @@
 import UploadForm from './components/UploadForm.vue'
 import PageHeader from './components/PageHeader.vue'
 import PageFooter from './components/PageFooter.vue'
-import ContributionInfo from './components/ContributionInfo.vue'
 import '@mdi/font/css/materialdesignicons.css'
 </script>
 
 <template>
-  <PageHeader />
-  <h1>Register Persistant Identifiers for Geoconnex</h1>
-  <UploadForm />
-  <ContributionInfo />
-  <PageFooter />
+  <v-app class="pa-0 ma-0">
+    <PageHeader />
+    <h1 class="text-center mt-4">Register Persistent Identifiers for Geoconnex</h1>
+    <UploadForm />
+    <PageFooter />
+  </v-app>
 </template>
 
-<style scoped>
-h1 {
-  text-align: center;
+<style>
+/* Default light mode background color */
+body {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2 {
   color: #1b335f;
 }
 </style>
diff --git a/src/components/CSVReference.vue b/src/components/CSVReference.vue
new file mode 100644
index 0000000..2ba0035
--- /dev/null
+++ b/src/components/CSVReference.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-expansion-panels class="panels mb-5" id="panels" color="primary--text" v-model="activePanel">
+    <v-expansion-panel title="CSV Formatting Reference" value="1">
+      <v-expansion-panel-text class="expansion-panel">
+        <v-card-text class="markdown-card-text text-center pa-0 ma-0">
+          <br />
+          <i class="pa-12"
+            >Ensure your identifiers are well-documented and all info is up-to-date to so that
+            Geoconnex administrators can follow up with you if there are any issues.</i
+          >
+          <br />
+          <br />
+          <p class="text-center mb-4">The 4 columns required in your CSV mapping should be:</p>
+
+          <div class="d-flex mx-4 px-4">
+            <p>
+              <b><code>id </code></b> <br />
+              <i
+                >The ID within geoconnex that your data should map to. These are unique, will
+                redirect to the associated target, and are meant for individual monitoring
+                locations.
+              </i>
+            </p>
+            <p>
+              <b><code>target </code></b> <br />
+              <i>The URL pointing to a JSON-LD landing page for a single feature in your data.</i>
+            </p>
+            <p>
+              <b><code>creator </code></b> <br />
+              <i>A contact email for someone associated with the data</i>
+            </p>
+            <p>
+              <b><code>description </code></b> <br />
+              <i>A description of your data.</i>
+            </p>
+          </div>
+
+          <br />
+          <v-btn
+            class="flex ma-2"
+            target="_blank"
+            append-icon="mdi-open-in-new"
+            href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/iow/demo.csv"
+            >1:1 example</v-btn
+          >
+          <v-btn
+            target="_blank"
+            append-icon="mdi-open-in-new"
+            href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/usgs/monitoring-location/monitoring-location.csv"
+            >1:N example</v-btn
+          >
+          <br />
+          For more detailed info regarding the format of your CSV, see the
+          <a href="https://docs.geoconnex.us/reference/data-formats/csv-submissions/">
+            CSV formatting documentation</a
+          >
+        </v-card-text>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'CSVReference',
+
+  data() {
+    return {
+      // auto open the first panel
+      activePanel: '1'
+    }
+  }
+})
+</script>
+
+<style scoped>
+.expansion-panel {
+  background-color: rgb(var(--v-theme-secondary));
+}
+
+#panels {
+  background-color: rgb(var(--v-theme-secondary));
+}
+</style>
diff --git a/src/components/ContributionInfo.vue b/src/components/ContributionInfo.vue
deleted file mode 100644
index 27319ce..0000000
--- a/src/components/ContributionInfo.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <v-expansion-panels id="contribution" class="contribution-button" @click="toggleMarkdown">
-    <v-expansion-panel
-      class="expansion-panel text-center"
-      title="Detailed contribution documentation"
-    >
-      <v-card v-if="showing">
-        <v-card-text class="markdown-card-text pa-10">
-          <div id="markdownContainer">
-            <div id="markdownContent" class="markdown-content" v-html="renderedMarkdown"></div>
-          </div>
-        </v-card-text>
-      </v-card>
-    </v-expansion-panel>
-  </v-expansion-panels>
-</template>
-
-<script lang="ts">
-import { marked } from 'marked'
-import { defineComponent, ref } from 'vue'
-import { fetchMarkdownContent } from '../lib/helpers'
-
-export default defineComponent({
-  setup() {
-    const showing = ref(false)
-    const renderedMarkdown = ref<string>('')
-
-    const toggleMarkdown = async () => {
-      showing.value = !showing.value
-
-      if (showing.value) {
-        try {
-          const url =
-            'https://api.github.com/repos/internetofwater/geoconnex.us/contents/CONTRIBUTING.md'
-          const markdown = await fetchMarkdownContent(url)
-          const html = await marked(markdown)
-          renderedMarkdown.value = html
-        } catch (error) {
-          console.error('Error fetching or rendering markdown:', error)
-          renderedMarkdown.value = 'Error fetching or rendering markdown.'
-        }
-      } else {
-        renderedMarkdown.value = ''
-      }
-    }
-
-    return {
-      showing,
-      renderedMarkdown,
-      toggleMarkdown
-    }
-  }
-})
-</script>
-
-<style scoped>
-.contribution-button {
-  margin: 0 auto;
-  text-align: center;
-  width: 50%;
-}
-
-@media (max-width: 480px) {
-  .contribution-button {
-    width: 80%;
-  }
-}
-
-.expansion-panel {
-  background-color: #f4f4f9;
-  color: #333;
-}
-
-.markdown-card-text {
-  padding: 16px;
-  text-align: start;
-}
-</style>
-
-<style>
-.markdown-content h2,
-.markdown-content p,
-.markdown-content ul,
-.markdown-content ol li {
-  margin-bottom: 8px;
-}
-
-.markdown-content ol {
-  list-style-position: inside;
-}
-
-.markdown-content ul {
-  padding-left: 32px;
-  list-style-position: outside;
-}
-</style>
diff --git a/src/components/GeoconnexBackground.vue b/src/components/GeoconnexBackground.vue
new file mode 100644
index 0000000..dc1544c
--- /dev/null
+++ b/src/components/GeoconnexBackground.vue
@@ -0,0 +1,48 @@
+<template>
+  <h2 class="text-center">Geoconnex Background Info</h2>
+
+  <p class="text-center pa-4">
+    The <a href="https://geoconnex.us">geoconnex.us</a> project provides technical infrastructure
+    and guidance for creating an open, community-contribution model for a knowledge graph linking
+    hydrologic features in the United States, published in accordance with Spatial Data on the Web
+    best practices as an implementation of Internet of Water principles.
+  </p>
+
+  <p class="text-center pa-4">
+    This website allows users to create Geoconnex linkages to their own water data. Submit a CSV
+    file to register persistent URL-formatted identifiers for your organization's monitoring
+    locations within a namespace. The features you link to must already exist online and have their
+    own web page.
+  </p>
+  <v-alert color="info" class="mb-2" icon="$info" variant="flat" title="Additional details ">
+    For more details, the
+    <a href="https://docs.geoconnex.us/">geoconnex documentation</a> provides a general overview of
+    geoconnex and a tutorial for how to:
+    <ol>
+      <li>
+        1.
+        <a href="https://docs.geoconnex.us/contributing/step-1/idscheme"> Prepare your data</a>
+        with the proper metadata context
+      </li>
+      <li>
+        2. Host your data, if you have not done so already, with
+        <a href="https://docs.geoconnex.us/contributing/step-2/">individual web pages</a>
+        that can be linked to as the "target" column in your uploaded CSV
+      </li>
+      <li>
+        3.<a href="https://docs.geoconnex.us/contributing/step-3/minting"> Submit your CSV data</a>,
+        either here or Github, after checking it is
+        <a href="https://docs.geoconnex.us/reference/data-formats/csv-submissions/">
+          properly formatted</a
+        >
+      </li>
+    </ol>
+  </v-alert>
+</template>
+
+<style scoped>
+/* remove highlighting for visited link */
+a:visited {
+  color: inherit;
+}
+</style>
diff --git a/src/components/MetadataGenerator.vue b/src/components/MetadataGenerator.vue
new file mode 100644
index 0000000..0f6ccb0
--- /dev/null
+++ b/src/components/MetadataGenerator.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { fetchAllNamespaces } from '@/lib/helpers'
+</script>
+
+<template>
+  <p class="text-center pa-6 font-italic w-66 mx-auto">
+    A namespace is a short name or alias for your organization. It will be created upon submission
+    if it does not already exist. If the namespace already exists, your new CSV file will be added
+    to the existing namespace
+  </p>
+
+  <v-combobox
+    label="Pick your organization if it exists, or create a new namespace"
+    class="w-66 mx-auto"
+    required
+    :items="existingNamespaces"
+    v-model="namespace"
+  ></v-combobox>
+  <v-checkbox
+    class="d-flex justify-center mb-4"
+    label="I already have a readme file uploaded to my namespace and do not wish to update my contribution info"
+    v-model="readmeAlreadyUploaded"
+  >
+  </v-checkbox>
+
+  <div v-if="!readmeAlreadyUploaded">
+    <v-text-field
+      v-model="homepage"
+      label="Homepage for where redirects will point to"
+      type="url"
+      required
+      variant="outlined"
+      hint="Example: https://waterdata.usgs.gov"
+      persistent-hint
+      class="pb-4"
+    ></v-text-field>
+
+    <v-textarea
+      v-model="description"
+      label="Description of data"
+      required
+      variant="outlined"
+      hint="Example: All monitoring locations used by the USGS Waterdata system"
+      persistent-hint
+      class="pb-4"
+    ></v-textarea>
+
+    <v-text-field
+      v-model="example_pid"
+      label="Example PID"
+      required
+      variant="outlined"
+      hint="Example: https://geoconnex.us/usgs/monitoring-location/08383500"
+      persistent-hint
+      class="pb-4"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="example_redirect_target"
+      label="Example redirect target url"
+      type="url"
+      variant="outlined"
+      hint="Example: https://waterdata.usgs.gov/monitoring-location/08383500"
+      persistent-hint
+      class="pb-4"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="contact_name"
+      label="Contact name"
+      hint="Example: John Smith"
+      required
+      variant="outlined"
+      class="pb-4"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="contact_email"
+      label="Contact email"
+      append-inner-icon="mdi-email"
+      required
+      variant="outlined"
+      type="email"
+      hint="Example: user@usgs.gov"
+    ></v-text-field>
+  </div>
+
+  <v-alert type="error" class="w-50 mx-auto" v-if="!valid" icon="mdi-alert">
+    {{ error }}
+  </v-alert>
+</template>
+
+<script lang="ts">
+import { generateReadMe } from '@/lib/helpers'
+import type { MarkdownSection } from '@/lib/types'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  emits: ['result'],
+  data() {
+    return {
+      homepage: '',
+      namespace: '',
+      description: '',
+      example_pid: '',
+      example_redirect_target: '',
+      contact_name: '',
+      contact_email: '',
+      readmeAlreadyUploaded: false,
+      existingNamespaces: [] as string[],
+      error: '',
+      file: null as File | null
+    }
+  },
+  async created() {
+    this.existingNamespaces = await fetchAllNamespaces()
+  },
+
+  computed: {
+    valid() {
+      if (this.namespace.length == 0) {
+        this.error = 'Namespace is required'
+        this.$emit('result', {
+          readme: null,
+          namespace: this.namespace,
+          blockNext: true
+        })
+        return false
+      }
+
+      if (!this.readmeAlreadyUploaded) {
+        const requiredReadmeFields: MarkdownSection[] = [
+          { body: this.homepage, sectionName: 'Homepage' },
+          { body: this.description, sectionName: 'Description' },
+          { body: this.example_pid, sectionName: 'Example PID' },
+          { body: this.example_redirect_target, sectionName: 'Example redirect target URL' },
+          { body: this.contact_name, sectionName: 'Contact name' },
+          { body: this.contact_email, sectionName: 'Contact email' }
+        ]
+
+        for (const field of requiredReadmeFields) {
+          if (field.body.length == 0) {
+            this.error = `${field.sectionName} is required`
+            this.$emit('result', {
+              readme: null,
+              namespace: this.namespace,
+              blockNext: true
+            })
+            return false
+          }
+        }
+
+        const generatedReadme = generateReadMe(this.namespace, requiredReadmeFields)
+        this.file = new File([generatedReadme], 'README.md', { type: 'text/plain' })
+        this.error = ''
+        this.$emit('result', {
+          readme: this.file,
+          namespace: this.namespace,
+          blockNext: false
+        })
+      }
+      // If the user didn't add a readme, just return the namespace
+      else {
+        this.$emit('result', {
+          readme: null,
+          namespace: this.namespace,
+          blockNext: false
+        })
+      }
+
+      // after handling all emit logic, make sure the form is not in an invalid state
+      // since we didn't return early, we know it is true
+      this.error = ''
+      return true
+    }
+  }
+})
+</script>
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index eb54453..f1de613 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -1,35 +1,46 @@
 <template>
-  <div class="footer">
-    <a href="https://internetofwater.org" class="logo-link">
-      <img
-        src="@/assets/logo-iow.png"
-        alt="Geoconnex Logo"
-        title="internetofwater.org"
-        class="logo-img"
-      />
-    </a>
-    <a href="https://cgsearth.org" class="logo-link">
-      <img src="@/assets/logo-cgs.png" alt="Geoconnex Logo" title="cgsearth.org" class="logo-img" />
-    </a>
-  </div>
+  <v-footer class="footer pa-8" width="auto">
+    <div class="logo-container">
+      <a href="https://internetofwater.org" class="logo-link">
+        <img
+          src="@/assets/logo-iow.png"
+          alt="Internet of Water Logo"
+          title="internetofwater.org"
+          class="logo-img"
+        />
+      </a>
+      <a href="https://cgsearth.org" class="logo-link">
+        <img
+          src="@/assets/logo-cgs.png"
+          alt="CGS Earth Logo"
+          title="cgsearth.org"
+          class="logo-img"
+        />
+      </a>
+    </div>
+  </v-footer>
 </template>
 
 <style scoped>
 .footer {
-  width: 100%;
-  background-color: #f0f0f0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 10px 20px;
-  margin-top: 40px;
+  background-color: rgba(0, 0, 0, 0);
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
+  /* Align items to the bottom */
+  height: 120px;
+}
+
+.logo-container {
+  display: flex;
+  align-items: flex-end;
+  /* Align logos to the bottom of the container */
 }
 
 .logo-img {
   width: 180px;
-  height: auto;
-  /* Maintain aspect ratio */
   padding: 0 16px;
 }
 </style>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 821d31e..2b13b32 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,32 +1,61 @@
 <template>
-  <div class="header">
-    <a href="https://geoconnex.us" class="logo-link">
-      <img
-        src="@/assets/logo-geoconnex.png"
-        alt="Geoconnex Logo"
-        title="geoconnex.us"
-        class="logo-geoconnex"
-      />
-    </a>
+  <div class="header pa-6 mb-4">
+    <div class="logo-container">
+      <a href="https://geoconnex.us">
+        <img
+          src="@/assets/logo-geoconnex.png"
+          alt="Geoconnex Logo"
+          title="geoconnex.us"
+          class="logo-geoconnex"
+        />
+      </a>
+    </div>
+
+    <!-- TODO: Dark mode is implemented by the icons in the footer do not look good with it
+        work for future sprint 
+    -->
+    <!-- <v-icon @click="toggleTheme" icon="mdi-theme-light-dark" class="theme-toggle-icon"></v-icon> -->
   </div>
 </template>
 
+<!-- <script setup lang="ts">
+import { useTheme } from 'vuetify'
+
+const theme = useTheme()
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
+</script> -->
+
 <style scoped>
 .header {
-  width: 100%;
-  background-color: #f0f0f0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 10px 20px;
-  margin-bottom: 40px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  /* Vertically center items */
+  justify-content: space-between;
+  /* Space out the logo and the theme icon */
+  padding: 10px;
+
+  background-color: rgb(var(--v-theme-primary));
+}
+
+.logo-container {
+  flex: 1;
+  /* Allow the logo to take up available space */
+  text-align: center;
+  /* Center the logo */
 }
 
 .logo-geoconnex {
   width: 480px;
   height: auto;
-  /* Maintain aspect ratio */
+}
+
+.theme-toggle-icon {
+  margin-left: auto;
+  /* Push the icon to the right */
+  height: auto;
 }
 
 @media (max-width: 500px) {
@@ -34,4 +63,12 @@
     width: 360px;
   }
 }
+
+.logo-geoconnex {
+  -webkit-filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.594)) drop-shadow(-1px 1px 0 white)
+    drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white);
+
+  filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0.29 white)
+    drop-shadow(1px -1px 0.29 white) drop-shadow(-1px -1px 0.29 white);
+}
 </style>
diff --git a/src/components/URLCheckSummary.vue b/src/components/URLCheckSummary.vue
index 0c05a54..a613d31 100644
--- a/src/components/URLCheckSummary.vue
+++ b/src/components/URLCheckSummary.vue
@@ -1,18 +1,36 @@
 <template>
-  <div v-if="crawlErrors && crawlErrors.length > 0">
+  <div v-if="crawlErrors && crawlErrors.length > 0 && !progress.running">
     <v-data-table :items="crawlErrors"> </v-data-table>
   </div>
+
+  <v-col cols="12" class="text-center">
+    <div class="justify-center" v-if="progress.running">
+      <v-progress-circular indeterminate color="primary"> </v-progress-circular>
+      <br />
+      <br />
+      <p>{{ progress.action }}</p>
+    </div>
+  </v-col>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+interface Progress {
+  running: boolean
+  action: string
+}
+
 export default defineComponent({
   name: 'URLCheckSummary',
   props: {
     crawlErrors: {
       type: Array as () => { url: string; error: string }[] | undefined,
       required: true
+    },
+    progress: {
+      type: Object as () => Progress,
+      required: true
     }
   }
 })
diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue
index a86237d..a644e20 100644
--- a/src/components/UploadForm.vue
+++ b/src/components/UploadForm.vue
@@ -1,211 +1,136 @@
+<!-- eslint-disable vue/valid-v-slot -->
 <script setup lang="ts">
 import URLCheckSummary from '@/components/URLCheckSummary.vue'
+import CSVReference from '@/components/CSVReference.vue'
+import GeoconnexBackground from '@/components/GeoconnexBackground.vue'
+import MetadataGenerator from '@/components/MetadataGenerator.vue'
 </script>
 
 <template>
-  <v-container class="fill-height" fluid>
-    <v-row justify="center">
-      <v-col cols="12" sm="8">
-        <v-form id="uploadForm" @submit.prevent="submitForm" class="form-container">
-          <v-container class="form-content">
-            <v-row>
-              <p class="text-center pa-4">
-                The <a href="https://geoconnex.us">geoconnex.us</a> project provides technical
-                infrastructure and guidance for creating an open, community-contribution model for a
-                knowledge graph linking hydrologic features in the United States, published in
-                accordance with Spatial Data on the Web best practices as an implementation of
-                Internet of Water principles.
-              </p>
-              <p class="text-center pa-4">
-                This tool allows users to create Geoconnex linkages to their own water data. Submit
-                a CSV file to register persistent URL-formatted identifiers for your organization's
-                monitoring locations within a 'namespace' (short name for your organization). The
-                features you link to must already exist online and have their own web page, if this
-                is not true, learn how to do so
-                <a href="https://docs.geoconnex.us/reference/data-formats/jsonld/primer/building"
-                  >here</a
-                >.
-              </p>
-              <v-col cols="12">
-                <v-expansion-panels class="contribution-button mb-5">
-                  <v-expansion-panel title="CSV Formatting Information" bg-color="#f4f4f9">
-                    <v-expansion-panel-text class="expansion-panel text-1b335f">
-                      <v-card-text class="markdown-card-text text-center pa-0 ma-0">
-                        <v-row>
-                          <i class="pa-4"
-                            >Ensure your identifiers are well-documented and all info is up-to-date
-                            to so that Geoconnex administrators can follow up with you if there are
-                            any issues.</i
-                          >
-                        </v-row>
-                        <br />
-                        The 4 columns in your CSV mapping should be: <br />
-                        <code>id target creator description</code>
-                        <br />
-                        <v-btn
-                          class="flex ma-2"
-                          target="_blank"
-                          variant="test"
-                          append-icon="mdi-open-in-new"
-                          href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/iow/demo.csv"
-                          >1:1 example</v-btn
-                        >
-                        <v-btn
-                          target="_blank"
-                          variant="text"
-                          append-icon="mdi-open-in-new"
-                          href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/usgs/monitoring-location/monitoring-location.csv"
-                          >1:N example</v-btn
-                        >
-                        <br />
-                        For more detailed info, see the
-                        <a href="https://docs.geoconnex.us/reference/data-formats/csv-submissions/">
-                          CSV formatting documentation</a
-                        >
-                      </v-card-text>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-                <!-- <v-col cols="12">
-                <v-file-input v-model="readme" label="Readme for Namespace" accept=".md" outlined>
-                </v-file-input> 
-              </v-col> -->
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-text-field
-                  v-model="namespace"
-                  label="Namespace"
-                  hint="Example: usgs"
-                  variant="outlined"
-                  required
-                ></v-text-field> </v-col
-              ><v-col cols="12" md="8">
-                <v-file-input
-                  v-model="file"
-                  label="CSV Mapping"
-                  accept=".csv"
-                  required
-                  show-size
-                  variant="outlined"
-                  @change="checkValid"
-                />
-              </v-col>
-              <v-col cols="12">
-                <v-checkbox
-                  label="I already have a readme file uploaded to my namespace and do not wish to update my contribution info"
-                  v-model="readmeAlreadyUploaded"
-                >
-                </v-checkbox>
+  <v-container class="fill-width w-66 d-flex align-center justify-center" fluid>
+    <v-row class="justify-center align-center fill-height">
+      <v-col cols="12">
+        <v-stepper
+          :items="[
+            'Step 1: Review Background',
+            'Step 2: Add CSV',
+            'Step 3: Add Metadata',
+            'Step 4: Submit'
+          ]"
+          :hide-actions="hideNext"
+        >
+          <template v-slot:item.1>
+            <GeoconnexBackground />
+          </template>
 
-                <div v-if="!readmeAlreadyUploaded">
-                  <div>
-                    <v-card-text class="text-center">
-                      <v-row class="d-flex justify-center">
-                        <h2>Contribution Information</h2>
-                        <!-- <v-icon icon="mdi-information" class="ml-3" color="#1B335F" :onclick="toggleHelp"></v-icon> -->
-                      </v-row>
-                    </v-card-text>
-                  </div>
-                  <v-text-field
-                    v-model="homepage"
-                    label="Homepage for where redirects will point to"
-                    type="url"
-                    required
-                    variant="outlined"
-                    hint="Example: https://waterdata.usgs.gov"
-                    persistent-hint
-                    class="pb-4"
-                  ></v-text-field>
+          <template v-slot:item.2>
+            <h2 class="text-center">Upload your CSV Mapping</h2>
 
-                  <v-textarea
-                    v-model="description"
-                    label="Description of data"
-                    required
-                    variant="outlined"
-                    hint="Example: All monitoring locations used by the USGS Waterdata system"
-                    persistent-hint
-                    class="pb-4"
-                  ></v-textarea>
+            <p class="pa-4 text-center mx-auto w-66">
+              Geoconnex will use your CSV to associate your data resources to unique Geoconnex ids.
+              It will also use the target URL you supply to access each feature for the purpose of
+              constructing the Geoconnex knowledge graph.
+            </p>
 
-                  <v-text-field
-                    v-model="example_pid"
-                    label="Example PID"
-                    required
-                    variant="outlined"
-                    hint="Example: https://geoconnex.us/usgs/monitoring-location/08383500"
-                    persistent-hint
-                    class="pb-4"
-                  ></v-text-field>
+            <CSVReference class="mt-4" />
 
-                  <v-text-field
-                    v-model="example_redirect_target"
-                    label="Example redirect target url"
-                    type="url"
-                    variant="outlined"
-                    hint="Example: https://waterdata.usgs.gov/monitoring-location/08383500"
-                    persistent-hint
-                    class="pb-4"
-                  ></v-text-field>
+            <v-file-input
+              v-model="csv"
+              label="CSV Mapping"
+              accept=".csv"
+              required
+              show-size
+              variant="outlined"
+              @change="checkCSV"
+              class="w-50 mx-auto"
+            />
 
-                  <v-text-field
-                    v-model="contact_name"
-                    label="Contact name"
-                    hint="Example: John Smith"
-                    required
-                    variant="outlined"
-                    class="pb-4"
-                  ></v-text-field>
+            <URLCheckSummary
+              :crawlErrors="crawlErrors"
+              :progress="progress"
+              class="mt-4"
+            ></URLCheckSummary>
 
-                  <v-text-field
-                    v-model="contact_email"
-                    label="Contact email"
-                    append-inner-icon="mdi-email"
-                    required
-                    variant="outlined"
-                    type="email"
-                    hint="Example: user@usgs.gov"
-                  ></v-text-field>
-                </div>
-              </v-col>
-            </v-row>
-          </v-container>
-          <v-fade-transition>
-            <v-alert
-              :color="error.level || 'error'"
-              :icon="`$${error.level || 'error'}`"
-              :title="error.type"
-              :text="error.text"
-              v-if="error.type && !progress.running"
+            <v-fade-transition class="mx-auto w-66">
+              <v-alert
+                :color="checkError.level || 'error'"
+                :icon="`$${checkError.level || 'error'}`"
+                :title="checkError.type"
+                :text="checkError.text"
+                v-if="checkError.type && !progress.running"
+              >
+              </v-alert>
+              <v-alert
+                color="success"
+                icon="$success"
+                title="Data mapping submitted"
+                :text="result"
+                v-if="checkError.type == null && result && !progress.running"
+              ></v-alert>
+            </v-fade-transition>
+
+            <v-btn
+              v-if="checkError.type === 'Issues Checking CSV' && !progress.running"
+              @click="overrideError"
+              class="mt-6 d-flex mx-auto ignoreButton"
             >
-            </v-alert>
-          </v-fade-transition>
-          <v-fade-transition>
-            <v-alert
-              color="success"
-              icon="$success"
-              title="Data Links Submitted"
-              :text="result"
-              v-if="error.type == null && result && !progress.running"
-            ></v-alert>
-          </v-fade-transition>
-          <v-col cols="12" class="text-center" v-if="!hideSubmission">
-            <v-btn type="submit" color="#00A087"> Submit </v-btn>
-          </v-col>
-          <v-col cols="12" class="text-center">
-            <div class="justify-center" v-if="progress.running">
-              <v-progress-circular indeterminate color="primary"> </v-progress-circular>
-              <br />
-              <br />
-              <p>{{ progress.action }}</p>
-            </div>
-          </v-col>
-          <v-col cols="12" class="text-center">
-            <v-btn v-if="error.type === 'Issues Checking CSV'" @click="overrideError">
               Ignore warning and override
             </v-btn>
-            <URLCheckSummary :crawlErrors="crawlErrors" class="mt-4"></URLCheckSummary>
-          </v-col>
-        </v-form>
+          </template>
+
+          <template v-slot:item.3>
+            <h2 class="mb-4 text-center">Add Metadata for your CSV Contribution</h2>
+
+            <MetadataGenerator :namespace="namespace" @result="setMetadata" />
+          </template>
+
+          <template v-slot:item.4>
+            <h2 class="text-center">Submit your Data Mapping</h2>
+            <p class="text-center mx-auto w-66 pa-4">
+              Your data will be submitted to the
+              <a href="https://github.com/internetofwater/geoconnex.us" target="_blank"
+                >Geoconnex URI registry</a
+              >
+              on GitHub. Once submitted, you will be able to view the request to add your data to
+              Geoconnex.
+            </p>
+
+            <v-col cols="12" class="text-center">
+              <div class="justify-center" v-if="progress.running">
+                <v-progress-circular indeterminate color="primary"> </v-progress-circular>
+                <br />
+                <br />
+                <p>{{ progress.action }}</p>
+              </div>
+            </v-col>
+
+            <v-fade-transition class="mt-4 mx-auto w-66">
+              <v-alert
+                :color="checkError.level || 'error'"
+                :icon="`$${checkError.level || 'error'}`"
+                :title="checkError.type"
+                :text="checkError.text"
+                v-if="
+                  checkError.type != 'Checked CSV without errors' &&
+                  checkError.type &&
+                  !progress.running
+                "
+              >
+              </v-alert>
+              <v-alert
+                color="success"
+                icon="$success"
+                title="Data Submitted"
+                :text="result"
+                v-if="checkError.type == null && result && !progress.running"
+              ></v-alert>
+            </v-fade-transition>
+
+            <v-col cols="12" class="text-center mt-8">
+              <v-btn type="submit" @click="submitForm" class="bg-accent"> Submit </v-btn>
+            </v-col>
+          </template>
+        </v-stepper>
       </v-col>
     </v-row>
   </v-container>
@@ -213,13 +138,12 @@ import URLCheckSummary from '@/components/URLCheckSummary.vue'
 
 <script lang="ts">
 import { submitData } from '@/lib/upload'
-import { generateReadMe } from '@/lib/helpers'
-import { type MarkdownSection, type ValidationReport } from '@/lib/types'
 import { defineComponent } from 'vue'
 import { validGeoconnexCSV } from '@/lib/helpers'
+import type { ValidationReport } from '@/lib/types'
 
-interface FormError {
-  type: 'Issues Checking CSV' | 'Error Submitting PR' | 'Checked CSV without errors' | null
+interface CheckError {
+  type: 'Issues Checking CSV' | 'Error submitting data' | 'Checked CSV without errors' | undefined
   text: string
   level?: 'error' | 'warning' | 'info'
 }
@@ -228,108 +152,96 @@ export default defineComponent({
   data() {
     return {
       namespace: '',
-      file: null as File | null,
+      csv: null as File | null,
       readme: null as File | null,
-      error: {} as FormError,
+      checkError: {} as CheckError,
       result: '',
-      homepage: '',
-      description: '',
-      example_pid: '',
-      example_redirect_target: '',
-      contact_name: '',
-      contact_email: '',
-      readmeAlreadyUploaded: false,
       progress: { running: false, action: '' },
       crawlErrors: [] as ValidationReport['crawlErrors'],
-      hideSubmission: false
+      existingNamespaces: [] as string[],
+      blockNext: false
+    }
+  },
+  computed: {
+    hideNext() {
+      return (
+        this.checkError.type === 'Issues Checking CSV' || this.progress.running || this.blockNext
+      )
     }
   },
-  methods: {
-    async checkValid() {
-      this.error = { type: null, text: '' }
-      this.crawlErrors = []
-
-      if (!this.file) {
-        return
-      }
-      this.hideSubmission = true
 
+  methods: {
+    async checkCSV() {
       this.progress = {
         running: true,
         action: 'Validating your CSV data. This may take a minute...'
       }
-      const { valid, errorSummary, crawlErrors } = await validGeoconnexCSV(this.file)
+
+      if (!this.csv) {
+        return
+      }
+      const { valid, errorSummary, crawlErrors } = await validGeoconnexCSV(this.csv)
+      this.crawlErrors = crawlErrors
 
       if (!valid) {
         if (this.crawlErrors !== undefined) {
-          this.crawlErrors = crawlErrors as { url: string; error: string }[]
           this.progress = { running: false, action: '' }
-          this.error = {
+          this.checkError = {
             type: 'Issues Checking CSV',
             text: errorSummary as string,
             level: 'warning'
           }
-          return
+          return false
+        }
+      } else {
+        this.checkError = {
+          type: 'Checked CSV without errors',
+          text: 'Note: automated tests do not check regex URLs. If you have these, please validate any complex logic independently.',
+          level: 'info'
         }
+        this.progress = { running: false, action: '' }
+        return true
       }
-      this.error = {
-        type: 'Checked CSV without errors',
-        text: 'Note: automated tests do not check regex URLs. Please validate any complex logic individually.',
-        level: 'info'
+    },
+
+    async valid() {
+      if (!this.csv) {
+        return false
+      }
+
+      this.progress = {
+        running: true,
+        action: 'Validating your CSV data. This may take a minute...'
       }
-      this.progress = { running: false, action: '' }
-      this.hideSubmission = false
     },
     overrideError() {
-      this.hideSubmission = false
-      this.error = { type: null, text: '' }
+      this.checkError = { type: undefined, text: '' }
       this.crawlErrors = []
     },
+    setMetadata(metadata: { readme: File | null; namespace: string; blockNext?: boolean }) {
+      const { readme, namespace, blockNext } = metadata
+      this.namespace = namespace
+      this.readme = readme
+      this.blockNext = blockNext || false
+    },
+
     async submitForm() {
-      // Reset form state before submitting
-      this.error = { type: null, text: '' }
+      // reset stored form state at the start of the submission before validating
       this.result = ''
       this.progress = { running: false, action: '' }
 
-      if (!this.namespace) {
-        this.error = { type: 'Error Submitting PR', text: 'Namespace is required' }
-        return
-      }
-      if (!this.file) {
-        this.error = { type: 'Error Submitting PR', text: 'File is required' }
+      if (!this.csv) {
+        this.checkError = { type: 'Error submitting data', text: 'CSV file is required' }
         return
       }
 
-      // Make sure all markdown fields are filled
-      if (!this.readmeAlreadyUploaded) {
-        const requiredReadmeFields: MarkdownSection[] = [
-          { body: this.homepage, sectionName: 'Homepage' },
-          { body: this.description, sectionName: 'Description' },
-          { body: this.example_pid, sectionName: 'Example PID' },
-          { body: this.example_redirect_target, sectionName: 'Example redirect target URL' },
-          { body: this.contact_name, sectionName: 'Contact name' },
-          { body: this.contact_email, sectionName: 'Contact email' }
-        ]
-
-        for (const field of requiredReadmeFields) {
-          if (!field.body) {
-            this.error = { type: 'Error Submitting PR', text: `${field.sectionName} is required` }
-            return
-          }
-        }
-
-        const generatedReadme = generateReadMe(this.namespace, requiredReadmeFields)
-        this.readme = new File([generatedReadme], 'README.md', { type: 'text/plain' })
-      }
-
-      // submit PR to Geoconnex Github repo
       try {
         this.progress = { running: true, action: 'Uploading your data to the Geoconnex registry.' }
-        const result = await submitData(this.namespace, this.file, this.readme || undefined)
+        const result = await submitData(this.namespace, this.csv, this.readme || undefined)
         this.result = result
       } catch (error) {
-        this.error = {
-          type: 'Error Submitting PR',
+        this.checkError = {
+          type: 'Error submitting data',
           text: error instanceof Error ? error.message : String(error)
         }
         this.result = ''
@@ -342,19 +254,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.form-container {
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
-  width: 80%;
-  margin: 0 auto;
-}
-
-h2 {
-  color: #1b335f;
-}
-
-.expansion-panel {
-  background-color: #f4f4f9;
+.ignoreButton {
+  background-color: rgb(var(--v-theme-secondary));
 }
 </style>
diff --git a/src/lib/helpers.test.ts b/src/lib/helpers.test.ts
index 1b533ab..1821c25 100644
--- a/src/lib/helpers.test.ts
+++ b/src/lib/helpers.test.ts
@@ -1,4 +1,4 @@
-import { validGeoconnexCSV, targetsAreAlive } from './helpers'
+import { validGeoconnexCSV, targetsAreAlive, fetchAllNamespaces } from './helpers'
 import { test, expect } from 'vitest'
 import { CSVError } from './types'
 
@@ -6,6 +6,12 @@ import { CSVError } from './types'
 const fs = require('fs')
 const path = require('path')
 
+test('Get namespaces', async () => {
+  const namespaces = await fetchAllNamespaces()
+  expect(namespaces.includes('epa')).toBe(true)
+  expect(namespaces.includes('usbr')).toBe(true)
+})
+
 function getTestFile(fileName: string) {
   // Papaparse requires a File object as it would be presented in the DOM, but in node we can't read using
   //  readFileSync so we need to create a mock stream for testing purposes
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
index e0f6ea0..19a40a1 100644
--- a/src/lib/helpers.ts
+++ b/src/lib/helpers.ts
@@ -1,5 +1,31 @@
 import Papa from 'papaparse'
-import { CSVError, type MarkdownSection, type ValidationReport } from './types'
+import {
+  CSVError,
+  type MarkdownSection,
+  type ValidationReport,
+  type namespaceResult
+} from './types'
+
+export async function fetchAllNamespaces(): Promise<string[]> {
+  const api =
+    'https://api.github.com/repos/internetofwater/geoconnex.us/contents/namespaces?ref=master'
+
+  const response = await fetch(api)
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`)
+  }
+
+  const data: namespaceResult[] = await response.json()
+  const namespaces = []
+
+  for (const namespace of data) {
+    if (namespace.type === 'dir') {
+      namespaces.push(namespace.name)
+    }
+  }
+
+  return namespaces
+}
 
 export async function fetchMarkdownContent(url: string): Promise<string> {
   const response = await fetch(url)
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 16307a4..c8e60e3 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -22,3 +22,20 @@ export interface MarkdownSection {
   sectionName: string
   body: string
 }
+
+export interface MetadataResponse {
+  readme: File
+  namespace: string
+}
+
+export type namespaceResult = {
+  name: string
+  path: string
+  sha: string
+  size: number
+  url: string
+  html_url: string
+  git_url: string
+  download_url: string
+  type: 'dir' | 'file'
+}
diff --git a/src/main.ts b/src/main.ts
index bf9894c..5fbde29 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,14 +3,45 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import router from './router'
 import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
+import { createVuetify, type ThemeDefinition } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import App from './App.vue'
+import colors from 'vuetify/util/colors'
+
+const buttonColor = '#00A087'
+
+const customLightTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    primary: colors.grey.lighten4, // lightest grey
+    secondary: '#e5e9f0', // light grey
+    accent: buttonColor, // turquoise
+    header: '#1b335f' // dark blue for geoconnex
+  }
+}
+
+const customDarkTheme: ThemeDefinition = {
+  dark: true,
+  colors: {
+    primary: '#3b4252',
+    background: '#434c5e',
+    surface: colors.grey.darken3,
+    secondary: colors.grey.darken2,
+    accent: buttonColor
+  }
+}
 
 const vuetify = createVuetify({
   components,
-  directives
+  directives,
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      dark: customDarkTheme,
+      light: customLightTheme
+    }
+  }
 })
 
 const app = createApp(App)
diff --git a/vite.config.ts b/vite.config.ts
index de5cb31..34c4252 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,9 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    sourcemap: true
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))