diff --git a/dfx/assets/new_project_files/src/hello/public/hello.js b/dfx/assets/new_project_files/src/hello/public/hello.js
index ffb5f2aaf2..41b1b193b2 100644
--- a/dfx/assets/new_project_files/src/hello/public/hello.js
+++ b/dfx/assets/new_project_files/src/hello/public/hello.js
@@ -1,6 +1,6 @@
-import { hello } from '../src/hello/main';
+import hello from '../../../canisters/hello/main.js';
 
 window.hello = async function(name) {
-  const response = await hello.main(name);
-  console.log(response);
+  const reply = await hello.main(name);
+  document.getElementById('output').innerText = reply;
 };
diff --git a/dfx/assets/new_project_files/src/hello/public/index.html b/dfx/assets/new_project_files/src/hello/public/index.html
index d8efba496f..361769a900 100644
--- a/dfx/assets/new_project_files/src/hello/public/index.html
+++ b/dfx/assets/new_project_files/src/hello/public/index.html
@@ -1,11 +1,10 @@
 <html>
-<head>
-    <script type="application/javascript" src="hello.js"></script>
-</head>
-<body>
-<div>Press button, receive Hello!</div>
-
-<button onclick="hello('{project_name}')">Press me!</button>
-<div id="output"></div>
-</body>
+  <head>
+    <script type="module" src="./hello.js"></script>
+  </head>
+  <body>
+    <div>Press button, receive Hello!</div>
+    <button onclick="hello('{project_name}')">Press me!</button>
+    <div id="output"></div>
+  </body>
 </html>
