diff --git a/.changeset/blue-pumpkins-complain.md b/.changeset/blue-pumpkins-complain.md
new file mode 100644
index 0000000..3863d2f
--- /dev/null
+++ b/.changeset/blue-pumpkins-complain.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add input and select components
diff --git a/package-lock.json b/package-lock.json
index 5da55f1..2501c14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,16 @@
 {
   "name": "@babylonlabs-io/bbn-core-ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@babylonlabs-io/bbn-core-ui",
-      "version": "0.2.0",
+      "version": "0.3.1",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "react-popper": "^2.3.0"
+      },
       "devDependencies": {
         "@changesets/cli": "^2.27.9",
         "@chromatic-com/storybook": "^3.2.2",
@@ -1819,6 +1823,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
@@ -6959,6 +6973,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
@@ -6975,6 +6995,21 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -8173,6 +8208,15 @@
       "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
       "dev": true
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
diff --git a/package.json b/package.json
index 705aeec..9d33b23 100644
--- a/package.json
+++ b/package.json
@@ -85,5 +85,9 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "react-popper": "^2.3.0"
   }
 }
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
index c0b384c..43fbedc 100644
--- a/src/components/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -5,7 +5,7 @@ import { Dialog, DialogFooter, DialogBody, DialogHeader } from "./index";
 
 import { ScrollLocker } from "@/context/Dialog.context";
 import { Button } from "@/components/Button";
-import { Checkbox } from "@/components/Input";
+import { Checkbox } from "@/components/Form";
 import { Text } from "@/components/Text";
 import { Heading } from "@/index";
 
diff --git a/src/components/Dialog/MobileDialog.stories.tsx b/src/components/Dialog/MobileDialog.stories.tsx
index 0c20f44..1cb70c0 100644
--- a/src/components/Dialog/MobileDialog.stories.tsx
+++ b/src/components/Dialog/MobileDialog.stories.tsx
@@ -5,7 +5,7 @@ import { MobileDialog, DialogFooter, DialogBody, DialogHeader } from "./index";
 
 import { ScrollLocker } from "@/context/Dialog.context";
 import { Button } from "@/components/Button";
