diff --git a/frontend/src/components/application/QuestionTitle/QuestionTitle.tsx b/frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
index 726bd2131..4df9e0d6c 100644
--- a/frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
+++ b/frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
@@ -1,7 +1,7 @@
 import * as Styled from './QuestionTitle.styles';
 import { APPLICATION_FORM } from '@/constants/APPLICATION_FORM';
-import useIsMobile from '@/hooks/useIsMobile';
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import useDevice from '@/hooks/useDevice';
+import { useLayoutEffect, useRef } from 'react';
 
 interface QuestionTitleProps {
   id: number;
@@ -18,7 +18,7 @@ const QuestionTitle = ({
   mode,
   onTitleChange,
 }: QuestionTitleProps) => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useDevice();
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   useLayoutEffect(() => {
diff --git a/frontend/src/hooks/useIsMobile.ts b/frontend/src/hooks/useIsMobile.ts
deleted file mode 100644
index a5ff666bb..000000000
--- a/frontend/src/hooks/useIsMobile.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState(window.innerWidth <= 500);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 500);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return isMobile;
-};
-
-export default useIsMobile;