diff --git a/src/pages/index.js b/src/pages/index.js
index 114555bb..95d68e01 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,10 @@
 import React from "react"
+import Report from "../../themes/learning-management-system/learning-management-theme/src/component/report"
+import UserDetail from "../../themes/learning-management-system/learning-management-theme/src/component/userDetail"
 
 const ExamplePage = () => {
-  return (
+  return (<>
+    <UserDetail/>
     <div
       style={{
         position: "absolute",
@@ -15,6 +18,7 @@ const ExamplePage = () => {
         Start editing the 'pages/index.js' file to import and show component
       </h3>
     </div>
+    </>
   )
 }
 
diff --git a/themes/learning-management-system/learning-management-theme/src/component/userDetail/index.js b/themes/learning-management-system/learning-management-theme/src/component/userDetail/index.js
index 1ca57fa2..b309776d 100644
--- a/themes/learning-management-system/learning-management-theme/src/component/userDetail/index.js
+++ b/themes/learning-management-system/learning-management-theme/src/component/userDetail/index.js
@@ -9,6 +9,17 @@ import Styles from "./styles"
 import { useMediaQuery } from "@material-ui/core"
 
 const UserDetail = () => {
+  
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
+
   const classes = Styles()
   const matchesMD = useMediaQuery(theme => theme.breakpoints.down("sm"))
   const [inputValues, setInputValues] = useState({
@@ -97,7 +108,13 @@ const UserDetail = () => {
       </Grid>
       <Grid item container justifyContent="center">
         <Grid item>
-          <Button onClick={() => {}} classes={{ root: classes.logoutBtnStyle }}>
+          <Button onClick={() => {}} classes={{ root: classes.logoutBtnStyle }}
+           style={{
+            backgroundColor: isHovering ? 'red' : '',
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          >
             <Typography variant="h6">Log out</Typography>
           </Button>
         </Grid>