diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 36a6502b..c431950a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -21,7 +21,6 @@ module.exports = {
     ],
     'rules': {
         'react/react-in-jsx-scope': 'off',
-        'no-multiple-empty-lines': ['warn', {'max': 1, 'maxEOF': 1}],
         'indent': ['warn', 4],
         'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
         'no-trailing-spaces': 'warn',
@@ -35,6 +34,7 @@ module.exports = {
         'prefer-const': 'warn',
         'space-before-blocks': 'warn',
         'space-before-function-paren': ['warn', 'never'],
+        'react/jsx-first-prop-new-line': [1, 'multiline'],
         'space-in-parens': 'warn',
         'spaced-comment': 'warn',
         'arrow-spacing': 'warn',
diff --git a/package-lock.json b/package-lock.json
index 09eb8c5d..034ed31b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@radui/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radui/ui",
-      "version": "0.0.11",
+      "version": "0.0.13",
       "license": "ISC",
       "dependencies": {
         "@floating-ui/react": "^0.26.2",
diff --git a/package.json b/package.json
index 4e9605b0..29b3b348 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,23 @@
 {
   "name": "@radui/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "",
   "main": "dist",
   "type": "module",
   "exports": {
     "./themes/default.css": "./dist/themes/default.css",
-    "./Avatar": "./dist/components/Avatar.js"
+    "./Avatar": "./dist/components/Avatar.js",
+    "./Badge": "./dist/components/Badge.js",
+    "./Button": "./dist/components/Button.js",
+    "./BlockQuote": "./dist/components/BlockQuote.js",
+    "./Em": "./dist/components/Em.js",
+    "./Quote": "./dist/components/Quote.js",
+    "./Tabs": "./dist/components/Tabs.js",
+    "./Text": "./dist/components/Text.js",
+    "./Heading": "./dist/components/Heading.js",
+    "./Link": "./dist/components/Link.js",
+    "./Code": "./dist/components/Code.js",
+    "./Separator": "./dist/components/Separator.js"
   },
   "scripts": {
     "test": "jest",
diff --git a/src/components/tools/Popper/Popper.js b/src/components/tools/Popper/Popper.js
index 6b1f851a..5ae61fb9 100644
--- a/src/components/tools/Popper/Popper.js
+++ b/src/components/tools/Popper/Popper.js
@@ -1,7 +1,7 @@
 import {useState, useRef} from 'react';
 import {customClassSwitcher} from '~/core';
 
-import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
+import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoUpdate, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
 
 // TODO : Use Floating Portal?
 // TODO : Collisions dont seem to be working as expected, need to investigate
@@ -9,39 +9,55 @@ import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, fl
 const ARROW_HEIGHT = 7;
 const GAP = 2;
 
-const Popper = ({popperName='', customRootClass='', className='', children, open=false, hoverDelay=10, showArrow=true, pop=<></>, ...props}) => {
-    const rootClass = customClassSwitcher(customRootClass, popperName);
+/**
+ *
+ *
+ * For Placement https://floating-ui.com/docs/computePosition#placement
 
-    const arrowRef = useRef(null);
 
+ */
+
+const Popper = ({
+    popperName='',
+    customRootClass='',
+    activationStrategy='hover',
+    className='',
+    placement='top',
+    children,
+    open=false,
+    hoverDelay=10,
+    showArrow=true,
+    pop=<></>,
+    ...props}) => {
+    //
+    const rootClass = customClassSwitcher(customRootClass, popperName);
+    const arrowRef = useRef(null);
     const [isOpen, setIsOpen] = useState(open);
 
     const {refs, floatingStyles, context} = useFloating({
+        placement: placement,
+        whileElementsMounted: autoUpdate,
         open: isOpen,
+        // strategy: 'fixed',
         middleware: [
             arrow({
                 element: arrowRef,
             }),
             offset(ARROW_HEIGHT + GAP),
-            // autoPlacement({
-            //     crossAxis: 'center',
-            //     alignment: 'start',
-            //     autoAlignment: true,
-            //     allowedPlacements: ['top', 'bottom', 'left', 'right'],
-            //     padding: 5,
-            // }),
-            flip(),
-
+            flip({
+                mainAxis: false,
+                fallbackPlacements: ['right', 'bottom'],
+            },
+            ),
         ],
         onOpenChange: setIsOpen,
-        placement: 'top',
     });
 
     const role = useRole(context);
     const dismiss = useDismiss(context);
 
     const hover = useHover(context, {
-        // delay: hoverDelay,
+    // delay: hoverDelay,
     });
 
     const {getReferenceProps, getFloatingProps} = useInteractions([
@@ -51,13 +67,14 @@ const Popper = ({popperName='', customRootClass='', className='', children, open
     ]);
 
     return <>
-        <span className={`${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
-            {
-                onClick: () => {
-                    console.log('click');
+        <span
+            className={`${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
+                {
+                    onClick: () => {
+                        console.log('click');
+                    },
                 },
-            },
-        )}>{children}</span>
+            )}>{children}</span>
         {isOpen && <div className={`${rootClass}-floating-element`} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()} >
             {showArrow && <FloatingArrow className={`rad-ui-arrow ${rootClass}-arrow`} ref={arrowRef} context={context} />}
             {pop}</div>}
diff --git a/src/components/tools/SandboxEditor/SandboxEditor.js b/src/components/tools/SandboxEditor/SandboxEditor.js
index cd61fe6f..f042b13b 100644
--- a/src/components/tools/SandboxEditor/SandboxEditor.js
+++ b/src/components/tools/SandboxEditor/SandboxEditor.js
@@ -13,7 +13,8 @@ const MoonIcon = () => {
 
 const ColorSelect = ({color, colorName, changeAccentColor}) => {
     const dimensions = 32;
-    return <div onClick={() => changeAccentColor(colorName)}
+    return <div
+        onClick={() => changeAccentColor(colorName)}
         className='cursor-pointer rounded-full hover:border-gray-700 border'
         style={{width: dimensions, height: dimensions, backgroundColor: color['light']['900']}}></div>;
 };
diff --git a/src/components/ui/Dropdown/Dropdown.js b/src/components/ui/Dropdown/Dropdown.js
index bb5fe708..ccc82083 100644
--- a/src/components/ui/Dropdown/Dropdown.js
+++ b/src/components/ui/Dropdown/Dropdown.js
@@ -1,24 +1,19 @@
-import {useState} from 'react';
 
-import {
-    useFloating,
-    autoUpdate,
-    offset,
-    flip,
-    shift,
-} from '@floating-ui/react';
+import Popper from '~/components/tools/Popper/Popper';
 
 const Dropdown = ({list=[], selected}) => {
-    const [isOpen, setIsOpen] = useState(false);
-    // todo
-    const {refs, floatingStyles, context} = useFloating({
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware: [offset(10), flip(), shift()],
-        whileElementsMounted: autoUpdate,
-    });
-
-    return <div>Dropdown</div>;
+    const PopElem = () => {
+        return <ul className='bg-white px-2 py-2 shadow-lg rounded-md'>
+            {list.map((item, index) => {
+                return <li key={index}>{item.value}</li>;
+            })}
+        </ul>;
+    };
+    return <div>
+        <Popper open={true} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
+            <span>Dropdown</span>
+        </Popper>
+    </div>;
 };
 
 export default Dropdown;
diff --git a/src/components/ui/Dropdown/Dropdown.stories.js b/src/components/ui/Dropdown/Dropdown.stories.js
index 8529fbc5..d8dffdd7 100644
--- a/src/components/ui/Dropdown/Dropdown.stories.js
+++ b/src/components/ui/Dropdown/Dropdown.stories.js
@@ -7,12 +7,20 @@ export default {
     title: 'UI/Input/Dropdown',
     component: Dropdown,
     render: (args) => <SandboxEditor>
-        <div className=' bg-gray-400 p-4' >
-            <div className='block'>
-                <Heading className="text-gray-1000"> Dropdown</Heading>
-                <Dropdown onSelect={() => {}} label={'Bello'} options={[
-                    {value: 'hello', label: 'hello'},
-                ]}>Hello</Dropdown>
+        <div className=' bg-gray-400 p-4 overflow-auto' style={{height: '200px'}}>
+            <div className='block' style={{height: '400px'}}>
+                <div style={{marginBottom: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown</Heading>
+                </div>
+
+                <Dropdown
+                    onSelect={() => {}} label={'Bello'} list={[
+                        {value: 'hello', label: 'hello'},
+                    ]}>Hello</Dropdown>
+
+                <div style={{marginTop: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown End</Heading>
+                </div>
             </div>
         </div>
     </SandboxEditor>,