diff --git a/README.md b/README.md
index afbf96ba..5300655a 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,83 @@ Start the service to view the web app in brower.
 minikube service compare-helm
 ```
 
+# Use helm with template
+
+## Use values.yaml
+
+Edit the file in `template` folder, use `Values` variables and put the actual values in `values.yaml`.
+
+```yaml
+appName: compare-helm
+namespace: default
+
+configmap:
+  name: compare-configmap
+  data:
+    ENV_NAME: 'DEV'
+
+image:
+  name: jojozhuang/text-compare-angular
+  tag: latest
+```
+
+Upgrade the deployment.
+
+```sh
+helm upgrade compare-helm deployment --values deployment/values.yaml
+W0107 21:30:02.019806   39661 warnings.go:70] unknown field "spec.ports[0].type"
+Release "compare-helm" has been upgraded. Happy Helming!
+NAME: compare-helm
+LAST DEPLOYED: Sun Jan  7 21:30:01 2024
+NAMESPACE: default
+STATUS: deployed
+REVISION: 3
+TEST SUITE: None
+```
+
+After each upgrade, the revision number should be incremented.
+
+```sh
+helm ls
+NAME        	NAMESPACE	REVISION	UPDATED                             	STATUS  	CHART           	APP VERSION
+compare-helm	default  	5       	2024-01-07 21:38:03.669554 -0800 PST	deployed	deployment-0.1.0	1.16.0
+```
+
+## Add notes
+
+Create file `NOTES.txt` under `deployment/templates` directory with the following content.
+
+```sh
+servicename=$(k get service -l "app={{ .Values.appName }}" -o jsonpath="{.items[0].metadata.name}")
+kubectl --namespace {{ .Values.namespace}} port-forward service/{{ .Values.appName }} 8888:80
+```
+
+Each time when you run the upgrade command, you will see the notes in the output.
+
+```sh
+helm upgrade compare-helm deployment --values deployment/values.yaml
+W0107 21:49:34.774115   40283 warnings.go:70] unknown field "spec.ports[0].type"
+Release "compare-helm" has been upgraded. Happy Helming!
+NAME: compare-helm
+LAST DEPLOYED: Sun Jan  7 21:49:34 2024
+NAMESPACE: default
+STATUS: deployed
+REVISION: 6
+TEST SUITE: None
+NOTES:
+servicename=$(k get service -l "app=compare-helm" -o jsonpath="{.items[0].metadata.name}")
+kubectl --namespace default port-forward service/compare-helm 8888:80
+```
+
+Copy and paste the two lines and execute them in teminal.
+
+```sh
+servicename=$(k get service -l "app=compare-helm" -o jsonpath="{.items[0].metadata.name}")
+kubectl --namespace default port-forward service/compare-helm 8888:80
+```
+
+Then, you are able to access your site through `http://localhost:8888/`.
+
 - [How to Create Helm Charts - The Ultimate Guide](https://www.youtube.com/watch?v=jUYNS90nq8U&ab_channel=DevOpsJourney)
 
 # Deployment
diff --git a/deployment/templates/NOTES.txt b/deployment/templates/NOTES.txt
new file mode 100644
index 00000000..cc892cda
--- /dev/null
+++ b/deployment/templates/NOTES.txt
@@ -0,0 +1,2 @@
+servicename=$(k get service -l "app={{ .Values.appName }}" -o jsonpath="{.items[0].metadata.name}")
+kubectl --namespace {{ .Values.namespace}} port-forward service/{{ .Values.appName }} 8888:80
\ No newline at end of file
diff --git a/deployment/templates/configmap.yaml b/deployment/templates/configmap.yaml
index 50e2e074..57b3a19b 100644
--- a/deployment/templates/configmap.yaml
+++ b/deployment/templates/configmap.yaml
@@ -1,7 +1,7 @@
 apiVersion: v1
 kind: ConfigMap
 metadata:
-  name: compare-configmap
-  #namespace: bit-developer
+  name: {{ .Values.configmap.name }}
+  namespace: {{ .Values.namespace }}
 data:
-  ENV_NAME: 'DEV'
+  ENV_NAME: {{ .Values.configmap.data.ENV_NAME }}
diff --git a/deployment/templates/service.yaml b/deployment/templates/service.yaml
index 7d0dbc60..ed42a2b3 100644
--- a/deployment/templates/service.yaml
+++ b/deployment/templates/service.yaml
@@ -2,7 +2,7 @@ apiVersion: v1
 kind: Service
 metadata:
   name: compare-helm
-  #namespace: bit-developer
+  namespace: {{ .Values.namespace }}
   labels:
     app: compare-helm
 spec:
diff --git a/deployment/templates/text-compare.yaml b/deployment/templates/text-compare.yaml
index 6193fba1..da3af02b 100644
--- a/deployment/templates/text-compare.yaml
+++ b/deployment/templates/text-compare.yaml
@@ -1,25 +1,25 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: compare-helm
-  #namespace: bit-developer
+  name: {{ .Values.appName }}
+  namespace: {{ .Values.namespace }}
   labels:
-    app: compare-helm
+    app: {{ .Values.appName }}
 spec:
   replicas: 1
   selector:
     matchLabels:
-      app: compare-helm
+      app: {{ .Values.appName }}
       tier: frontend
   template:
     metadata:
       labels:
-        app: compare-helm
+        app: {{ .Values.appName }}
         tier: frontend
     spec: # Pod spec
       containers:
-      - name: compare-helm
-        image: jojozhuang/text-compare-angular
+      - name: {{ .Values.appName }}
+        image: "{{ .Values.image.name }}:{{ .Values.image.tag }}"
         ports:
           - containerPort: 80
         resources:
diff --git a/deployment/values.yaml b/deployment/values.yaml
index e69de29b..4ec45595 100644
--- a/deployment/values.yaml
+++ b/deployment/values.yaml
@@ -0,0 +1,11 @@
+appName: compare-helm
+namespace: default
+
+configmap:
+  name: compare-configmap
+  data:
+    ENV_NAME: 'DEV'
+
+image:
+  name: jojozhuang/text-compare-angular
+  tag: latest
\ No newline at end of file