diff --git a/src/commands/dev/index.js b/src/commands/dev/index.js
index ba5a2be9f41..9774ad25ec6 100644
--- a/src/commands/dev/index.js
+++ b/src/commands/dev/index.js
@@ -380,7 +380,7 @@ async function startDevServer(settings, log) {
       name: 'netlify-dev',
       port: settings.frameworkPort,
       templates: {
-        notFound: '404.html',
+        notFound: path.join(settings.dist, '404.html'),
       },
     })
 
diff --git a/tests/command.dev.test.js b/tests/command.dev.test.js
index 8af6420dab2..d3ff61719a5 100644
--- a/tests/command.dev.test.js
+++ b/tests/command.dev.test.js
@@ -658,6 +658,31 @@ test('should return 404.html if exists for non existing routes', async t => {
   })
 })
 
+test('should return 404.html from publish folder if exists for non existing routes', async t => {
+  await withSiteBuilder('site-with-shadowing-404-in-publish-folder', async builder => {
+    builder
+      .withContentFile({
+        path: 'public/404.html',
+        content: '<h1>404 - My Custom 404 Page</h1>',
+      })
+      .withNetlifyToml({
+        config: {
+          build: {
+            publish: 'public/',
+          },
+        },
+      })
+
+    await builder.buildAsync()
+
+    await withDevServer({ cwd: builder.directory }, async server => {
+      const response = await fetch(`${server.url}/non-existent`)
+      t.is(response.status, 404)
+      t.is(await response.text(), '<h1>404 - My Custom 404 Page</h1>')
+    })
+  })
+})
+
 test('should return 404 for redirect', async t => {
   await withSiteBuilder('site-with-shadowing-404-redirect', async builder => {
     builder