diff --git a/src/helper/build.ts b/src/helper/build.ts
index c2c56877..85b4caf4 100755
--- a/src/helper/build.ts
+++ b/src/helper/build.ts
@@ -6,6 +6,9 @@ import webpack from 'webpack';
 import createBaseWebpackConfig from '../helper/theme.react.config';
 import fs from 'fs';
 import rimraf from 'rimraf';
+import open from 'open';
+import { reload } from './serve.utils';
+import { debounce } from 'lodash';
 
 export const THEME_ENTRY_FILE = path.join('theme', 'index.js');
 
@@ -66,6 +69,7 @@ interface DevBuild {
     buildFolder: string;
     imageCdnUrl: string;
     isProd: boolean;
+    browserLink?: string
 }
 
 interface DevReactBuild {
@@ -77,7 +81,7 @@ interface DevReactBuild {
     isHMREnabled: boolean;
 }
 
-export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {
+export function devBuild({ buildFolder, imageCdnUrl, isProd, browserLink }: DevBuild) {
     const VUE_CLI_PATH = path.join(
         '.',
         'node_modules',
@@ -91,7 +95,7 @@ export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {
 
     return new Promise((resolve, reject) => {
         let b = exec(
-            `node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle ${THEME_ENTRY_FILE}`,
+            `node ${VUE_CLI_PATH} build --watch --target lib --dest ${buildFolder} --name themeBundle ${THEME_ENTRY_FILE}`,
             {
                 cwd: process.cwd(),
                 env: {
@@ -110,8 +114,30 @@ export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {
             },
         );
 
+        let isFirstBuild = true;
+        const spinner = new Spinner('Building theme');
+
         b.stdout.pipe(process.stdout);
         b.stderr.pipe(process.stderr);
+        const refreshPage = debounce(() => reload(), 1000);
+        b.stdout.on('data', async (data) => {
+            if (data.includes("Build process starting...")) { 
+                spinner.start()
+            }
+            if (data.includes("Refreshing theme page")) {
+                if (isFirstBuild) {
+                    try {
+                        await open(browserLink);
+                    } catch (err) {
+                        console.log("Open:", browserLink);
+                    }
+                    isFirstBuild = false;
+                }else{
+                    refreshPage();
+                }
+                spinner.succeed()
+            }
+        })
 
         b.on('exit', function (code) {
             if (!code) {
diff --git a/src/helper/theme.vue.config.ts b/src/helper/theme.vue.config.ts
index 611634c9..6e01eeb0 100644
--- a/src/helper/theme.vue.config.ts
+++ b/src/helper/theme.vue.config.ts
@@ -9,6 +9,13 @@ let vueConfig = {};
 let fileConfigPath = null;
 const context = process.cwd();
 
+class BuildCompletePlugin {
+  apply(compiler) {
+    compiler.hooks.done.tap('BuildCompletePlugin', () => {
+      console.log("Refreshing theme page");
+    });
+  }
+}
 
 class FDKPlugin {
   apply(compiler) {
@@ -100,6 +107,7 @@ const configureWebpack = (config) => {
   if(process.env.BUILD_TYPE === 'sync') {
     plugins.push(new FDKPlugin())
   }
+  plugins.push(new BuildCompletePlugin())
   if(isCommonJs) {
     plugins.push(
       new webpack.optimize.LimitChunkCountPlugin({
diff --git a/src/lib/Theme.ts b/src/lib/Theme.ts
index 55123c24..7ebb9168 100644
--- a/src/lib/Theme.ts
+++ b/src/lib/Theme.ts
@@ -11,6 +11,7 @@ import {
     parseBundleFilename,
     transformSectionFileName,
     findExportedVariable,
+    debounce,
 } from '../helper/utils';
 import CommandError, { ErrorCodes } from './CommandError';
 import Logger, { COMMON_LOG_MESSAGES } from './Logger';
@@ -1137,37 +1138,32 @@ export default class Theme {
             // initial build
             Logger.info(`Locally building`);
             Theme.createVueConfig();
-            await devBuild({
+            devBuild({
                 buildFolder: Theme.BUILD_FOLDER,
                 imageCdnUrl: urlJoin(getFullLocalUrl(port), 'assets/images'),
                 isProd: isSSR,
+                browserLink: getFullLocalUrl(port)
             });
             // start dev server
             Logger.info(chalk.bold.blueBright(`Starting server`));
             await startServer({ domain, host, isSSR, port });
 
             // open browser
-            try {
-                await open(getFullLocalUrl(port));
-            } catch (err) {
-                console.log(`Open in browser: ${getFullLocalUrl(port)}`);
-            }
-            Logger.info(chalk.bold.green(`Watching files for changes`));
-            let watcher = chokidar.watch(path.resolve(process.cwd(), 'theme'), {
-                persistent: true,
-            });
-            watcher.on('change', async () => {
-                Logger.info(chalk.bold.green(`building`));
-                await devBuild({
-                    buildFolder: Theme.BUILD_FOLDER,
-                    imageCdnUrl: urlJoin(
-                        getFullLocalUrl(port),
-                        'assets/images',
-                    ),
-                    isProd: isSSR,
-                });
-                reload();
-            });
+            // try {
+            //     await open(getFullLocalUrl(port));
+            // } catch (err) {
+            //     console.log(`Open in browser: ${getFullLocalUrl(port)}`);
+            // }
+            // Logger.info(chalk.bold.green(`Watching files for changes`));
+            // let watcher = chokidar.watch(path.resolve(process.cwd(), '.fdk/dist'), {
+            //     persistent: true,
+            // });
+            // watcher.on('change', debounce(()=>{
+            //     Logger.info(chalk.bold.green(`building done`));
+            //     console.log("refresssssssss");
+                
+            //     // reload();
+            // }, 2000));
         } catch (error) {
             throw new CommandError(error.message, error.code);
         }