diff --git a/package.json b/package.json
index 1bfc28f..1921250 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-multi-date-picker": "^3.3.0",
     "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.6",
+    "react-router-dom": "6",
     "react-scripts": "5.0.0",
     "react-table": "^7.7.0",
     "react-tooltip": "^4.2.21",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 14d113e..0000000
--- a/src/App.css
+++ /dev/null
@@ -1 +0,0 @@
-/* No CSS *//*# sourceMappingURL=App.css.map */
\ No newline at end of file
diff --git a/src/App.css.map b/src/App.css.map
deleted file mode 100644
index 4d00082..0000000
--- a/src/App.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "",
-    "sources": [
-        "App.scss"
-    ],
-    "names": [],
-    "file": "App.css"
-}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5eb757f..950862d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -101,13 +101,13 @@ function App() {
   return (
     <Provider store={store}>
       <div className="App">
-        <ProductDesign />
-        <VodProductDesign />
+        {/* <ProductDesign /> */}
+        {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
-        <VodProductNew />
-        <BookDesign />
-        <HeaderDesign1 />
-        <Blogs />
+        {/* <VodProductNew /> */}
+        {/* <BookDesign /> */}
+        {/* <HeaderDesign1 /> */}
+        {/* <Blogs /> */}
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <BlogDesign1 />
         <BlogDesign2 />
@@ -115,8 +115,8 @@ function App() {
         <BlogDesign4 />
         <BlogDesign5 />
         <BlogDesign6 /> */}
-        <Button />
-        <ButtonDivTag />
+        {/* <Button /> */}
+        {/* <ButtonDivTag /> */}
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ButtonDesign /> */}
         {/* ---------------------------- not usable ---------------------------- */}
@@ -127,20 +127,20 @@ function App() {
         {/* <CounterDesign /> */}
         {/* <AnimatedProgressBar /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-        <ContactInfoSection />
+        {/* <ContactInfoSection /> */}
         {/* <Testttt /> */}
-        <Design2D />
-        <Features />
-        <Feedback />
-        <Alert />
-        <Toast />
-        <ProductSuggestion />
-        <ProductImage />
-        <ProductTab />
-        <ProductStatusCard />
-        <AdvertisementDesign1 />
-        <AdvertisementDesign2 />
-        <AdvertisementDesign3 />
+        {/* <Design2D /> */}
+        {/* <Features /> */}
+        {/* <Feedback /> */}
+        {/* <Alert /> */}
+        {/* <Toast /> */}
+        {/* <ProductSuggestion /> */}
+        {/* <ProductImage /> */}
+        {/* <ProductTab /> */}
+        {/* <ProductStatusCard /> */}
+        {/* <AdvertisementDesign1 /> */}
+        {/* <AdvertisementDesign2 /> */}
+        {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
         {/* <Design1 /> */}
         {/* <Design2 /> */}
@@ -190,7 +190,7 @@ function App() {
         {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
         {/* <TimeLineComponent /> */}
-        <CardTrelloDesign />
+        {/* <CardTrelloDesign /> */}
         {/* <ReligiousTimes /> */}
         {/* <DistributedData /> */}
         {/* ----------------------------$$$ start---------------------------- */}
@@ -213,13 +213,13 @@ function App() {
         {/* <ProfileInfo /> */}
         {/* ----------------------------$$$ end---------------------------- */}‍
         {/* <UserProfileInfo /> */}
-        <BoxNextToEachOther />
+        {/* <BoxNextToEachOther /> */}
         {/* <ContactUsInfoCard /> */}
         {/* <RoomCardInfo /> */}
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-        <FormInput />
+        {/* <FormInput /> */}
         {/* <LeafletMap /> */}
         {/* <Digikala /> */}
         {/* <TestComponentNew /> */}
diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js
index 75d47f1..7efdccd 100644
--- a/src/components/vodProductDesign/VodProductDesign.js
+++ b/src/components/vodProductDesign/VodProductDesign.js
@@ -1,6 +1,7 @@
 // it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign
 
 import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
 import StarRating from "../starRating/StarRating";
 import ReactTooltip from "react-tooltip";
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index a55f006..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "iransans-medium";
-  src: url(./assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf);
-}
-
-body {
-  font-family: iransans-medium;
-  direction: rtl;
-  background-color: #f5f5f5 !important;
-}
-
-.comment-num {
-  font-size: 8px;
-  padding-top: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  border-radius: 50%;
-}
diff --git a/src/index.css.map b/src/index.css.map
deleted file mode 100644
index bad43fb..0000000
--- a/src/index.css.map
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-    "version": 3,
-    "mappings": "AAAA,SAAS,CAAT,IAAS;AACT,SAAS,CAAT,UAAS;AACT,SAAS,CAAT,SAAS;AAIT,UAAU;EACR,WAAW,EAAE,iBAAiB;EAC9B,GAAG,EAAE,uDAAuD;;;AAG9D,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,eAAe;EAC5B,SAAS,EAAE,GAAG;EACd,gBAAgB,EAAE,OAAO;CAC1B;;AAED,AAAA,YAAY,CAAC;EACX,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;EACnB,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,GAAG;CACnB",
-    "sources": [
-        "index.scss",
-        "components/productDesign/ProductDesign.scss"
-    ],
-    "names": [],
-    "file": "index.css"
-}
\ No newline at end of file
diff --git a/src/redux/actions/components.js b/src/redux/actions/components.js
new file mode 100644
index 0000000..6aca9e5
--- /dev/null
+++ b/src/redux/actions/components.js
@@ -0,0 +1,12 @@
+const components = {
+  list:
+    (data = {}) =>
+    async (dispatch) =>
+      await dispatch({ type: "components/list", data }),
+  activeComponent:
+    (data = {}) =>
+    async (dispatch) =>
+      await dispatch({ type: "components/activeComponent", data }),
+};
+
+export default components;
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..8a417e4
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import _ from "lodash";
+import Home from "./Views/Home";
+
+function Router() {
+  return (
+    <div
+      className={_.join([
+        "min-h-screen min-w-screen rtl overflow-x-hidden bg-white",
+      ])}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="*"
+            element={
+              <main>
+                <h1>No matches routes.</h1>
+              </main>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+}
+
+Router.defaultProps = {
+  isDark: false,
+};
+
+export default Router;
diff --git a/yarn.lock b/yarn.lock
index b9b49e5..e4e0fff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1144,6 +1144,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz"
@@ -5010,6 +5017,13 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
@@ -7803,6 +7817,21 @@ react-resize-detector@^6.6.3:
     lodash "^4.17.21"
     resize-observer-polyfill "^1.5.1"
 
+react-router-dom@6:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
+react-router@6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react-scripts@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz"