diff --git a/themes/learning-management-system/learning-management-theme/src/component/contactUs/index.js b/themes/learning-management-system/learning-management-theme/src/component/contactUs/index.js
index 9a278730..a393e882 100644
--- a/themes/learning-management-system/learning-management-theme/src/component/contactUs/index.js
+++ b/themes/learning-management-system/learning-management-theme/src/component/contactUs/index.js
@@ -23,66 +23,78 @@ const ContactUs = () => {
         classes={{ root: classes.wrapper }}
       >
         <Grid item>
-          <FontAwesomeIcon icon={iconName} size="2x" />
+          <FontAwesomeIcon icon={iconName} size="4x" style={{marginBottom:"20px"}} />
         </Grid>
-        <Grid item> {children}</Grid>
+        <Grid > {children}</Grid>
       </Grid>
     )
   }
   return (
     <Grid container direction="column" classes={{ root: classes.container }}>
       <Grid item>
-        <Typography variant="h4">Feel free to Contact Us!</Typography>
+        <Typography variant="h4"  classes={{root: classes.heading}} >Feel free to Contact Us!</Typography>
       </Grid>
       <Grid item classes={{ root: classes.space }}>
-        <Typography>
+        <Typography  classes={{root: classes.head}}>
           Please contact us using the information below. For additional
           informations on UOM Higher Education Institute
         </Typography>
       </Grid>
-      <Grid item container direction="column" classes={{ root: classes.space }}>
-        <Grid item>
-          <DetailCard iconName={faAddressCard}>
+      
+      <Grid item container direction="row" classes={{ root: classes.space }}>
+
+        <Grid item  classes={{root: classes.pad }}>
+          <DetailCard iconName={faAddressCard}   >
             <Grid container direction="column">
-              <Grid item>
-                <Typography>No: 07/A,</Typography>
-              </Grid>
-              <Grid item>
-                <Typography> Galle Rd</Typography>
+              <Grid item  classes={{root: classes.textGrid}}>
+                <Typography>Visit us</Typography>
               </Grid>
-              <Grid item>
-                <Typography>Galle</Typography>
+              <Grid item classes={{root: classes.textGrid}}>
+                <Typography>No: 07/A, <br></br> Galle Rd , Galle</Typography>
               </Grid>
             </Grid>
           </DetailCard>
         </Grid>
-        <Grid item classes={{ root: classes.spaceWrapper }}>
-          <DetailCard iconName={faBlenderPhone}>
+
+        <Grid item classes={{root: classes.pad }}>
+          <DetailCard iconName={faBlenderPhone} >
             <Grid container direction="column">
-              <Grid item>
+            <Grid item  classes={{root: classes.textGrid}}>
+                <Typography>Text us</Typography>
+              </Grid>
+              <Grid item classes={{root: classes.textGrid}}>
                 <Typography>091-5623123</Typography>
               </Grid>
             </Grid>
           </DetailCard>
         </Grid>
-        <Grid item>
-          <DetailCard iconName={faPhone}>
+
+        <Grid item classes={{root: classes.pad }}>
+          <DetailCard iconName={faPhone} size="6x" >
             <Grid container direction="column">
-              <Grid item>
+            <Grid item  classes={{root: classes.textGrid}}>
+                <Typography>Call us</Typography>
+              </Grid>
+              <Grid item classes={{root: classes.textGrid}}>
                 <Typography>076-3459011</Typography>
               </Grid>
             </Grid>
           </DetailCard>
         </Grid>
-        <Grid item>
-          <DetailCard iconName={faEnvelope}>
+
+        <Grid item classes={{root: classes.pad }}>
+          <DetailCard iconName={faEnvelope} >
             <Grid container direction="column">
-              <Grid item>
+            <Grid item  classes={{root: classes.textGrid}}>
+                <Typography>Mail us</Typography>
+              </Grid>
+              <Grid item classes={{root: classes.textGrid}}>
                 <Typography>info@uom.io</Typography>
               </Grid>
             </Grid>
           </DetailCard>
         </Grid>
+
       </Grid>
     </Grid>
   )
diff --git a/themes/learning-management-system/learning-management-theme/src/component/contactUs/styles.js b/themes/learning-management-system/learning-management-theme/src/component/contactUs/styles.js
index 45434f1d..69104554 100644
--- a/themes/learning-management-system/learning-management-theme/src/component/contactUs/styles.js
+++ b/themes/learning-management-system/learning-management-theme/src/component/contactUs/styles.js
@@ -14,8 +14,37 @@ const Styles = makeStyles(theme => ({
     boxShadow: theme.shadows[5],
     border: "1px solid #000",
   },
+  head:{
+    [theme.breakpoints.down("sm")]:{
+      marginLeft:"0",
+      width:"60vw",
+    },
+    marginLeft:"50px",
+      width:"80vw",
+  },
+  heading:{
+    [theme.breakpoints.down("sm")]:{
+      marginLeft:"50px",
+      width:"50vw",
+      color:"black",
+      fontSize:"30px"
+    },
+    marginLeft:"410px",
+      width:"80vw",
+      color:"black",
+      fontSize:"30px"
+  },
   space: {
+    [theme.breakpoints.down("sm")]: {
+      display:"flex",
+      flexDirection:"column",
+    },
     marginTop: "20px",
+    marginBottom:"40px",
+    marginLeft:"50px",
+    width:"max-content",
+    gap:"20px",
+    alignItems:"center"
   },
   wrapper: {
     width: "40%",
@@ -29,6 +58,23 @@ const Styles = makeStyles(theme => ({
       marginTop: "0px",
     },
   },
+  pad:{
+    [theme.breakpoints.down("sm")]: {
+      height: "200px",
+    },
+    marginLeft:"20px",
+    width:"250px",
+    justifyContent:"center",
+    alignItems:"center",
+    height:"300px"
+  },
+  
+  textGrid:{
+    width:"150px",
+    textAlign:"center",
+    justifyContent:"center",
+    fontFamily:"sans-serif"
+  }
 }))
 
 export default Styles