diff --git a/app/components/Button.mdx b/app/components/button.mdx
similarity index 100%
rename from app/components/Button.mdx
rename to app/components/button.mdx
diff --git a/app/components/dropdown.js b/app/components/dropdown.js
index 1c930a1..43782a1 100644
--- a/app/components/dropdown.js
+++ b/app/components/dropdown.js
@@ -16,6 +16,7 @@ const MenuWrapper = styled.div`
   border-radius: 10px;
   position: absolute;
   margin-left: -10px;
+  min-width: 200px;
 `;
 
 const MenuItem = styled.button`
@@ -41,7 +42,7 @@ const PopoverWithStyle = styled(Popover)`
 `;
 
 type Props = {
-  renderTrigger: (() => void) => Node,
+  renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
   options: Array<{ label: string, onClick: () => void }>,
 };
 
@@ -49,15 +50,11 @@ type State = {
   isOpen: boolean,
 };
 
-export class Dropdown extends Component<Props, State> {
+export class DropdownComponent extends Component<Props, State> {
   state = {
     isOpen: false,
   };
 
-  toggleVisibility() {
-    this.setState(state => ({ isOpen: !state.isOpen }));
-  }
-
   render() {
     return (
       <PopoverWithStyle
@@ -77,7 +74,7 @@ export class Dropdown extends Component<Props, State> {
         ]}
         tipSize={10}
       >
-        {this.props.renderTrigger(() => this.toggleVisibility())}
+        {this.props.renderTrigger(() => this.setState(state => ({ isOpen: !state.isOpen })), this.state.isOpen)}
       </PopoverWithStyle>
     );
   }
diff --git a/app/components/Dropdown.mdx b/app/components/dropdown.mdx
similarity index 82%
rename from app/components/Dropdown.mdx
rename to app/components/dropdown.mdx
index a2b0c74..9ba4007 100644
--- a/app/components/Dropdown.mdx
+++ b/app/components/dropdown.mdx
@@ -4,12 +4,12 @@ name: DropDown
 
 import { Playground, PropsTable } from 'docz'
 
-import { Dropdown } from './dropdown.js'
+import { DropdownComponent } from './dropdown.js'
 import { DoczWrapper } from '../theme.js'
 
 # DropDown
 
-<PropsTable of={Dropdown} />
+<PropsTable of={DropdownComponent} />
 
 ## Basic usage
 
@@ -17,7 +17,7 @@ import { DoczWrapper } from '../theme.js'
   <DoczWrapper>
     {() => (
       <div style={{ height: '500px' }}>
-        <Dropdown
+        <DropdownComponent
           options={[
             { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
             { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
diff --git a/app/components/Input.mdx b/app/components/input.mdx
similarity index 100%
rename from app/components/Input.mdx
rename to app/components/input.mdx
diff --git a/app/components/QRCode.mdx b/app/components/qrcode.mdx
similarity index 100%
rename from app/components/QRCode.mdx
rename to app/components/qrcode.mdx
diff --git a/app/components/Sidebar.mdx b/app/components/sidebar.mdx
similarity index 100%
rename from app/components/Sidebar.mdx
rename to app/components/sidebar.mdx