diff --git a/src/drag-modal/index.tsx b/src/drag-modal/index.tsx
index 0a767c2..242d1c7 100644
--- a/src/drag-modal/index.tsx
+++ b/src/drag-modal/index.tsx
@@ -1,7 +1,8 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Draggable from 'react-draggable';
 import { clsxMerge } from '../clsx';
 import { Resizable } from 're-resizable';
+import { X } from 'lucide-react';
 
 type DragModalProps = {
   title?: React.ReactNode;
@@ -63,3 +64,40 @@ export const DragModal = (props: DragModalProps) => {
     </Draggable>
   );
 };
+
+type DragModalTitleProps = {
+  title?: React.ReactNode;
+  className?: string;
+  onClose?: () => void;
+  children?: React.ReactNode;
+};
+export const DragModalTitle = (props: DragModalTitleProps) => {
+  return (
+    <div className={clsxMerge('flex flex-row items-center justify-between', props.className)}>
+      <div className='text-sm font-medium text-gray-700'>
+        {props.title}
+        {props.children}
+      </div>
+      <X className='w-4 h-4 text-gray-500 cursor-pointer' onClick={props.onClose} />
+    </div>
+  );
+};
+
+export const getComputedHeight = () => {
+  const height = window.innerHeight;
+  const width = window.innerWidth;
+  return { height, width };
+};
+
+export const useComputedHeight = () => {
+  const [computedHeight, setComputedHeight] = useState({
+    height: 0,
+    width: 0,
+  });
+  useEffect(() => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    setComputedHeight({ height, width });
+  }, []);
+  return computedHeight;
+};
diff --git a/src/select/TagsInput.tsx b/src/select/TagsInput.tsx
index 3151116..fbfab4d 100644
--- a/src/select/TagsInput.tsx
+++ b/src/select/TagsInput.tsx
@@ -8,8 +8,9 @@ type TagsInputProps = {
   placeholder?: string;
   label?: any;
   showLabel?: boolean;
+  options?: string[];
 };
-export const TagsInput = ({ value, onChange, placeholder = '', label = '', showLabel = false }: TagsInputProps) => {
+export const TagsInput = ({ value, onChange, placeholder = '', label = '', showLabel = false, options = [] }: TagsInputProps) => {
   const [tags, setTags] = useState<string[]>(value);
   useEffect(() => {
     setTags(value);
@@ -21,7 +22,7 @@ export const TagsInput = ({ value, onChange, placeholder = '', label = '', showL
     <Autocomplete
       multiple
       freeSolo
-      options={[]}
+      options={options || []}
       value={tags}
       onChange={(event, newValue) => {
         // setTags(newValue as string[]);
diff --git a/src/theme/Provider.tsx b/src/theme/Provider.tsx
new file mode 100644
index 0000000..da8f8c8
--- /dev/null
+++ b/src/theme/Provider.tsx
@@ -0,0 +1,13 @@
+import { ToastContainer } from 'react-toastify';
+
+type ToastProviderProps = {
+  children?: React.ReactNode;
+};
+export const ToastProvider = ({ children }: ToastProviderProps) => {
+  return (
+    <>
+      {children}
+      <ToastContainer />
+    </>
+  );
+};