diff --git a/website/docs/how-controls.mdx b/website/docs/how-controls.mdx
new file mode 100644
index 0000000..7060fbc
--- /dev/null
+++ b/website/docs/how-controls.mdx
@@ -0,0 +1,63 @@
+import rawCustom from '!!raw-loader!@site/src/components/Controls/Custom';
+import rawDefault from '!!raw-loader!@site/src/components/Controls/Default';
+import rawHidden from '!!raw-loader!@site/src/components/Controls/Hidden';
+import Custom from '@site/src/components/Controls/Custom';
+import Default from '@site/src/components/Controls/Default';
+import Hidden from '@site/src/components/Controls/Hidden';
+import CodeBlock from '@theme/CodeBlock';
+
+# Video Controls
+
+This is a nice feature to use custom controls if you don't like the native video control. Or even you don't display any control in your video
+
+> Note: This feature only support `video` type. It's not support if you use `iframe`
+
+## Props
+
+```jsx
+controls: 'custom' | 'default' | 'hidden'; // default is custom
+```
+
+## Cusomt Control
+
+> Don't need to add extra props, default is `custom` for `controls` props
+
+<Custom />
+
+<CodeBlock
+  language="jsx"
+  title="/src/components/Controls/Custom.jsx"
+  >
+  {rawCustom}
+
+</CodeBlock>
+
+## Native Control
+
+Set `default` value for `controls` props
+
+<Default />
+
+<CodeBlock
+  language="jsx"
+  title="/src/components/Controls/Default.jsx"
+  >
+  {rawDefault}
+
+</CodeBlock>
+
+## Hidden Control
+
+We can also hide the control if we don't want to show it.
+
+Set `hidden` value for `controls` props
+
+<Hidden />
+
+<CodeBlock
+  language="jsx"
+  title="/src/components/Controls/Hidden.jsx"
+  >
+  {rawHidden}
+
+</CodeBlock>
diff --git a/website/src/components/Controls/Custom.tsx b/website/src/components/Controls/Custom.tsx
new file mode 100644
index 0000000..235e588
--- /dev/null
+++ b/website/src/components/Controls/Custom.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {ModalVideo, useToggle} from '@baskvava/react-video-modal';
+
+function Custom() {
+  const {isOpen, toggle, close} = useToggle();
+
+  return (
+    <div>
+      <h2>Custom Control Example</h2>
+      <button onClick={toggle} className="v-btn">
+        Click Me to Open Video Modal
+      </button>
+
+      <ModalVideo
+        title="video"
+        header="Fixed Width Video Modal"
+        width={800}
+        isOpen={isOpen}
+        onClosed={close}
+        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+      />
+    </div>
+  );
+}
+
+export default Custom;
diff --git a/website/src/components/Controls/Default.tsx b/website/src/components/Controls/Default.tsx
new file mode 100644
index 0000000..a6b1b48
--- /dev/null
+++ b/website/src/components/Controls/Default.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {ModalVideo, useToggle} from '@baskvava/react-video-modal';
+
+function Default() {
+  const {isOpen, toggle, close} = useToggle();
+
+  return (
+    <div>
+      <h2>Default Control Example</h2>
+
+      <button onClick={toggle} className="v-btn">
+        Click Me to Open Video Modal
+      </button>
+
+      <ModalVideo
+        title="video"
+        width={800}
+        // highlight-next-line
+        controls="default"
+        isOpen={isOpen}
+        onClosed={close}
+        url="https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+      />
+    </div>
+  );
+}
+
+export default Default;
diff --git a/website/src/components/Controls/Hidden.tsx b/website/src/components/Controls/Hidden.tsx
new file mode 100644
index 0000000..6d58edc
--- /dev/null
+++ b/website/src/components/Controls/Hidden.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {ModalVideo, useToggle} from '@baskvava/react-video-modal';
+
+function Hidden() {
+  const {isOpen, toggle, close} = useToggle();
+
+  return (
+    <div>
+      <h2>Hidden Control Example</h2>
+
+      <button onClick={toggle} className="v-btn">
+        Click Me to Open Video Modal
+      </button>
+
+      <ModalVideo
+        title="video"
+        width={800}
+        // highlight-next-line
+        controls="hidden"
+        isOpen={isOpen}
+        onClosed={close}
+        url="https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+      />
+    </div>
+  );
+}
+
+export default Hidden;