diff --git a/base/template.json b/base/template.json
index 2f6179f..d9f3810 100644
--- a/base/template.json
+++ b/base/template.json
@@ -9,7 +9,6 @@
       "react": "^17.0.2",
       "react-dom": "^17.0.2",
       "react-scripts": "4.0.3",
-      "typescript": "^4.5.2",
       "web-vitals": "^1.1.2"
     }
   }
diff --git a/typescript/template/package.json b/typescript/package.json
similarity index 100%
rename from typescript/template/package.json
rename to typescript/package.json
diff --git a/typescript/template/src/app/App.jsx b/typescript/template/src/app/App.jsx
deleted file mode 100644
index 56b48fe..0000000
--- a/typescript/template/src/app/App.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PublicRoutes } from 'pages/router';
-import { withProviders } from './providers';
-
-export const App = withProviders(() => <PublicRoutes />);
diff --git a/typescript/template/src/app/App.tsx b/typescript/template/src/app/App.tsx
deleted file mode 100644
index cef9398..0000000
--- a/typescript/template/src/app/App.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { PublicRoutes } from 'pages/router';
-import { withProviders } from './providers';
-
-export const App: FC = withProviders(() => <PublicRoutes />);
diff --git a/typescript/template/src/app/index.ts b/typescript/template/src/app/index.ts
deleted file mode 100644
index 36d0fd8..0000000
--- a/typescript/template/src/app/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { App } from './App';
diff --git a/typescript/template/src/app/providers/index.js b/typescript/template/src/app/providers/index.ts
similarity index 100%
rename from typescript/template/src/app/providers/index.js
rename to typescript/template/src/app/providers/index.ts
diff --git a/typescript/template/src/app/providers/with-router.jsx b/typescript/template/src/app/providers/with-router.jsx
deleted file mode 100644
index de81659..0000000
--- a/typescript/template/src/app/providers/with-router.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Suspense } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { Loader } from 'shared/ui/loader';
-
-export const withRouter = (component) => () => {
-  return (
-    <BrowserRouter>
-      <Suspense fallback={<Loader />}>{component()}</Suspense>
-    </BrowserRouter>
-  );
-};
diff --git a/typescript/template/src/app/providers/with-router.tsx b/typescript/template/src/app/providers/with-router.tsx
new file mode 100644
index 0000000..18569d4
--- /dev/null
+++ b/typescript/template/src/app/providers/with-router.tsx
@@ -0,0 +1,11 @@
+import React, { Suspense } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { Loader } from 'shared/ui/loader';
+
+export const withRouter = <T extends {}> (Component: React.ComponentType<T>) => (props: T) => (
+  <BrowserRouter>
+    <Suspense fallback={<Loader/>}>
+      <Component {...props}/>
+    </Suspense>
+  </BrowserRouter>
+);
\ No newline at end of file
diff --git a/typescript/template/src/pages/counter/ui.module.css b/typescript/template/src/pages/counter/styles.module.css
similarity index 100%
rename from typescript/template/src/pages/counter/ui.module.css
rename to typescript/template/src/pages/counter/styles.module.css
diff --git a/typescript/template/src/pages/counter/ui.tsx b/typescript/template/src/pages/counter/ui.tsx
index 87fb2ff..40aaca6 100644
--- a/typescript/template/src/pages/counter/ui.tsx
+++ b/typescript/template/src/pages/counter/ui.tsx
@@ -1,21 +1,19 @@
-import { useState } from 'react';
+import React from 'react';
 import { Button } from 'shared/ui/button';
-import styles from './ui.module.css';
+import { useCounter } from './model';
+import styles from './styles.module.css';
 
