diff --git a/assets/chrome.png b/assets/chrome.png
index 40b579b..cfca95c 100644
Binary files a/assets/chrome.png and b/assets/chrome.png differ
diff --git a/package.json b/package.json
index bcae486..c2c2802 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "repository": {
     "url": "https://github.com/gadhagod/vscode-chrome-extension-devtools"
   },
-  "version": "2.0.1",
+  "version": "2.0.2",
   "engines": {
     "vscode": "^1.59.0"
   },
diff --git a/src/commands/create.ts b/src/commands/create.ts
index 22b8097..1ee943a 100644
--- a/src/commands/create.ts
+++ b/src/commands/create.ts
@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { readFileSync } from "fs";
+import { renderWebview } from "../utils";
 import { join } from "path";
 const createExtension = require("chrome-extension-cli-client").createExtension;
 
@@ -17,7 +17,18 @@ export default (context: vscode.ExtensionContext) => {
         }
     );
 
-    initializationScreen.webview.html = readFileSync(vscode.Uri.file(join(context.extensionPath, "webviews", "initializationScreen.html")).fsPath, "utf-8");
+    let stylesSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "webviews", "initialization_screen", "styles.css"))).toString();
+    let scriptSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "webviews", "initialization_screen", "index.js"))).toString();
+    let chromeImgSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "assets", "chrome.png"))).toString();
+
+    initializationScreen.webview.html = renderWebview(
+        join(context.extensionPath, "webviews", "initialization_screen", "index.html"), 
+        {
+            "index.js": scriptSrc, 
+            "styles.css": stylesSrc, 
+            "/assets/chrome.png": chromeImgSrc
+        }
+    );
 
     initializationScreen.webview.onDidReceiveMessage(
         (res: {
@@ -43,7 +54,7 @@ export default (context: vscode.ExtensionContext) => {
                         status: "GIVE",
                         message: { path: (locations as vscode.Uri[])[0].fsPath }
                     });
-                })
+                });
                 return;
             }
 
@@ -63,18 +74,18 @@ export default (context: vscode.ExtensionContext) => {
 
                 vscode.commands.executeCommand("vscode.openFolder", vscode.Uri.file(join(config.chosenPath, config.projectName)), {
                     forceNewWindow: true
-                })
+                });
             } catch (e) {
-                console.log(e);
+                console.error(e);
                 let err = e as { message: string };
                 vscode.window.showErrorMessage("ERROR: " + (err).message);
                 initializationScreen.webview.postMessage({
                     status: "ERR",
                     message: err.message
-                })
+                });
             }
         },
         undefined,
         context.subscriptions
-    )
-}
+    );
+};
diff --git a/src/utils.ts b/src/utils.ts
index d8bee03..9f93cf5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,4 @@
+import { readFileSync } from "fs";
 import * as vscode from "vscode";
 import * as types from "./types";
 
@@ -16,3 +17,17 @@ export function registerCommands(
         }));
     });
 }
