diff --git a/packages/components/src/ButtonExample/ButtonExample.js b/packages/components/src/ButtonExample/ButtonExample.js
index 761d5cf..9711917 100644
--- a/packages/components/src/ButtonExample/ButtonExample.js
+++ b/packages/components/src/ButtonExample/ButtonExample.js
@@ -1,12 +1,8 @@
 import { Button } from '@mui/material';
 import { ThemeProvider } from '@master-c8/theme';
+import { forwardRef } from 'react';
 
-const ButtonExample = (props) => {
-  return (
-    <ThemeProvider>
-      <Button variant="contained" {...props}/>
-    </ThemeProvider>
-  );
-};
-
+const ButtonExample = forwardRef(function ButtonExample(props, ref) {
+  return <Button ref={ref} {...props} />;
+});
 export default ButtonExample;
diff --git a/packages/components/src/ButtonExample/ButtonExample.stories.js b/packages/components/src/ButtonExample/ButtonExample.stories.js
index cc25693..fe6f6cf 100644
--- a/packages/components/src/ButtonExample/ButtonExample.stories.js
+++ b/packages/components/src/ButtonExample/ButtonExample.stories.js
@@ -1,3 +1,5 @@
+import { ThemeProvider } from '@master-c8/theme';
+
 import ButtonExample from './ButtonExample';
 
 export default {
@@ -5,4 +7,10 @@ export default {
   component: ButtonExample,
 };
 
-export const Default = () => <ButtonExample>Button Dafault</ButtonExample>;
\ No newline at end of file
+export const Default = () => {
+  return (
+    <ThemeProvider>
+      <ButtonExample variant="contained">Button Dafault</ButtonExample>
+    </ThemeProvider>
+  );
+};