diff --git a/bin/combine/components/combine-components.js b/bin/combine/components/combine-components.js
index 1f1ba4c..834ca1b 100644
--- a/bin/combine/components/combine-components.js
+++ b/bin/combine/components/combine-components.js
@@ -5,7 +5,7 @@ const fs = require("file-system");
  * @description this function is used to combine components in a specific folder.
  * @param {Array} components - array of components to be combined.
  * @param {string} folder - the name or path of folder that combines the components.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.combineComponents = (components, folder) => {
@@ -13,35 +13,33 @@ exports.combineComponents = (components, folder) => {
     console.log("Please provide at least 2 components");
     return;
   }
-  let files = [];
+  const path = "src/components/";
+  const _path = `${path}${folder}/`;
+  let folders = [];
   components.forEach((component) => {
-    fs.readdirSync(`src/components/`)
-      .filter((file) => file.startsWith(component.toLowerCase()))
-      .forEach((file) => {
-        files.push(file);
-      });
+    fs.readdirSync(path)
+      .filter((f) => f === component)
+      .forEach((f) => folders.push(f));
   });
-  if (files.length < components.length) {
-    console.log("Check if these components do exist");
+  if (folders.length < components.length) {
+    console.log("Check if all of these components exist");
     return;
   }
-  const path = `src/components/${folder}`;
-  if (!fs.existsSync(path)) {
-    fs.mkdirSync(path);
+  if (!fs.existsSync(_path)) {
+    fs.mkdirSync(_path);
   } else {
-    console.log(`${path} already exist`);
+    console.log(`${_path} already exist`);
     console.log("Writing new files...");
   }
-  files.forEach((file) => {
-    const path = `src/components/${folder}/${file}`;
-    if (fs.existsSync(path)) {
-      console.log(`${path} already exist`);
+  folders.forEach((f) => {
+    if (fs.existsSync(`${_path}${f}/`)) {
+      console.log(`${_path}${f}/ already exist`);
     } else {
-      fs.rename(`src/components/${file}`, path, (err) => {
+      fs.rename(`${path}${f}/`, `${_path}${f}`, (err) => {
         if (err) {
-          console.log(`Cannot move ${file} component`);
+          console.log(`Cannot move ${f} component`);
         } else {
-          console.log(`${file} component moved to src/components/${folder}/`);
+          console.log(`${f} component moved to ${_path}`);
         }
       });
     }
diff --git a/bin/combine/pages/combine-pages.js b/bin/combine/pages/combine-pages.js
index 592adb9..670cda9 100644
--- a/bin/combine/pages/combine-pages.js
+++ b/bin/combine/pages/combine-pages.js
@@ -5,7 +5,7 @@ const fs = require("file-system");
  * @description this function is used to combine pages in a specific folder.
  * @param {Array} pages - array of pages to be combined.
  * @param {string} folder - the name or path of folder that combines the pages.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.combinePages = (pages, folder) => {
@@ -13,38 +13,35 @@ exports.combinePages = (pages, folder) => {
     console.log("Please provide at least 2 pages");
     return;
   }
+  const path = "src/pages/";
+  const _path = `${path}${folder}/`;
   let folders = [];
   pages.forEach((page) => {
-    fs.readdirSync(`src/pages/`)
-      .filter((f) => f === page.toLowerCase())
-      .forEach((f) => {
-        folders.push(f);
-      });
+    fs.readdirSync(path)
+      .filter((f) => f === page)
+      .forEach((f) => folders.push(f));
   });
-  if (folders.length < pages.length) {
-    console.log("Check if these pages do exist");
+  if (folders.length < screens.length) {
+    console.log("Check if all of these screens exist");
     return;
   }
-  const path = `src/pages/${folder}`;
-  if (!fs.existsSync(path)) {
-    fs.mkdirSync(path);
+  if (!fs.existsSync(_path)) {
+    fs.mkdirSync(_path);
   } else {
-    console.log(`${path} already exist`);
-    console.log(`Writing new files...`);
+    console.log(`${_path} already exist`);
+    console.log("Writing new files...");
   }
   folders.forEach((f) => {
-    const path = `src/pages/${folder}/${f}/`;
-    if (fs.existsSync(path)) {
-      console.log(`${path} already exist`);
+    if (fs.existsSync(`${_path}${f}`)) {
+      console.log(`${_path}${f}/ already exist`);
     } else {
-      fs.renameSync(`src/pages/${f}/`, path, (err) => {
+      fs.rename(`${path}${f}/`, `${_path}${f}`, (err) => {
         if (err) {
-          console.log(`Cannot move ${f} page`);
+          console.log(`Cannot move ${f} screen`);
         } else {
-          console.log(`${f} page moved to src/pages/${folder}/`);
+          console.log(`${f} screen moved to ${_path}`);
         }
       });
-      console.log(`${f} page moved to src/pages/${folder}/`);
     }
   });
 };
diff --git a/bin/create/component/functions/create-component.js b/bin/create/component/functions/create-component.js
index f9de02d..4cf5f16 100644
--- a/bin/create/component/functions/create-component.js
+++ b/bin/create/component/functions/create-component.js
@@ -1,5 +1,9 @@
 const fs = require("file-system");
-const { componentTemplateJs, componentTemplateTs } = require("../templates");
+const {
+  componentTemplateJs,
+  componentTemplateTs,
+  stylesTemplate,
+} = require("../templates");
 
 /**
  * @function createComponent
@@ -13,11 +17,24 @@ const { componentTemplateJs, componentTemplateTs } = require("../templates");
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.createComponent = (componentName, js, ts, folder, template) => {
+  let component =
+    componentName.charAt(0).toUpperCase() + componentName.slice(1);
+  if (componentName.includes("-")) {
+    component = "";
+    let words = componentName.split("-");
+    words.forEach((w) => {
+      component += w.charAt(0).toUpperCase() + w.slice(1);
+    });
+  }
   if (ts) {
     const path =
       folder === ""
-        ? `src/components/${componentName.toLowerCase()}.tsx`
-        : `src/components/${folder}/${componentName.toLowerCase()}.tsx`;
+        ? `src/components/${componentName.toLowerCase()}/index.tsx`
+        : `src/components/${folder}/${componentName.toLowerCase()}/index.tsx`;
+    const stylesPath =
+      folder === ""
+        ? `src/components/${componentName.toLowerCase()}/styles.css`
+        : `src/components/${folder}/${componentName.toLowerCase()}/styles.css`;
     if (fs.existsSync(path)) {
       console.log(`${path} already exist`);
     } else {
@@ -34,30 +51,48 @@ exports.createComponent = (componentName, js, ts, folder, template) => {
           fs.writeFile(path, file, (err) => {
             if (err) {
               console.log(err);
-              console.log(`Unable to create ${componentName} component`);
+              console.log(`Unable to create ${component} component`);
             } else {
               console.log(`${path} created`);
             }
           });
+          fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+            if (err) {
+              console.log(`Unable to create ${component} component styles`);
+            } else {
+              console.log(`${stylesPath} created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(path, componentTemplateTs(componentName), (err) => {
+        fs.writeFile(path, componentTemplateTs(component), (err) => {
           if (err) {
             console.log(err);
-            console.log(`Unable to create ${componentName} component`);
+            console.log(`Unable to create ${component} component`);
           } else {
             console.log(`${path} created`);
           }
         });
+        fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+          if (err) {
+            console.log(`Unable to create ${component} component styles`);
+          } else {
+            console.log(`${stylesPath} created`);
+          }
+        });
       }
     }
   } else {
     const path =
       folder === ""
-        ? `src/components/${componentName.toLowerCase()}.jsx`
-        : `src/components/${folder}/${componentName.toLowerCase()}.jsx`;
+        ? `src/components/${componentName.toLowerCase()}/index.jsx`
+        : `src/components/${folder}/${componentName.toLowerCase()}/index.jsx`;
+    const stylesPath =
+      folder === ""
+        ? `src/components/${componentName.toLowerCase()}/styles.css`
+        : `src/components/${folder}/${componentName.toLowerCase()}/styles.css`;
     if (fs.existsSync(path)) {
       console.log(`${path} already exist`);
     } else {
@@ -74,22 +109,36 @@ exports.createComponent = (componentName, js, ts, folder, template) => {
           fs.writeFile(path, file, (err) => {
             if (err) {
               console.log(err);
-              console.log(`Unable to create ${componentName} component`);
+              console.log(`Unable to create ${component} component`);
             } else {
               console.log(`${path} created`);
             }
           });
+          fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+            if (err) {
+              console.log(`Unable to create ${component} component styles`);
+            } else {
+              console.log(`${stylesPath} created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(path, componentTemplateJs(componentName), (err) => {
+        fs.writeFile(path, componentTemplateJs(component), (err) => {
           if (err) {
-            console.log(`Unable to create ${componentName} component`);
+            console.log(`Unable to create ${component} component`);
           } else {
             console.log(`${path} created`);
           }
         });
+        fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+          if (err) {
+            console.log(`Unable to create ${component} component styles`);
+          } else {
+            console.log(`${stylesPath} created`);
+          }
+        });
       }
     }
   }
diff --git a/bin/create/component/templates/component-template-js.js b/bin/create/component/templates/component-template-js.js
index 309d2e9..3b42e31 100644
--- a/bin/create/component/templates/component-template-js.js
+++ b/bin/create/component/templates/component-template-js.js
@@ -7,12 +7,11 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.componentTemplateJs = (componentName) => {
-  let component =
-    componentName.charAt(0).toUpperCase() + componentName.slice(1);
-  return `// export ${component} component
-const ${component} = () => {
-    return <div>${component} component created!</div>;
+  return `import styles from './styles.css';
+
+const ${componentName} = () => {
+    return <div>${componentName} component created!</div>;
 }
-export default ${component};
+export default ${componentName};
 `;
 };
diff --git a/bin/create/component/templates/component-template-ts.js b/bin/create/component/templates/component-template-ts.js
index 421f78a..5d2c2bb 100644
--- a/bin/create/component/templates/component-template-ts.js
+++ b/bin/create/component/templates/component-template-ts.js
@@ -7,17 +7,14 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.componentTemplateTs = (componentName) => {
-  let component =
-    componentName.charAt(0).toUpperCase() + componentName.slice(1);
   return `import { FC } from "react";
+import styles from "./styles.css";
 
-// define ${component} props interface
-interface ${component}Props {}
+interface ${componentName}Props {}
 
-// export ${component} component
-const ${component}: FC<${component}Props> = ({}: ${component}Props): JSX.Element => {
-    return <div>${component} component created!</div>;
+const ${componentName}: FC<${componentName}Props> = ({}: ${componentName}Props): JSX.Element => {
+    return <div>${componentName} component created!</div>;
 }
-export default ${component};
+export default ${componentName};
 `;
 };
diff --git a/bin/create/component/templates/index.js b/bin/create/component/templates/index.js
index cba3a8a..6fa24f2 100644
--- a/bin/create/component/templates/index.js
+++ b/bin/create/component/templates/index.js
@@ -1,5 +1,7 @@
 const { componentTemplateJs } = require("./component-template-js");
 const { componentTemplateTs } = require("./component-template-ts");
+const { stylesTemplate } = require("./styles-template");
 
 exports.componentTemplateJs = componentTemplateJs;
 exports.componentTemplateTs = componentTemplateTs;
+exports.stylesTemplate = stylesTemplate;
diff --git a/bin/create/component/templates/styles-template.js b/bin/create/component/templates/styles-template.js
new file mode 100644
index 0000000..a266e95
--- /dev/null
+++ b/bin/create/component/templates/styles-template.js
@@ -0,0 +1,9 @@
+/**
+ * @function stylesTemplate
+ * @description this function returns the default styles template for a component.
+ * @param {string} componentName - name of component.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.stylesTemplate = (componentName) => {
+  return `/* ${componentName} styles */`;
+};
diff --git a/bin/create/page/functions/create-page.js b/bin/create/page/functions/create-page.js
index c2e0015..34171c0 100644
--- a/bin/create/page/functions/create-page.js
+++ b/bin/create/page/functions/create-page.js
@@ -4,6 +4,7 @@ const {
   pageTemplateTs,
   pageFunctionTemplateJs,
   pageFunctionTemplateTs,
+  stylesTemplate,
 } = require("../templates");
 
 /**
@@ -18,6 +19,14 @@ const {
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.createPage = (pageName, js, ts, folder, template) => {
+  let page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
+  if (pageName.includes("-")) {
+    page = "";
+    let words = pageName.split("-");
+    words.forEach((w) => {
+      page += w.charAt(0).toUpperCase() + w.slice(1);
+    });
+  }
   const path =
     folder === ""
       ? `src/pages/${pageName.toLowerCase()}/`
@@ -36,56 +45,60 @@ exports.createPage = (pageName, js, ts, folder, template) => {
             encoding: "utf8",
             flag: "r",
           });
-          fs.writeFile(
-            `${path}ui/${pageName.toLowerCase()}-ui.tsx`,
-            file,
-            (err) => {
-              if (err) {
-                console.log(`Unable to create ${pageName} page ui`);
-              } else {
-                console.log(
-                  `${path}ui/${pageName.toLowerCase()}-ui.tsx created`
-                );
-              }
+          fs.writeFile(`${path}/index.tsx`, file, (err) => {
+            if (err) {
+              console.log(`Unable to create ${page} page`);
+            } else {
+              console.log(`${path}/index.tsx created`);
             }
-          );
+          });
           fs.writeFile(
             `${path}functions/index.ts`,
-            pageFunctionTemplateTs(pageName),
+            pageFunctionTemplateTs(page),
             (err) => {
               if (err) {
-                console.log(`Unable to create ${pageName} page functions`);
+                console.log(`Unable to create ${page} page functions`);
               } else {
                 console.log(`${path}functions/index.ts created`);
               }
             }
           );
+          fs.writeFile(`${path}styles.css`, stylesTemplate(page), (err) => {
+            if (err) {
+              console.log(`Unable to create ${page} component styles`);
+            } else {
+              console.log(`${path}styles.css created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(
-          `${path}ui/${pageName.toLowerCase()}-ui.tsx`,
-          pageTemplateTs(pageName),
-          (err) => {
-            if (err) {
-              console.log(`Unable to create ${pageName} page ui`);
-            } else {
-              console.log(`${path}ui/${pageName.toLowerCase()}-ui.tsx created`);
-            }
+        fs.writeFile(`${path}/index.tsx`, pageTemplateTs(page), (err) => {
+          if (err) {
+            console.log(`Unable to create ${pageName} page ui`);
+          } else {
+            console.log(`${path}/index.tsx created`);
           }
-        );
+        });
         fs.writeFile(
           `${path}functions/index.ts`,
-          pageFunctionTemplateTs(pageName),
+          pageFunctionTemplateTs(page),
           (err) => {
             if (err) {
-              console.log(`Unable to create ${pageName} page functions`);
+              console.log(`Unable to create ${page} page functions`);
             } else {
               console.log(`${path}functions/index.ts created`);
             }
           }
         );
+        fs.writeFile(`${path}styles.css`, stylesTemplate(page), (err) => {
+          if (err) {
+            console.log(`Unable to create ${page} component styles`);
+          } else {
+            console.log(`${path}styles.css created`);
+          }
+        });
       }
     } else {
       // check if template file exist
@@ -98,56 +111,60 @@ exports.createPage = (pageName, js, ts, folder, template) => {
             encoding: "utf8",
             flag: "r",
           });
-          fs.writeFile(
-            `${path}ui/${pageName.toLowerCase()}-ui.jsx`,
-            file,
-            (err) => {
-              if (err) {
-                console.log(`Unable to create ${pageName} page ui`);
-              } else {
-                console.log(
-                  `${path}ui/${pageName.toLowerCase()}-ui.jsx created`
-                );
-              }
+          fs.writeFile(`${path}/index.jsx`, file, (err) => {
+            if (err) {
+              console.log(`Unable to create ${page} page`);
+            } else {
+              console.log(`${path}/index.jsx created`);
             }
-          );
+          });
           fs.writeFile(
             `${path}functions/index.js`,
-            pageFunctionTemplateJs(pageName),
+            pageFunctionTemplateJs(page),
             (err) => {
               if (err) {
-                console.log(`Unable to create ${pageName} page functions`);
+                console.log(`Unable to create ${page} page functions`);
               } else {
                 console.log(`${path}functions/index.js created`);
               }
             }
           );
+          fs.writeFile(`${path}styles.css`, stylesTemplate(page), (err) => {
+            if (err) {
+              console.log(`Unable to create ${page} component styles`);
+            } else {
+              console.log(`${path}styles.css created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(
-          `${path}ui/${pageName.toLowerCase()}-ui.jsx`,
-          pageTemplateJs(pageName),
-          (err) => {
-            if (err) {
-              console.log(`Unable to create ${pageName} page ui`);
-            } else {
-              console.log(`${path}ui/${pageName.toLowerCase()}-ui.jsx created`);
-            }
+        fs.writeFile(`${path}/index.jsx`, pageTemplateJs(page), (err) => {
+          if (err) {
+            console.log(`Unable to create ${page} page`);
+          } else {
+            console.log(`${path}/index.jsx created`);
           }
-        );
+        });
         fs.writeFile(
           `${path}functions/index.js`,
-          pageFunctionTemplateJs(pageName),
+          pageFunctionTemplateJs(page),
           (err) => {
             if (err) {
-              console.log(`Unable to create ${pageName} page functions`);
+              console.log(`Unable to create ${page} page functions`);
             } else {
               console.log(`${path}functions/index.js created`);
             }
           }
         );
+        fs.writeFile(`${path}styles.css`, stylesTemplate(page), (err) => {
+          if (err) {
+            console.log(`Unable to create ${page} component styles`);
+          } else {
+            console.log(`${path}styles.css created`);
+          }
+        });
       }
     }
   }
diff --git a/bin/create/page/templates/index.js b/bin/create/page/templates/index.js
index 96f3047..56dc721 100644
--- a/bin/create/page/templates/index.js
+++ b/bin/create/page/templates/index.js
@@ -2,8 +2,10 @@ const { pageTemplateJs } = require("./page-template-js");
 const { pageTemplateTs } = require("./page-template-ts");
 const { pageFunctionTemplateJs } = require("./page-function-template-js");
 const { pageFunctionTemplateTs } = require("./page-function-template-ts");
+const { stylesTemplate } = require("./styles-template");
 
 exports.pageTemplateJs = pageTemplateJs;
 exports.pageTemplateTs = pageTemplateTs;
 exports.pageFunctionTemplateJs = pageFunctionTemplateJs;
 exports.pageFunctionTemplateTs = pageFunctionTemplateTs;
+exports.stylesTemplate = stylesTemplate;
diff --git a/bin/create/page/templates/page-function-template-js.js b/bin/create/page/templates/page-function-template-js.js
index a095c2a..7e82109 100644
--- a/bin/create/page/templates/page-function-template-js.js
+++ b/bin/create/page/templates/page-function-template-js.js
@@ -7,6 +7,5 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.pageFunctionTemplateJs = (pageName) => {
-  let page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
-  return `// write your ${page} functions here`;
+  return `// write your ${pageName} functions here`;
 };
diff --git a/bin/create/page/templates/page-function-template-ts.js b/bin/create/page/templates/page-function-template-ts.js
index 3baae89..8296f96 100644
--- a/bin/create/page/templates/page-function-template-ts.js
+++ b/bin/create/page/templates/page-function-template-ts.js
@@ -7,7 +7,6 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.pageFunctionTemplateTs = (pageName) => {
-  let page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
-  return `// write your ${page} functions here
+  return `// write your ${pageName} functions here
 export {};`;
 };
diff --git a/bin/create/page/templates/page-template-js.js b/bin/create/page/templates/page-template-js.js
index bac928d..e8ab01c 100644
--- a/bin/create/page/templates/page-template-js.js
+++ b/bin/create/page/templates/page-template-js.js
@@ -6,11 +6,11 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.pageTemplateJs = (pageName) => {
-  let page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
-  return `// export ${page} page
-const ${page} = () => {
-    return <div>${page} page created!</div>;
+  return `import styles from './styles.css';
+
+const ${pageName} = () => {
+    return <div>${pageName} page created!</div>;
 }
-export default ${page};
+export default ${pageName};
 `;
 };
diff --git a/bin/create/page/templates/page-template-ts.js b/bin/create/page/templates/page-template-ts.js
index 1da53ad..08a30c5 100644
--- a/bin/create/page/templates/page-template-ts.js
+++ b/bin/create/page/templates/page-template-ts.js
@@ -6,16 +6,14 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.pageTemplateTs = (pageName) => {
-  let page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
   return `import { FC } from "react";
+import styles from "./styles.css";
 
-// define ${page} props interface
-interface ${page}Props {}
+interface ${pageName}Props {}
 
-// export ${page} page
-const ${page}: FC<${page}Props> = ({}: ${page}Props): JSX.Element => {
-    return <div>${page} page created!</div>;
+const ${pageName}: FC<${pageName}Props> = ({}: ${pageName}Props): JSX.Element => {
+    return <div>${pageName} page created!</div>;
 }
-export default ${page};
+export default ${pageName};
 `;
 };
diff --git a/bin/create/page/templates/styles-template.js b/bin/create/page/templates/styles-template.js
new file mode 100644
index 0000000..63eb1e1
--- /dev/null
+++ b/bin/create/page/templates/styles-template.js
@@ -0,0 +1,9 @@
+/**
+ * @function stylesTemplate
+ * @description this function returns the default styles template for a component.
+ * @param {string} pageName - name of component.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.stylesTemplate = (pageName) => {
+  return `/* ${pageName} styles */`;
+};
diff --git a/bin/create/redux/functions/create-redux.js b/bin/create/redux/functions/create-redux.js
index f759478..0c4b717 100644
--- a/bin/create/redux/functions/create-redux.js
+++ b/bin/create/redux/functions/create-redux.js
@@ -8,109 +8,97 @@ const {
   reducersTemplateTs,
   storeTemplateJs,
   storeTemplateTs,
+  reducerTemplateTs,
+  mainReducerTemplate,
+  actionTemplateTs,
+  reducerTemplateJs,
+  actionTemplateJs,
 } = require("../templates");
 
 /**
  * @function createRedux
  * @description this function is used to create a redux implemenation.
- * @param {string} reduxName - the name of the redux implementation.
  * @param {boolean} js - if true, the javascript implementation will be created.
  * @param {boolean} ts - if true, the typescript implementation will be created.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
-exports.createRedux = (reduxName, js, ts) => {
-  const path = `src/${reduxName.toLowerCase()}/`;
+exports.createRedux = (js, ts) => {
+  const path = `src/redux/`;
   if (fs.existsSync(path)) {
     console.log(`${path} already exist`);
   } else {
     if (ts) {
-      fs.writeFile(
-        `${path}actions/index.ts`,
-        actionsTemplateTs(reduxName),
-        (err) => {
-          if (err) {
-            console.log(`Unable to create ${reduxName} action creators`);
-          } else {
-            console.log(`${path}actions/index.ts created`);
-          }
+      fs.writeFile(`${path}index.ts`, storeTemplateTs(), (err) => {
+        if (err) {
+          console.log("Unable to create redux store");
+        } else {
+          console.log(`${path}index.ts created`);
         }
-      );
+      });
       fs.writeFile(
-        `${path}constants/index.ts`,
-        constantsTemplateTs(reduxName),
+        `${path}reducers/general/index.ts`,
+        reducerTemplateTs(),
         (err) => {
           if (err) {
-            console.log(`Unable to create ${reduxName} action types`);
+            console.log("Unable to create redux general reducer");
           } else {
-            console.log(`${path}constants/index.ts created`);
+            console.log(`${path}reducers/general/index.ts created`);
           }
         }
       );
-      fs.writeFile(
-        `${path}reducers/index.ts`,
-        reducersTemplateTs(reduxName),
-        (err) => {
-          if (err) {
-            console.log(`Unable to create ${reduxName} reducers`);
-          } else {
-            console.log(`${path}reducers/index.ts created`);
-          }
+      fs.writeFile(`${path}reducers/index.ts`, mainReducerTemplate(), (err) => {
+        if (err) {
+          console.log("Unable to create redux main reducer");
+        } else {
+          console.log(`${path}reducers/index.ts created`);
         }
-      );
+      });
       fs.writeFile(
-        `${path}store/index.ts`,
-        storeTemplateTs(reduxName),
+        `${path}actions/general/index.ts`,
+        actionTemplateTs(),
         (err) => {
           if (err) {
-            console.log(`Unable to create ${reduxName} store`);
+            console.log("Unable to create redux general actions");
           } else {
-            console.log(`${path}store/index.ts created`);
+            console.log(`${path}actions/general/index.ts created`);
           }
         }
       );
     } else {
-      fs.writeFile(
-        `${path}actions/index.js`,
-        actionsTemplateJs(reduxName),
-        (err) => {
-          if (err) {
-            console.log(`Unable to create ${reduxName} action creators`);
-          } else {
-            console.log(`${path}actions/index.js created`);
-          }
+      fs.writeFile(`${path}index.js`, storeTemplateJs(), (err) => {
+        if (err) {
+          console.log("Unable to create redux store");
+        } else {
+          console.log(`${path}index.js created`);
         }
-      );
+      });
       fs.writeFile(
-        `${path}constants/index.js`,
-        constantsTemplateJs(reduxName),
+        `${path}reducers/general/index.js`,
+        reducerTemplateJs(),
         (err) => {
           if (err) {
-            console.log(`Unable to create ${reduxName} action types`);
+            console.log("Unable to create redux general reducer");
           } else {
-            console.log(`${path}constants/index.js created`);
+            console.log(`${path}reducers/general/index.js created`);
           }
         }
       );
-      fs.writeFile(
-        `${path}reducers/index.js`,
-        reducersTemplateJs(reduxName),
-        (err) => {
-          if (err) {
-            console.log(`Unable to create ${reduxName} reducers`);
-          } else {
-            console.log(`${path}reducers/index.js created`);
-          }
+      fs.writeFile(`${path}reducers/index.js`, mainReducerTemplate(), (err) => {
+        if (err) {
+          console.log("Unable to create redux main reducer");
+        } else {
+          console.log(`${path}reducers/index.js created`);
         }
-      );
+      });
       fs.writeFile(
-        `${path}store/index.js`,
-        storeTemplateJs(reduxName),
+        `${path}actions/general/index.js`,
+        actionTemplateJs(),
         (err) => {
           if (err) {
-            console.log(`Unable to create ${reduxName} store`);
+            console.log("Unable to create redux general actions");
           } else {
-            console.log(`${path}store/index.js created`);
+            console.log(`${path}actions/general/index.js created`);
           }
         }
       );
diff --git a/bin/create/redux/templates/action-template-js.js b/bin/create/redux/templates/action-template-js.js
new file mode 100644
index 0000000..9eea8ad
--- /dev/null
+++ b/bin/create/redux/templates/action-template-js.js
@@ -0,0 +1,12 @@
+/**
+ * @function actionTemplateJs
+ * @description this function returns the default action template in javascript.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.actionTemplateJs = () => `// write your general actions here
+
+// this is an example for an action
+export const init = () => async (dispatch, getState) => {
+  dispatch({ type: "UPDATE_GENERAL", payload: { message: "init created!" } })
+}
+`;
diff --git a/bin/create/redux/templates/action-template-ts.js b/bin/create/redux/templates/action-template-ts.js
new file mode 100644
index 0000000..edcd05e
--- /dev/null
+++ b/bin/create/redux/templates/action-template-ts.js
@@ -0,0 +1,16 @@
+/**
+ * @function actionTemplateTs
+ * @description this function returns the default action template in typescript.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.actionTemplateTs =
+  () => `import { GeneralState } from "../../reducers/general";
+import { ThunkResult } from "../..";
+
+// write your general actions here
+
+// this is an example for an action
+export const init = (): ThunkResult<GeneralState> => async (dispatch, getState) => {
+  dispatch({ type: "UPDATE_GENERAL", payload: { message: "init created!" } })
+};
+`;
diff --git a/bin/create/redux/templates/actions-template-js.js b/bin/create/redux/templates/actions-template-js.js
deleted file mode 100644
index 5810497..0000000
--- a/bin/create/redux/templates/actions-template-js.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @function actionsTemplateJs
- * @description this function is used to generate the redux actions template implementation in js.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the js implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.actionsTemplateJs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} action creators here
-`;
-};
diff --git a/bin/create/redux/templates/actions-template-ts.js b/bin/create/redux/templates/actions-template-ts.js
deleted file mode 100644
index 6b57740..0000000
--- a/bin/create/redux/templates/actions-template-ts.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @function actionsTemplateTs
- * @description this function is used to generate the redux actions template implementation in ts.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the ts implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.actionsTemplateTs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} action creators here
-export {};  
-`;
-};
diff --git a/bin/create/redux/templates/constants-template-js.js b/bin/create/redux/templates/constants-template-js.js
deleted file mode 100644
index 596e10d..0000000
--- a/bin/create/redux/templates/constants-template-js.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @function constantsTemplateJs
- * @description this function is used to generate the redux constants template implementation in js.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the js implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.constantsTemplateJs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} action types here
-`;
-};
diff --git a/bin/create/redux/templates/constants-template-ts.js b/bin/create/redux/templates/constants-template-ts.js
deleted file mode 100644
index 0215c74..0000000
--- a/bin/create/redux/templates/constants-template-ts.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @function constantsTemplateTs
- * @description this function is used to generate the redux constants template implementation in ts.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the ts implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.constantsTemplateTs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} action types here
-export {};
-`;
-};
diff --git a/bin/create/redux/templates/index.js b/bin/create/redux/templates/index.js
index 7f14b9b..bfee386 100644
--- a/bin/create/redux/templates/index.js
+++ b/bin/create/redux/templates/index.js
@@ -1,17 +1,15 @@
 const { storeTemplateJs } = require("./store-template-js");
 const { storeTemplateTs } = require("./store-template-ts");
-const { actionsTemplateJs } = require("./actions-template-js");
-const { actionsTemplateTs } = require("./actions-template-ts");
-const { constantsTemplateJs } = require("./constants-template-js");
-const { constantsTemplateTs } = require("./constants-template-ts");
-const { reducersTemplateJs } = require("./reducers-template-js");
-const { reducersTemplateTs } = require("./reducers-template-ts");
+const { reducerTemplateJs } = require("./reducer-template-js");
+const { reducerTemplateTs } = require("./reducer-template-ts");
+const { actionTemplateJs } = require("./action-template-js");
+const { actionTemplateTs } = require("./action-template-ts");
+const { mainReducerTemplate } = require("./main-reducer-template");
 
 exports.storeTemplateJs = storeTemplateJs;
 exports.storeTemplateTs = storeTemplateTs;
-exports.actionsTemplateJs = actionsTemplateJs;
-exports.actionsTemplateTs = actionsTemplateTs;
-exports.constantsTemplateJs = constantsTemplateJs;
-exports.constantsTemplateTs = constantsTemplateTs;
-exports.reducersTemplateJs = reducersTemplateJs;
-exports.reducersTemplateTs = reducersTemplateTs;
+exports.reducerTemplateJs = reducerTemplateJs;
+exports.reducerTemplateTs = reducerTemplateTs;
+exports.actionTemplateJs = actionTemplateJs;
+exports.actionTemplateTs = actionTemplateTs;
+exports.mainReducerTemplate = mainReducerTemplate;
diff --git a/bin/create/redux/templates/main-reducer-template.js b/bin/create/redux/templates/main-reducer-template.js
new file mode 100644
index 0000000..ea24b49
--- /dev/null
+++ b/bin/create/redux/templates/main-reducer-template.js
@@ -0,0 +1,7 @@
+exports.mainReducerTemplate = () => `import { combineReducers } from "redux";
+import { general } from "./general";
+
+export const mainReducer = combineReducers({
+  general,
+});
+`;
diff --git a/bin/create/redux/templates/reducer-template-js.js b/bin/create/redux/templates/reducer-template-js.js
new file mode 100644
index 0000000..d9d1053
--- /dev/null
+++ b/bin/create/redux/templates/reducer-template-js.js
@@ -0,0 +1,19 @@
+/**
+ * @function reducerTemplateJs
+ * @description this function returns the default reducer template in javascript.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.reducerTemplateJs = () => `const initialState = { message: "" };
+
+export const general = (
+  state = initialState,
+  action,
+) => {
+  switch (action.type) {
+    case "UPDATE_GENERAL":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+`;
diff --git a/bin/create/redux/templates/reducer-template-ts.js b/bin/create/redux/templates/reducer-template-ts.js
new file mode 100644
index 0000000..229056c
--- /dev/null
+++ b/bin/create/redux/templates/reducer-template-ts.js
@@ -0,0 +1,25 @@
+/**
+ * @function reducerTemplateTs
+ * @description this function returns the default reducer template in typescript.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.reducerTemplateTs = () => `import { Action } from "../..";
+
+export interface GeneralState {
+  message: string;
+}
+
+export const general = (
+  state: GeneralState = {
+    message: "",
+  },
+  action: Action<GeneralState>,
+) => {
+  switch (action.type) {
+    case "UPDATE_GENERAL":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+`;
diff --git a/bin/create/redux/templates/reducers-template-js.js b/bin/create/redux/templates/reducers-template-js.js
deleted file mode 100644
index c4a0fa8..0000000
--- a/bin/create/redux/templates/reducers-template-js.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @function reducersTemplateJs
- * @description this function is used to generate the redux reducers template implementation in js.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the js implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.reducersTemplateJs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} reducers here
-`;
-};
diff --git a/bin/create/redux/templates/reducers-template-ts.js b/bin/create/redux/templates/reducers-template-ts.js
deleted file mode 100644
index 8b0bc98..0000000
--- a/bin/create/redux/templates/reducers-template-ts.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @function reducersTemplateTs
- * @description this function is used to generate the redux reducers template implementation in ts.
- * @param {string} reduxName - the name of the redux folder.
- * @returns {string} the ts implementation template.
- * @version 1.0.0
- * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
- */
-exports.reducersTemplateTs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `// write your ${redux} reducers here
-export {};
-`;
-};
diff --git a/bin/create/redux/templates/store-template-js.js b/bin/create/redux/templates/store-template-js.js
index 7f5a49c..52c8cad 100644
--- a/bin/create/redux/templates/store-template-js.js
+++ b/bin/create/redux/templates/store-template-js.js
@@ -1,24 +1,21 @@
 /**
  * @function storeTemplateJs
- * @description this function is used to generate the redux store implementation template in javascript.
- * @param {string} reduxName - the name of the redux.
- * @returns {string} the javascript implementation template.
- * @version 1.0.0
+ * @description this function returns redux default store template in javascript.
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
-exports.storeTemplateJs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `import { createStore, combineReducers } from "redux";
+exports.storeTemplateJs =
+  () => `import { applyMiddleware, compose, createStore } from "redux";
+import { mainReducer } from "./reducers";
 
-// import ${redux} reducers
-import {} from "../reducers";
-
-// define app reducers
-const appReducers = combineReducers({
-    // you need to add your reducers here
-});
+/**
+ * the main redux state, with all the reducers
+ */
+export const mainStore = createStore(mainReducer, compose(applyMiddleware(thunk)));
 
-// export store
-export const store = createStore(appReducers);
-`;
+/**
+ * Creates a new redux state each time this function is called, this is used only for unit tests, to ensure that we have fresh state on each individual test
+ */
+export const createMainStore = () => {
+  return createStore(mainReducer, compose(applyMiddleware(thunk)));
 };
+`;
diff --git a/bin/create/redux/templates/store-template-ts.js b/bin/create/redux/templates/store-template-ts.js
index 77f2ed5..2cb3eba 100644
--- a/bin/create/redux/templates/store-template-ts.js
+++ b/bin/create/redux/templates/store-template-ts.js
@@ -1,24 +1,36 @@
 /**
  * @function storeTemplateTs
- * @description this function is used to generate the redux store implementation template in typescript.
- * @param {string} reduxName - the name of the redux.
- * @returns {string} the typescript implementation template.
- * @version 1.0.0
+ * @description this function returns redux default store template in typescript.
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
-exports.storeTemplateTs = (reduxName) => {
-  let redux = reduxName.toLowerCase();
-  return `import { createStore, combineReducers } from "redux";
+exports.storeTemplateTs =
+  () => `import { applyMiddleware, compose, createStore } from "redux";
+import { mainReducer } from "./reducers";
 
-// import ${redux} reducers
-import {} from "../reducers";
+/**
+ * the main redux state, with all the reducers
+ */
+export const mainStore = createStore(mainReducer, compose(applyMiddleware(thunk)));
+
+export type StateInterface = ReturnType<typeof mainStore.getState>;
+
+/**
+ * list of action types
+ */
+export type ActionType = "UPDATE_GENERAL";
+
+export interface Action<T> {
+  type: ActionType;
+  payload: Partial<T>;
+}
+
+export type ThunkResult<A = Record<string, unknown>, E = Record<string, unknown>> = ThunkAction<
+  void,
+  StateInterface,
+  E,
+  Action<A>
+>;
 
-// define app reducers
-const appReducers = combineReducers({
-    // you need to add your reducers here
-});
+export type Dispatch<A> = ThunkDispatch<StateInterface, Record<string, unknown>, Action<A>>;
 
-// export store
-export const store = createStore(appReducers);
 `;
-};
diff --git a/bin/delete/component/delete-components.js b/bin/delete/component/delete-components.js
index 493eaa5..84a47f0 100644
--- a/bin/delete/component/delete-components.js
+++ b/bin/delete/component/delete-components.js
@@ -9,8 +9,8 @@ const fs = require("file-system");
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.deleteComponents = (components, folder) => {
+  const path = folder === "" ? `src/components/` : `src/components/${folder}/`;
   if (components.length === 0 && folder !== "") {
-    const path = `src/components/${folder}/`;
     try {
       fs.rmdirSync(path);
       console.log(`${path} deleted`);
@@ -20,26 +20,12 @@ exports.deleteComponents = (components, folder) => {
     return;
   }
   components.forEach((component) => {
-    const path =
-      folder === "" ? `src/components/` : `src/components/${folder}/`;
-    if (fs.existsSync(`${path}${component.toLowerCase()}.tsx`)) {
-      fs.unlink(`${path}${component.toLowerCase()}.tsx`, (err) => {
-        if (err) {
-          console.log(`Unable to delete ${component} component`);
-        } else {
-          console.log(`${path}${component.toLowerCase()}.tsx deleted`);
-        }
-      });
-    } else if (fs.existsSync(`${path}${component.toLowerCase()}.jsx`)) {
-      fs.unlink(`${path}${component.toLowerCase()}.jsx`, (err) => {
-        if (err) {
-          console.log(`Unable to delete ${component} component`);
-        } else {
-          console.log(`${path}${component.toLowerCase()}.jsx deleted`);
-        }
-      });
-    } else {
-      console.log(`component ${component} does not exist`);
+    const _path = `${path}${component}/`;
+    try {
+      fs.rmdirSync(_path);
+      console.log(`${_path} deleted`);
+    } catch (err) {
+      console.log(`${_path} does not exist`);
     }
   });
 };
diff --git a/bin/delete/page/delete-pages.js b/bin/delete/page/delete-pages.js
index 7692e84..c14a615 100644
--- a/bin/delete/page/delete-pages.js
+++ b/bin/delete/page/delete-pages.js
@@ -9,25 +9,23 @@ const fs = require("file-system");
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.deletePages = (pages, folder) => {
-  if (pages.length === 0 && folder !== "") {
-    const path = `src/pages/${folder}/`;
+  const path = folder === "" ? `src/pages/` : `src/pages/${folder}/`;
+  if (screens.length === 0 && folder !== "") {
     try {
       fs.rmdirSync(path);
       console.log(`${path} deleted`);
     } catch (err) {
       console.log(`${path} does not exist`);
     }
+    return;
   }
   pages.forEach((page) => {
-    const path =
-      folder === ""
-        ? `src/pages/${page.toLowerCase()}/`
-        : `src/pages/${folder}/${page.toLowerCase()}`;
+    const _path = `${path}${page}`;
     try {
-      fs.rmdirSync(path);
-      console.log(`${path} deleted`);
+      fs.rmdirSync(_path);
+      console.log(`${_path} deleted`);
     } catch (err) {
-      console.log(`${path} does not exist`);
+      console.log(`${_path} does not exist`);
     }
   });
 };
diff --git a/bin/delete/redux/delete-redux.js b/bin/delete/redux/delete-redux.js
index 45a0f31..ebf78b9 100644
--- a/bin/delete/redux/delete-redux.js
+++ b/bin/delete/redux/delete-redux.js
@@ -3,12 +3,11 @@ const fs = require("file-system");
 /**
  * @function deleteRedux
  * @description this function is used to delete redux implementation that exists.
- * @param {string} reduxName - the redux folder name.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
-exports.deleteRedux = (reduxName) => {
-  const path = `src/${reduxName.toLowerCase()}/`;
+exports.deleteRedux = () => {
+  const path = `src/redux/`;
   try {
     fs.rmdirSync(path);
     console.log(`${path} deleted`);
diff --git a/bin/index.js b/bin/index.js
index 5a2d43a..7c04792 100644
--- a/bin/index.js
+++ b/bin/index.js
@@ -28,7 +28,7 @@ yargs
         .array("-p")
         .positional("-r", {
           alias: "--redux",
-          type: "string",
+          type: "boolean",
           describe: "to create redux implementation",
         })
         .option("js", {
@@ -63,7 +63,7 @@ yargs
         } else if (page) {
           page.forEach((p) => createPage(p, js, ts, folder, template));
         } else if (redux) {
-          createRedux(redux, js, ts);
+          createRedux(js, ts);
         } else {
           console.log("Check usage: rhc create --help");
         }
@@ -91,7 +91,7 @@ yargs
         .array("-p")
         .positional("-r", {
           alias: "--redux",
-          type: "string",
+          type: "boolean",
           describe: "to delete redux implementation",
         })
         .option("f", {
@@ -109,7 +109,7 @@ yargs
         } else if (page) {
           deletePages(page, folder);
         } else if (redux) {
-          deleteRedux(redux);
+          deleteRedux();
         } else {
           console.log("Check usage: rhc delete --help");
         }
diff --git a/package-lock.json b/package-lock.json
index d028160..61c759f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "react-help-create",
       "version": "1.1.0",
       "license": "MIT",
       "dependencies": {