+
+/**
+ * Builds a webview's HTML by rendering a template
+ * @param {string} template HTML template file of webview
+ * @param {object} data Data to be passed into template
+ */
+export function renderWebview(template: string, data: object) {
+    let html = readFileSync(vscode.Uri.file(template).fsPath, "utf-8");
+    let variables = Object.keys(data);
+    for(let i = 0; i < variables.length; i++) {
+        html = html.replace(`{{${variables[i]}}}`, (data as any)[variables[i]]);
+    }
+    return html;
+}
\ No newline at end of file
diff --git a/webviews/initializationScreen.html b/webviews/initializationScreen.html
deleted file mode 100644
index dbeea2d..0000000
--- a/webviews/initializationScreen.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-const vscode = acquireVsCodeApi();
-
-window.addEventListener("message", (data) => {
-    var res = data.data;
-
-    if (res.status === "GIVE") {
-        document.getElementById("location_label").innerHTML = "Location: " + res.message.path;
-    } else if (res.status === "ERR") {
-        document.getElementById("loader").innerHTML = "";
-    } else if (res.status === "LOAD") {
-        document.getElementById("loader").innerHTML += "\n" + res.message;
-    }
-});
-
-function getLocation() {
-    vscode.postMessage({
-        status: "GET",
-        message: "Get location",
-    });
-}
-
-function submit() {
-    let project_name = document.getElementById("project_name").value;
-    let extension_type = document.getElementById("extension_type").value;
-    let chosen_path = document.getElementById("location_label").innerHTML.replace("Location: ", "");
-    let loader_text = document.getElementById("loader");
-
-    if (!project_name || !extension_type || !chosen_path) {
-        vscode.postMessage({
-            status: "ERR",
-            message: "Missing project configuration",
-        });
-        return;
-    }
-
-    loader_text.innerHTML = "Creating your extension and installing dependencies... please wait a few moments.";
-
-    vscode.postMessage({
-        status: "OK",
-        message: {
-            projectName: project_name,
-            extensionType: extension_type,
-            chosenPath: chosen_path,
-        },
-    });
-}
-
-</script>
-
-<h1>New Chrome Extension</h1>
-<hr>
-
-<label for="project_name">Project Name:</label>
-<input type="text" id="project_name" required>
-
-<br><br>
-
-<label for="extension_type">Extension Type <small>[<a href="https://github.com/gadhagod/chrome-extension-cli-client/blob/master/templates/README.md#templates">?</a>]</small>:</label>
-
-<select id="extension_type">
-    <option value="popup">Popup</option>
-    <option value="override_page">Override page</option>
-    <option value="devtools">Dev tools</option>
-</select>
-
-<br><br>
-
-<label id="location_label" for="choose_location">Location: </label>
-<button id="choose_location" onclick="getLocation()">Choose</button>
-
-<br><br>
-
-<button onclick="submit()">Submit</button>
-
-<p id="loader"></p>
\ No newline at end of file
diff --git a/webviews/initialization_screen/index.html b/webviews/initialization_screen/index.html
new file mode 100644
index 0000000..943f7dc
--- /dev/null
+++ b/webviews/initialization_screen/index.html
@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="{{styles.css}}">
+
+<center>
+    <img src="{{/assets/chrome.png}}" height="5%" width="5%">
+    <h1 align>New Chrome Extension</h1>
+</center>
+<hr>
+<body>
+    <label for="project_name">Project Name:</label>
+    <input type="text" id="project_name" required>
+
+    <br><br>
+
+    <label for="extension_type">Extension Type <small>[<a href="https://github.com/gadhagod/chrome-extension-cli-client/blob/master/templates/README.md#templates">?</a>]</small>:</label>
+
+    <select id="extension_type">
+        <option value="popup">Popup</option>
+        <option value="override_page">Override page</option>
+        <option value="devtools">Dev tools</option>
+    </select>
+
+    <br><br>
+
+    <label id="location_label" for="choose_location">Location: </label>
+    <button id="choose_location" onclick="getLocation()">Choose</button>
+
+    <br><br>
+
+    <button id="submit" onclick="submit()">Create</button>
+
+    <div id="loading" style="display: none">
+        <hr>
+        <center>
+            <p id="loading_text">Creating extension and installing dependencies.</p>
+            <div id="loader"></div>
+        </center>
+    </div>
+</body>
+
+<script src="{{index.js}}">
+</script>
\ No newline at end of file
diff --git a/webviews/initialization_screen/index.js b/webviews/initialization_screen/index.js
new file mode 100644
index 0000000..cb46f5e
--- /dev/null
+++ b/webviews/initialization_screen/index.js
@@ -0,0 +1,71 @@
+const vscode = acquireVsCodeApi();
+
+window.addEventListener("message", (data) => {
+    var res = data.data;
+
+    if (res.status === "GIVE") {
+        document.getElementById("location_label").innerHTML = "Location: " + res.message.path;
+    } else if (res.status === "ERR") {
+        document.getElementById("loading").style.display = "none";
+        document.getElementById("project_name").removeAttribute("disabled");
+        document.getElementById("extension_type").removeAttribute("disabled");
+        document.getElementById("choose_location").removeAttribute("disabled");
+        document.getElementById("submit").removeAttribute("disabled");
+    } else if (res.status === "LOAD") {
+        document.getElementById("loader").innerHTML += "\n" + res.message;
+    }
+});
+
+function getLocation() {
+    vscode.postMessage({
+        status: "GET",
+        message: "Get location",
+    });
+}
+
+function submit() {
+    let projectName = document.getElementById("project_name").value;
+    let extensionType = document.getElementById("extension_type").value;
+    let chosenPath = document.getElementById("location_label").innerHTML.replace("Location: ", "");
+
+    document.getElementById("project_name").setAttribute("disabled", "");
+    document.getElementById("extension_type").setAttribute("disabled", "");
+    document.getElementById("choose_location").setAttribute("disabled", "");
+    document.getElementById("submit").setAttribute("disabled", "");
+
+    if (!projectName || !extensionType || !chosenPath) {
+        document.getElementById("project_name").removeAttribute("disabled");
+        document.getElementById("extension_type").removeAttribute("disabled");
+        document.getElementById("choose_location").removeAttribute("disabled");
+        vscode.postMessage({
+            status: "ERR",
+            message: "Missing project configuration",
+        });
+        return;
+    }
+
+    document.getElementById("loading").style.display = "block";
+
+    vscode.postMessage({
+        status: "OK",
+        message: {
+            projectName: projectName,
+            extensionType: extensionType,
+            chosenPath: chosenPath,
+        },
+    });
+}
+
+(async function() {
+    let loadingText = document.getElementById("loading_text");
+    let ellipsisDotCount = 1;
+    setInterval(() => {
+        if(ellipsisDotCount > 2) {
+            loadingText.innerHTML = loadingText.innerHTML.replace("...", ".");
+            ellipsisDotCount = 1;
+        } else {
+            loadingText.innerHTML += ".";
+            ellipsisDotCount++;
+        }
+    }, 1000);
+})();
\ No newline at end of file
diff --git a/webviews/initialization_screen/styles.css b/webviews/initialization_screen/styles.css
new file mode 100644
index 0000000..3e560c4
--- /dev/null
+++ b/webviews/initialization_screen/styles.css
@@ -0,0 +1,20 @@
+img {
+    margin-top: 1%;
+}
+body {
+    margin-left: 3%;
+}
+#loader {
+    /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader */
+    border: 10px solid rgba(255, 255, 255, 0.061);
+    border-top: 10px solid blue;
+    border-radius: 10%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+}
+@keyframes spin {
+    /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader */
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
\ No newline at end of file