-import { Checkbox } from "@/components/Input";
+import { Checkbox } from "@/components/Form";
 import { Text } from "@/components/Text";
 
 const meta: Meta<typeof MobileDialog> = {
diff --git a/src/components/Input/Checkbox.stories.tsx b/src/components/Form/Checkbox.stories.tsx
similarity index 100%
rename from src/components/Input/Checkbox.stories.tsx
rename to src/components/Form/Checkbox.stories.tsx
diff --git a/src/components/Input/Checkbox.tsx b/src/components/Form/Checkbox.tsx
similarity index 100%
rename from src/components/Input/Checkbox.tsx
rename to src/components/Form/Checkbox.tsx
diff --git a/src/components/Form/Input.css b/src/components/Form/Input.css
new file mode 100644
index 0000000..0b540dd
--- /dev/null
+++ b/src/components/Form/Input.css
@@ -0,0 +1,55 @@
+.bbn-input {
+  @apply relative flex flex-col;
+
+  &-wrapper {
+    @apply flex items-center rounded border border-primary-light/20 bg-secondary-contrast px-4 py-2 text-primary-light transition-colors;
+
+    &:focus-within {
+      @apply border-primary-light;
+    }
+
+    &.bbn-input-error {
+      @apply border-error-main;
+    }
+
+    &.bbn-input-warning {
+      @apply border-warning-main;
+    }
+
+    &.bbn-input-success {
+      @apply border-success-main;
+    }
+
+    &.bbn-input-disabled {
+      @apply opacity-50 pointer-events-none;
+    }
+  }
+
+  &-field {
+    @apply w-full bg-transparent text-sm outline-none placeholder:text-primary-light/50;
+  }
+
+  &-suffix {
+    @apply ml-2 flex items-center text-primary-light/50;
+  }
+
+  &-prefix {
+    @apply mr-2 flex items-center text-primary-light/50;
+  }
+
+  &-state-text {
+    @apply mt-1 text-sm;
+  }
+
+  &-state-text-error {
+    @apply text-error-main;
+  }
+
+  &-state-text-warning {
+    @apply text-warning-main;
+  }
+
+  &-state-text-success {
+    @apply text-success-main;
+  }
+} 
\ No newline at end of file
diff --git a/src/components/Form/Input.stories.tsx b/src/components/Form/Input.stories.tsx
new file mode 100644
index 0000000..98f26bd
--- /dev/null
+++ b/src/components/Form/Input.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RiSearchLine } from "react-icons/ri";
+import { useState } from "react";
+
+import { Loader } from "@/components/Loader";
+
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Default input",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    placeholder: "Input with error",
+    state: "error",
+    stateText: "This field is required",
+  },
+};
+
+export const WithSuffix: Story = {
+  args: {
+    placeholder: "Search...",
+    suffix: <RiSearchLine size={20} />,
+  },
+};
+
+export const WithPrefix: Story = {
+  args: {
+    placeholder: "Amount",
+    prefix: "$",
+  },
+};
+
+export const LoadingWithInteraction: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSearch = () => {
+      setIsLoading(true);
+      setTimeout(() => setIsLoading(false), 2000);
+    };
+
+    return (
+      <Input
+        placeholder="Click search to see loading"
+        suffix={
+          <button onClick={handleSearch} disabled={isLoading} className="h-5 w-5">
+            {isLoading ? <Loader size={20} /> : <RiSearchLine size={20} />}
+          </button>
+        }
+        disabled={isLoading}
+      />
+    );
+  },
+};
diff --git a/src/components/Form/Input.tsx b/src/components/Form/Input.tsx
new file mode 100644
index 0000000..a1deabb
--- /dev/null
+++ b/src/components/Form/Input.tsx
@@ -0,0 +1,33 @@
+import { forwardRef, type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
+import { twJoin } from "tailwind-merge";
+import "./Input.css";
+
+export interface InputProps
+  extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "prefix" | "suffix"> {
+  className?: string;
+  wrapperClassName?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  disabled?: boolean;
+  state?: "default" | "error" | "warning";
+  stateText?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, wrapperClassName, prefix, suffix, disabled = false, state = "default", stateText, ...props }, ref) => {
+    return (
+      <div className={twJoin("bbn-input", wrapperClassName)}>
+        <div className={twJoin("bbn-input-wrapper", disabled && "bbn-input-disabled", `bbn-input-${state}`)}>
+          {prefix && <div className="bbn-input-prefix">{prefix}</div>}
+          <input ref={ref} className={twJoin("bbn-input-field", className)} disabled={disabled} {...props} />
+          {suffix && <div className="bbn-input-suffix">{suffix}</div>}
+        </div>
+        {stateText && (
+          <span className={twJoin("bbn-input-state-text", `bbn-input-state-text-${state}`)}>{stateText}</span>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";
diff --git a/src/components/Input/Radio.stories.tsx b/src/components/Form/Radio.stories.tsx
similarity index 100%
rename from src/components/Input/Radio.stories.tsx
rename to src/components/Form/Radio.stories.tsx
diff --git a/src/components/Input/Radio.tsx b/src/components/Form/Radio.tsx
similarity index 100%
rename from src/components/Input/Radio.tsx
rename to src/components/Form/Radio.tsx
diff --git a/src/components/Form/Select.css b/src/components/Form/Select.css
new file mode 100644
index 0000000..8e840f0
--- /dev/null
+++ b/src/components/Form/Select.css
@@ -0,0 +1,36 @@
+.bbn-select {
+  @apply relative flex w-full cursor-pointer items-center justify-between rounded border border-primary-light bg-secondary-contrast px-4 py-2 text-sm text-primary-light outline-none transition-all;
+  width: var(--select-width, auto);
+
+  &:focus-visible {
+    @apply border-primary-light ring-1 ring-primary-light;
+  }
+
+  &-icon {
+    @apply ml-2 text-primary-light transition-transform;
+
+    &-open {
+      @apply rotate-180;
+    }
+  }
+
+  &-menu {
+    @apply z-50 max-h-60 overflow-auto rounded border border-primary-light/20 bg-secondary-contrast py-1 shadow-lg;
+  }
+
+  &-option {
+    @apply cursor-pointer px-4 py-3 text-sm text-primary-light transition-colors hover:bg-primary-light/10;
+
+    &-selected {
+      @apply border-primary-light bg-primary-light/10;
+    }
+
+    &-highlighted {
+      @apply bg-primary-light/20;
+    }
+  }
+
+  &-disabled {
+    @apply pointer-events-none cursor-not-allowed opacity-50;
+  }
+}
diff --git a/src/components/Form/Select.stories.tsx b/src/components/Form/Select.stories.tsx
new file mode 100644
index 0000000..ef60b6a
--- /dev/null
+++ b/src/components/Form/Select.stories.tsx
@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Select } from "./Select";
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+  { value: "pending", label: "Pending" },
+];
+
+export const Default: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+    onSelect: console.log,
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    defaultValue: "active",
+    options,
+    placeholder: "Select status",
+  },
+};
+
+export const CenterAligned: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+  },
+  render: (args) => (
+    <div className="flex w-full justify-center gap-1">
+      <Select {...args} />
+    </div>
+  ),
+};
+
+export const LeftAligned: Story = {
+  args: {
+    placeholder: "Select status",
+    options,
+  },
+  render: (args) => (
+    <div className="flex w-full">
+      <Select {...args} />
+    </div>
+  ),
+};
+
+export const RightAligned: Story = {
+  args: {
+    placeholder: "Select status",
+    options,
+  },
+  render: (args) => (
+    <div className="flex w-full justify-between gap-1">
+      <div className="w-1/2">Title</div>
+      <Select {...args} />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+    disabled: true,
+  },
+};
+
+export const CustomSelectedDisplay: Story = {
+  args: {
+    options,
+    placeholder: "Select status",
+    renderSelectedOption: (option) => `Showing ${option.value}`,
+  },
+};
diff --git a/src/components/Form/Select.tsx b/src/components/Form/Select.tsx
new file mode 100644
index 0000000..f79d356
--- /dev/null
+++ b/src/components/Form/Select.tsx
@@ -0,0 +1,150 @@
+import {
+  type ReactNode,
+  type CSSProperties,
+  forwardRef,
+  useCallback,
+  useRef,
+  useMemo,
+  useImperativeHandle,
+} from "react";
+import { twJoin } from "tailwind-merge";
+import { RiArrowDownSLine } from "react-icons/ri";
+
+import { Popover } from "@/components/Popover";
+import { useControlledState } from "@/hooks/useControlledState";
+import "./Select.css";
+import { useResizeObserver } from "@/hooks/useResizeObserver";
+
+export type Value = string | number;
+
+export interface Option {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  defaultValue?: Value;
+  value?: Value;
+  placeholder?: string;
+  options?: Option[];
+  style?: CSSProperties;
+  className?: string;
+  optionClassName?: string;
+  popoverClassName?: string;
+  onSelect?: (value: Value) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  renderSelectedOption?: (option: Option) => ReactNode;
+}
+
+const defaultOptionRenderer = (option: Option) => option.label;
+
+export const Select = forwardRef<HTMLDivElement, SelectProps>(
+  (
+    {
+      disabled,
+      className,
+      value,
+      defaultValue,
+      placeholder = "Select option",
+      open,
+      defaultOpen,
+      options = [],
+      optionClassName,
+      popoverClassName,
+      onOpen,
+      onSelect,
+      onClose,
+      renderSelectedOption = defaultOptionRenderer,
+      ...props
+    },
+    ref,
+  ) => {
+    const anchorEl = useRef<HTMLDivElement>(null);
+    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => anchorEl.current, []);
+    const { width } = useResizeObserver(anchorEl.current);
+
+    const [isOpen, setIsOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen,
+      onStateChange: (open) => void (open ? onOpen?.() : onClose?.()),
+    });
+
+    const [selectedValue, setSelectedValue] = useControlledState({
+      value,
+      defaultValue,
+      onStateChange: onSelect,
+    });
+
+    const selectedOption = useMemo(
+      () => options.find((option) => option.value === selectedValue),
+      [options, selectedValue],
+    );
+
+    const handleSelect = useCallback(
+      (option: Option) => {
+        setSelectedValue(option.value);
+        setIsOpen(false);
+      },
+      [setSelectedValue, setIsOpen],
+    );
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+    }, [setIsOpen]);
+
+    const handleClick = useCallback(() => {
+      if (disabled) return;
+
+      setIsOpen(!isOpen);
+    }, [isOpen, disabled, setIsOpen]);
+
+    return (
+      <>
+        <div
+          ref={anchorEl}
+          className={twJoin("bbn-select", disabled && "bbn-select-disabled", className)}
+          onClick={handleClick}
+          tabIndex={disabled ? -1 : 0}
+          {...props}
+        >
+          <span>{selectedOption ? renderSelectedOption(selectedOption) : placeholder}</span>
+          <RiArrowDownSLine className={twJoin("bbn-select-icon", isOpen && "bbn-select-icon-open")} size={20} />
+        </div>
+
+        <Popover
+          anchorEl={anchorEl.current}
+          className={twJoin("bbn-select-menu custom-scrollbar", popoverClassName)}
+          open={isOpen && !disabled}
+          onClickOutside={handleClose}
+          offset={[0, 4]} // set offset to 4px on y axis
+          placement="bottom-start"
+          style={{ width }}
+        >
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className={twJoin(
+                "bbn-select-option",
+                selectedOption?.value === option.value && "bbn-select-option-selected",
+                optionClassName,
+              )}
+              onClick={() => handleSelect(option)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </Popover>
+      </>
+    );
+  },
+);
+
+Select.displayName = "Select";
diff --git a/src/components/Input/components/Toggle.css b/src/components/Form/components/Toggle.css
similarity index 100%
rename from src/components/Input/components/Toggle.css
rename to src/components/Form/components/Toggle.css
diff --git a/src/components/Input/components/Toggle.tsx b/src/components/Form/components/Toggle.tsx
similarity index 100%
rename from src/components/Input/components/Toggle.tsx
rename to src/components/Form/components/Toggle.tsx
diff --git a/src/components/Input/index.tsx b/src/components/Form/index.tsx
similarity index 50%
rename from src/components/Input/index.tsx
rename to src/components/Form/index.tsx
index 2146854..e80664c 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Form/index.tsx
@@ -1,2 +1,4 @@
 export * from "./Checkbox";
 export * from "./Radio";
