diff --git a/src/examples/Cards/PricingCards/DefaultPricingCard/index.js b/src/examples/Cards/PricingCards/DefaultPricingCard/index.js
index 6343b212..7b1078cc 100644
--- a/src/examples/Cards/PricingCards/DefaultPricingCard/index.js
+++ b/src/examples/Cards/PricingCards/DefaultPricingCard/index.js
@@ -55,7 +55,7 @@ function DefaultPricingCard({ badge, price, specifications, action }) {
   ));
 
   return (
-    <Card>
+    (<Card>
       <SoftBox pt={3} pb={2} px={2} textAlign="center">
         <SoftBadge
           variant="contained"
@@ -78,35 +78,35 @@ function DefaultPricingCard({ badge, price, specifications, action }) {
         {renderSpecifications}
         {action.type === "internal" ? (
           <SoftBox mt={3}>
-            <SoftButton
+            <SoftBox
               component={Link}
               to={action.route}
               variant="gradient"
               color={action.color}
-              fullWidth
-            >
+              fullWidth="true"
+              >
               {action.label}&nbsp;
               <Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
         ) : (
           <SoftBox mt={3}>
-            <SoftButton
+            <SoftBox
               component="a"
               href={action.route}
               target="_blank"
               rel="noreferrer"
               variant="gradient"
               color={action.color}
-              fullWidth
+              
             >
               {action.label}&nbsp;
               <Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
         )}
       </SoftBox>
-    </Card>
+    </Card>)
   );
 }
 
