diff --git a/src/features/common/routes/HelpDesk/index.tsx b/src/features/common/routes/HelpDesk/index.tsx
index 5b51fbe6..b26c30c5 100644
--- a/src/features/common/routes/HelpDesk/index.tsx
+++ b/src/features/common/routes/HelpDesk/index.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { CaretLeft } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
@@ -8,6 +7,7 @@ import Header from "@/components/Layout/Header";
 
 import Form from "./Form";
 import Select from "./Select";
+import { HelpDeskContainer, Slide } from "./style";
 import Success from "./Success";
 
 export default function HelpDesk() {
@@ -65,18 +65,3 @@ export default function HelpDesk() {
     </>
   );
 }
-
-const HelpDeskContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  padding-bottom: 66px;
-  overflow: hidden;
-`;
-
-const Slide = styled.div<{ translateX?: number }>`
-  width: 200%;
-  height: calc(100% - 60px);
-  display: flex;
-  transform: ${({ translateX = 0 }) => `translateX(${translateX}%)`};
-  transition: all 0.3s;
-`;
diff --git a/src/features/common/routes/HelpDesk/style.ts b/src/features/common/routes/HelpDesk/style.ts
new file mode 100644
index 00000000..d49f7961
--- /dev/null
+++ b/src/features/common/routes/HelpDesk/style.ts
@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+
+export const HelpDeskContainer = styled.div`
+  width: 100%;
+  height: calc(100dvh - 66px);
+  overflow: hidden;
+`;
+
+export const Slide = styled.div<{ translateX?: number }>`
+  width: 200%;
+  height: calc(100% - 60px);
+  display: flex;
+  transform: ${({ translateX = 0 }) => `translateX(${translateX}%)`};
+  transition: all 0.3s;
+`;