diff --git a/scripts/generate-js.js b/scripts/generate-js.js
index dc8255d7f..050700431 100644
--- a/scripts/generate-js.js
+++ b/scripts/generate-js.js
@@ -3,14 +3,14 @@ const path = require("path");
 const chalk = require("chalk");
 const globFs = require("glob-fs")();
 const outdent = require("outdent");
-const { camelCase } = require("lodash");
+const { camelCase, startCase } = require("lodash");
 const transpileTs = require("./transpile-ts");
 
 // Create a new folder at the specified path
 function createDirectory(path) {
   try {
     if (!fs.existsSync(path)) {
-      fs.mkdirSync(path);
+      fs.mkdirSync(path, { recursive: true });
     }
   } catch (err) {
     console.error(`[createDirectory]: Failed to create director at ${path}`);
@@ -42,29 +42,6 @@ function walkSync(dir, filelist = []) {
   return filelist;
 }
 
-const generateJsFiles = filePath => {
-  const code = fs.readFileSync(path.join(process.cwd(), filePath), {
-    encoding: "utf8",
-  });
-
-  const transpiledCode = transpileTs(code);
-  const templateFilePath = filePath
-    .replace("stories", `stories${path.sep}__js`)
-    .replace(".tsx", ".jsx");
-
-  const __jsPath = path.dirname(templateFilePath).split("__js")[0];
-
-  const templateDir = path.join(process.cwd(), __jsPath, "__js");
-  createDirectory(templateDir);
-
-  const componentName = path.basename(templateFilePath);
-  const templatePath = path.join(templateDir, componentName);
-
-  console.log(chalk.green.bold(`CREATED: ${componentName}`));
-
-  createFile(templatePath, transpiledCode);
-};
-
 // -> get all the component folders [accordion, breadcrumb...]
 // -> find all the .components inside the folders
 // -> create object with component pairs
@@ -83,30 +60,25 @@ function getComponentFolderPairs() {
   ).filter(path => !path.match(/(__mocks__|utils)/));
 
   const components = componentFolders.reduce((prev, curr) => {
-    const folderName = path.parse(curr);
-
+    const folderName = path.basename(curr);
     const allfiles = walkSync(`${curr}${path.sep}stories`).filter(fn =>
       fn.match(/(\.component\.tsx|\.css)$/),
     );
 
-    return { ...prev, [folderName.base]: allfiles };
+    return { ...prev, [folderName]: allfiles };
   }, {});
 
   console.log(
-    chalk.blueBright.bold(`Component Folder Pairs Successfully Created..`),
+    chalk.blueBright.bold(`\nComponent Folder Pairs Successfully Created..`),
   );
 
   return components;
 }
 
 function generateImportString(component, index) {
-  const componentPath = component
-    .split("stories")[1]
-    .replace("\\", "")
-    .replace(/\\/g, "/");
-
+  const componentPath = component.split("stories")[1].replace(/\\/g, "/");
+  const jsComponentName = componentPath.replace("tsx", "jsx");
   const componentName = path.basename(componentPath);
-  const jsComponentName = componentName.replace("tsx", "jsx");
   const templateVarName = camelCase(
     componentName.replace(".component.tsx", "").replace(".css", ""),
   );
@@ -119,16 +91,16 @@ function generateImportString(component, index) {
   let importString = outdent`
     ${warningMsg}
     // @ts-ignore
-    export { default as ${templateVarName}Template } from "!!raw-loader!./${componentPath}";\n
+    export { default as ${templateVarName}Template } from "!!raw-loader!.${componentPath}";\n
     // @ts-ignore
-    export { default as ${templateVarName}TemplateJs } from "!!raw-loader!./__js/${jsComponentName}";\n
+    export { default as ${templateVarName}TemplateJs } from "!!raw-loader!./__js${jsComponentName}";\n
   `;
 
   if (componentPath.endsWith(".css")) {
     importString = outdent`
     ${warningMsg}
     // @ts-ignore
-    export { default as ${templateVarName}CssTemplate } from "!!raw-loader!./${componentPath}";\n
+    export { default as ${templateVarName}CssTemplate } from "!!raw-loader!.${componentPath}";\n
     `;
   }
 
@@ -140,8 +112,6 @@ function generateTemplateFile() {
   console.log(chalk.blueBright.bold(`Generating template.ts files..`));
 
   Object.keys(components).forEach(componentName => {
-    const componentPairs = components[componentName];
-
     const templateFilePath = path.join(
       __dirname,
       "../src",
@@ -152,30 +122,54 @@ function generateTemplateFile() {
 
     createFile(templateFilePath, "");
 
+    const componentPairs = components[componentName];
     componentPairs.forEach((component, index) => {
       const importString = generateImportString(component, index);
 
-      console.log(
-        chalk.red.yellow(
-          `CREATED template.ts (${chalk.cyanBright(
-            path.relative("./", templateFilePath),
-          )})`,
-        ),
-      );
-
       fs.appendFileSync(templateFilePath, importString, "UTF-8", {
         flags: "a+",
       });
     });
+
+    console.log(
+      chalk.green.bold(
+        `CREATED: ${startCase(componentName)} templates at ${chalk.cyanBright(
+          path.relative("./", templateFilePath),
+        )}`,
+      ),
+    );
   });
 }
 
+const generateJsFiles = filePath => {
+  const code = fs.readFileSync(path.join(process.cwd(), filePath), {
+    encoding: "utf8",
+  });
+
+  const transpiledCode = transpileTs(code);
+  const templateFilePath = filePath
+    .replace("stories", `stories${path.sep}__js`)
+    .replace(".tsx", ".jsx");
+  const templateDir = path.join(process.cwd(), path.dirname(templateFilePath));
+
+  createDirectory(templateDir);
+
+  const componentName = path.basename(templateFilePath);
+  const templatePath = path.join(templateDir, componentName);
+
+  console.log(chalk.green.bold(`CREATED: ${componentName}`));
+
+  createFile(templatePath, transpiledCode);
+};
+
 function globRecurse(file) {
   // `file.pattern` is an object with a `glob` (string) property
   file.recurse = file.pattern.glob.indexOf("**") !== -1;
   return file;
 }
+
 const files = globFs.use(globRecurse).readdirSync("**/*.component.tsx", {});
+
 console.log(chalk.blueBright.bold(`Generating JS Files..`));
 files.forEach(filePath => generateJsFiles(filePath));