Solution by Ali Ziar 🎄

src/App.css

@@ -27,7 +27,11 @@
 .App-link {
   color: #61dafb;
 }
-
+.single-input-left {
+  padding: 30px;
+  width: 100%;
+  margin: 30px;
+}
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,24 +1,23 @@
-import logo from './logo.svg';
-import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
-import Login from './pages/Login'
-import {Navigate, Route, Routes} from 'react-router-dom'
-import {useEffect,useState} from 'react'
-import Drawer from './components/Drawer'
-
+import logo from "./logo.svg";
+import "./App.css";
+import Dashboard from "./pages/Dashboard";
+import Categories from "./pages/Categories";
+import Products from "./pages/Products";
+import Login from "./pages/Login";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Drawer from "./components/Drawer";
 
 function App(props) {
-
-
-  return  <Routes>
-   <Route path="/dashboard" element={<Drawer/>}/>
-   <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
-   <Route path="/login" element={<Login/>}/>
-
-</Routes>
+  return (
+    <Routes>
+      <Route path="/Dashboard" element={<Drawer />} />
+      <Route path="/categories" element={<Drawer {...props} />} />
+      <Route path="/products" element={<Drawer />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/CartPage" element={<Drawer />} />
+    </Routes>
+  );
 }
 
 export default App;

src/components/Buttons.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Button from "@mui/material/Button";
+
+export default function Buttons(props) {
+  return (
+    <Button
+      onClick={props.onClick}
+      className={props.ClassName}
+      variant="contained"
+      sx={{
+        p: 2,
+      }}
+    >
+      {props.title}
+    </Button>
+  );
+}