diff --git a/src/components/common/Avatar/index.tsx b/src/components/Avatar/index.tsx
similarity index 100%
rename from src/components/common/Avatar/index.tsx
rename to src/components/Avatar/index.tsx
diff --git a/src/components/common/Badge/index.tsx b/src/components/Badge/index.tsx
similarity index 100%
rename from src/components/common/Badge/index.tsx
rename to src/components/Badge/index.tsx
diff --git a/src/components/common/Button/index.tsx b/src/components/Button/index.tsx
similarity index 100%
rename from src/components/common/Button/index.tsx
rename to src/components/Button/index.tsx
diff --git a/src/components/common/Card/index.tsx b/src/components/Card/index.tsx
similarity index 100%
rename from src/components/common/Card/index.tsx
rename to src/components/Card/index.tsx
diff --git a/src/components/common/Checkbox/checkbox.test.tsx b/src/components/Checkbox/checkbox.test.tsx
similarity index 95%
rename from src/components/common/Checkbox/checkbox.test.tsx
rename to src/components/Checkbox/checkbox.test.tsx
index 7454e6b..8c56ad5 100644
--- a/src/components/common/Checkbox/checkbox.test.tsx
+++ b/src/components/Checkbox/checkbox.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Checkbox, Label } from '../../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Checkbox', () => {
   it('Checkbox icon must be customizable and work when clicked.', () => {
diff --git a/src/components/common/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
similarity index 100%
rename from src/components/common/Checkbox/index.tsx
rename to src/components/Checkbox/index.tsx
diff --git a/src/components/common/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
similarity index 100%
rename from src/components/common/Dialog/Dialog.tsx
rename to src/components/Dialog/Dialog.tsx
diff --git a/src/components/common/Dialog/DialogClose.tsx b/src/components/Dialog/DialogClose.tsx
similarity index 100%
rename from src/components/common/Dialog/DialogClose.tsx
rename to src/components/Dialog/DialogClose.tsx
diff --git a/src/components/common/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx
similarity index 100%
rename from src/components/common/Dialog/DialogContent.tsx
rename to src/components/Dialog/DialogContent.tsx
diff --git a/src/components/common/Dialog/DialogContext.tsx b/src/components/Dialog/DialogContext.tsx
similarity index 100%
rename from src/components/common/Dialog/DialogContext.tsx
rename to src/components/Dialog/DialogContext.tsx
diff --git a/src/components/common/Dialog/DialogToggle.tsx b/src/components/Dialog/DialogToggle.tsx
similarity index 100%
rename from src/components/common/Dialog/DialogToggle.tsx
rename to src/components/Dialog/DialogToggle.tsx
diff --git a/src/components/common/Dialog/dialog.test.tsx b/src/components/Dialog/dialog.test.tsx
similarity index 97%
rename from src/components/common/Dialog/dialog.test.tsx
rename to src/components/Dialog/dialog.test.tsx
index d7eff99..f1c3a72 100644
--- a/src/components/common/Dialog/dialog.test.tsx
+++ b/src/components/Dialog/dialog.test.tsx
@@ -17,7 +17,7 @@ import {
   InputGroup,
   Label,
 } from '../../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dialog', () => {
   it('Should appear DialogContent when click DialogToggle', () => {
diff --git a/src/components/common/Dialog/index.tsx b/src/components/Dialog/index.tsx
similarity index 100%
rename from src/components/common/Dialog/index.tsx
rename to src/components/Dialog/index.tsx
diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
similarity index 85%
rename from src/components/common/Dropdown/Dropdown.tsx
rename to src/components/Dropdown/Dropdown.tsx
index b3e0e8b..42c422d 100644
--- a/src/components/common/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 interface DropdownProps extends React.PropsWithChildren {
diff --git a/src/components/common/Dropdown/DropdownContent.tsx b/src/components/Dropdown/DropdownContent.tsx
similarity index 90%
rename from src/components/common/Dropdown/DropdownContent.tsx
rename to src/components/Dropdown/DropdownContent.tsx
index 248991f..7ed4d51 100644
--- a/src/components/common/Dropdown/DropdownContent.tsx
+++ b/src/components/Dropdown/DropdownContent.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 
 interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   width?: React.CSSProperties['width'];
diff --git a/src/components/common/Dropdown/DropdownItem.tsx b/src/components/Dropdown/DropdownItem.tsx
similarity index 95%
rename from src/components/common/Dropdown/DropdownItem.tsx
rename to src/components/Dropdown/DropdownItem.tsx
index 41d0330..3087129 100644
--- a/src/components/common/Dropdown/DropdownItem.tsx
+++ b/src/components/Dropdown/DropdownItem.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 
diff --git a/src/components/common/Dropdown/DropdownToggle.tsx b/src/components/Dropdown/DropdownToggle.tsx
similarity index 94%
rename from src/components/common/Dropdown/DropdownToggle.tsx
rename to src/components/Dropdown/DropdownToggle.tsx
index 748b8f4..8885101 100644
--- a/src/components/common/Dropdown/DropdownToggle.tsx
+++ b/src/components/Dropdown/DropdownToggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
+import { PortalContext } from '@/components/Portal/PortalContext';
 import Slot from '@/components/Slot';
-import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
diff --git a/src/components/common/Dropdown/dropdown.test.tsx b/src/components/Dropdown/dropdown.test.tsx
similarity index 91%
rename from src/components/common/Dropdown/dropdown.test.tsx
rename to src/components/Dropdown/dropdown.test.tsx
index 1b5e935..8a71ec2 100644
--- a/src/components/common/Dropdown/dropdown.test.tsx
+++ b/src/components/Dropdown/dropdown.test.tsx
@@ -10,10 +10,10 @@ import {
   DropdownLabel,
   DropdownShortcut,
   DropdownToggle,
-} from '../../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+} from '../';
+import { fireEvent, render, screen } from '../../libs/test';
 
-describe('UI test', () => {
+describe('Dropdown', () => {
   it('Should appear DropdownContent when click DropdownToggle', () => {
     render(
       <Dropdown>
diff --git a/src/components/common/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
similarity index 100%
rename from src/components/common/Dropdown/index.tsx
rename to src/components/Dropdown/index.tsx
diff --git a/src/components/common/HoverCard/HoverCard.tsx b/src/components/HoverCard/HoverCard.tsx
similarity index 92%
rename from src/components/common/HoverCard/HoverCard.tsx
rename to src/components/HoverCard/HoverCard.tsx
index 2062830..cd23a9e 100644
--- a/src/components/common/HoverCard/HoverCard.tsx
+++ b/src/components/HoverCard/HoverCard.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 import HoverCardContext from './HoverCardContext';
diff --git a/src/components/common/HoverCard/HoverCardContent.tsx b/src/components/HoverCard/HoverCardContent.tsx
similarity index 93%
rename from src/components/common/HoverCard/HoverCardContent.tsx
rename to src/components/HoverCard/HoverCardContent.tsx
index c9c3e51..1b68f85 100644
--- a/src/components/common/HoverCard/HoverCardContent.tsx
+++ b/src/components/HoverCard/HoverCardContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 import { composeEventHandlers, excludeTouchEventHandler } from '@/libs/event';
 
 import useHoverWaiting from './useHoverWaiting';
diff --git a/src/components/common/HoverCard/HoverCardContext.tsx b/src/components/HoverCard/HoverCardContext.tsx
similarity index 100%
rename from src/components/common/HoverCard/HoverCardContext.tsx
rename to src/components/HoverCard/HoverCardContext.tsx
diff --git a/src/components/common/HoverCard/HoverCardToggle.tsx b/src/components/HoverCard/HoverCardToggle.tsx
similarity index 96%
rename from src/components/common/HoverCard/HoverCardToggle.tsx
rename to src/components/HoverCard/HoverCardToggle.tsx
index 08eedd9..cfe5f6e 100644
--- a/src/components/common/HoverCard/HoverCardToggle.tsx
+++ b/src/components/HoverCard/HoverCardToggle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers, excludeTouchEventHandler } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
diff --git a/src/components/common/HoverCard/index.tsx b/src/components/HoverCard/index.tsx
similarity index 100%
rename from src/components/common/HoverCard/index.tsx
rename to src/components/HoverCard/index.tsx
diff --git a/src/components/common/HoverCard/useHoverWaiting.ts b/src/components/HoverCard/useHoverWaiting.ts
similarity index 94%
rename from src/components/common/HoverCard/useHoverWaiting.ts
rename to src/components/HoverCard/useHoverWaiting.ts
index 3fec963..523a050 100644
--- a/src/components/common/HoverCard/useHoverWaiting.ts
+++ b/src/components/HoverCard/useHoverWaiting.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 
 import HoverCardContext from './HoverCardContext';
diff --git a/src/components/common/Input/InputDesc.tsx b/src/components/Input/InputDesc.tsx
similarity index 100%
rename from src/components/common/Input/InputDesc.tsx
rename to src/components/Input/InputDesc.tsx
diff --git a/src/components/common/Input/InputGroup.tsx b/src/components/Input/InputGroup.tsx
similarity index 100%
rename from src/components/common/Input/InputGroup.tsx
rename to src/components/Input/InputGroup.tsx
diff --git a/src/components/common/Input/index.tsx b/src/components/Input/index.tsx
similarity index 100%
rename from src/components/common/Input/index.tsx
rename to src/components/Input/index.tsx
diff --git a/src/components/common/Input/input.test.tsx b/src/components/Input/input.test.tsx
similarity index 90%
rename from src/components/common/Input/input.test.tsx
rename to src/components/Input/input.test.tsx
index cae5739..777db1d 100644
--- a/src/components/common/Input/input.test.tsx
+++ b/src/components/Input/input.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { expect, it } from 'vitest';
 
 import { Input, InputGroup, Label } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Input', () => {
   it('Fill out the Input', async () => {
diff --git a/src/components/common/Label/index.tsx b/src/components/Label/index.tsx
similarity index 100%
rename from src/components/common/Label/index.tsx
rename to src/components/Label/index.tsx
diff --git a/src/components/Portal/PortalContent.tsx b/src/components/Portal/PortalContent.tsx
new file mode 100644
index 0000000..d5ec846
--- /dev/null
+++ b/src/components/Portal/PortalContent.tsx
@@ -0,0 +1,79 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { usePortal } from '@/components/Portal/usePortal';
+import useContext from '@/hooks/useContext';
+import { composeRefs } from '@/libs/ref';
+import { PositionType } from '@/types/position';
+
+import { PortalContext } from './PortalContext';
+
+interface ModalContentProps extends React.ComponentProps<'div'> {
+  ref: React.ForwardedRef<HTMLDivElement>;
+  width?: React.CSSProperties['width'];
+  disabledBG?: boolean;
+}
+
+export const PortalContent = ({ children, ref, width, disabledBG = false, ...props }: ModalContentProps) => {
+  const { showModal, setShowModal, toggleElement } = useContext(PortalContext)!;
+  const modalRef = React.useRef<HTMLDivElement>(null);
+  const { reorgPos } = usePortal({ modalRef });
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      {showModal &&
+        createPortal(
+          <>
+            {!disabledBG && <ModalBG onClick={close} id="bmates-portal-bg" className="bmates-portal-bg" />}
+            <Modal
+              ref={composeRefs(modalRef, ref)}
+              width={width || toggleElement?.getBoundingClientRect().width}
+              position={reorgPos}
+              {...props}
+            >
+              {children}
+            </Modal>
+          </>,
+          document.body,
+        )}
+    </>
+  );
+};
+
+const enter = keyframes`
+    0% { opacity: 0; }
+    100% { opacity: 1; } 
+  `;
+
+const ModalBG = styled.div`
+  position: fixed;
+  background-color: transparent;
+  pointer-events: auto;
+  z-index: 50;
+  inset: 0;
+`;
+
+const Modal = styled.div<{ width?: React.CSSProperties['width']; position: PositionType }>`
+  display: grid;
+  min-width: max-content;
+  ${({ width }) => width && `width: ${typeof width === 'string' ? width : `${width}px`};`}
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  transform: ${({ position }) => `translate(${position.x}px, ${position.y}px)`};
+  background-color: white;
+  pointer-events: auto;
+  z-index: 50;
+  animation-name: ${enter};
+  animation-duration: 0.15s;
+  border: 1px solid ${({ theme }) => theme.colors.gray['300']};
+  box-shadow: 0px 2px 2px 0px ${({ theme }) => theme.colors.gray['300']};
+`;
diff --git a/src/components/Portal/PortalContext.tsx b/src/components/Portal/PortalContext.tsx
new file mode 100644
index 0000000..9ca00de
--- /dev/null
+++ b/src/components/Portal/PortalContext.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { AlignType } from '@/types/align';
+
+export interface PortalContextType {
+  /*
+   * Modal
+   */
+  showModal: boolean;
+  setShowModal: (value: boolean) => void;
+
+  /*
+   * Toggle Rect
+   * - to calcurate element size
+   */
+  toggleElement: HTMLElement | undefined;
+  setToggleElment: (value: HTMLElement) => void;
+
+  /*
+   * Align
+   */
+  align: AlignType;
+
+  /*
+   * Space Size
+   */
+  space?: number;
+}
+export const PortalContext = React.createContext<PortalContextType | null>(null);
diff --git a/src/components/Portal/PortalProvider.tsx b/src/components/Portal/PortalProvider.tsx
new file mode 100644
index 0000000..f4673d7
--- /dev/null
+++ b/src/components/Portal/PortalProvider.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import useModal from '@/hooks/useModal';
+
+import { PortalContext } from './PortalContext';
+import { PortalType } from './type';
+
+export interface PortalProviderProps extends React.PropsWithChildren, PortalType {
+  enableScroll?: boolean;
+}
+
+export const PortalProvider = ({ align, space, enableScroll, children }: PortalProviderProps) => {
+  const [showModal, setShowModal] = useModal(enableScroll);
+  const [toggleElement, setToggleElment] = React.useState<HTMLElement>();
+
+  return (
+    <PortalContext.Provider
+      value={{
+        showModal,
+        setShowModal,
+        toggleElement,
+        setToggleElment,
+        align,
+        space,
+      }}
+    >
+      {children}
+    </PortalContext.Provider>
+  );
+};
diff --git a/src/components/Portal/index.tsx b/src/components/Portal/index.tsx
new file mode 100644
index 0000000..bb3af5c
--- /dev/null
+++ b/src/components/Portal/index.tsx
@@ -0,0 +1,3 @@
+export * from './PortalContent';
+export * from './PortalProvider';
+export * from './usePortal';
diff --git a/src/components/Portal/type.ts b/src/components/Portal/type.ts
new file mode 100644
index 0000000..158f047
--- /dev/null
+++ b/src/components/Portal/type.ts
@@ -0,0 +1,6 @@
+import { AlignType } from '@/types/align';
+
+export interface PortalType {
+  align: AlignType;
+  space: number;
+}
diff --git a/src/components/Portal/usePortal.ts b/src/components/Portal/usePortal.ts
new file mode 100644
index 0000000..ef3b825
--- /dev/null
+++ b/src/components/Portal/usePortal.ts
@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { PortalContext } from '@/components/Portal/PortalContext';
+import { PositionType } from '@/types/position';
+
+export const usePortal = ({ modalRef }: { modalRef: React.RefObject<HTMLDivElement> }) => {
+  const {
+    showModal,
+    align,
+    space = 0,
+    toggleElement,
+    setShowModal,
+    setToggleElment,
+  } = React.useContext(PortalContext)!;
+  const [reorgPos, setReorgPos] = React.useState<PositionType>({ x: 0, y: 0 });
+
+  React.useEffect(() => {
+    const adjustmentPos = () => {
+      if (modalRef.current && toggleElement && showModal) {
+        const rect = modalRef.current;
+        const toggleRect = toggleElement.getBoundingClientRect();
+
+        const isOverflowing = rect.offsetHeight + toggleRect.bottom + space >= window.innerHeight;
+        const reorgPos = { x: 0, y: 0 };
+
+        switch (align) {
+          case 'center':
+            reorgPos.x = toggleRect.x + toggleRect.width / 2 - rect.clientWidth / 2;
+            break;
+          case 'start':
+            reorgPos.x = toggleRect.x;
+            break;
+          case 'end':
+            reorgPos.x = toggleRect.x + toggleRect.width - rect.clientWidth;
+            break;
+        }
+
+        if (isOverflowing) {
+          reorgPos.y = toggleRect.y - rect.offsetHeight - space;
+        } else {
+          reorgPos.y = toggleRect.y + toggleRect.height + space;
+        }
+
+        if (reorgPos.x <= 0) reorgPos.x = space;
+        else if (reorgPos.x + rect.offsetWidth >= window.innerWidth)
+          reorgPos.x = window.innerWidth - rect.offsetWidth - space;
+
+        setReorgPos(reorgPos);
+      }
+    };
+    adjustmentPos();
+
+    window.addEventListener('resize', adjustmentPos);
+    return () => {
+      window.removeEventListener('resize', adjustmentPos);
+    };
+  }, [align, showModal, toggleElement, modalRef, space]);
+
+  return { showModal, align, toggleElement, setShowModal, setToggleElment, reorgPos };
+};
diff --git a/src/components/Provider/StyledProvider.tsx b/src/components/Provider/StyledProvider.tsx
new file mode 100644
index 0000000..326063a
--- /dev/null
+++ b/src/components/Provider/StyledProvider.tsx
@@ -0,0 +1,14 @@
+import GlobalStyle from '@/styles/GlobalStyle.tsx';
+import theme from '@/styles/theme.ts';
+import { ThemeProvider } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+
+const StyledProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      {children}
+    </ThemeProvider>
+  );
+};
+export default StyledProvider;
diff --git a/src/components/common/Select/Select.tsx b/src/components/Select/Select.tsx
similarity index 91%
rename from src/components/common/Select/Select.tsx
rename to src/components/Select/Select.tsx
index b0aa5e9..056f000 100644
--- a/src/components/common/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 import SelectContext from './SelectContext';
diff --git a/src/components/common/Select/SelectContent.tsx b/src/components/Select/SelectContent.tsx
similarity index 90%
rename from src/components/common/Select/SelectContent.tsx
rename to src/components/Select/SelectContent.tsx
index 354ef7f..cebb819 100644
--- a/src/components/common/Select/SelectContent.tsx
+++ b/src/components/Select/SelectContent.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 
 interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   width?: React.CSSProperties['width'];
diff --git a/src/components/common/Select/SelectContext.tsx b/src/components/Select/SelectContext.tsx
similarity index 100%
rename from src/components/common/Select/SelectContext.tsx
rename to src/components/Select/SelectContext.tsx
diff --git a/src/components/common/Select/SelectIcon.tsx b/src/components/Select/SelectIcon.tsx
similarity index 100%
rename from src/components/common/Select/SelectIcon.tsx
rename to src/components/Select/SelectIcon.tsx
diff --git a/src/components/common/Select/SelectItem.tsx b/src/components/Select/SelectItem.tsx
similarity index 97%
rename from src/components/common/Select/SelectItem.tsx
rename to src/components/Select/SelectItem.tsx
index 9c0a5e5..828e908 100644
--- a/src/components/common/Select/SelectItem.tsx
+++ b/src/components/Select/SelectItem.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 
diff --git a/src/components/common/Select/SelectToggle.tsx b/src/components/Select/SelectToggle.tsx
similarity index 97%
rename from src/components/common/Select/SelectToggle.tsx
rename to src/components/Select/SelectToggle.tsx
index 8284049..ebc859a 100644
--- a/src/components/common/Select/SelectToggle.tsx
+++ b/src/components/Select/SelectToggle.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
+import { PortalContext } from '@/components/Portal/PortalContext';
 import Slot from '@/components/Slot';
-import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
diff --git a/src/components/common/Select/index.tsx b/src/components/Select/index.tsx
similarity index 100%
rename from src/components/common/Select/index.tsx
rename to src/components/Select/index.tsx
diff --git a/src/components/common/Select/select.test.tsx b/src/components/Select/select.test.tsx
similarity index 97%
rename from src/components/common/Select/select.test.tsx
rename to src/components/Select/select.test.tsx
index c2c1ed7..0efdd90 100644
--- a/src/components/common/Select/select.test.tsx
+++ b/src/components/Select/select.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 const items = [
   {
diff --git a/src/components/common/Select/type.ts b/src/components/Select/type.ts
similarity index 100%
rename from src/components/common/Select/type.ts
rename to src/components/Select/type.ts
diff --git a/src/components/common/Switch/index.tsx b/src/components/Switch/index.tsx
similarity index 100%
rename from src/components/common/Switch/index.tsx
rename to src/components/Switch/index.tsx
diff --git a/src/components/common/Switch/switch.test.tsx b/src/components/Switch/switch.test.tsx
similarity index 91%
rename from src/components/common/Switch/switch.test.tsx
rename to src/components/Switch/switch.test.tsx
index e3dabfe..6f78422 100644
--- a/src/components/common/Switch/switch.test.tsx
+++ b/src/components/Switch/switch.test.tsx
@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { expect, it } from 'vitest';
 
-import { Switch } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { Switch } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Switch', () => {
   it('Should be change checked value when click the Switch', async () => {
diff --git a/src/components/common/Textarea/index.tsx b/src/components/Textarea/index.tsx
similarity index 100%
rename from src/components/common/Textarea/index.tsx
rename to src/components/Textarea/index.tsx
diff --git a/src/components/common/Textarea/textarea.test.tsx b/src/components/Textarea/textarea.test.tsx
similarity index 91%
rename from src/components/common/Textarea/textarea.test.tsx
rename to src/components/Textarea/textarea.test.tsx
index 1eddf9b..1154a6d 100644
--- a/src/components/common/Textarea/textarea.test.tsx
+++ b/src/components/Textarea/textarea.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { expect, it } from 'vitest';
 
 import { InputDesc, InputGroup, Label, Textarea } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Textarea', () => {
   it('Fill out the Textarea', async () => {
diff --git a/src/components/common/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
similarity index 100%
rename from src/components/common/Toast/Toast.tsx
rename to src/components/Toast/Toast.tsx
diff --git a/src/components/common/Toast/ToastContext.tsx b/src/components/Toast/ToastContext.tsx
similarity index 100%
rename from src/components/common/Toast/ToastContext.tsx
rename to src/components/Toast/ToastContext.tsx
diff --git a/src/components/common/Toast/Toaster.tsx b/src/components/Toast/Toaster.tsx
similarity index 100%
rename from src/components/common/Toast/Toaster.tsx
rename to src/components/Toast/Toaster.tsx
diff --git a/src/components/common/Toast/index.tsx b/src/components/Toast/index.tsx
similarity index 100%
rename from src/components/common/Toast/index.tsx
rename to src/components/Toast/index.tsx
diff --git a/src/components/common/Toast/toast.test.tsx b/src/components/Toast/toast.test.tsx
similarity index 96%
rename from src/components/common/Toast/toast.test.tsx
rename to src/components/Toast/toast.test.tsx
index e048413..84b2a87 100644
--- a/src/components/common/Toast/toast.test.tsx
+++ b/src/components/Toast/toast.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { expect, it } from 'vitest';
 
 import { Button, Toaster, useToast } from '../..';
-import { fireEvent, render, screen, waitFor } from '../../../libs/test';
+import { fireEvent, render, screen, waitFor } from '../../libs/test';
 import { ToastData } from './type';
 
 const ToastForTest = ({ ...props }: Omit<ToastData, 'toastId'>) => {
diff --git a/src/components/common/Toast/type.ts b/src/components/Toast/type.ts
similarity index 100%
rename from src/components/common/Toast/type.ts
rename to src/components/Toast/type.ts
diff --git a/src/components/common/Toast/useToast.tsx b/src/components/Toast/useToast.tsx
similarity index 100%
rename from src/components/common/Toast/useToast.tsx
rename to src/components/Toast/useToast.tsx
diff --git a/src/components/common/Toggle/index.tsx b/src/components/Toggle/index.tsx
similarity index 100%
rename from src/components/common/Toggle/index.tsx
rename to src/components/Toggle/index.tsx
diff --git a/src/components/common/Toggle/toggle.test.tsx b/src/components/Toggle/toggle.test.tsx
similarity index 81%
rename from src/components/common/Toggle/toggle.test.tsx
rename to src/components/Toggle/toggle.test.tsx
index e2d1803..88fca08 100644
--- a/src/components/common/Toggle/toggle.test.tsx
+++ b/src/components/Toggle/toggle.test.tsx
@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { expect, it } from 'vitest';
 
-import { Toggle } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { Toggle } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Toggle', () => {
   it('Should be changed style', async () => {
diff --git a/src/components/common/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
similarity index 100%
rename from src/components/common/Tooltip/index.tsx
rename to src/components/Tooltip/index.tsx
diff --git a/src/components/common/Tooltip/tooltip.test.tsx b/src/components/Tooltip/tooltip.test.tsx
similarity index 93%
rename from src/components/common/Tooltip/tooltip.test.tsx
rename to src/components/Tooltip/tooltip.test.tsx
index e0e4b65..cdfa302 100644
--- a/src/components/common/Tooltip/tooltip.test.tsx
+++ b/src/components/Tooltip/tooltip.test.tsx
@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { expect, it } from 'vitest';
 
-import { Button, Tooltip } from '../..';
-import { fireEvent, render, screen, waitFor } from '../../../libs/test';
+import { Button, Tooltip } from '..';
+import { fireEvent, render, screen, waitFor } from '../../libs/test';
 
 describe('Tooltip', () => {
   it('Show Tooltip message when hover component', async () => {
diff --git a/src/components/common/Form/form.test.tsx b/src/components/common/Form/form.test.tsx
deleted file mode 100644
index 7e11361..0000000
--- a/src/components/common/Form/form.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { expect, it, vi } from 'vitest';
-
-import { Button, Form, Input, InputDesc, InputGroup, Label, Textarea } from '../../';
-import { MockRouter, fireEvent, render, screen, waitFor } from '../../../libs/test';
-
-describe('Form', () => {
-  it('Fill out the Input and Textarea and submit the Form', async () => {
-    const handleSubmitFn = vi.fn().mockImplementation(e => e.preventDefault());
-
-    render(
-      <MockRouter initialPath="/">
-        <Route
-          path="/"
-          element={
-            <Form redirect="submitsuccess" id="form" onSubmit={handleSubmitFn}>
-              <InputGroup>
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" type="email" placeholder="email" />
-              </InputGroup>
-              <InputGroup>
-                <Label htmlFor="bio">Bio</Label>
-                <Textarea id="bio" placeholder="bio" />
-                <InputDesc>You can @mention other users to link to them.</InputDesc>
-              </InputGroup>
-              <Button type="submit" variant="primary" size="lg">
-                Save
-              </Button>
-            </Form>
-          }
-        />
-        <Route path="/submitsuccess" element={<p>Success</p>} />
-      </MockRouter>,
-      {},
-    );
-
-    const emailInput = screen.getByLabelText(/email/i);
-    const bioTextarea = screen.getByLabelText(/bio/i);
-    const submitBtn = screen.getByText('Save');
-
-    fireEvent.change(emailInput, { target: { value: 'bandmator@bandmate.com' } });
-    fireEvent.change(bioTextarea, { target: { value: 'Hi, I am Bandmator' } });
-
-    fireEvent.click(submitBtn);
-
-    await waitFor(() => {
-      expect(handleSubmitFn).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/src/components/common/Form/index.tsx b/src/components/common/Form/index.tsx
deleted file mode 100644
index 6290f74..0000000
--- a/src/components/common/Form/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-
-interface FormProps extends React.ComponentProps<'form'>, PropsWithChildren {
-  redirect?: string;
-}
-
-export const Form = ({ redirect = '/', ...props }: FormProps) => {
-  const navigate = useNavigate();
-
-  const [searchParams] = useSearchParams();
-  const redirect_to: string = decodeURIComponent(searchParams.get('redirect_to') || redirect);
-
-  const handleSubmit = () => {
-    console.log('!!');
-    navigate(redirect_to);
-  };
-
-  return (
-    <form onSubmit={handleSubmit} {...props}>
-      {props.children}
-    </form>
-  );
-};
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
deleted file mode 100644
index 97f596b..0000000
--- a/src/components/common/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Dialog';
-export * from './Dropdown';
-export * from './Form';
-export * from './HoverCard';
-export * from './Input';
-export * from './Label';
-export * from './Select';
-export * from './Switch';
-export * from './Textarea';
-export * from './Toast';
-export * from './Toggle';
-export * from './Tooltip';
-export * from './Checkbox';
diff --git a/src/components/index.ts b/src/components/index.ts
index 2facc6b..5ac227e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,19 @@
-export * from './common';
-export { default as BMatesProvider } from './provider/StyledProvider';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Dialog';
+export * from './Dropdown';
+export * from './HoverCard';
+export * from './Input';
+export * from './Label';
+export * from './Portal';
+export * from './Select';
+export * from './Switch';
+export * from './Textarea';
+export * from './Toast';
+export * from './Toggle';
+export * from './Tooltip';
+export * from './Checkbox';
+
+export { default as BMatesProvider } from './Provider/StyledProvider';
diff --git a/src/components/portal/PortalContent.tsx b/src/components/portal/PortalContent.tsx
index c8a9a6b..d5ec846 100644
--- a/src/components/portal/PortalContent.tsx
+++ b/src/components/portal/PortalContent.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import React from 'react';
 import { createPortal } from 'react-dom';
 
-import { usePortal } from '@/components/portal/usePortal';
+import { usePortal } from '@/components/Portal/usePortal';
 import useContext from '@/hooks/useContext';
 import { composeRefs } from '@/libs/ref';
 import { PositionType } from '@/types/position';
diff --git a/src/components/portal/usePortal.ts b/src/components/portal/usePortal.ts
index ff3817c..ef3b825 100644
--- a/src/components/portal/usePortal.ts
+++ b/src/components/portal/usePortal.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import { PositionType } from '@/types/position';
 
 export const usePortal = ({ modalRef }: { modalRef: React.RefObject<HTMLDivElement> }) => {