diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
index 6ded4ff..7cb1737 100644
--- a/src/components/HelpDialog.vue
+++ b/src/components/HelpDialog.vue
@@ -1,19 +1,26 @@
 <!-- components/HelpDialog.vue -->
 <template>
-  <v-dialog
-    width="auto"
-    v-model="dialog"
-  >
-    <v-card :style="cardStyle">
-      <v-card-title :style="titleStyle">
-        {{ title }}
-      </v-card-title>
-      <!-- Use a div instead of v-card-text to avoid the warning and still render HTML -->
-      <div v-html="content" class="v-card-text" :style="contentStyle">
-      </div>
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-title>{{ helpContent.HelpDialog.title }}</v-card-title>
+      <v-container>
+        <v-row>
+          <v-col v-for="section in helpContent.sections" :key="section.header" cols="12">
+            <v-card outlined>
+              <v-card-title>{{ section.header }}</v-card-title>
+              <v-card-text v-html="section.content"></v-card-text>
+              <v-card-actions v-if="section.links">
+                <v-btn v-for="link in section.links" :key="link.title" :href="link.url" text>
+                  {{ link.title }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="primary" elevation="0" @click="dialog = false">Ok</v-btn>
+        <v-btn color="primary" @click="close">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -21,40 +28,23 @@
 
 <script>
 export default {
-  name: "HelpDialog",
-
+  name: 'HelpDialog',
   props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    config: {
+    helpContent: {
       type: Object,
-      default: () => ({}),
+      required: true,
     },
   },
-  data () {
+  data() {
     return {
       dialog: false,
-    }
-  },
-  computed: {
-    cardStyle() {
-      return this.config.cardStyle || { padding: '10px 0' };
-    },
-    titleStyle() {
-      return this.config.titleStyle || { fontFamily: 'google-sans, sans-serif', fontSize: '24px' };
-    },
-    contentStyle() {
-      // You can define default styles or pull them from config
-      return this.config.contentStyle || {};
-    },
+    };
   },
+  emits: ['update:modelValue'],
   methods: {
+    close() {
+      this.$emit('update:modelValue', false);
+    },
   },
 };
 </script>
diff --git a/src/components/HelpIcon.vue b/src/components/HelpIcon.vue
new file mode 100644
index 0000000..f1316ce
--- /dev/null
+++ b/src/components/HelpIcon.vue
@@ -0,0 +1,44 @@
+<!-- components/HelpIcon.vue -->
+<template>
+  <v-tooltip bottom>
+    <template v-slot:activator="{ attrs }">
+      <v-icon v-bind="attrs" @click="dialog = true">
+        mdi-help-circle-outline
+      </v-icon>
+    </template>
+    <span>Click for help</span>
+  </v-tooltip>
+  <!-- Listen for the update:modelValue event to sync the dialog state -->
+  <HelpDialog
+    :modelValue="dialog"
+    @update:modelValue="value => dialog = value"
+    :helpContent="helpContent"
+  />
+</template>
+
+<script>
+import HelpDialog from './HelpDialog.vue';
+
+export default {
+  components: {
+    HelpDialog,
+  },
+  props: {
+    helpContent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    openHelpDialog() {
+      console.log(this.helpContent);
+      this.dialog = true;
+    },
+  },
+};
+</script>
diff --git a/src/components/PrecurationForm.vue b/src/components/PrecurationForm.vue
index c25d2cf..16ec426 100644
--- a/src/components/PrecurationForm.vue
+++ b/src/components/PrecurationForm.vue
@@ -1,7 +1,10 @@
 <!-- components/PrecurationForm.vue -->
 <template>
   <v-card class="elevation-2">
-    <v-card-title>Precuration</v-card-title>
+    <v-card-title>
+      Precuration
+      <HelpIcon :helpContent="helpContent" />
+    </v-card-title>
     <v-card-text>
       <v-container>
         <!-- Group the fields by the group attribute -->
@@ -86,14 +89,14 @@
 
 
 <script>
-import { precurationDetailsConfig, workflowConfig, workflowConfigVersion, workflowConfigName } from '@/config/workflows/KidneyGeneticsGeneCuration/workflowConfig';
+import { geneDetailsConfig, precurationDetailsConfig, workflowConfig, workflowConfigVersion, workflowConfigName } from '@/config/workflows/KidneyGeneticsGeneCuration/workflowConfig';
 import {
   getPrecurationByHGNCIdOrSymbol,
   createPrecuration,
   updatePrecuration
 } from "@/stores/precurationsStore";
 import { updateGeneCurationStatus } from '@/stores/geneStore';
-import { geneDetailsConfig } from '@/config/workflows/KidneyGeneticsGeneCuration/workflowConfig';
+import HelpIcon from './HelpIcon.vue';
 
 export default {
   name: 'PrecurationForm',
@@ -102,6 +105,7 @@ export default {
   },
   emits: ['precuration-accepted'],
   components: {
+    HelpIcon,
   },
   data() {
     return {
@@ -113,6 +117,7 @@ export default {
       snackbarMessage: '',
       snackbarTitle: '',
       snackbarColor: 'success',
+      helpContent: workflowConfig.stages.precuration.helpConfig,
     };
   },
   computed: {
@@ -216,8 +221,6 @@ export default {
         }
       });
 
-
-      console.log('Gene object:', this.geneObject.docId);
       // Handling geneDetails as a nested object with the gene document ID as key
       if (this.geneObject && this.geneObject.docId) {
         const geneDocId = this.geneObject.docId;
@@ -273,8 +276,6 @@ export default {
           this.showSnackbar('Success', 'Precuration updated' + this.existingPrecurationId, 'success');
         }
 
-        console.log('Gene object:', this.geneObject.docId);
-        console.log('Precuration docId:', docId);
         // Update gene curation status in the gene record
         if (this.geneObject && this.geneObject.docId) {
           await updateGeneCurationStatus(this.geneObject.docId, {
diff --git a/src/components/StaticContent.vue b/src/components/StaticContent.vue
index b40c306..2854b24 100644
--- a/src/components/StaticContent.vue
+++ b/src/components/StaticContent.vue
@@ -1,3 +1,4 @@
+<!-- components/StaticContent.vue -->
 <template>
   <v-container>
     <h1>{{ config.title }}</h1>
diff --git a/src/config/workflows/KidneyGeneticsGeneCuration/static/precurationHelp.json b/src/config/workflows/KidneyGeneticsGeneCuration/static/precurationHelp.json
index eccd644..19159b2 100644
--- a/src/config/workflows/KidneyGeneticsGeneCuration/static/precurationHelp.json
+++ b/src/config/workflows/KidneyGeneticsGeneCuration/static/precurationHelp.json
@@ -1,37 +1,33 @@
 {
-"HelpDialog": {
-    "title": "Pre-Curation Help",
-    "content": "To begin pre-curation, follow the workflow to determine if the gene/entity is listed in ClinGen. Use sources such as GenCC and OMIM for additional information. Refer to the lumping and splitting criteria to guide your decisions.",
-    "cardStyle": {
-    "padding": "20px"
+    "HelpDialog": {
+        "title": "Pre-Curation Help",
+        "config": {
+            "cardStyle": {
+                "padding": "20px"
+            },
+            "titleStyle": {
+                "fontFamily": "Arial, sans-serif",
+                "fontSize": "20px"
+            }
+        }
     },
-    "titleStyle": {
-    "fontFamily": "Arial, sans-serif",
-    "fontSize": "20px"
-    }
-},
-"workflow": {
-    "checkListedInClinGen": "Apply this group and points after reviewing the entry.",
-    "reviewExternalSources": {
-    "description": "Review GenCC and OMIM for unlisted genes/entities.",
-    "dataCollection": [
-        "Disease entities associated with the gene",
-        "Variability of phenotypic presentations",
-        "Inheritance pattern for each disease entity asserted"
+    "sections": [
+        {
+            "header": "Overview",
+            "content": "To begin pre-curation, follow the workflow to determine if the gene/entity is listed in ClinGen. Use sources such as GenCC and OMIM for additional information. Refer to the lumping and splitting criteria below to guide your decisions."
+        },
+        {
+            "header": "Check listed in ClinGen",
+            "content": "Apply the ClinGen group and points after reviewing the entry. Review GenCC and OMIM for unlisted genes/entities."
+        },
+        {
+            "header": "Lumping criteria",
+            "content": 
+                "- Only one disease entity asserted in literature.<br>- No molecular mechanism difference observed.<br>- Intrafamilial variability pronounced.<br>- Disease entities are part of a variable phenotype in a single organ system."
+        },
+        {
+            "header": "Splitting criteria",
+            "content": "- More than one distinct disease entity asserted in literature.<br>- Distinguishable molecular mechanisms.<br>- Different inheritance patterns with varying phenotypes."
+        }
     ]
-    }
-},
-"lumpingAndSplittingCriteria": {
-    "lumpCriteria": [
-    "Only one disease entity asserted in literature",
-    "No molecular mechanism difference observed",
-    "Intrafamilial variability pronounced",
-    "Disease entities are part of a variable phenotype in a single organ system"
-    ],
-    "splitCriteria": [
-    "More than one distinct disease entity asserted in literature",
-    "Distinguishable molecular mechanisms",
-    "Different inheritance patterns with varying phenotypes"
-    ]
-}
 }