-export const CounterPage = () => {
-  const [counter, setCounter] = useState(0);
+export const CounterPage: React.FC = () => {
+  const { counter, increment, decrement } = useCounter(0);
 
   return (
     <div>
       <h1>Counter {counter}</h1>
 
-      <Button
-        className={styles.incrementButton}
-        onClick={() => setCounter((prev) => prev + 1)}
-      >
+      <Button className={styles.incrementButton} onClick={increment}>
         increment
       </Button>
-      <Button onClick={() => setCounter((prev) => prev - 1)}>decrement</Button>
+      <Button onClick={decrement}>decrement</Button>
     </div>
   );
 };
diff --git a/typescript/template/src/pages/router/public-routes.tsx b/typescript/template/src/pages/router/public-routes.tsx
index 428d67a..7fe3e98 100644
--- a/typescript/template/src/pages/router/public-routes.tsx
+++ b/typescript/template/src/pages/router/public-routes.tsx
@@ -1,9 +1,5 @@
-import { FC } from 'react';
+import React from 'react';
 import { useRoutes } from 'react-router-dom';
 import { publicRoutes } from './routes';
 
-export const PublicRoutes: FC = () => {
-  const routes = useRoutes(publicRoutes);
-
-  return routes;
-};
+export const PublicRoutes: React.FC = () => useRoutes(publicRoutes)
diff --git a/typescript/template/src/shared/lib/fp/compose.js b/typescript/template/src/shared/lib/fp/compose.js
deleted file mode 100644
index 7d23e4f..0000000
--- a/typescript/template/src/shared/lib/fp/compose.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export function compose(...funcs) {
-  if (funcs.length === 0) return;
-  if (funcs.length === 1) return funcs[0];
-
-  return funcs.reduce(
-    (a, b) =>
-      (...args) =>
-        a(b(...args))
-  );
-}
diff --git a/typescript/template/src/shared/lib/fp/compose.ts b/typescript/template/src/shared/lib/fp/compose.ts
new file mode 100644
index 0000000..80e56ba
--- /dev/null
+++ b/typescript/template/src/shared/lib/fp/compose.ts
@@ -0,0 +1,44 @@
+type Func<T extends any[], R> = (...a: T) => R
+
+export default function compose(): <R>(a: R) => R
+export default function compose<F extends Function>(f: F): F
+export default function compose<A, T extends any[], R>(
+    f1: (a: A) => R,
+    f2: Func<T, A>
+): Func<T, R>
+
+export default function compose<A, B, T extends any[], R>(
+    f1: (b: B) => R,
+    f2: (a: A) => B,
+    f3: Func<T, A>
+): Func<T, R>
+
+export default function compose<A, B, C, T extends any[], R>(
+    f1: (c: C) => R,
+    f2: (b: B) => C,
+    f3: (a: A) => B,
+    f4: Func<T, A>
+): Func<T, R>
+
+export default function compose<R>(
+    f1: (a: any) => R,
+    ...funcs: Function[]
+): (...args: any[]) => R
+
+export default function compose<R>(...funcs: Function[]): (...args: any[]) => R
+
+export default function compose(...funcs: Function[]) {
+  if (funcs.length === 0) {
+    return <T>(arg: T) => arg
+  }
+
+  if (funcs.length === 1) {
+    return funcs[0]
+  }
+
+  return funcs.reduce(
+      (a, b) =>
+          (...args: any) =>
+              a(b(...args))
+  )
+}
diff --git a/typescript/template/src/shared/lib/fp/index.js b/typescript/template/src/shared/lib/fp/index.js
deleted file mode 100644
index f03e6f5..0000000
--- a/typescript/template/src/shared/lib/fp/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { compose } from './compose';
diff --git a/typescript/template/src/shared/lib/fp/index.ts b/typescript/template/src/shared/lib/fp/index.ts
new file mode 100644
index 0000000..a0fcc00
--- /dev/null
+++ b/typescript/template/src/shared/lib/fp/index.ts
@@ -0,0 +1 @@
+export { default as compose }  from './compose';
diff --git a/typescript/template/src/shared/ui/Loader/index.ts b/typescript/template/src/shared/ui/Loader/index.ts
deleted file mode 100644
index 0223844..0000000
--- a/typescript/template/src/shared/ui/Loader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Loader } from './loader';
diff --git a/typescript/template/src/shared/ui/button/button.tsx b/typescript/template/src/shared/ui/button/button.tsx
index e1c14e7..a543aef 100644
--- a/typescript/template/src/shared/ui/button/button.tsx
+++ b/typescript/template/src/shared/ui/button/button.tsx
@@ -1,19 +1,17 @@
-import { FC, MouseEventHandler } from 'react';
+import React from 'react';
 import styles from './button.module.css';
 
 interface Props {
   className?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export const Button: FC<Props> = ({ className, children, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className={`${styles.button} ${className ? className : ''}`}
-      // instead of this className defining you can use clsx/classnames or any other lib
-    >
-      {children}
-    </button>
-  );
-};
+export const Button: React.FC<Props> = ({ className, children, onClick }) => (
+  <button
+    onClick={onClick}
+    className={`${styles.button} ${className ? className : ''}`}
+    // instead of this className defining you can use clsx/classnames or any other lib
+  >
+    {children}
+  </button>
+);
diff --git a/typescript/template/src/shared/ui/loader/index.tsx b/typescript/template/src/shared/ui/loader/index.tsx
new file mode 100644
index 0000000..12adaf9
--- /dev/null
+++ b/typescript/template/src/shared/ui/loader/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Loader: React.FC = () => (
+  <div>loading...</div>
+);
\ No newline at end of file
diff --git a/typescript/template/src/shared/ui/loader/loader.tsx b/typescript/template/src/shared/ui/loader/loader.tsx
deleted file mode 100644
index abf5760..0000000
--- a/typescript/template/src/shared/ui/loader/loader.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const Loader = () => {
-  return <div>loading...</div>;
-};