+export * from "./Select";
+export * from "./Input";
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 7a6d207..bdb7f32 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -10,7 +10,7 @@ export function Loader({ size = 40, className }: LoaderProps) {
   return (
     <span className={twMerge("bbn-loader text-current", className)} style={{ width: size, height: size }}>
       <svg viewBox="22 22 44 44">
-        <circle cx="44" cy="44" r="20.2" fill="none" stroke="currentColor" stroke-width="3.6" />
+        <circle cx="44" cy="44" r="20.2" fill="none" stroke="currentColor" strokeWidth="3.6" />
       </svg>
     </span>
   );
diff --git a/src/components/Popover/Popover.css b/src/components/Popover/Popover.css
new file mode 100644
index 0000000..64d58b7
--- /dev/null
+++ b/src/components/Popover/Popover.css
@@ -0,0 +1,3 @@
+.bbn-popover {
+  @apply z-50;
+}
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
new file mode 100644
index 0000000..41840c2
--- /dev/null
+++ b/src/components/Popover/Popover.stories.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Text } from "@/components/Text";
+import { Button } from "@/components/Button";
+
+import { Popover } from "./Popover";
+
+const meta: Meta<typeof Popover> = {
+  component: Popover,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placement: "bottom-start",
+    children: <Text variant="body1">The content of the Popover</Text>,
+  },
+  render: (props) => {
+    const [open, setOpen] = useState(props.open);
+    const [anchorEl, setAnchorEl] = useState<Element | null>();
+
+    return (
+      <>
+        <Button
+          ref={setAnchorEl}
+          onClick={() => {
+            setOpen((state) => !state);
+          }}
+        >
+          Show popover
+        </Button>
+        <Popover
+          {...props}
+          open={open}
+          anchorEl={anchorEl}
+          onClickOutside={() => {
+            setOpen(false);
+          }}
+        />
+      </>
+    );
+  },
+};
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 0000000..58fe40d
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,45 @@
+import { type PropsWithChildren, type CSSProperties, useState } from "react";
+import { twJoin } from "tailwind-merge";
+import { usePopper } from "react-popper";
+import { type Placement } from "@popperjs/core";
+
+import { Portal } from "@/components/Portal";
+import { useClickOutside } from "@/hooks/useClickOutside";
+import "./Popover.css";
+
+export interface PopoverProps extends PropsWithChildren {
+  open?: boolean;
+  className?: string;
+  placement?: Placement;
+  anchorEl?: Element | null;
+  offset?: [number, number];
+  onClickOutside?: () => void;
+  style?: CSSProperties;
+}
+
+export function Popover({
+  open = false,
+  className,
+  anchorEl,
+  placement = "bottom-start",
+  offset = [0, 0],
+  children,
+  style,
+  onClickOutside,
+}: PopoverProps) {
+  const [tooltipRef, setTooltipRef] = useState<HTMLElement | null>(null);
+  const { styles } = usePopper(anchorEl, tooltipRef, {
+    placement,
+    modifiers: [{ name: "offset", options: { offset } }],
+  });
+
+  useClickOutside([tooltipRef, anchorEl], onClickOutside, { enabled: open });
+
+  return (
+    <Portal mounted={open}>
+      <div ref={setTooltipRef} style={{ ...styles.popper, ...style }} className={twJoin("bbn-popover", className)}>
+        {children}
+      </div>
+    </Portal>
+  );
+}
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
new file mode 100644
index 0000000..72f124f
--- /dev/null
+++ b/src/components/Popover/index.ts
@@ -0,0 +1 @@
+export * from "./Popover";
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 0000000..02dd472
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useMemoizedArray } from "./useMemoizedArray";
+
+type TargetElement<E> = E | null | undefined;
+
+interface Options {
+  enabled?: boolean;
+}
+
+export function useClickOutside<E extends Element>(
+  targetElement: TargetElement<E> | TargetElement<E>[],
+  handler: () => void = () => null,
+  { enabled = true }: Options = {},
+) {
+  const targetElements = Array.isArray(targetElement) ? targetElement : [targetElement];
+  const memoizedElements = useMemoizedArray(targetElements);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (enabled && memoizedElements.every((element) => !element?.contains(event.target as Node))) {
+        handler();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [memoizedElements, enabled, handler]);
+}
diff --git a/src/hooks/useMemoizedArray.ts b/src/hooks/useMemoizedArray.ts
new file mode 100644
index 0000000..9f9f8c6
--- /dev/null
+++ b/src/hooks/useMemoizedArray.ts
@@ -0,0 +1,29 @@
+import { useRef } from "react";
+
+function areArraysEqual<V>(arrA: V[], arrB: V[]) {
+  if (arrA === arrB) {
+    return true;
+  }
+
+  if (arrA.length !== arrB.length) {
+    return false;
+  }
+
+  for (let i = 0; i < arrA.length; i++) {
+    if (arrA[i] !== arrB[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function useMemoizedArray<V>(array: V[]) {
+  const ref = useRef(array);
+
+  if (!areArraysEqual(ref.current, array)) {
+    ref.current = array;
+  }
+
+  return ref.current;
+}
diff --git a/src/hooks/usePopperUpdate.ts b/src/hooks/usePopperUpdate.ts
new file mode 100644
index 0000000..ebf3c71
--- /dev/null
+++ b/src/hooks/usePopperUpdate.ts
@@ -0,0 +1,25 @@
+import { State } from "@popperjs/core";
+import { useEffect } from "react";
+
+interface UsePopperUpdateProps {
+  isOpen: boolean;
+  triggerRef: React.RefObject<HTMLElement>;
+  popperElement: HTMLElement | null;
+  update: (() => Promise<Partial<State>>) | null;
+}
+
+export const usePopperUpdate = ({ isOpen, triggerRef, popperElement, update }: UsePopperUpdateProps) => {
+  useEffect(() => {
+    if (isOpen && triggerRef.current && popperElement) {
+      const updatePopper = () => {
+        requestAnimationFrame(() => {
+          update?.();
+        });
+      };
+      updatePopper();
+
+      window.addEventListener("resize", updatePopper);
+      return () => window.removeEventListener("resize", updatePopper);
+    }
+  }, [isOpen, popperElement, update, triggerRef]);
+};
diff --git a/src/hooks/useResizeObserver.ts b/src/hooks/useResizeObserver.ts
new file mode 100644
index 0000000..020fb39
--- /dev/null
+++ b/src/hooks/useResizeObserver.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+interface Dimentions {
+  width: number;
+  height: number;
+}
+
+export function useResizeObserver<E extends HTMLElement>(element?: E | null) {
+  const [dimentions, setDimentions] = useState<Dimentions>({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!element) {
+      setDimentions({ width: 0, height: 0 });
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      setDimentions({
+        width: entry.target.clientWidth,
+        height: entry.target.clientHeight,
+      });
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.unobserve(element);
+    };
+  }, [element]);
+
+  return dimentions;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 9276014..8b736da 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,11 +5,12 @@ export * from "./components/Text";
 export * from "./components/Heading";
 export * from "./components/Button";
 export * from "./components/Avatar";
-export * from "./components/Input";
+export * from "./components/Form";
 export * from "./components/Dialog";
 export * from "./components/Chip";
 export * from "./components/Portal";
 export * from "./components/Loader";
 export * from "./components/Table";
+export * from "./components/Popover";
 
 export { ScrollLocker } from "@/context/Dialog.context";
diff --git a/tailwind.config.js b/tailwind.config.js
index 3277619..eac0177 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ export default {
   theme: {
     colors: {
       current: "currentColor",
+      transparent: "transparent",
       primary: {
         DEFAULT: "#000000DE",
         main: "#042F40",