diff --git a/src/examples/Cards/PricingCards/DefaultPricingCard/index.js b/src/examples/Cards/PricingCards/DefaultPricingCard/index.js
index 6343b212..9cf9825a 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,38 @@ function DefaultPricingCard({ badge, price, specifications, action }) {
         {renderSpecifications}
         {action.type === "internal" ? (
           <SoftBox mt={3}>
-            <SoftButton
-              component={Link}
-              to={action.route}
+            <SoftBox
+              component="a"
+              href={action.route}
+              target="_blank"
+              rel="noreferrer"
               variant="gradient"
               color={action.color}
-              fullWidth
-            >
+              bgColor="transparent"
+              opacity="1"
+              borderRadius="none"
+              shadow="none"
+              >
               {action.label}&nbsp;
               <Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
-            </SoftButton>
+            </SoftBox>
           </SoftBox>
         ) : (
           <SoftBox mt={3}>
-            <SoftButton
-              component="a"
-              href={action.route}
-              target="_blank"
-              rel="noreferrer"
+            <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>
-    </Card>
+    </Card>)
   );
 }
 
diff --git a/src/examples/Configurator/index.js b/src/examples/Configurator/index.js
index 08c21f1a..2609b700 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.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard/"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+              variant="contained"
+              >
               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
@@ -267,7 +260,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..93a3a77b 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="50%"
+                
               >
                 {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/examples/Sidenav/index.js b/src/examples/Sidenav/index.js
index d1a8dcba..8ea7f52e 100644
--- a/src/examples/Sidenav/index.js
+++ b/src/examples/Sidenav/index.js
@@ -128,7 +128,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
   });
 
   return (
-    <SidenavRoot {...rest} variant="permanent" ownerState={{ transparentSidenav, miniSidenav }}>
+    (<SidenavRoot {...rest} variant="permanent" ownerState={{ transparentSidenav, miniSidenav }}>
       <SoftBox pt={3} pb={1} px={4} textAlign="center">
         <SoftBox
           display={{ xs: "block", xl: "none" }}
@@ -160,20 +160,20 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
       <SoftBox pt={2} my={2} mx={2} mt="auto">
         <SidenavCard />
         <SoftBox mt={2}>
-          <SoftButton
+          <SoftBox
             component="a"
             href="https://creative-tim.com/product/soft-ui-dashboard-pro-react"
             target="_blank"
             rel="noreferrer"
             variant="gradient"
             color={color}
-            fullWidth
-          >
+            fullWidth="true"
+            >
             upgrade to pro
-          </SoftButton>
+          </SoftBox>
         </SoftBox>
       </SoftBox>
-    </SidenavRoot>
+    </SidenavRoot>)
   );
 }
 
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..635ce9b7 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="dark" >
                 <Icon>delete</Icon>&nbsp;delete
-              </SoftButton>
+              </SoftBox>
             </SoftBox>
-            <SoftButton variant="text" color="dark">
+            <SoftBox variant="contained" color="error" >
               <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>)
   );
 }
 
diff --git a/src/layouts/virtual-reality/index.js b/src/layouts/virtual-reality/index.js
index ede83d96..9b989491 100644
--- a/src/layouts/virtual-reality/index.js
+++ b/src/layouts/virtual-reality/index.js
@@ -45,7 +45,7 @@ function VRInfo() {
   const { d1, h2, fontWeightMedium } = typography;
 
   return (
-    <BaseLayout>
+    (<BaseLayout>
       <SoftBox
         minHeight="100vh"
         ml={{ xs: 0, md: 10 }}
@@ -76,43 +76,34 @@ function VRInfo() {
 
               <SoftBox my={{ xs: 0, md: 2 }} mx={{ xs: 2, md: 0 }}>
                 <Tooltip title="Home" placement="right">
-                  <SoftButton
-                    size="large"
-                    iconOnly
-                    sx={({ palette: { dark }, borders: { borderRadius } }) => ({
-                      color: dark.main,
-                      borderRadius: borderRadius.lg,
-                    })}
+                  <SoftBox
+                    color={dark.main}
+                    borderRadius="lg"
+                    
                   >
                     <Icon>home</Icon>
-                  </SoftButton>
+                  </SoftBox>
                 </Tooltip>
               </SoftBox>
               <SoftBox mb={{ xs: 0, md: 2 }} mr={{ xs: 2, md: 0 }}>
                 <Tooltip title="Search" placement="right">
-                  <SoftButton
-                    size="large"
-                    iconOnly
-                    sx={({ palette: { dark }, borders: { borderRadius } }) => ({
-                      color: dark.main,
-                      borderRadius: borderRadius.lg,
-                    })}
+                  <SoftBox
+                    color={dark.main}
+                    borderRadius={borderRadius.lg}
+                    
                   >
                     <Icon>search</Icon>
-                  </SoftButton>
+                  </SoftBox>
                 </Tooltip>
               </SoftBox>
               <Tooltip title="Minimize" placement="right">
-                <SoftButton
-                  size="large"
-                  iconOnly
-                  sx={({ palette: { dark }, borders: { borderRadius } }) => ({
-                    color: dark.main,
-                    borderRadius: borderRadius.lg,
-                  })}
+                <SoftBox
+                  color={dark.main}
+                  borderRadius="lg"
+                  
                 >
                   <Icon>more_horiz</Icon>
-                </SoftButton>
+                </SoftBox>
               </Tooltip>
             </SoftBox>
           </Grid>
@@ -160,7 +151,7 @@ function VRInfo() {
           </Grid>
         </Grid>
       </SoftBox>
-    </BaseLayout>
+    </BaseLayout>)
   );
 }