diff --git a/src/examples/Lists/ProfilesList/index.js b/src/examples/Lists/ProfilesList/index.js
index 0dd34b39..efc08b13 100644
--- a/src/examples/Lists/ProfilesList/index.js
+++ b/src/examples/Lists/ProfilesList/index.js
@@ -49,9 +49,14 @@ function ProfilesList({ title, profiles }) {
       </SoftBox>
       <SoftBox ml="auto">
         {action.type === "internal" ? (
-          <SoftButton component={Link} to={action.route} variant="text" color="info">
+          <SoftBox
+            component={Link}
+            to={action.route}
+            variant="contained"
+            color="info"
+            >
             {action.label}
-          </SoftButton>
+          </SoftBox>
         ) : (
           <SoftButton
             component="a"
diff --git a/src/examples/Navbars/DefaultNavbar/index.js b/src/examples/Navbars/DefaultNavbar/index.js
index d9763bf8..22971dfd 100644
--- a/src/examples/Navbars/DefaultNavbar/index.js
+++ b/src/examples/Navbars/DefaultNavbar/index.js
@@ -70,7 +70,7 @@ function DefaultNavbar({ transparent, light, action }) {
   }, []);
 
   return (
-    <Container>
+    (<Container>
       <SoftBox
         py={1.5}
         px={{ xs: transparent ? 4 : 5, sm: transparent ? 2 : 5, lg: transparent ? 0 : 5 }}
@@ -115,16 +115,16 @@ function DefaultNavbar({ transparent, light, action }) {
         {action &&
           (action.type === "internal" ? (
             <SoftBox display={{ xs: "none", lg: "inline-block" }}>
-              <SoftButton
+              <SoftBox
                 component={Link}
                 to={action.route}
                 variant="gradient"
-                color={action.color ? action.color : "info"}
-                size="small"
-                circular
-              >
+                color={action.color ? action.color : 'dark'}
+                borderRadius="none"
+                shadow="none"
+                >
                 {action.label}
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
           ) : (
             <SoftBox display={{ xs: "none", lg: "inline-block" }}>
@@ -155,7 +155,7 @@ function DefaultNavbar({ transparent, light, action }) {
         </SoftBox>
       </SoftBox>
       {mobileView && <DefaultNavbarMobile open={mobileNavbar} close={closeMobileNavbar} />}
-    </Container>
+    </Container>)
   );
 }
 
diff --git a/src/layouts/authentication/sign-in/index.js b/src/layouts/authentication/sign-in/index.js
index 256b8877..aab254e2 100644
--- a/src/layouts/authentication/sign-in/index.js
+++ b/src/layouts/authentication/sign-in/index.js
@@ -39,7 +39,7 @@ function SignIn() {
   const handleSetRememberMe = () => setRememberMe(!rememberMe);
 
   return (
-    <CoverLayout
+    (<CoverLayout
       title="Welcome back"
       description="Enter your email and password to sign in"
       image={curved9}
@@ -73,9 +73,9 @@ function SignIn() {
           </SoftTypography>
         </SoftBox>
         <SoftBox mt={4} mb={1}>
-          <SoftButton variant="gradient" color="info" fullWidth>
+          <SoftBox variant="gradient" color="info" fullWidth="true" >
             sign in
-          </SoftButton>
+          </SoftBox>
         </SoftBox>
         <SoftBox mt={3} textAlign="center">
           <SoftTypography variant="button" color="text" fontWeight="regular">
@@ -93,7 +93,7 @@ function SignIn() {
           </SoftTypography>
         </SoftBox>
       </SoftBox>
-    </CoverLayout>
+    </CoverLayout>)
   );
 }
 
diff --git a/src/layouts/authentication/sign-up/index.js b/src/layouts/authentication/sign-up/index.js
index 8245ce06..87fe3267 100644
--- a/src/layouts/authentication/sign-up/index.js
+++ b/src/layouts/authentication/sign-up/index.js
@@ -42,7 +42,7 @@ function SignUp() {
   const handleSetAgremment = () => setAgremment(!agreement);
 
   return (
-    <BasicLayout
+    (<BasicLayout
       title="Welcome!"
       description="Use these awesome forms to login or create new account in your project for free."
       image={curved6}
@@ -89,9 +89,9 @@ function SignUp() {
               </SoftTypography>
             </SoftBox>
             <SoftBox mt={4} mb={1}>
-              <SoftButton variant="gradient" color="dark" fullWidth>
+              <SoftBox variant="gradient" color="dark" >
                 sign up
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
             <SoftBox mt={3} textAlign="center">
               <SoftTypography variant="button" color="text" fontWeight="regular">
@@ -111,7 +111,7 @@ function SignUp() {
           </SoftBox>
         </SoftBox>
       </Card>
-    </BasicLayout>
+    </BasicLayout>)
   );
 }
 
diff --git a/src/layouts/billing/components/Bill/index.js b/src/layouts/billing/components/Bill/index.js
index a9596a61..4e5ae84e 100644
--- a/src/layouts/billing/components/Bill/index.js
+++ b/src/layouts/billing/components/Bill/index.js
@@ -26,17 +26,17 @@ import SoftButton from "components/SoftButton";
 
 function Bill({ name, company, email, vat, noGutter }) {
   return (
-    <SoftBox
-      component="li"
-      display="flex"
-      justifyContent="space-between"
-      alignItems="flex-start"
-      bgColor="grey-100"
-      borderRadius="lg"
-      p={3}
-      mb={noGutter ? 0 : 1}
-      mt={2}
-    >
+    (<SoftBox
+        component="li"
+        display="flex"
+        justifyContent="space-between"
+        alignItems="flex-start"
+        bgColor="grey-100"
+        borderRadius="lg"
+        p={3}
+        mb={noGutter ? 0 : 1}
+        mt={2}
+      >
       <SoftBox width="100%" display="flex" flexDirection="column">
         <SoftBox
           display="flex"
@@ -56,13 +56,13 @@ function Bill({ name, company, email, vat, noGutter }) {
             ml={{ xs: -1.5, sm: 0 }}
           >
             <SoftBox mr={1}>
-              <SoftButton variant="text" color="error">
+              <SoftBox variant="contained" color="error" >
                 <Icon>delete</Icon>&nbsp;delete
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
-            <SoftButton variant="text" color="dark">
+            <SoftBox variant="contained" color="dark" >
               <Icon>edit</Icon>&nbsp;edit
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
         </SoftBox>
         <SoftBox mb={1} lineHeight={0}>
@@ -88,7 +88,7 @@ function Bill({ name, company, email, vat, noGutter }) {
           </SoftTypography>
         </SoftTypography>
       </SoftBox>
-    </SoftBox>
+    </SoftBox>)
   );
 }
 
diff --git a/src/layouts/billing/components/PaymentMethod/index.js b/src/layouts/billing/components/PaymentMethod/index.js
index e0d31721..cf49213d 100644
--- a/src/layouts/billing/components/PaymentMethod/index.js
+++ b/src/layouts/billing/components/PaymentMethod/index.js
@@ -35,15 +35,15 @@ function PaymentMethod() {
   const { borderWidth, borderColor } = borders;
 
   return (
-    <Card id="delete-account">
+    (<Card id="delete-account">
       <SoftBox pt={2} px={2} display="flex" justifyContent="space-between" alignItems="center">
         <SoftTypography variant="h6" fontWeight="medium">
           Payment Method
         </SoftTypography>
-        <SoftButton variant="gradient" color="dark">
+        <SoftBox variant="gradient" color="dark" >
           <Icon sx={{ fontWeight: "bold" }}>add</Icon>
           &nbsp;add new card
-        </SoftButton>
+        </SoftBox>
       </SoftBox>
       <SoftBox p={2}>
         <Grid container spacing={3}>
@@ -93,7 +93,7 @@ function PaymentMethod() {
           </Grid>
         </Grid>
       </SoftBox>
-    </Card>
+    </Card>)
   );
 }