diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index 9a040a7..3e5d69f 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -67,6 +67,18 @@ const useStyles = makeStyles((theme) => ({
       borderRight: "5px solid #2089dc",
     },
   },
+  playgroundTitle:{
+  position: "fixed",
+  zIndex: "1",
+  backgroundColor: "white",
+  top: "0",
+  left:"0",
+  padding: "10px 10px",
+  width: "200px",
+  },
+  list:{
+marginTop: "20px"
+  },
 }));
 
 function ResponsiveDrawer(props) {
@@ -92,10 +104,10 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/">
-          <Typography variant="h5">Playground 🚀</Typography>
+          <Typography className={classes.playgroundTitle} variant="h5">Playground 🚀</Typography>
         </Link>
       </div>
-      <List>
+      <List className={classes.list}>
         {Components_Index.map((elm, index) => (
           <Link
             key={elm.name}