diff --git a/FE/src/components/feature/detail/userAttendModal/UserAttendModal.container.tsx b/FE/src/components/feature/detail/userAttendModal/UserAttendModal.container.tsx
deleted file mode 100644
index db995889..00000000
--- a/FE/src/components/feature/detail/userAttendModal/UserAttendModal.container.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import classNames from "classnames";
-import Image from "next/image";
-import { ErrorBoundary } from "react-error-boundary";
-import LoginModal from "./LoginModal";
-import UserAttendModal from "./UserAttendModal";
-import ErrorFallbackNoIcon from "@/components/common/error/ErrorFallbackNoIcon";
-import useModal from "@/hooks/useModal";
-import useOutsideRef from "@/hooks/useOutsideRef";
-
-interface UserAttendModalProps {
-  programId: number;
-  isLoggedIn: boolean;
-}
-
-const UserAttendModalContainer = ({
-  programId,
-  isLoggedIn,
-}: UserAttendModalProps) => {
-  const { isOpen, openModal, closeModal } = useModal();
-  const modalRef = useOutsideRef(closeModal);
-
-  const modalStyle = classNames(
-    "fixed left-0 z-10 flex h-60 w-full flex-col items-center gap-5 rounded-t-3xl border-t-2 bg-background shadow-2xl transition-all duration-500",
-    {
-      "bottom-0": isOpen,
-      "-bottom-[8rem]": !isOpen,
-    },
-  );
-
-  const handleOpenModal = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    isOpen ? closeModal() : openModal();
-  };
-
-  return (
-    <button
-      ref={modalRef}
-      className={modalStyle}
-      onClick={openModal}
-      type="button"
-    >
-      <div onClick={handleOpenModal} className="pb-1 pt-3">
-        <Image
-          src="/icons/line.svg"
-          alt="line"
-          width={38}
-          height={6}
-          style={{ width: 38, height: 6 }}
-        />
-      </div>
-      {isLoggedIn ? (
-        <ErrorBoundary FallbackComponent={ErrorFallbackNoIcon}>
-          <UserAttendModal programId={programId} />
-        </ErrorBoundary>
-      ) : (
-        <LoginModal />
-      )}
-    </button>
-  );
-};
-export default UserAttendModalContainer;
diff --git a/FE/src/components/icons/index.tsx b/FE/src/components/icons/index.tsx
index 8cd3d0fe..9624b51d 100644
--- a/FE/src/components/icons/index.tsx
+++ b/FE/src/components/icons/index.tsx
@@ -2,3 +2,4 @@ export { default as IntroLogo } from "./items/IntroLogo";
 export { default as Saly } from "./items/Saly";
 export { default as EeosAdminLogo } from "./items/EeosAdminLogo";
 export { default as ArrowRight } from "./items/ArrowRight";
+export { default as Line } from "./items/Line";
diff --git a/FE/src/components/icons/items/Line.tsx b/FE/src/components/icons/items/Line.tsx
new file mode 100644
index 00000000..caf28706
--- /dev/null
+++ b/FE/src/components/icons/items/Line.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image";
+
+const Line = () => {
+  return (
+    <Image
+      src="/icons/line.svg"
+      alt="line"
+      width={38}
+      height={6}
+      style={{ width: 38, height: 6 }}
+    />
+  );
+};
+
+export default Line;