diff --git a/src/pages/calendar.module.scss b/src/components/calendar.module.scss
similarity index 100%
rename from src/pages/calendar.module.scss
rename to src/components/calendar.module.scss
diff --git a/src/pages/calendar.tsx b/src/components/calendar.tsx
similarity index 97%
rename from src/pages/calendar.tsx
rename to src/components/calendar.tsx
index 4277793..044300b 100644
--- a/src/pages/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -1,5 +1,3 @@
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
 import { cn } from "@/utils/class-merge";
 import { BackwardIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
@@ -221,7 +219,7 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
   };
 
   return (
-    <div className={`flex flex-col ${className}`}>
+    <div className={`flex w-full flex-col ${className}`}>
       <div className="mb-4 flex items-center justify-between px-2">
         <button
           onClick={handlePrevMonth}
@@ -266,4 +264,4 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
   );
 };
 
-export default withTitle(UrlsTitle.CALENDAR, BigCalendar);
+export default BigCalendar;
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 8c58da4..b86ea91 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -14,7 +14,7 @@ const ProfilePage: FunctionComponent = () => {
         <Router>
           <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
           <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
-          <Route path="/calendar" component={lazy(() => import("./calendar"))} />
+          <Route path="/calendar" component={lazy(() => import("./profile_calendar"))} />
           <Route
             default
             component={() => {
diff --git a/src/pages/profile_calendar.tsx b/src/pages/profile_calendar.tsx
new file mode 100644
index 0000000..7d505d6
--- /dev/null
+++ b/src/pages/profile_calendar.tsx
@@ -0,0 +1,17 @@
+import BigCalendar from "@/components/calendar";
+import { withTitle } from "@/constructors/Component";
+import { UrlsTitle } from "@/enums/urls";
+import { FunctionComponent } from "preact";
+
+const ProfileCalendar: FunctionComponent = () => {
+  const onDateSelect = (date: Date) => {
+    console.log(date);
+  };
+  return (
+    <div class="flex w-full flex-col items-center">
+      <BigCalendar onDateSelect={onDateSelect} />
+    </div>
+  );
+};
+
+export default withTitle(UrlsTitle.CALENDAR, ProfileCalendar);