diff --git a/src/examples/Cards/ProjectCards/DefaultProjectCard/index.js b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.js
index 8ada91f5..d0e320f4 100644
--- a/src/examples/Cards/ProjectCards/DefaultProjectCard/index.js
+++ b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.js
@@ -52,7 +52,7 @@ function DefaultProjectCard({ image, label, title, description, action, authors
   ));
 
   return (
-    <Card
+    (<Card
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -116,15 +116,15 @@ function DefaultProjectCard({ image, label, title, description, action, authors
         </SoftBox>
         <SoftBox display="flex" justifyContent="space-between" alignItems="center">
           {action.type === "internal" ? (
-            <SoftButton
+            <SoftBox
               component={Link}
               to={action.route}
               variant="outlined"
-              size="small"
               color={action.color}
+              
             >
               {action.label}
-            </SoftButton>
+            </SoftBox>
           ) : (
             <SoftButton
               component="a"
@@ -141,7 +141,7 @@ function DefaultProjectCard({ image, label, title, description, action, authors
           <SoftBox display="flex">{renderAuthors}</SoftBox>
         </SoftBox>
       </SoftBox>
-    </Card>
+    </Card>)
   );
 }
 
diff --git a/src/examples/Configurator/index.js b/src/examples/Configurator/index.js
index 08c21f1a..b44a5bc7 100644
--- a/src/examples/Configurator/index.js
+++ b/src/examples/Configurator/index.js
@@ -85,7 +85,7 @@ function Configurator() {
   });
 
   return (
-    <ConfiguratorRoot variant="permanent" ownerState={{ openConfigurator }}>
+    (<ConfiguratorRoot variant="permanent" ownerState={{ openConfigurator }}>
       <SoftBox
         display="flex"
         justifyContent="space-between"
@@ -115,9 +115,7 @@ function Configurator() {
           close
         </Icon>
       </SoftBox>
-
       <Divider />
-
       <SoftBox pt={1.25} pb={3} px={3}>
         <SoftBox>
           <SoftTypography variant="h6">Sidenav Colors</SoftTypography>
@@ -165,29 +163,26 @@ function Configurator() {
               mt: 2,
             }}
           >
-            <SoftButton
-              color="info"
-              variant={transparentSidenav ? "gradient" : "outlined"}
-              onClick={handleTransparentSidenav}
-              disabled={disabled}
-              fullWidth
-              sx={{
-                mr: 1,
-                ...sidenavTypeButtonsStyles,
-              }}
+            <SoftBox
+              component={Link}
+              href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/soft-ui-dashboard-react"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+              
             >
               Transparent
-            </SoftButton>
-            <SoftButton
-              color="info"
-              variant={transparentSidenav ? "outlined" : "gradient"}
-              onClick={handleWhiteSidenav}
-              disabled={disabled}
-              fullWidth
-              sx={sidenavTypeButtonsStyles}
-            >
+            </SoftBox>
+            <SoftBox
+              component={Link}
+              href="https://www.creative-tim.com/product/soft-ui-dashboard-react"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+              variant="gradient"
+              >
               White
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
         </SoftBox>
         <SoftBox mt={3} mb={2} lineHeight={1}>
@@ -200,29 +195,27 @@ function Configurator() {
 
         <SoftBox mt={3} mb={2}>
           <SoftBox mb={2}>
-            <SoftButton
+            <SoftBox
               component={Link}
-              href="https://www.creative-tim.com/product/soft-ui-dashboard-react"
+              href="//twitter.com/intent/tweet?text=Check%20Soft%20UI%20Dashboard%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%23mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard-react"
               target="_blank"
               rel="noreferrer"
               color="dark"
-              variant="gradient"
-              fullWidth
-            >
+              >
               free download
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
-          <SoftButton
-            component={Link}
-            href="https://www.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard/"
-            target="_blank"
-            rel="noreferrer"
-            color="dark"
-            variant="outlined"
-            fullWidth
+          <SoftBox
+            color="info"
+            variant={transparentSidenav ? 'contained' : 'gradient'}
+            onClick={handleWhiteSidenav}
+            disabled={disabled}
+            fullWidth="true"
+            sx={sidenavTypeButtonsStyles}
+            
           >
             view documentation
-          </SoftButton>
+          </SoftBox>
         </SoftBox>
         <SoftBox display="flex" justifyContent="center">
           <a
@@ -243,16 +236,17 @@ function Configurator() {
 
           <SoftBox display="flex" justifyContent="center">
             <SoftBox mr={1.5}>
-              <SoftButton
+              <SoftBox
                 component={Link}
-                href="//twitter.com/intent/tweet?text=Check%20Soft%20UI%20Dashboard%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%23mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard-react"
+                href="https://www.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard/"
                 target="_blank"
                 rel="noreferrer"
                 color="dark"
-              >
+                variant="outlined"
+                >
                 <TwitterIcon />
                 &nbsp; Tweet
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
             <SoftButton
               component={Link}
@@ -267,7 +261,7 @@ function Configurator() {
           </SoftBox>
         </SoftBox>
       </SoftBox>
-    </ConfiguratorRoot>
+    </ConfiguratorRoot>)
   );
 }
 
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/components/Socials/index.js b/src/layouts/authentication/components/Socials/index.js
index adc74bbd..03e80e6a 100644
--- a/src/layouts/authentication/components/Socials/index.js
+++ b/src/layouts/authentication/components/Socials/index.js
@@ -19,8 +19,8 @@ import SoftBox from "components/SoftBox";
 
 function Socials() {
   return (
-    <SoftBox display="flex" justifyContent="center">
-      <SoftButton variant="outlined" color="light">
+    (<SoftBox display="flex" justifyContent="center">
+      <SoftBox variant="contained" color="light" >
         <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
           <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
             <g transform="translate(3.000000, 3.000000)" fillRule="nonzero">
@@ -32,9 +32,9 @@ function Socials() {
             </g>
           </g>
         </svg>
-      </SoftButton>
+      </SoftBox>
       <SoftBox px={1}>
-        <SoftButton variant="outlined" color="light">
+        <SoftBox variant="contained" color="light" >
           <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
             <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
               <g transform="translate(7.000000, 0.564551)" fill="#000000" fillRule="nonzero">
@@ -42,9 +42,9 @@ function Socials() {
               </g>
             </g>
           </svg>
-        </SoftButton>
+        </SoftBox>
       </SoftBox>
-      <SoftButton variant="outlined" color="light">
+      <SoftBox variant="contained" color="light" >
         <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
           <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
             <g transform="translate(3.000000, 2.000000)" fillRule="nonzero">
@@ -67,8 +67,8 @@ function Socials() {
             </g>
           </g>
         </svg>
-      </SoftButton>
-    </SoftBox>
+      </SoftBox>
+    </SoftBox>)
   );
 }
 
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..cd9d8985 100644
--- a/src/layouts/billing/components/Bill/index.js
+++ b/src/layouts/billing/components/Bill/index.js
@@ -26,7 +26,7 @@ import SoftButton from "components/SoftButton";
 
 function Bill({ name, company, email, vat, noGutter }) {
   return (
-    <SoftBox
+    (<SoftBox
       component="li"
       display="flex"
       justifyContent="space-between"
@@ -56,9 +56,9 @@ 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="dark" >
                 <Icon>delete</Icon>&nbsp;delete
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
             <SoftButton variant="text" color="dark">
               <Icon>edit</Icon>&nbsp;edit
@@ -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>)
   );
 }