diff --git a/src/pages/index.js b/src/pages/index.js
index 114555bb..dbfa68a4 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,6 @@
 import React from "react"
-
 const ExamplePage = () => {
-  return (
+  return (<>
     <div
       style={{
         position: "absolute",
@@ -15,6 +14,7 @@ const ExamplePage = () => {
         Start editing the 'pages/index.js' file to import and show component
       </h3>
     </div>
+    </>
   )
 }
 
diff --git a/themes/customer-service/customer-service-theme/src/components/complain/index.js b/themes/customer-service/customer-service-theme/src/components/complain/index.js
index 6281d91a..da2132a8 100644
--- a/themes/customer-service/customer-service-theme/src/components/complain/index.js
+++ b/themes/customer-service/customer-service-theme/src/components/complain/index.js
@@ -16,16 +16,24 @@ const Complain = () => {
     setInputDetails({ issue: "", message: "", name: "" })
   }
   return (
-    <Grid container direction="column" classes={{ root: classes.container }}>
-      <Grid item>
+    <Grid container direction="column" classes={{ root: classes.container }}
+   
+    >
+      <Grid item  style={{
+      margin:"auto"
+    }}>
         <Typography variant="h4">Submit a complaint</Typography>
       </Grid>
+
       <Grid
         item
         container
         direction="row"
         justifyContent="space-between"
         classes={{ root: classes.wrapper }}
+        style={{
+          margin:"auto"
+        }}
       >
         <Grid item>
           <Grid
@@ -33,11 +41,19 @@ const Complain = () => {
             direction="column"
             alignItems="center"
             classes={{ root: classes.space }}
-          >
-            <Grid item>
-              <Typography variant="h4">What is about?</Typography>
+            style={{
+              margin:"auto"
+            }}>
+            <Grid item  style={{
+      margin:"auto"
+    }}>
+              <Typography variant="h4"  style={{
+      margin:"auto"
+    }}>What is about?</Typography>
             </Grid>
-            <Grid item>
+            <Grid item  style={{
+      margin:"auto"
+    }}>
               <TextField
                 value={inputDetails.issue}
                 placeholder="Eg: payment issue"
@@ -90,7 +106,7 @@ const Complain = () => {
               Username related to the complaint(optional)
             </Typography>
           </Grid>
-          <Grid item>
+          <Grid item >
             <TextField
               value={inputDetails.name}
               placeholder="Eg: Type name here"
@@ -108,8 +124,12 @@ const Complain = () => {
           </Grid>
         </Grid>
       </Grid>
-      <Grid item>
-        <Button classes={{ root: classes.btnStyle }} onClick={btnHandler}>
+      <Grid item  style={{
+      margin:"auto"
+    }}>
+        <Button classes={{ root: classes.btnStyle }} onClick={btnHandler}  style={{
+      margin:"auto"
+    }}>
           <Typography variant="h3">Submit</Typography>
         </Button>
       </Grid>
diff --git a/themes/customer-service/customer-service-theme/src/components/complain/styles.js b/themes/customer-service/customer-service-theme/src/components/complain/styles.js
index 1b3adcbb..e01990de 100644
--- a/themes/customer-service/customer-service-theme/src/components/complain/styles.js
+++ b/themes/customer-service/customer-service-theme/src/components/complain/styles.js
@@ -42,7 +42,7 @@ const Styles = makeStyles(theme => ({
     borderRadius: 10,
     backgroundColor: theme.palette.primary.light,
     textTransform: "none",
-    "&:hover": { backgroundColor: theme.palette.primary.light },
+    "&:hover": { backgroundColor: theme.palette.primary.main },
   },
   "@global": {
     ".MuiInput-underline:before, .MuiInput-underline:hover:not(.Mui-disabled):before": {
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>