diff --git a/.bcr-config.js b/.bcr-config.js
index 27ebd95..9b31e47 100644
--- a/.bcr-config.js
+++ b/.bcr-config.js
@@ -2,15 +2,22 @@
 // Do NOT copy-paste this file for use in your own projects
 module.exports = {
     options: {
-        ComponentShared: {
-            path: "src/shared/components",
-            template: "reactWebNoRedux",
+        NativeNoRedux: {
+            path: "src/nativeNoRedux",
+            template: "reactNativeNoRedux",
         },
-        PageNative: {
-            path: "src/native/screens",
+        NativeWithRedux: {
+            path: "src/nativeWithRedux",
             template: "reactNativeWithRedux",
         },
-        PageWeb: { path: "src/web/pages", template: "reactWebWithRedux" },
+        WebNoRedux: {
+            path: "src/webNoRedux",
+            template: "reactWebNoRedux",
+        },
+        WebWithRedux: {
+            path: "src/webWithRedux",
+            template: "reactWebWithRedux",
+        },
         ReduxDomain: {
             path: "src/store",
             template: "reduxDomain",
diff --git a/package.json b/package.json
index fef8427..6b00ab2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bytecode-react-cli",
-  "version": "0.2.2",
+  "version": "0.4.2",
   "description": "The Bytecode React CLI tool",
   "main": "index.js",
   "repository": "https://github.com/BytecodeAgency/Bytecode-React-CLI.git",
diff --git a/templates/reactNativeNoRedux.js b/templates/reactNativeNoRedux.js
index 05e8385..19758ba 100644
--- a/templates/reactNativeNoRedux.js
+++ b/templates/reactNativeNoRedux.js
@@ -1,11 +1,12 @@
-const { main, testsEnzyme, types } = require("./reactShared");
+const { main, components, types } = require("./reactShared");
 
 const reactWebNoRedux = (name) => {
     const files = {};
     files[`${name}.tsx`] = main(name);
-    files[`${name}.test.tsx`] = testsEnzyme(name);
-    files[`${name}.types.tsx`] = types(name);
-    files[`${name}.styles.tsx`] = styles(name);
+    files[`${name}.test.tsx`] = tests(name);
+    files[`${name}.types.ts`] = types(name);
+    files[`${name}.components.tsx`] = components(name);
+    files[`${name}.styles.ts`] = styles(name);
     return files;
 };
 
@@ -17,3 +18,15 @@ export const ${name}Container = styled.Text\`
     margin: 10px;
 \`
 `;
+
+const tests = (name) => `import React from 'react';
+import { mount } from 'enzyme';
+import ${name} from './${name}';
+
+describe('${name}', () => {
+    it('should render', () => {
+        const wrapper = mount(<${name} text={testText}/>);
+        expect(wrapper.type()).toEqual(${name});
+    });
+});
+`;
diff --git a/templates/reactNativeWithRedux.js b/templates/reactNativeWithRedux.js
index b75adef..7c4bd79 100644
--- a/templates/reactNativeWithRedux.js
+++ b/templates/reactNativeWithRedux.js
@@ -1,13 +1,18 @@
-const { main, testsEnzyme, components, types, connector } = require("./reactShared");
+const {
+    mainConnected,
+    components,
+    types,
+    connector,
+} = require("./reactShared");
 
 const reactWebWithRedux = (name) => {
     const files = {};
-    files[`${name}.tsx`] = main(name);
-    files[`${name}.test.tsx`] = testsEnzyme(name);
-    files[`${name}.types.tsx`] = types(name);
-    files[`${name}.styles.tsx`] = styles(name);
+    files[`${name}.tsx`] = mainConnected(name);
+    files[`${name}.test.tsx`] = tests(name);
+    files[`${name}.types.ts`] = types(name);
+    files[`${name}.styles.ts`] = styles(name);
     files[`${name}.components.tsx`] = components(name);
-    files[`${name}.connector.tsx`] = connector(name);
+    files[`${name}.connector.ts`] = connector(name);
     return files;
 };
 
@@ -19,3 +24,15 @@ export const ${name}Container = styled.Text\`
     margin: 10px;
 \`
 `;
+
+const tests = (testsEnzymeRedux = (name) => `import React from 'react';
+import { mount } from 'enzyme';
+import { ${name} } from './${name}';
+
+describe('${name}', () => {
+    it('should render', () => {
+        const wrapper = mount(<${name} text={testText}/>);
+        expect(wrapper.type()).toEqual(${name});
+    });
+});
+`);
diff --git a/templates/reactShared.js b/templates/reactShared.js
index df135ec..0fd2889 100644
--- a/templates/reactShared.js
+++ b/templates/reactShared.js
@@ -14,29 +14,23 @@ const ${name}: React.FC<${name}Props> = ({ text }) => {
 export default ${name};
 `;
 
-module.exports.tests = (name) => `import React from 'react';
-import { render, screen } from '@testing-library/react';
-import ${name} from './${name}';
+module.exports.mainConnected = (name) => `import React from 'react';
+// import { ... } from './${name}.components'; // TODO: Remove or include imports
+import { ${name}Container } from './${name}.styles';
+import ${name}Props from './${name}.types';
+import connect${name} from './${name}.connector';
 
-describe('${name}', () => {
-    it('should render', () => {
-        const testText = 'testText';
-        render(<${name} text="test"/>);
-        expect(screen.findByText(testText)).toBeDefined();
-    });
-});
-`;
+export const ${name}: React.FC<${name}Props> = ({ text }) => {
+    return (
+        <${name}Container>
+            {text}
+        </${name}Container>
+    );
+};
 
-module.exports.testsEnzyme = (name) => `import React from 'react';
-import { mount } from 'enzyme';
-import ${name} from './${name}';
+const Connected${name} = connect${name}(${name});
 
-describe('${name}', () => {
-    it('should render', () => {
-        const wrapper = mount(<${name} text="test"/>);
-        expect(wrapper.type()).toEqual(${name});
-    });
-});
+export default Connected${name};
 `;
 
 module.exports.components = (name) => `import React from 'react';
@@ -54,13 +48,13 @@ module.exports.types = (name) => `export default interface ${name}Props {
 `;
 
 module.exports.connector = (name) => `import { connect } from 'react-redux';
-import ${name} from './${name}';
 
 const mapStateToProps = (state: ReduxState) => ({
     // Map state to props
 });
 const mapDispatchToProps = {};
-const Connected${name} = connect(mapStateToProps, mapDispatchToProps)(${name});
 
-export default Connected${name};
+const connect${name} = connect(mapStateToProps, mapDispatchToProps);
+
+export default connect${name};
 `;
diff --git a/templates/reactWebNoRedux.js b/templates/reactWebNoRedux.js
index 6053503..d095082 100644
--- a/templates/reactWebNoRedux.js
+++ b/templates/reactWebNoRedux.js
@@ -1,11 +1,12 @@
-const { main, tests, types } = require("./reactShared");
+const { main, components, types } = require("./reactShared");
 
 const reactWebNoRedux = (name) => {
     const files = {};
     files[`${name}.tsx`] = main(name);
     files[`${name}.test.tsx`] = tests(name);
-    files[`${name}.types.tsx`] = types(name);
-    files[`${name}.styles.tsx`] = styles(name);
+    files[`${name}.types.ts`] = types(name);
+    files[`${name}.components.tsx`] = components(name);
+    files[`${name}.styles.ts`] = styles(name);
     return files;
 };
 
@@ -17,3 +18,15 @@ export const ${name}Container = styled.div\`
     margin: 10px;
 \`
 `;
+const tests = (name) => `import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ${name} from './${name}';
+
+describe('${name}', () => {
+    it('should render', async () => {
+        const testText = 'testText';
+        render(<${name} text={testText}/>);
+        expect(await screen.findByText(testText)).toBeDefined();
+    });
+});
+`;
diff --git a/templates/reactWebWithRedux.js b/templates/reactWebWithRedux.js
index b0cb4d3..3f054df 100644
--- a/templates/reactWebWithRedux.js
+++ b/templates/reactWebWithRedux.js
@@ -1,13 +1,18 @@
-const { main, tests, components, types, connector } = require("./reactShared");
+const {
+    mainConnected,
+    components,
+    types,
+    connector,
+} = require("./reactShared");
 
 const reactWebWithRedux = (name) => {
     const files = {};
-    files[`${name}.tsx`] = main(name);
+    files[`${name}.tsx`] = mainConnected(name);
     files[`${name}.test.tsx`] = tests(name);
-    files[`${name}.types.tsx`] = types(name);
-    files[`${name}.styles.tsx`] = styles(name);
+    files[`${name}.types.ts`] = types(name);
+    files[`${name}.styles.ts`] = styles(name);
     files[`${name}.components.tsx`] = components(name);
-    files[`${name}.connector.tsx`] = connector(name);
+    files[`${name}.connector.ts`] = connector(name);
     return files;
 };
 
@@ -19,3 +24,16 @@ export const ${name}Container = styled.div\`
     margin: 10px;
 \`
 `;
+
+const tests = (name) => `import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ${name} } from './${name}';
+
+describe('${name}', () => {
+    it('should render', async () => {
+        const testText = 'testText';
+        render(<${name} text={testText}/>);
+        expect(await screen.findByText(testText)).toBeDefined();
+    });
+});
+`;
diff --git a/templates/reduxDomain.js b/templates/reduxDomain.js
index 96ce475..5efcf5b 100644
--- a/templates/reduxDomain.js
+++ b/templates/reduxDomain.js
@@ -53,7 +53,7 @@ export const initialState: DomainState = {
     errors: [],
 }
 
-const domainReducer = (state: DomainState = initialState, action: DomainDispatches) => {
+const domainReducer = (state: DomainState = initialState, action: DomainDispatches): DomainState => {
     switch (action.type) {
         case DomainActions.AddError:
             return {