diff --git a/src/App.js b/src/App.js
index d76e9d9..c9a3f15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,49 +1,16 @@
-import styles from "./App.module.scss";
-import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-    Link
-  } from "react-router-dom";
-  import Stack from 'react-bootstrap/Stack'
-  import Container from 'react-bootstrap/Container'
-  import Logo from "./components/Logo/index.js";
-  export default function App() {
+import { BrowserRouter as Router, Switch, Route /*Link*/ } from "react-router-dom";
+import { Home } from "./pages/Home";
+import { About } from "./pages/About";
+import { Users } from "./pages/Users";
+
+export const App = () => {
     return (
-      <Router>
-        <div>
-          {/* A <Switch> looks through its children <Route>s and
-              renders the first one that matches the current URL. */}
-          <Switch>
-            <Route path="/about">
-              <About />
-            </Route>
-            <Route path="/users">
-              <Users />
-            </Route>
-            <Route path="/">
-              <Home />
-            </Route>
-          </Switch>
-        </div>
-      </Router>
+        <Router>
+            <Switch>
+                <Route path="/about" component={About} />
+                <Route path="/users" component={Users} />
+                <Route path="/" component={Home} />
+            </Switch>
+        </Router>
     );
-  }
-  
-  function Home() {
-    return (
-    <div className={styles.con}>      <Stack gap={1}>
-      <div className={styles.item}>First item</div>
-      <div className={styles.item}>Second item</div>
-      <div className={styles.item}>Third item</div>
-    </Stack></div>
-    );
-  }
-  
-  function About() {
-    return <Logo/>;
-  }
-  
-  function Users() {
-    return <h2>Users</h2>;
-  }
+};
diff --git a/src/App.module.scss b/src/App.module.scss
deleted file mode 100644
index 620cfc3..0000000
--- a/src/App.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
-.item{
-   border:1px solid black;
-   width:70vw;
-   max-width:500px;
-   margin:0 auto;
-}
-.con{
-   text-align: center;
-    width:90%;
-    margin:0 auto;
-    font-family: 'Poppins', sans-serif;
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e898ef5..fb6f005 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.scss";
-import App from "./App.js";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import { App } from "./App.js";
+import "bootstrap/dist/css/bootstrap.min.css";
+
 ReactDOM.render(
     <React.StrictMode>
         <App />
diff --git a/src/index.scss b/src/index.scss
index c694c23..f61520b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -2,6 +2,8 @@ $accent: #53d188;
 $bggray: #e8e8e8;
 $bg: #ffffff;
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+
 * {
     margin: 0;
     padding: 0;
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
new file mode 100644
index 0000000..77cdb66
--- /dev/null
+++ b/src/pages/About/index.js
@@ -0,0 +1,6 @@
+// import styles from "./index.module.scss";
+import Logo from "../../components/Logo";
+
+export const About = () => {
+    return <Logo></Logo>;
+};
diff --git a/src/pages/About/index.module.scss b/src/pages/About/index.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
new file mode 100644
index 0000000..ca3f2dc
--- /dev/null
+++ b/src/pages/Home/index.js
@@ -0,0 +1,15 @@
+import { Stack } from "react-bootstrap";
+import styles from "./index.module.scss";
+
+export const Home = () => {
+    return (
+        <div className={styles.con}>
+            {" "}
+            <Stack gap={1}>
+                <div className={styles.item}>First item</div>
+                <div className={styles.item}>Second item</div>
+                <div className={styles.item}>Third item</div>
+            </Stack>
+        </div>
+    );
+};
diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss
new file mode 100644
index 0000000..3da31ef
--- /dev/null
+++ b/src/pages/Home/index.module.scss
@@ -0,0 +1,12 @@
+.item {
+    border: 1px solid black;
+    width: 70vw;
+    max-width: 500px;
+    margin: 0 auto;
+}
+.con {
+    text-align: center;
+    width: 90%;
+    margin: 0 auto;
+    font-family: "Poppins", sans-serif;
+}
diff --git a/src/pages/Users/index.js b/src/pages/Users/index.js
new file mode 100644
index 0000000..f9ca185
--- /dev/null
+++ b/src/pages/Users/index.js
@@ -0,0 +1,5 @@
+// import styles from './index.module.scss';
+
+export const Users = () => {
+    return <h2>Users</h2>;
+};
diff --git a/src/pages/Users/index.module.scss b/src/pages/Users/index.module.scss
new file mode 100644
index 0000000..e69de29