diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx
index a6d50468..225b078a 100644
--- a/app/frontend/src/hooks/useRouter.tsx
+++ b/app/frontend/src/hooks/useRouter.tsx
@@ -8,6 +8,7 @@ import {
   MogacoPostPage,
   Calendar,
   MapLayout,
+  Groups,
 } from '@/pages';
 
 export const useRouter = () =>
@@ -34,6 +35,10 @@ export const useRouter = () =>
           path: 'profile',
           element: <>프로필</>,
         },
+        {
+          path: 'groups',
+          element: <Groups />,
+        },
       ],
     },
     {
diff --git a/app/frontend/src/pages/Groups/index.css.ts b/app/frontend/src/pages/Groups/index.css.ts
new file mode 100644
index 00000000..eb4a7a03
--- /dev/null
+++ b/app/frontend/src/pages/Groups/index.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  maxWidth: '72rem',
+  margin: '0 auto',
+});
diff --git a/app/frontend/src/pages/Groups/index.tsx b/app/frontend/src/pages/Groups/index.tsx
new file mode 100644
index 00000000..3f3a8515
--- /dev/null
+++ b/app/frontend/src/pages/Groups/index.tsx
@@ -0,0 +1,11 @@
+import { sansBold36 } from '@/styles/font.css';
+
+import * as styles from './index.css';
+
+export function Groups() {
+  return (
+    <div className={styles.container}>
+      <h1 className={sansBold36}>그룹 리스트</h1>
+    </div>
+  );
+}
diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts
index 01e603cc..3a313a03 100644
--- a/app/frontend/src/pages/index.ts
+++ b/app/frontend/src/pages/index.ts
@@ -1,4 +1,5 @@
 export * from './Calendar';
+export * from './Groups';
 export * from './Main';
 export * from './Map';
 export * from './Mogaco';
diff --git a/app/frontend/src/styles/font.css.ts b/app/frontend/src/styles/font.css.ts
index 75cd5810..e63cb149 100644
--- a/app/frontend/src/styles/font.css.ts
+++ b/app/frontend/src/styles/font.css.ts
@@ -66,6 +66,13 @@ export const sansBold24 = style([
   },
 ]);
 
+export const sansBold36 = style([
+  sansBold,
+  {
+    fontSize: '3.6rem',
+  },
+]);
+
 export const sansRegular12 = style([
   sansRegular,
   {