diff --git a/frontend/src/components/pages/services/index.tsx b/frontend/src/components/pages/services/index.tsx
index 9284c33..c1df5f3 100644
--- a/frontend/src/components/pages/services/index.tsx
+++ b/frontend/src/components/pages/services/index.tsx
@@ -14,6 +14,7 @@ import {
 } from "../../../generated/graphql";
 import { queryClient } from "../../../main";
 import { useFormik } from "formik";
+import Header1 from "../../atoms/Header1";
 
 const ServicesPage = () => {
   const [toggleCreate, setToggleCreate] = useState(false);
@@ -89,8 +90,8 @@ const ServicesPage = () => {
 
   return (
     <DashboardLayout>
-      <Container className="px-2">
-        <h1 className="text-3xl font-bold mt-12 mb-8">Services</h1>
+      <Container>
+        <Header1>Services</Header1>
         <div className="mb-4 flex items-end justify-between">
           <TextField
             label="Search"