diff --git a/.editorconfig b/.editorconfig
index d23736ab..c8778a93 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,7 +7,7 @@ end_of_line = lf
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
-max_line_length = 92
+max_line_length = 100
 
 [*.py]
 indent_size = 4
diff --git a/frontend/src/lib/components/modals/_components/base_modal.svelte b/frontend/src/lib/components/modals/_components/base_modal.svelte
new file mode 100644
index 00000000..308514ff
--- /dev/null
+++ b/frontend/src/lib/components/modals/_components/base_modal.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Toaster from '$lib/components/ui/toast/toaster.svelte';
+  import { cn } from '$lib/functions/classnames';
+  import type { Nullable } from '$lib/types/shared';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet<[]>;
+    open: boolean;
+    onclose: () => void;
+    class?: string;
+  };
+
+  let { children, open, onclose, class: klass }: Props = $props();
+
+  let dialog_el = $state<Nullable<HTMLDialogElement>>(null);
+
+  $effect(() => {
+    if (open) {
+      dialog_el?.showModal();
+    } else {
+      dialog_el?.close();
+    }
+  });
+</script>
+
+<dialog bind:this={dialog_el} class="modal modal-bottom px-4 sm:modal-middle" {onclose}>
+  <div class={cn(klass, 'modal-box duration-300')}>
+    {@render children()}
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+  <!-- render toasts -->
+  <!-- https://stackoverflow.com/questions/77099074/layering-toast-alerts-above-dialog-modal -->
+  <!-- https://github.com/saadeghi/daisyui/issues/2858#issuecomment-2010246981 -->
+  <Toaster />
+</dialog>
diff --git a/frontend/src/lib/components/modals/_utils/history.svelte.ts b/frontend/src/lib/components/modals/_utils/history.svelte.ts
new file mode 100644
index 00000000..3f0f38e8
--- /dev/null
+++ b/frontend/src/lib/components/modals/_utils/history.svelte.ts
@@ -0,0 +1,45 @@
+import type { FormConfig } from '../types';
+
+export function create_form_history<T extends FormConfig>(initial_form: keyof T) {
+  let history = $state([initial_form]);
+
+  function go_to_form(form: keyof T) {
+    // if navigating to a form thats already in the history stack,
+    // truncate the stack upto the most recent occurance of that form
+    // (avoiding duplicate entiries)
+    const form_index = history.findIndex((entry) => entry === form);
+    if (form_index > -1) {
+      // if exists
+      history = history.slice(0, form_index + 1);
+    } else {
+      // otherwise, push current form to prev_form_history
+      history.push(form);
+    }
+    return history.at(-1);
+  }
+
+  function go_back() {
+    if (history.length > 1) {
+      // remove current form from history stack
+      history.pop();
+    }
+    return history.at(-1);
+  }
+
+  function go_next(forms: Record<keyof T, unknown>) {
+    const current_form_index = Object.keys(forms).indexOf(history.at(-1) as string);
+    const next_index = current_form_index + 1;
+    if (next_index < Object.keys(forms).length) {
+      go_to_form(Object.keys(forms)[next_index] as keyof T);
+    }
+  }
+
+  return {
+    get history() {
+      return history;
+    },
+    go_to_form,
+    go_back,
+    go_next
+  };
+}
diff --git a/frontend/src/lib/components/modals/auth/index.svelte b/frontend/src/lib/components/modals/auth/index.svelte
deleted file mode 100644
index b286ce43..00000000
--- a/frontend/src/lib/components/modals/auth/index.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-  import { createModalsStore } from '$lib/stores/modals.svelte';
-  import type { Nullable } from '$lib/types/shared';
-  import forms from './forms';
-  import type { FormsState, FormSubmitData, Forms } from './types';
-
-  let _form = $state<Forms>('join');
-  let prev_form_history = $state<Forms[]>(['join']);
-
-  let current_form = $derived(forms[_form]);
-
-  const initial_forms_state = Object.fromEntries(
-    Object.keys(forms).map((key) => [key, {}])
-  ) as FormsState;
-
-  let forms_state = $state<FormsState>(initial_forms_state);
-
-  function update_forms_state(form: Forms, data: FormSubmitData) {
-    forms_state[form] = { ...forms_state[form], ...data };
-  }
-
-  function goto_form(form: Forms) {
-    // if navigating to a form thats already in the history stack,
-    // truncate the stack upto the most recent occurance of that form
-    // (avoiding duplicate entiries)
-    const form_index = prev_form_history.findIndex((entry) => entry === form);
-    if (form_index > -1) {
-      // if exists
-      prev_form_history = prev_form_history.slice(0, form_index + 1);
-    } else {
-      // otherwise, push current form to prev_form_history
-      prev_form_history.push(form);
-    }
-    // update form
-    _form = form;
-  }
-
-  function handle_go_back() {
-    // remove current form from history stack
-    prev_form_history.pop();
-    // set current_form to previous form in history stack (the one before removed form)
-    const prev_form = prev_form_history.at(-1);
-    if (prev_form) {
-      _form = prev_form;
-    }
-  }
-
-  let dialog_element = $state<Nullable<HTMLDialogElement>>(null);
-
-  const modalsStore = createModalsStore();
-
-  $effect(() => {
-    if (modalsStore.state.get('auth')) {
-      dialog_element?.showModal();
-    } else {
-      dialog_element?.close();
-    }
-  });
-</script>
-
-<dialog
-  class="modal modal-bottom sm:modal-middle"
-  bind:this={dialog_element}
-  onclose={() => modalsStore.close('auth')}
->
-  <div class="modal-box !w-[25rem]">
-    {#await current_form then Form}
-      <Form.default {forms_state} {update_forms_state} {goto_form} />
-    {/await}
-    {#if prev_form_history.length > 1}
-      <div
-        class="tooltip tooltip-right absolute left-2.5 top-2.5 flex before:capitalize"
-        data-tip={prev_form_history.at(-2)?.replace('_', ' ')}
-      >
-        <button
-          class="btn btn-square btn-circle btn-ghost btn-sm"
-          aria-label="Close modal"
-          onclick={handle_go_back}
-        >
-          <coreicons-shape-arrow class="size-5" variant="left"></coreicons-shape-arrow>
-        </button>
-      </div>
-    {/if}
-    <button
-      class="btn btn-square btn-circle btn-ghost btn-sm absolute right-2.5 top-2.5"
-      aria-label="Close modal"
-      onclick={() => dialog_element?.close()}
-    >
-      <coreicons-shape-x class="size-5" variant="no-border"></coreicons-shape-x>
-    </button>
-  </div>
-  <form method="dialog" class="modal-backdrop bg-base-300/25">
-    <button>close</button>
-  </form>
-</dialog>
diff --git a/frontend/src/lib/components/modals/auth/types.ts b/frontend/src/lib/components/modals/auth/types.ts
deleted file mode 100644
index bbe31eb0..00000000
--- a/frontend/src/lib/components/modals/auth/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import forms from './forms';
-
-export type FormSubmitData = {
-  [key: string]: string | number | undefined | FormSubmitData | Array<unknown>;
-};
-
-export type Forms = keyof typeof forms;
-
-export type FormsState = { [K in Forms]: object };
-
-export type FormProps = {
-  forms_state: FormsState;
-  update_forms_state: (form: Forms, data: FormSubmitData) => void;
-  goto_form: (form: Forms) => void;
-};
diff --git a/frontend/src/lib/components/modals/index.svelte b/frontend/src/lib/components/modals/index.svelte
index 89843999..f2c784af 100644
--- a/frontend/src/lib/components/modals/index.svelte
+++ b/frontend/src/lib/components/modals/index.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  import AuthModal from './auth/index.svelte';
+  import ModalAuth from './modal_auth/index.svelte';
+  import ModalCreateCommunity from './modal_create_community/index.svelte';
 </script>
 
-<AuthModal />
+<ModalAuth />
+<ModalCreateCommunity />
diff --git a/frontend/src/lib/components/modals/auth/forms/index.ts b/frontend/src/lib/components/modals/modal_auth/forms/index.ts
similarity index 100%
rename from frontend/src/lib/components/modals/auth/forms/index.ts
rename to frontend/src/lib/components/modals/modal_auth/forms/index.ts
diff --git a/frontend/src/lib/components/modals/auth/forms/join.svelte b/frontend/src/lib/components/modals/modal_auth/forms/join.svelte
similarity index 97%
rename from frontend/src/lib/components/modals/auth/forms/join.svelte
rename to frontend/src/lib/components/modals/modal_auth/forms/join.svelte
index 3a790dce..7570bb40 100644
--- a/frontend/src/lib/components/modals/auth/forms/join.svelte
+++ b/frontend/src/lib/components/modals/modal_auth/forms/join.svelte
@@ -4,11 +4,12 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import { cn } from '$lib/functions/classnames';
-  import type { FormProps } from '../types';
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
   import type { SubmitFunction } from '@sveltejs/kit';
   import type { HTMLInputAttributes } from 'svelte/elements';
 
-  let { update_forms_state, goto_form }: FormProps = $props();
+  let { update_forms_state, goto_form }: FormProps<typeof forms> = $props();
 
   let auth_type = $state<'login' | 'register'>('login');
   let password_type = $state<HTMLInputAttributes['type']>('password');
diff --git a/frontend/src/lib/components/modals/auth/forms/profile_create.svelte b/frontend/src/lib/components/modals/modal_auth/forms/profile_create.svelte
similarity index 94%
rename from frontend/src/lib/components/modals/auth/forms/profile_create.svelte
rename to frontend/src/lib/components/modals/modal_auth/forms/profile_create.svelte
index dd0d31ac..9535d2b7 100644
--- a/frontend/src/lib/components/modals/auth/forms/profile_create.svelte
+++ b/frontend/src/lib/components/modals/modal_auth/forms/profile_create.svelte
@@ -3,10 +3,11 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import { cn } from '$lib/functions/classnames';
-  import type { FormProps } from '../types';
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
   import type { SubmitFunction } from '@sveltejs/kit';
 
-  let { forms_state, update_forms_state, goto_form }: FormProps = $props();
+  let { forms_state, update_forms_state, goto_form }: FormProps<typeof forms> = $props();
 
   let errors = $state<Record<string, string> | undefined>();
   let pending = $state(false);
diff --git a/frontend/src/lib/components/modals/auth/forms/profile_select.svelte b/frontend/src/lib/components/modals/modal_auth/forms/profile_select.svelte
similarity index 89%
rename from frontend/src/lib/components/modals/auth/forms/profile_select.svelte
rename to frontend/src/lib/components/modals/modal_auth/forms/profile_select.svelte
index b9c820e5..13332a00 100644
--- a/frontend/src/lib/components/modals/auth/forms/profile_select.svelte
+++ b/frontend/src/lib/components/modals/modal_auth/forms/profile_select.svelte
@@ -6,14 +6,16 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import Avatar from '$lib/components/ui/avatar.svelte';
+  import { toast } from '$lib/components/ui/toast/toast.svelte';
   import { createModalsStore } from '$lib/stores/modals.svelte';
-  import type { FormProps } from '../types';
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
   import type { SubmitFunction } from '@sveltejs/kit';
   import { onMount } from 'svelte';
 
   type Profile = components['schemas']['Profile'];
 
-  let { update_forms_state, forms_state, goto_form }: FormProps = $props();
+  let { update_forms_state, forms_state, goto_form }: FormProps<typeof forms> = $props();
 
   let pending = $state(false);
   let status_text = $state<string | null>(null);
@@ -26,10 +28,11 @@
     pending = true;
     status_text = 'Setting up profile...';
 
-    return async () => {
+    return async ({ formData }) => {
       // re-run load functions and close this modal
       await invalidateAll();
       modalsStore.close('auth');
+      toast.push({ message: `Logged in as u/${String(formData.get('profile_username'))}` });
 
       pending = false;
       status_text = null;
@@ -88,6 +91,7 @@
     {#each profiles as profile}
       <form method="POST" action="/settings/profile?/select" use:enhance={handle_submit}>
         <input type="hidden" name="profile_id" value={profile.id} />
+        <input type="hidden" name="profile_username" value={profile.username} />
         <button type="submit" class="group flex flex-col items-center justify-center gap-2.5">
           <Avatar
             class="size-20 rounded-2xl outline outline-offset-4 outline-neutral"
diff --git a/frontend/src/lib/components/modals/modal_auth/index.svelte b/frontend/src/lib/components/modals/modal_auth/index.svelte
new file mode 100644
index 00000000..eae3145e
--- /dev/null
+++ b/frontend/src/lib/components/modals/modal_auth/index.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { createModalsStore } from '$lib/stores/modals.svelte';
+  import type { Nullable } from '$lib/types/shared';
+  import BaseModal from '../_components/base_modal.svelte';
+  import { create_form_history } from '../_utils/history.svelte';
+  import type { FormsState, FormSubmitData, Forms } from '../types';
+  import forms from './forms';
+
+  type AuthForms = Forms<typeof forms>;
+  type AuthFormsState = FormsState<typeof forms>;
+
+  const modalsStore = createModalsStore();
+
+  const form_history = create_form_history<typeof forms>('join');
+  let form = $derived(forms[form_history.history.at(-1) ?? 'join']);
+
+  const initial_forms_state = Object.fromEntries(
+    Object.keys(forms).map((key) => [key, {}])
+  ) as AuthFormsState;
+
+  let forms_state = $state<AuthFormsState>(initial_forms_state);
+
+  function update_forms_state(form: AuthForms, data: FormSubmitData) {
+    forms_state[form] = { ...forms_state[form], ...data };
+  }
+
+  function goto_form(form: AuthForms) {
+    form_history.go_to_form(form);
+  }
+
+  function handle_go_back() {
+    form_history.go_back();
+  }
+
+  function handle_modal_close() {
+    modalsStore.close('auth');
+  }
+</script>
+
+<BaseModal
+  open={modalsStore.state.get('auth') === true}
+  onclose={handle_modal_close}
+  class="max-w-[25rem] md:max-w-[25rem]"
+>
+  {#await form then Form}
+    <Form.default {forms_state} {update_forms_state} {goto_form} />
+  {/await}
+  {#if form_history.history.length > 1}
+    <div
+      class="tooltip tooltip-right absolute left-2.5 top-2.5 flex before:capitalize"
+      data-tip={form_history.history.at(-2)?.replace('_', ' ')}
+    >
+      <button
+        class="btn btn-square btn-circle btn-ghost btn-sm"
+        aria-label="Close modal"
+        onclick={handle_go_back}
+      >
+        <coreicons-shape-arrow class="size-5" variant="left"></coreicons-shape-arrow>
+      </button>
+    </div>
+  {/if}
+  <button
+    class="btn btn-square btn-circle btn-ghost btn-sm absolute right-2.5 top-2.5"
+    aria-label="Close modal"
+    onclick={handle_modal_close}
+  >
+    <coreicons-shape-x class="size-5" variant="no-border"></coreicons-shape-x>
+  </button>
+</BaseModal>
diff --git a/frontend/src/lib/components/modals/modal_create_community/forms/index.ts b/frontend/src/lib/components/modals/modal_create_community/forms/index.ts
new file mode 100644
index 00000000..1ec110ad
--- /dev/null
+++ b/frontend/src/lib/components/modals/modal_create_community/forms/index.ts
@@ -0,0 +1,6 @@
+const forms = {
+  introduction: import('./introduction.svelte'),
+  topics: import('./topics.svelte')
+};
+
+export default forms;
diff --git a/frontend/src/lib/components/modals/modal_create_community/forms/introduction.svelte b/frontend/src/lib/components/modals/modal_create_community/forms/introduction.svelte
new file mode 100644
index 00000000..84d2557d
--- /dev/null
+++ b/frontend/src/lib/components/modals/modal_create_community/forms/introduction.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import Avatar from '$lib/components/ui/avatar.svelte';
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
+  import { onDestroy } from 'svelte';
+
+  let { update_forms_state, forms_state }: FormProps<typeof forms> = $props();
+
+  let name = $state((forms_state.introduction as { name: string }).name ?? '');
+  let description = $state((forms_state.introduction as { description: string }).description ?? '');
+
+  onDestroy(() => {
+    update_forms_state('introduction', {
+      name,
+      description
+    });
+  });
+</script>
+
+<div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-2">
+    <h3 class="text-xl font-semibold text-info">Introduce your community</h3>
+    <p class="text-sm">
+      Give your community a name and a description that reflects its purpose and vibe. This will
+      help others discover and connect with it.
+    </p>
+  </div>
+  <form class="flex grid grid-cols-2">
+    <div class="flex-1">
+      <label class="form-control">
+        <div class="label pt-0">
+          <span class="label-text font-medium">Community name*</span>
+        </div>
+        <label class="input input-bordered flex items-center gap-2 text-sm font-medium">
+          q/
+          <input
+            bind:value={name}
+            type="text"
+            class="grow border-none p-0 text-sm focus:ring-0"
+            placeholder="eg: quibble"
+            oninput={() => (name = name.replace(/\s/g, ''))}
+            maxlength={25}
+          />
+        </label>
+        <div class="label">
+          <span class="label-text-alt flex items-center gap-1.5">
+            <coreicons-shape-info class="size-4"></coreicons-shape-info>
+            Name it unique and cool!
+          </span>
+          <span class="label-text-alt">{name.length}/25</span>
+        </div>
+      </label>
+      <label class="form-control">
+        <div class="label pt-0">
+          <span class="label-text font-medium">Description*</span>
+        </div>
+        <textarea
+          bind:value={description}
+          class="textarea textarea-bordered h-40 leading-normal"
+          placeholder="Tell something nice about your community..."
+          maxlength={255}
+        ></textarea>
+        <div class="label">
+          <span class="label-text-alt flex items-center gap-1.5">
+            <coreicons-shape-info class="size-4"></coreicons-shape-info>
+            A quick cool introduction!
+          </span>
+          <span class="label-text-alt">{description.length}/255</span>
+        </div>
+      </label>
+    </div>
+    <div class="flex-1 p-7">
+      <div class="overflow-hidden rounded-2xl bg-neutral shadow-xl">
+        <div class="h-10 bg-base-content"></div>
+        <div class="flex flex-col gap-4 p-4">
+          <div class="flex items-center gap-4">
+            <Avatar class="size-14 flex-shrink-0 !bg-base-content/25" />
+            <div class="flex flex-col">
+              <span class="break-all text-lg font-semibold text-info"
+                >q/{name || 'communityname'}</span
+              >
+              <div class="flex items-center gap-2">
+                <span class="text-xs">1 member</span>
+                <coreicons-shape-circle class="size-0.5" variant="filled"></coreicons-shape-circle>
+                <span class="text-xs">1 online</span>
+              </div>
+            </div>
+          </div>
+          <p class="whitespace-pre-line text-sm">
+            {description || 'Community description'}
+          </p>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
diff --git a/frontend/src/lib/components/modals/modal_create_community/forms/topics.svelte b/frontend/src/lib/components/modals/modal_create_community/forms/topics.svelte
new file mode 100644
index 00000000..ed0eb35f
--- /dev/null
+++ b/frontend/src/lib/components/modals/modal_create_community/forms/topics.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
+
+  let { forms_state }: FormProps<typeof forms> = $props();
+
+  $effect(() => {
+    console.log(forms_state);
+  });
+</script>
+
+<div>
+  <div class="flex flex-col gap-2">
+    <h3 class="text-xl font-semibold text-info">Choose topics</h3>
+    <p class="text-sm">
+      Select up to 3 topics that represent what your community is about. This will help people with
+      similar interests discover it.
+    </p>
+  </div>
+</div>
diff --git a/frontend/src/lib/components/modals/modal_create_community/index.svelte b/frontend/src/lib/components/modals/modal_create_community/index.svelte
new file mode 100644
index 00000000..f7f9e0f0
--- /dev/null
+++ b/frontend/src/lib/components/modals/modal_create_community/index.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { createModalsStore } from '$lib/stores/modals.svelte';
+  import BaseModal from '../_components/base_modal.svelte';
+  import { create_form_history } from '../_utils/history.svelte';
+  import type { FormsState, FormSubmitData, Forms } from '../types';
+  import forms from './forms';
+
+  type CCForms = Forms<typeof forms>;
+  type CCFormsState = FormsState<typeof forms>;
+
+  const modalsStore = createModalsStore();
+
+  const form_history = create_form_history<typeof forms>('introduction');
+  let form = $derived(forms[form_history.history.at(-1) ?? 'introduction']);
+
+  const form_keys = Object.keys(forms);
+  const form_step = $derived.by<'start' | 'middle' | 'end'>(() => {
+    const current_form_index = form_keys.indexOf(form_history.history.at(-1) as string);
+    if (current_form_index === 0) {
+      return 'start';
+    } else if (current_form_index === form_keys.length - 1) {
+      return 'end';
+    } else {
+      return 'middle';
+    }
+  });
+
+  const initial_forms_state = Object.fromEntries(
+    Object.keys(forms).map((key) => [key, {}])
+  ) as CCFormsState;
+
+  let forms_state = $state<CCFormsState>(initial_forms_state);
+
+  function update_forms_state(form: CCForms, data: FormSubmitData) {
+    forms_state[form] = { ...forms_state[form], ...data };
+  }
+
+  function goto_form(form: CCForms) {
+    form_history.go_to_form(form);
+  }
+
+  function handle_modal_close() {
+    modalsStore.close('create_community');
+  }
+</script>
+
+<BaseModal
+  open={modalsStore.state.get('create_community') === true}
+  onclose={handle_modal_close}
+  class="max-w-[25rem] md:max-w-[45rem]"
+>
+  {#await form then Form}
+    <Form.default {forms_state} {update_forms_state} {goto_form} />
+  {/await}
+  <button
+    class="btn btn-square btn-circle btn-ghost btn-sm absolute right-2.5 top-2.5"
+    aria-label="Close modal"
+    onclick={handle_modal_close}
+  >
+    <coreicons-shape-x class="size-5" variant="no-border"></coreicons-shape-x>
+  </button>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      {#each Object.keys(forms) as _form}
+        {@const is_active = _form === form_history.history.at(-1)}
+        <button
+          class="size-2 rounded-full bg-base-content"
+          class:opacity-50={!is_active}
+          aria-label="Go to
+          {_form}"
+          onclick={() => goto_form(_form as CCForms)}
+        ></button>
+      {/each}
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        class="btn btn-ghost"
+        onclick={() => {
+          if (form_step === 'start') {
+            handle_modal_close();
+          } else {
+            form_history.go_back();
+          }
+        }}
+      >
+        {form_step === 'start' ? 'Cancel' : 'Back'}
+      </button>
+      <button
+        class="btn btn-primary"
+        onclick={() => {
+          if (form_step === 'end') {
+            // community creation logic goes here
+          } else {
+            form_history.go_next(forms);
+          }
+        }}
+      >
+        {form_step === 'end' ? 'Create' : 'Next'}
+        <coreicons-shape-arrow variant="right" class="size-4"></coreicons-shape-arrow>
+      </button>
+    </div>
+  </div>
+</BaseModal>
diff --git a/frontend/src/lib/components/modals/modal_create_post/.gitkeep b/frontend/src/lib/components/modals/modal_create_post/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/lib/components/modals/types.ts b/frontend/src/lib/components/modals/types.ts
new file mode 100644
index 00000000..d8e4c600
--- /dev/null
+++ b/frontend/src/lib/components/modals/types.ts
@@ -0,0 +1,15 @@
+export type FormConfig = Record<string, Promise<typeof import('*.svelte')>>;
+
+export type Forms<Config extends FormConfig> = keyof Config;
+
+export type FormsState<Config extends FormConfig> = { [K in keyof Config]: object };
+
+export type FormProps<Config extends FormConfig> = {
+  forms_state: FormsState<Config>;
+  update_forms_state: (form: keyof Config, data: FormSubmitData) => void;
+  goto_form: (form: keyof Config) => void;
+};
+
+export type FormSubmitData = {
+  [key: string]: unknown | FormSubmitData | Array<unknown>;
+};
diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index 81520081..39192fa9 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -1,9 +1,23 @@
 <script lang="ts">
   import QuibbleIcon from '$lib/components/icons/logos/quibble.svelte';
   import Avatar from '$lib/components/ui/avatar.svelte';
+  import { toast } from '$lib/components/ui/toast/toast.svelte';
+  import { createAuthStore } from '$lib/stores/auth.svelte';
+  import { createModalsStore } from '$lib/stores/modals.svelte';
   import { createSidebarStore } from '$lib/stores/sidebar.svelte';
 
-  const sidebarStore = createSidebarStore();
+  const sidebarStore = createSidebarStore(),
+    modalsStore = createModalsStore(),
+    authStore = createAuthStore();
+
+  function handle_create_a_communiy_btn_click() {
+    if (authStore.state.is_authenticated) {
+      modalsStore.open('create_community');
+    } else {
+      modalsStore.open('auth');
+      toast.push({ message: 'Please login to do this action!' });
+    }
+  }
 </script>
 
 <div
@@ -19,9 +33,12 @@
       />
       <coreicons-shape-filter class="size-3"></coreicons-shape-filter>
     </label>
-    <button class="flex items-center gap-2">
+    <button
+      class="btn btn-ghost btn-xs flex w-max items-center gap-2"
+      onclick={handle_create_a_communiy_btn_click}
+    >
       <coreicons-shape-plus variant="circle" class="size-4"></coreicons-shape-plus>
-      <span class="text-xs font-medium">Create Community</span>
+      <span class="text-xs font-medium">Create a community</span>
     </button>
   </div>
   <div class="collapse gap-2 overflow-visible rounded-none">
diff --git a/frontend/src/lib/components/ui/toast/toast.svelte.ts b/frontend/src/lib/components/ui/toast/toast.svelte.ts
new file mode 100644
index 00000000..2e89773f
--- /dev/null
+++ b/frontend/src/lib/components/ui/toast/toast.svelte.ts
@@ -0,0 +1,42 @@
+import { generate_id } from '$lib/functions/generate_id';
+
+type ToastIn = {
+  message: string;
+  class?: string;
+  duration?: number;
+};
+
+type Toast = ToastIn & {
+  id: string;
+  timer: NodeJS.Timeout;
+};
+
+let toasts = $state<Toast[]>([]);
+
+export const toast = {
+  get toasts() {
+    return toasts;
+  },
+  push: (toast: ToastIn) => {
+    const exists = toasts.find((t) => t.message === toast.message);
+    if (exists !== undefined) return exists.id;
+
+    const new_toast: Toast = {
+      ...toast,
+      id: generate_id(),
+      timer: setTimeout(() => {
+        toasts = toasts.filter((t) => t.id !== new_toast.id);
+      }, toast.duration ?? 3000)
+    };
+
+    toasts.push(new_toast);
+    return new_toast.id;
+  },
+  dismiss: (id: string) => {
+    const toast = toasts.find((t) => t.id === id);
+    if (toast === undefined) return;
+
+    clearTimeout(toast.timer);
+    toasts = toasts.filter((t) => t.id !== id);
+  }
+};
diff --git a/frontend/src/lib/components/ui/toast/toaster.svelte b/frontend/src/lib/components/ui/toast/toaster.svelte
new file mode 100644
index 00000000..b09444d9
--- /dev/null
+++ b/frontend/src/lib/components/ui/toast/toaster.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { toast } from './toast.svelte';
+</script>
+
+<div class="toast z-[999]">
+  {#each toast.toasts as t (t.id)}
+    <div class="alert gap-2 rounded-2xl border-none bg-base-100 p-2.5 pl-3">
+      <coreicons-shape-info class="size-4"></coreicons-shape-info>
+      <span class="text-sm">{t.message}</span>
+      <button
+        class="btn btn-square btn-ghost size-6 rounded-lg"
+        aria-label="Close toast"
+        onclick={() => toast.dismiss(t.id)}
+      >
+        <coreicons-shape-x variant="no-border" class="size-4"></coreicons-shape-x>
+      </button>
+    </div>
+  {/each}
+</div>
diff --git a/frontend/src/lib/functions/generate_id.ts b/frontend/src/lib/functions/generate_id.ts
new file mode 100644
index 00000000..4307284e
--- /dev/null
+++ b/frontend/src/lib/functions/generate_id.ts
@@ -0,0 +1,8 @@
+/**
+ * @summary Generate random string id with given segments and length
+ * @params
+ * segments: string = 3
+ * length: string = 4
+ */
+export const generate_id = (segments = 3, length = 4) =>
+  Array.from({ length: segments }, () => Math.random().toString(16).slice(-length)).join('');
diff --git a/frontend/src/lib/stores/modals.svelte.ts b/frontend/src/lib/stores/modals.svelte.ts
index ccf3a881..225ad0f6 100644
--- a/frontend/src/lib/stores/modals.svelte.ts
+++ b/frontend/src/lib/stores/modals.svelte.ts
@@ -1,6 +1,6 @@
 import { SvelteMap } from 'svelte/reactivity';
 
-const modals_map = ['auth'] as const;
+const modals_map = ['auth', 'create_community'] as const;
 type Modals = (typeof modals_map)[number];
 
 const modals = $state(new SvelteMap<Modals, boolean>(modals_map.map((item) => [item, false])));
diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte
index 0b1be8ff..90f214be 100644
--- a/frontend/src/routes/(app)/+page.svelte
+++ b/frontend/src/routes/(app)/+page.svelte
@@ -2,6 +2,7 @@
   import Post from '$lib/components/post.svelte';
   import PostsHeader from '$lib/components/posts_header.svelte';
   import Avatar from '$lib/components/ui/avatar.svelte';
+  import { toast } from '$lib/components/ui/toast/toast.svelte';
   import Quibble_404_2 from '$lib/components/vectors/quibble_404_2.svelte';
   import { createAuthStore } from '$lib/stores/auth.svelte';
   import { createModalsStore } from '$lib/stores/modals.svelte';
@@ -20,6 +21,7 @@
       // open post create modal
     } else {
       modalsStore.open('auth');
+      toast.push({ message: 'Please login to do this action!' });
     }
   }
 </script>
@@ -46,13 +48,8 @@
             aria-label="404 action"
             onclick={handle_404_action_btn_click}
           >
-            {#if authStore.state.is_authenticated}
-              <coreicons-shape-plus variant="no-border" class="size-4"></coreicons-shape-plus>
-              <span>Create</span>
-            {:else}
-              <coreicons-shape-log-in class="size-4"></coreicons-shape-log-in>
-              <span>Join in</span>
-            {/if}
+            <coreicons-shape-plus variant="no-border" class="size-4"></coreicons-shape-plus>
+            <span>Create</span>
           </button>
         </div>
       </div>
diff --git a/frontend/src/routes/(app)/settings/profile/+page.server.ts b/frontend/src/routes/(app)/settings/profile/+page.server.ts
index af9b358c..3c94f98d 100644
--- a/frontend/src/routes/(app)/settings/profile/+page.server.ts
+++ b/frontend/src/routes/(app)/settings/profile/+page.server.ts
@@ -40,7 +40,7 @@ export const actions = {
   },
   select: async ({ request, cookies }) => {
     const form_data = await request.formData();
-    const profile_id = form_data.get('profile_id') as string;
+    const profile_id = String(form_data.get('profile_id'));
 
     cookies.set('auth_user_profile_id', profile_id, {
       httpOnly: true,
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 74668d8d..f84b881f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
   import Header from '$lib/components/header.svelte';
   import Modals from '$lib/components/modals/index.svelte';
   import Sidebar from '$lib/components/sidebar.svelte';
+  import Toaster from '$lib/components/ui/toast/toaster.svelte';
   import { cn } from '$lib/functions/classnames';
   import { createAuthStore } from '$lib/stores/auth.svelte';
   import '../styles/app.css';
@@ -36,6 +37,9 @@
   };
 </script>
 
+<!-- render toasts -->
+<!-- https://stackoverflow.com/questions/77099074/layering-toast-alerts-above-dialog-modal -->
+<Toaster />
 <!-- render available models -->
 <Modals />
 <main class="flex h-dvh w-dvw flex-col font-sans">
diff --git a/frontend/src/styles/smiz.css b/frontend/src/styles/smiz.css
index e7bf3aca..bdbc8683 100644
--- a/frontend/src/styles/smiz.css
+++ b/frontend/src/styles/smiz.css
@@ -78,11 +78,13 @@
 }
 
 [data-smiz-modal-overlay='hidden'] {
-  background-color: oklch(var(--b3) / 0);
+  /* background-color: oklch(var(--b3) / 0); */
+  background-color: #0000;
 }
 
 [data-smiz-modal-overlay='visible'] {
-  background-color: oklch(var(--b3) / 0.55);
+  /* background-color: oklch(var(--b3) / 0.55); */
+  background-color: #0006;
 }
 
 [data-smiz-modal-content] {