diff --git a/src/components/habits.component.tsx b/src/components/habits.component.tsx
index fb7c6b4..a4fe5c1 100644
--- a/src/components/habits.component.tsx
+++ b/src/components/habits.component.tsx
@@ -6,8 +6,7 @@ import {
 } from "$components/buttons.component";
 import { FormField } from "$components/fields.component";
 import {
-  Notification,
-  notificationListId,
+  Notification
 } from "$components/notifications.component";
 import { LimitPaginationRadio } from "$components/pagination.component";
 import { Habit } from "$db/models";
@@ -17,13 +16,13 @@ import clsx from "clsx";
 export type HabitsProps = { habits: Habit[] };
 
 export function CreateHabitForm() {
-  const targetId = "habit-list";
+  const targetId = "habit-container";
   const createHabitErrorMessageId = "create-habit-error";
   const createHabitFormRef = "create-habit-form";
   return (
     <form
       hx-post="/api/habits"
-      hx-swap={`afterbegin`}
+      hx-swap={`outerHTML`}
       hx-target={`#${targetId}`}
       hx-target-4xx={`#${createHabitErrorMessageId}`}
       hx-target-5xx={`#${createHabitErrorMessageId}`}
@@ -68,7 +67,7 @@ export type EditHabitProps = {
   title: Habit["title"];
   description: Habit["description"];
   modalRef: string;
-};
+}
 export function EditHabitForm({
   title,
   description,
@@ -223,9 +222,6 @@ export function HabitItem({
     itemId: item._id?.toString() ?? "",
     tooltipInformation: "double click on this block to switch on deletion mode",
   };
-  if (restProps["x-notification"]) {
-    habitItemNotificationData.xNotification = restProps["x-notification"];
-  }
 
   return (
     <li
diff --git a/src/controllers/api/habits.api.controller.tsx b/src/controllers/api/habits.api.controller.tsx
index ca32b84..894888a 100644
--- a/src/controllers/api/habits.api.controller.tsx
+++ b/src/controllers/api/habits.api.controller.tsx
@@ -93,7 +93,8 @@ export const habitIdApiController = new Hono<{ Variables: AppVariables }>()
 
       return html(
         <>
-          <span x-init={`
+          <span
+            x-init={`
               $notify(${JSON.stringify(notification)})
               $el.remove();
             `}
@@ -149,8 +150,11 @@ export const habitIdApiController = new Hono<{ Variables: AppVariables }>()
     ),
     async ({ html, req }) => {
       const { date, id } = req.valid("param");
-      const updatedExistingHabit = await habitService.updateDateInHistory(id, date);
-      
+      const updatedExistingHabit = await habitService.updateDateInHistory(
+        id,
+        date
+      );
+
       return html(
         <HabitHistoryItem
           habit={updatedExistingHabit}
@@ -214,15 +218,12 @@ export const habitApiController = new Hono<{ Variables: AppVariables }>()
         return text("Please select another color than black", 400);
       }
 
-      const [createdHabit, habitsCount] = await executeHandlerForSessionUser(
+      const createdHabit = await executeHandlerForSessionUser(
         async (user) =>
-          Promise.all([
-            habitService.create({
-              ...body,
-              userId: user.id,
-            }),
-            habitService.count(user.id),
-          ]),
+          habitService.create({
+            ...body,
+            userId: user.id,
+          }),
         sessionUser
       );
 
@@ -230,19 +231,49 @@ export const habitApiController = new Hono<{ Variables: AppVariables }>()
         res.headers.append("HX-Reswap", "innerHTML");
         return text("An error occured", 500);
       }
-      if (habitsCount === 0) {
-        res.headers.append("HX-Reswap", "outerHTML");
-        return html(<HabitList habits={[createdHabit]} />, 201);
-      }
+
+      const notification: Notification = {
+        type: "success",
+        message: "Habit created successfully",
+      };
+
+      // Refetch new habit list
+      const url = getURL(req);
+      const { limit, page, search } = getPaginationQueries(url);
+      const [habits, count] = await executeHandlerForSessionUser(
+        async (user) =>
+          search
+            ? await habitService.findManyWithCountByTitle(
+                search,
+                user.id,
+                page > 1 ? page * limit : limit
+              )
+            : await habitService.findManyWithCountByUserId(
+                user.id,
+                page > 1 ? page * limit : limit
+              ),
+        sessionUser
+      );
+
       return html(
-        <HabitItem
-          item={createdHabit}
-          x-notification={{
-            type: "success",
-            message: "Habit created successfully",
-          }}
-        />,
-        201
+        <>
+          <span
+            x-init={`
+              $notify(${JSON.stringify(notification)})
+              $el.remove();
+            `}
+          />
+          {habits.length || search ? (
+            <HabitContainer
+              count={count}
+              habits={habits}
+              limit={limit}
+              searchValue={search}
+            />
+          ) : (
+            <NoHabits />
+          )}
+        </>
       );
     }
   )
@@ -358,56 +389,56 @@ export const habitApiController = new Hono<{ Variables: AppVariables }>()
       />
     );
   })
-.delete(
-  "/bulk",
-  zValidator("query", z.object({ items: z.array(z.string()) })),
-  async ({ req, html, get }) => {
-    const { items } = req.valid("query");
-    const deletedResults = await habitService.deleteBulkIds(items);
-    const notification: Notification = {
-      type: "success",
-      message: `${deletedResults.deletedCount} selected habits deleted successfully`,
-    };
-    
-    // Refetch new habit list
-    const url = getURL(req);
-    const { limit, page, search } = getPaginationQueries(url);
-    const sessionUser = get("sessionUser");
-    const [habits, count] = await executeHandlerForSessionUser(
-      async (user) =>
-        search
-          ? await habitService.findManyWithCountByTitle(
-              search,
-              user.id,
-              page > 1 ? page * limit : limit
-            )
-          : await habitService.findManyWithCountByUserId(
-              user.id,
-              page > 1 ? page * limit : limit
-            ),
-      sessionUser
-    );
+  .delete(
+    "/bulk",
+    zValidator("query", z.object({ items: z.array(z.string()) })),
+    async ({ req, html, get }) => {
+      const { items } = req.valid("query");
+      const deletedResults = await habitService.deleteBulkIds(items);
+      const notification: Notification = {
+        type: "success",
+        message: `${deletedResults.deletedCount} selected habits deleted successfully`,
+      };
 
-    return html(
-      <>
-        <span
-          x-init={`
+      // Refetch new habit list
+      const url = getURL(req);
+      const { limit, page, search } = getPaginationQueries(url);
+      const sessionUser = get("sessionUser");
+      const [habits, count] = await executeHandlerForSessionUser(
+        async (user) =>
+          search
+            ? await habitService.findManyWithCountByTitle(
+                search,
+                user.id,
+                page > 1 ? page * limit : limit
+              )
+            : await habitService.findManyWithCountByUserId(
+                user.id,
+                page > 1 ? page * limit : limit
+              ),
+        sessionUser
+      );
+
+      return html(
+        <>
+          <span
+            x-init={`
               $notify(${JSON.stringify(notification)})
               $el.remove();
             `}
-        />
-        {habits.length || search ? (
-          <HabitContainer
-            count={count}
-            habits={habits}
-            limit={limit}
-            searchValue={search}
           />
-        ) : (
-          <NoHabits />
-        )}
-      </>
-    );
-  }
-)
-.route("/:id", habitIdApiController);
+          {habits.length || search ? (
+            <HabitContainer
+              count={count}
+              habits={habits}
+              limit={limit}
+              searchValue={search}
+            />
+          ) : (
+            <NoHabits />
+          )}
+        </>
+      );
+    }
+  )
+  .route("/:id", habitIdApiController);
diff --git a/src/script/alpine/data/habit/habit-item.js b/src/script/alpine/data/habit/habit-item.js
index 01f9736..6c50f40 100644
--- a/src/script/alpine/data/habit/habit-item.js
+++ b/src/script/alpine/data/habit/habit-item.js
@@ -17,19 +17,12 @@
  * @param {Object} props
  * @param {string} props.tooltipInformation
  * @param {string} props.itemId
- * @param {import("$components/notifications.component").Notification} [props.xNotification]
  * @return {import("alpinejs").AlpineComponent<HabitItemData>}
  */
-export function habitItemData({itemId, tooltipInformation, xNotification}) {
+export function habitItemData({itemId, tooltipInformation}) {
   return {
     itemId,
-    xNotification,
     tooltipInformation,
-    init() {
-      if (this.xNotification) {
-        this.$notify(this.xNotification);
-      }
-    },
     addItemToSet() {
       this.itemIdsToDelete.add(this.itemId);
     },