diff --git a/services/workflowService.go b/services/workflowService.go
index 9cb026d..5f0e17c 100644
--- a/services/workflowService.go
+++ b/services/workflowService.go
@@ -59,3 +59,15 @@ func CreateWorkflow(topicName string, functionName string, sinkURL string) (pers
 	newWorkflow.LastModified = last_modified
 	return newWorkflow, nil
 }
+
+func GetAvaliableWorkflowFunctions() []string {
+	keys := make([]string, len(persistence.FUNC_MAP))
+
+	i := 0
+	for f := range persistence.FUNC_MAP {
+		keys[i] = f
+		i++
+	}
+
+	return keys
+}
diff --git a/web/static/webcomponents/pages/workflows/workflows-home/workflows-home.js b/web/static/webcomponents/pages/workflows/workflows-home/workflows-home.js
index bc2ff19..c40b1cf 100644
--- a/web/static/webcomponents/pages/workflows/workflows-home/workflows-home.js
+++ b/web/static/webcomponents/pages/workflows/workflows-home/workflows-home.js
@@ -11,6 +11,8 @@ class WorkflowsHome extends HTMLElement {
         super()
         this.shawdow = this.attachShadow({mode: "open"})
         this.shawdow.append(jobsHomeTemplate.content.cloneNode(true))
+        this.workflowfunctions = []
+        this.topicNames = []
     }
 
     newWorkflow(e) {
@@ -48,14 +50,17 @@ class WorkflowsHome extends HTMLElement {
     }
 
     newWorkflowAction() {
+        const functionOptions = this.workflowfunctions.map((func) => {return `<option value="${func}">${func}</option>`})
+        const topicOptions = this.topicNames.map((topic) => {return `<option value="${topic}">${topic}</option>`})
+
         const modalMarkup = `
             <wc-modal id="modalThing">
                 <wc-title>Create New Workflow</wc-title>
                 <form id="myForm">
                   <label for="topicName">Topic Name:</label><br>
-                  <input type="text" id="topicName" name="topicName" value=""><br>
+                  <select id="topicName" name="topicName">${topicOptions.join()}</select><br>
                   <label for="functionName">Function Name:</label><br>
-                  <input type="text" id="functionName" name="functionName" value=""><br>
+                  <select id="functionName" name="functionName">${functionOptions.join()}</select><br>
                   <label for="sinkURL">Sink Url:</label><br>
                   <input type="text" id="sinkURL" name="sinkURL" value=""><br>
                   <br>
@@ -93,7 +98,23 @@ class WorkflowsHome extends HTMLElement {
         return workflow_card_container
     }
 
+    async getWorkflowFunctions() {
+        const workflowFunctionsResponse = await fetch('/api/v1/workflow/functions');
+        const workflowFunctionsResponseData = await workflowFunctionsResponse.json();
+        this.workflowfunctions = workflowFunctionsResponseData.data
+    }
+
+    async getTopicNames() {
+        const topicsResponse = await fetch('/api/v1/topic');
+        const topicsResponseData = await topicsResponse.json();
+        const topicNames = topicsResponseData.data.map((topic) => {return topic.topicName})
+        this.topicNames = topicNames
+    }
+
     async connectedCallback(){
+        // Async process workflow functions and topics
+        this.getWorkflowFunctions()
+        this.getTopicNames()
         const pageTitleElement = document.createElement("wc-page-heading-button")
         pageTitleElement.innerText = "All Workflows";
         pageTitleElement.buttonText = 'New Workflow';
diff --git a/web/workflowApi.go b/web/workflowApi.go
index b5c6649..674544c 100644
--- a/web/workflowApi.go
+++ b/web/workflowApi.go
@@ -11,8 +11,9 @@ import (
 )
 
 var (
-	workflowsAllApi   = regexp.MustCompile(`^\/api/v1/workflow[\/]*$`)
-	workflowSingleApi = regexp.MustCompile(`^\/api/v1/workflow\/(.*)$`)
+	workflowFunctionApi = regexp.MustCompile(`^\/api/v1/workflow/functions[\/]*$`)
+	workflowsAllApi     = regexp.MustCompile(`^\/api/v1/workflow[\/]*$`)
+	workflowSingleApi   = regexp.MustCompile(`^\/api/v1/workflow\/(.*)$`)
 )
 
 type workflowAPI struct {
@@ -26,6 +27,8 @@ func (wf *workflowAPI) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	switch {
+	case r.Method == http.MethodGet && workflowFunctionApi.MatchString(r.URL.Path):
+		wf.getWorkflowFunctions(w, r)
 	case r.Method == http.MethodGet && workflowsAllApi.MatchString(r.URL.Path):
 		wf.getWorkflows(w, r)
 		return
@@ -175,3 +178,14 @@ func (wf *workflowAPI) deleteWorkflow(w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(http.StatusOK)
 	w.Write(resJsonBytes)
 }
+
+func (wf *workflowAPI) getWorkflowFunctions(w http.ResponseWriter, _ *http.Request) {
+	workflowFunctions := services.GetAvaliableWorkflowFunctions()
+	resJsonBytes, err := generateSuccessMessage(workflowFunctions)
+	if err != nil {
+		apiMessageResponse(w, http.StatusInternalServerError, "internal server error")
+		return
+	}
+	w.WriteHeader(http.StatusOK)
+	w.Write(resJsonBytes)
+}