From 71f5542dcbc9b00e037042eff5e4996d8108f5aa Mon Sep 17 00:00:00 2001
From: Alex Lion <dev@alexandrelion.com>
Date: Tue, 17 Feb 2026 14:54:09 +0100
Subject: [PATCH] Refactor ManagerSettingsComponent to use separate components
 for interaction, presentation, and attendee options

---
 lib/claper_web/live/event_live/manage.ex      |   4 +-
 .../live/event_live/manage.html.heex          |   2 +-
 .../manage_attendees_options_component.ex     | 106 ++++++
 .../manage_audience_responses_component.ex    |  69 ++--
 .../event_live/manage_floating_action_bar.ex  |  75 ++--
 .../manage_interaction_list_component.ex      |  10 +-
 .../manage_interaction_options_component.ex   | 214 ++++++++++++
 .../manage_presentation_options_component.ex  | 159 +++++++++
 .../manage_slide_preview_component.ex         |   8 +-
 .../manage_slide_sidebar_component.ex         |   8 +-
 .../event_live/manageable_post_component.ex   | 168 +++++----
 .../event_live/manager_settings_component.ex  | 325 +-----------------
 12 files changed, 682 insertions(+), 466 deletions(-)
 create mode 100644 lib/claper_web/live/event_live/manage_attendees_options_component.ex
 create mode 100644 lib/claper_web/live/event_live/manage_interaction_options_component.ex
 create mode 100644 lib/claper_web/live/event_live/manage_presentation_options_component.ex

diff --git a/lib/claper_web/live/event_live/manage.ex b/lib/claper_web/live/event_live/manage.ex
index 2b24c36..f54840e 100644
--- a/lib/claper_web/live/event_live/manage.ex
+++ b/lib/claper_web/live/event_live/manage.ex
@@ -1,7 +1,7 @@
 defmodule ClaperWeb.EventLive.Manage do
   use ClaperWeb, :live_view
 
-  alias Claper.{Embeds, Forms, Polls, Presentations, Quizzes}
+  alias Claper.{Embeds, Forms, Polls, Quizzes}
   alias ClaperWeb.Presence
 
   @impl true
@@ -697,7 +697,7 @@ defmodule ClaperWeb.EventLive.Manage do
   end
 
   @impl true
-  def handle_event("delete-form-submit", %{"event-id" => event_id, "id" => id}, socket) do
+  def handle_event("delete-form-submit", %{"event_id" => event_id, "id" => id}, socket) do
     form = Claper.Forms.get_form_submit_by_id!(id)
     {:ok, _} = Claper.Forms.delete_form_submit(event_id, form)
 
diff --git a/lib/claper_web/live/event_live/manage.html.heex b/lib/claper_web/live/event_live/manage.html.heex
index ee08fd3..99c2a95 100644
--- a/lib/claper_web/live/event_live/manage.html.heex
+++ b/lib/claper_web/live/event_live/manage.html.heex
@@ -601,7 +601,7 @@
 
     <!-- Right Sidebar - Settings -->
     <aside
-      class="hidden xl:flex w-80 flex-shrink-0 border-l border-gray-200 bg-white flex-col overflow-hidden"
+      class="hidden xl:flex w-80 flex-shrink-0 flex-col overflow-hidden bg-white"
       data-tg-title={gettext("Settings")}
       data-tg-order="4"
       data-tg-tour={"<p class='mb-3'>#{gettext("Control presentation and attendee settings here.")}</p>"}
diff --git a/lib/claper_web/live/event_live/manage_attendees_options_component.ex b/lib/claper_web/live/event_live/manage_attendees_options_component.ex
new file mode 100644
index 0000000..c2ef641
--- /dev/null
+++ b/lib/claper_web/live/event_live/manage_attendees_options_component.ex
@@ -0,0 +1,106 @@
+defmodule ClaperWeb.EventLive.ManageAttendeesOptionsComponent do
+  @moduledoc false
+  use Phoenix.Component
+  use Gettext, backend: ClaperWeb.Gettext
+
+  def render(assigns) do
+    assigns = assigns |> assign_new(:show_shortcut, fn -> true end)
+
+    ~H"""
+    <div class="flex flex-col gap-2 border border-gray-200 rounded-2xl p-2 bg-white shadow-lg">
+      <div class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 20 20"
+          fill="none"
+          class="shrink-0"
+        >
+          <path
+            d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z"
+            fill="#140553"
+          />
+        </svg>
+        <span class="font-bold text-sm text-[#140553]">{gettext("Attendees Settings")}</span>
+      </div>
+
+      <div class="space-y-2 px-1">
+        <.toggle_row
+          label={if @state.message_reaction_enabled, do: gettext("Disable reactions"), else: gettext("Enable reactions")}
+          checked={@state.message_reaction_enabled}
+          key={:message_reaction_enabled}
+          shortcut={if @create == nil, do: "D", else: nil}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.723.723 0 0 1-.692 0h-.002Z" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+        <.toggle_row
+          label={if @state.show_attendee_count, do: gettext("Hide attendee count"), else: gettext("Show attendee count")}
+          checked={@state.show_attendee_count}
+          key={:show_attendee_count}
+          shortcut={if @create == nil, do: "R", else: nil}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+      </div>
+    </div>
+    """
+  end
+
+  attr :label, :string, required: true
+  attr :checked, :boolean, required: true
+  attr :key, :atom, required: true
+  attr :shortcut, :string, default: nil
+  attr :disabled, :boolean, default: false
+  attr :show_shortcut, :boolean, default: true
+  slot :icon, required: true
+
+  defp toggle_row(assigns) do
+    ~H"""
+    <div class={[
+      "flex items-center gap-2 rounded-full pl-2 pr-3 py-2 overflow-hidden transition-colors",
+      if(@disabled, do: "opacity-50"),
+      if(@checked, do: "bg-[#f3defa] border-b-2 border-primary", else: "bg-white border border-gray-200")
+    ]}>
+      <div class={[
+        "flex items-center justify-center w-8 h-8 rounded-full shrink-0",
+        if(@checked, do: "bg-white text-primary-500", else: "bg-gray-100 text-secondary-500")
+      ]}>
+        {render_slot(@icon)}
+      </div>
+      <span class={["flex-1 text-xs text-gray-700", if(@checked, do: "font-semibold")]}>
+        {@label}
+      </span>
+      <div class="flex items-center gap-x-2 shrink-0">
+        <kbd :if={@show_shortcut && @shortcut} class="kbd kbd-sm">
+          {@shortcut}
+        </kbd>
+        <button
+          phx-click={ClaperWeb.Component.Input.checked(@checked, @key)}
+          disabled={@disabled}
+          phx-value-key={@key}
+          type="button"
+          class={"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed #{if @checked, do: "bg-primary-500", else: "bg-gray-200"}"}
+          role="switch"
+          aria-checked={@checked}
+          phx-key={@shortcut}
+          phx-window-keydown={if @shortcut && not @disabled, do: ClaperWeb.Component.Input.checked(@checked, @key)}
+        >
+          <span class={"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out #{if @checked, do: "translate-x-5", else: "translate-x-0"}"}>
+          </span>
+        </button>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/lib/claper_web/live/event_live/manage_audience_responses_component.ex b/lib/claper_web/live/event_live/manage_audience_responses_component.ex
index bca24a9..328ca91 100644
--- a/lib/claper_web/live/event_live/manage_audience_responses_component.ex
+++ b/lib/claper_web/live/event_live/manage_audience_responses_component.ex
@@ -132,40 +132,25 @@ defmodule ClaperWeb.EventLive.ManageAudienceResponsesComponent do
           </div>
           <div :if={@question_count > 0} class="flex flex-col h-full">
             <div class="px-2 py-2 flex items-center gap-x-2">
-              <button
-                class="px-3 py-1 text-xs rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-x-1"
-                phx-click="sort-questions"
-                phx-value-sort="likes"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                  class="w-3 h-3"
+              <span class="text-xs text-gray-500">{gettext("Sort by:")}</span>
+              <div class="tooltip tooltip-bottom" data-tip={gettext("Show newest questions first")}>
+                <button
+                  class="px-3 py-1 text-xs rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-x-1"
+                  phx-click="sort-questions"
+                  phx-value-sort="date"
                 >
-                  <path d="M2.09 15a1 1 0 0 0 1-1V8a1 1 0 1 0-2 0v6a1 1 0 0 0 1 1ZM5.765 13H4.09V8c.663 0 1.218-.466 1.556-1.037a4.02 4.02 0 0 1 1.358-1.377c.478-.292.907-.706.989-1.26V4.32a9.03 9.03 0 0 0 0-2.642c-.028-.194.048-.394.224-.479A2 2 0 0 1 11.09 3c0 .812-.08 1.605-.235 2.371a.521.521 0 0 0 .502.629h1.733c1.104 0 2.01.898 1.901 1.997a19.831 19.831 0 0 1-1.081 4.788c-.27.747-.998 1.215-1.793 1.215H9.414c-.215 0-.428-.035-.632-.103l-2.384-.794A2.002 2.002 0 0 0 5.765 13Z" />
-                </svg>
-                {gettext("Popularity")}
-              </button>
-              <button
-                class="px-3 py-1 text-xs rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-x-1"
-                phx-click="sort-questions"
-                phx-value-sort="date"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                  class="w-3 h-3"
+                  {gettext("Most recent")}
+                </button>
+              </div>
+              <div class="tooltip tooltip-bottom" data-tip={gettext("Show most voted questions first")}>
+                <button
+                  class="px-3 py-1 text-xs rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-x-1"
+                  phx-click="sort-questions"
+                  phx-value-sort="likes"
                 >
-                  <path
-                    fill-rule="evenodd"
-                    d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                {gettext("Date")}
-              </button>
+                  {gettext("Most popular")}
+                </button>
+              </div>
             </div>
             <div
               id="question-list"
@@ -255,10 +240,7 @@ defmodule ClaperWeb.EventLive.ManageAudienceResponsesComponent do
           >
             <div :for={{id, submission} <- @streams.form_submits} id={id}>
               <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
-                <div class="flex items-center justify-between mb-2">
-                  <span class="text-sm font-medium text-gray-900">
-                    {submission.form.title}
-                  </span>
+                <div class="flex items-center justify-end mb-2">
                   <button
                     phx-click="delete-form-submit"
                     phx-value-id={submission.id}
@@ -270,17 +252,10 @@ defmodule ClaperWeb.EventLive.ManageAudienceResponsesComponent do
                   </button>
                 </div>
                 <div class="flex items-start gap-x-3">
-                  <%= if submission.attendee_identifier do %>
-                    <img
-                      class="h-8 w-8 rounded-full"
-                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{submission.attendee_identifier}"}
-                    />
-                  <% else %>
-                    <img
-                      class="h-8 w-8 rounded-full"
-                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{submission.user_id}"}
-                    />
-                  <% end %>
+                  <div class="avatar avatar-placeholder shrink-0">
+                    <div class="bg-neutral text-neutral-content w-8 rounded-full">
+                    </div>
+                  </div>
                   <div class="flex-1 text-sm text-gray-600">
                     <%= for res <- submission.response do %>
                       <p>
diff --git a/lib/claper_web/live/event_live/manage_floating_action_bar.ex b/lib/claper_web/live/event_live/manage_floating_action_bar.ex
index 770c1a6..81c7123 100644
--- a/lib/claper_web/live/event_live/manage_floating_action_bar.ex
+++ b/lib/claper_web/live/event_live/manage_floating_action_bar.ex
@@ -4,14 +4,16 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
   def render(assigns) do
     ~H"""
     <div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
-      <div class="flex items-center gap-x-1 bg-white rounded-full shadow-xl px-2 py-2 border border-gray-200">
-        <.link
+      <div class="flex items-center gap-2 bg-white rounded-full shadow-lg px-2 py-2 border border-gray-100">
+        <.action_item
           patch={~p"/e/#{@event_code}/manage/add/poll"}
-          class="flex items-center gap-x-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors text-gray-700"
+          title={gettext("Poll")}
+          label={gettext("Polls")}
+          description={gettext("Add a poll to gauge your audience's opinion.")}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 text-primary-500"
+            class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -23,18 +25,17 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
               d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
             />
           </svg>
-          <span class="font-medium text-sm">{gettext("Polls")}</span>
-        </.link>
+        </.action_item>
 
-        <div class="w-px h-6 bg-gray-200"></div>
-
-        <.link
+        <.action_item
           patch={~p"/e/#{@event_code}/manage/add/form"}
-          class="flex items-center gap-x-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors text-gray-700"
+          title={gettext("Form")}
+          label={gettext("Forms")}
+          description={gettext("Create a form to collect feedback from your audience.")}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 text-primary-500"
+            class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -46,14 +47,13 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
               d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
             />
           </svg>
-          <span class="font-medium text-sm">{gettext("Forms")}</span>
-        </.link>
+        </.action_item>
 
-        <div class="w-px h-6 bg-gray-200"></div>
-
-        <.link
+        <.action_item
           patch={~p"/e/#{@event_code}/manage/add/embed"}
-          class="flex items-center gap-x-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors text-gray-700"
+          title={gettext("Web Content")}
+          label={gettext("Web Content")}
+          description={gettext("Embed external web content into your presentation.")}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -61,7 +61,7 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
             viewBox="0 0 24 24"
             stroke-width="2"
             stroke="currentColor"
-            class="w-5 h-5 text-primary-500"
+            class="w-5 h-5"
           >
             <path
               stroke-linecap="round"
@@ -69,14 +69,13 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
               d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
             />
           </svg>
-          <span class="font-medium text-sm">{gettext("Web Content")}</span>
-        </.link>
+        </.action_item>
 
-        <div class="w-px h-6 bg-gray-200"></div>
-
-        <.link
+        <.action_item
           patch={~p"/e/#{@event_code}/manage/add/quiz"}
-          class="flex items-center gap-x-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors text-gray-700"
+          title={gettext("Quiz")}
+          label={gettext("Quiz")}
+          description={gettext("Test your audience's knowledge with a quiz.")}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -84,7 +83,7 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
             viewBox="0 0 24 24"
             stroke-width="2"
             stroke="currentColor"
-            class="w-5 h-5 text-primary-500"
+            class="w-5 h-5"
           >
             <path
               stroke-linecap="round"
@@ -92,8 +91,30 @@ defmodule ClaperWeb.EventLive.ManageFloatingActionBar do
               d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
             />
           </svg>
-          <span class="font-medium text-sm">{gettext("Quiz")}</span>
-        </.link>
+        </.action_item>
+      </div>
+    </div>
+    """
+  end
+
+  defp action_item(assigns) do
+    ~H"""
+    <div class="relative group">
+      <.link
+        patch={@patch}
+        class="relative flex flex-col items-center justify-center gap-0.5 h-16 px-4 py-1.5 rounded-full text-gray-800 transition-all duration-200 hover:bg-primary-50 hover:border hover:border-primary-500 hover:text-primary-600 border border-transparent"
+      >
+        <div class="text-primary-500">
+          {render_slot(@inner_block)}
+        </div>
+        <span class="font-bold text-sm leading-normal">{@label}</span>
+      </.link>
+
+      <div class="pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-72 z-50">
+        <div class="bg-white border border-gray-100 rounded-3xl p-4 shadow-lg">
+          <p class="font-bold text-base text-gray-900 leading-normal">{@title}</p>
+          <p class="text-base text-gray-900 leading-normal mt-2">{@description}</p>
+        </div>
       </div>
     </div>
     """
diff --git a/lib/claper_web/live/event_live/manage_interaction_list_component.ex b/lib/claper_web/live/event_live/manage_interaction_list_component.ex
index 7c6eba3..9e7638e 100644
--- a/lib/claper_web/live/event_live/manage_interaction_list_component.ex
+++ b/lib/claper_web/live/event_live/manage_interaction_list_component.ex
@@ -9,22 +9,20 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
-          viewBox="0 0 24 24"
+          viewBox="0 0 20 20"
           fill="none"
           class="shrink-0"
         >
           <path
-            d="M19.7774 4.2209C18.7569 3.19837 17.5444 2.38746 16.2097 1.83473C14.8749 1.282 13.4442 0.998334 11.9995 1.00001C5.92463 1.00001 1 5.92484 1 12C1 15.0376 2.23185 17.7883 4.2226 19.7791C5.24314 20.8016 6.45558 21.6125 7.79032 22.1653C9.12506 22.718 10.5558 23.0017 12.0005 23C18.0754 23 23 18.0752 23 12C23 8.96242 21.7682 6.21174 19.7774 4.2209ZM18.3641 18.3611C17.529 19.1976 16.537 19.8611 15.445 20.3134C14.353 20.7658 13.1824 20.9982 12.0005 20.9972C7.03 20.9972 3.00083 16.9679 3.00083 11.9973C2.9999 10.8152 3.23227 9.64463 3.68461 8.55258C4.13695 7.46054 4.80037 6.46851 5.63684 5.63337C6.47183 4.79698 7.46367 4.13359 8.55551 3.68124C9.64734 3.22888 10.8177 2.99645 11.9995 2.99726C16.9691 2.99726 20.9982 7.02658 20.9982 11.9963C20.9991 13.1782 20.7666 14.3486 20.3143 15.4405C19.862 16.5324 19.1986 17.5243 18.3622 18.3593L18.3641 18.3611Z"
+            d="M6.111 11.89A5.5 5.5 0 1 1 15.501 8 .75.75 0 0 0 17 8a7 7 0 1 0-11.95 4.95.75.75 0 0 0 1.06-1.06Z"
             fill="#140553"
           />
           <path
-            d="M17.1755 6.82391C16.4964 6.14349 15.6896 5.6039 14.8014 5.23611C13.9133 4.86831 12.9612 4.67956 11.9999 4.68067C7.9576 4.68067 4.68066 7.95774 4.68066 12.0002C4.68066 14.0215 5.50035 15.8518 6.82503 17.1766C7.50412 17.857 8.3109 18.3966 9.19905 18.7644C10.0872 19.1322 11.0393 19.3209 12.0005 19.3198C16.0429 19.3198 19.3198 16.0428 19.3198 12.0002C19.3198 9.97899 18.5001 8.14864 17.1755 6.82391ZM16.235 16.233C15.6793 16.7897 15.0192 17.2311 14.2926 17.5321C13.566 17.8332 12.7871 17.9878 12.0005 17.9872C8.69312 17.9872 6.01205 15.306 6.01205 11.9984C6.01143 11.2119 6.16605 10.4329 6.46705 9.70628C6.76804 8.97961 7.20949 8.3195 7.76609 7.76378C8.32171 7.20723 8.9817 6.76581 9.70822 6.4648C10.4347 6.1638 11.2135 6.00913 11.9999 6.00967C15.3068 6.00967 17.9878 8.69085 17.9878 11.9978C17.9884 12.7842 17.8337 13.5631 17.5327 14.2896C17.2317 15.0162 16.7903 15.6762 16.2338 16.2318L16.235 16.233Z"
+            d="M8.232 6.232a2.5 2.5 0 0 0 0 3.536.75.75 0 1 1-1.06 1.06A4 4 0 1 1 14 8a.75.75 0 0 1-1.5 0 2.5 2.5 0 0 0-4.268-1.768Z"
             fill="#140553"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12.2246 7.64453C14.5288 7.76135 16.362 9.66677 16.3623 12C16.3622 13.2041 15.8727 14.2962 15.084 15.085H15.085C14.6803 15.4904 14.1991 15.812 13.6699 16.0313C13.207 16.2229 12.7142 16.3323 12.2148 16.3564L12 16.3623C9.59163 16.3621 7.63795 14.4084 7.6377 12C7.63783 10.796 8.12745 9.70477 8.91602 8.91602C9.32071 8.51054 9.80178 8.18893 10.3311 7.96973C10.8603 7.75061 11.4282 7.63803 12.001 7.63867L12.2246 7.64453ZM12.001 9.16016C10.4319 9.16016 9.15918 10.4328 9.15918 12.002C9.15897 12.3747 9.23238 12.7445 9.375 13.0889C9.51768 13.4331 9.72756 13.7464 9.99121 14.0098L9.99219 14.0107C10.2556 14.2744 10.5688 14.4843 10.9131 14.627C11.2575 14.7695 11.6273 14.843 12 14.8428C13.5683 14.8425 14.8405 13.5704 14.8408 12.002C14.8411 11.6293 14.7675 11.2594 14.625 10.915C14.4823 10.5707 14.2725 10.2566 14.0088 9.99317L13.9883 9.97364C13.7291 9.71908 13.4236 9.51516 13.0879 9.37598C12.7435 9.23333 12.3738 9.15993 12.001 9.16016Z"
+            d="M10.766 7.51a.75.75 0 0 0-1.37.365l-.492 6.861a.75.75 0 0 0 1.204.65l1.043-.799.985 3.678a.75.75 0 0 0 1.45-.388l-.978-3.646 1.292.204a.75.75 0 0 0 .74-1.16l-3.874-5.764Z"
             fill="#140553"
           />
         </svg>
diff --git a/lib/claper_web/live/event_live/manage_interaction_options_component.ex b/lib/claper_web/live/event_live/manage_interaction_options_component.ex
new file mode 100644
index 0000000..7a9511f
--- /dev/null
+++ b/lib/claper_web/live/event_live/manage_interaction_options_component.ex
@@ -0,0 +1,214 @@
+defmodule ClaperWeb.EventLive.ManageInteractionOptionsComponent do
+  @moduledoc false
+  use Phoenix.Component
+  use Gettext, backend: ClaperWeb.Gettext
+
+  def render(assigns) do
+    assigns = assigns |> assign_new(:show_shortcut, fn -> true end)
+
+    ~H"""
+    <div class="flex flex-col gap-2 border border-gray-200 rounded-2xl p-2 bg-white shadow-lg">
+      <div class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 20 20"
+          fill="none"
+          class="shrink-0"
+        >
+          <path
+            d="M6.111 11.89A5.5 5.5 0 1 1 15.501 8 .75.75 0 0 0 17 8a7 7 0 1 0-11.95 4.95.75.75 0 0 0 1.06-1.06Z"
+            fill="#140553"
+          />
+          <path
+            d="M8.232 6.232a2.5 2.5 0 0 0 0 3.536.75.75 0 1 1-1.06 1.06A4 4 0 1 1 14 8a.75.75 0 0 1-1.5 0 2.5 2.5 0 0 0-4.268-1.768Z"
+            fill="#140553"
+          />
+          <path
+            d="M10.766 7.51a.75.75 0 0 0-1.37.365l-.492 6.861a.75.75 0 0 0 1.204.65l1.043-.799.985 3.678a.75.75 0 0 0 1.45-.388l-.978-3.646 1.292.204a.75.75 0 0 0 .74-1.16l-3.874-5.764Z"
+            fill="#140553"
+          />
+        </svg>
+        <span class="font-bold text-sm text-[#140553]">{gettext("Current interaction options")}</span>
+      </div>
+
+      <div class="space-y-2 px-1">
+        <%= case @current_interaction do %>
+          <% %Claper.Polls.Poll{} -> %>
+            <div class="flex space-x-2 space-y-1.5 items-center mt-1.5">
+              <ClaperWeb.Component.Input.check_button
+                key={:poll_visible}
+                checked={@state.poll_visible}
+                shortcut={if @create == nil, do: "Z", else: nil}
+              >
+                <svg
+                  :if={@state.poll_visible}
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-6 w-6"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4h1m4 0h13" /><path d="M4 4v10a2 2 0 0 0 2 2h10m3.42 -.592c.359 -.362 .58 -.859 .58 -1.408v-10" /><path d="M12 16v4" /><path d="M9 20h6" /><path d="M8 12l2 -2m4 0l2 -2" /><path d="M3 3l18 18" />
+                </svg>
+
+                <svg
+                  :if={!@state.poll_visible}
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-6 w-6"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4l18 0" /><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" /><path d="M12 16l0 4" /><path d="M9 20l6 0" /><path d="M8 12l3 -3l2 2l3 -3" />
+                </svg>
+
+                <span :if={@state.poll_visible}>
+                  {gettext("Hide results on presentation")}
+                </span>
+                <span :if={!@state.poll_visible}>
+                  {gettext("Show results on presentation")}
+                </span>
+                <code
+                  :if={@show_shortcut}
+                  class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg"
+                >
+                  z
+                </code>
+                <div :if={!@show_shortcut}></div>
+              </ClaperWeb.Component.Input.check_button>
+            </div>
+          <% %Claper.Quizzes.Quiz{} -> %>
+            <div class="grid grid-cols-1 space-y-1.5 items-center mt-1.5">
+              <ClaperWeb.Component.Input.check_button
+                key={:quiz_show_results}
+                checked={@current_interaction.show_results}
+                shortcut={if @create == nil, do: "Z", else: nil}
+              >
+                <svg
+                  :if={@current_interaction.show_results}
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-6 w-6"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4h1m4 0h13" /><path d="M4 4v10a2 2 0 0 0 2 2h10m3.42 -.592c.359 -.362 .58 -.859 .58 -1.408v-10" /><path d="M12 16v4" /><path d="M9 20h6" /><path d="M8 12l2 -2m4 0l2 -2" /><path d="M3 3l18 18" />
+                </svg>
+
+                <svg
+                  :if={!@current_interaction.show_results}
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-6 w-6"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4l18 0" /><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" /><path d="M12 16l0 4" /><path d="M9 20l6 0" /><path d="M8 12l3 -3l2 2l3 -3" />
+                </svg>
+
+                <span :if={@current_interaction.show_results}>
+                  {gettext("Hide results on presentation")}
+                </span>
+                <span :if={!@current_interaction.show_results}>
+                  {gettext("Show results on presentation")}
+                </span>
+                <code
+                  :if={@show_shortcut}
+                  class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg"
+                >
+                  z
+                </code>
+                <div :if={!@show_shortcut}></div>
+              </ClaperWeb.Component.Input.check_button>
+              <div>
+                <ClaperWeb.Component.Input.check_button
+                  disabled={!@current_interaction.show_results}
+                  key={:review_quiz_questions}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="w-6 h-6"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 20h14" />
+                  </svg>
+
+                  <span>
+                    {gettext("Review questions")}
+                  </span>
+                  <div></div>
+                </ClaperWeb.Component.Input.check_button>
+              </div>
+              <div class="grid grid-cols-2 gap-2">
+                <ClaperWeb.Component.Input.check_button
+                  disabled={!@current_interaction.show_results}
+                  key={:prev_quiz_question}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="w-6 h-6"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+
+                  <span>
+                    {gettext("Previous")}
+                  </span>
+                </ClaperWeb.Component.Input.check_button>
+                <ClaperWeb.Component.Input.check_button
+                  disabled={!@current_interaction.show_results}
+                  key={:next_quiz_question}
+                >
+                  <span>
+                    {gettext("Next")}
+                  </span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="w-6 h-6"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </ClaperWeb.Component.Input.check_button>
+              </div>
+            </div>
+          <% nil -> %>
+            <p class="text-gray-400 italic mt-1.5">{gettext("No interaction enabled")}</p>
+          <% _ -> %>
+            <p class="text-gray-400 italic mt-1.5 text-sm">{gettext("No settings available for this interaction")}</p>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/lib/claper_web/live/event_live/manage_presentation_options_component.ex b/lib/claper_web/live/event_live/manage_presentation_options_component.ex
new file mode 100644
index 0000000..ef72179
--- /dev/null
+++ b/lib/claper_web/live/event_live/manage_presentation_options_component.ex
@@ -0,0 +1,159 @@
+defmodule ClaperWeb.EventLive.ManagePresentationOptionsComponent do
+  @moduledoc false
+  use Phoenix.Component
+  use Gettext, backend: ClaperWeb.Gettext
+
+  def render(assigns) do
+    assigns = assigns |> assign_new(:show_shortcut, fn -> true end)
+
+    ~H"""
+    <div class="flex flex-col gap-2 border border-gray-200 rounded-2xl p-2 bg-white shadow-lg">
+      <div class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 20 20"
+          fill="none"
+          class="shrink-0"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.105a3.501 3.501 0 0 0 1.1 1.677A.75.75 0 0 1 13.26 18H6.74a.75.75 0 0 1-.484-1.323A3.501 3.501 0 0 0 7.355 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z"
+            clip-rule="evenodd"
+            fill="#140553"
+          />
+        </svg>
+        <span class="font-bold text-sm text-[#140553]">{gettext("Presentation Options")}</span>
+      </div>
+
+      <div class="space-y-2 px-1">
+        <.toggle_row
+          label={if @state.join_screen_visible, do: gettext("Hide instructions to join"), else: gettext("Show instructions to join")}
+          checked={@state.join_screen_visible}
+          key={:join_screen_visible}
+          shortcut={if @create == nil, do: "Q", else: nil}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+              <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+        <.toggle_row
+          label={if @state.chat_visible, do: gettext("Hide messages"), else: gettext("Show messages")}
+          checked={@state.chat_visible}
+          key={:chat_visible}
+          shortcut={if @create == nil, do: "W", else: nil}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path fill-rule="evenodd" d="M10 3c-4.31 0-8 3.033-8 7 0 2.024.978 3.825 2.499 5.085a3.478 3.478 0 0 1-.522 1.756.75.75 0 0 0 .584 1.143 5.976 5.976 0 0 0 3.936-1.108c.487.082.99.124 1.503.124 4.31 0 8-3.033 8-7s-3.69-7-8-7Z" clip-rule="evenodd" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+        <.toggle_row
+          label={if @state.show_only_pinned, do: gettext("Show all messages"), else: gettext("Show pinned messages")}
+          checked={@state.show_only_pinned}
+          key={:show_only_pinned}
+          shortcut={if @create == nil, do: "E", else: nil}
+          disabled={!@state.chat_visible}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-5 h-5"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+        <.toggle_row
+          label={if @state.chat_enabled, do: gettext("Disable messages"), else: gettext("Enable messages")}
+          checked={@state.chat_enabled}
+          key={:chat_enabled}
+          shortcut={if @create == nil, do: "A", else: nil}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 3.958 1 5.307v5.386c0 1.349.993 2.552 2.43 2.783 1.3.209 2.622.351 3.963.42a.75.75 0 0 1 .407.164l2.641 2.112a.75.75 0 0 0 1.184-.51l.311-2.476a.75.75 0 0 1 .663-.653c1.484-.183 2.928-.456 4.32-.814.658-.169 1.081-.8 1.081-1.49V5.307c0-1.349-.993-2.552-2.43-2.783A42.078 42.078 0 0 0 10 2ZM6.75 8a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0-3a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z" clip-rule="evenodd" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+        <.toggle_row
+          label={if @state.anonymous_chat_enabled, do: gettext("Reject anonymous messages"), else: gettext("Allow anonymous messages")}
+          checked={@state.anonymous_chat_enabled}
+          key={:anonymous_chat_enabled}
+          shortcut={if @create == nil, do: "S", else: nil}
+          disabled={!@state.chat_enabled}
+          show_shortcut={@show_shortcut}
+        >
+          <:icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+              <path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
+            </svg>
+          </:icon>
+        </.toggle_row>
+      </div>
+    </div>
+    """
+  end
+
+  attr :label, :string, required: true
+  attr :checked, :boolean, required: true
+  attr :key, :atom, required: true
+  attr :shortcut, :string, default: nil
+  attr :disabled, :boolean, default: false
+  attr :show_shortcut, :boolean, default: true
+  slot :icon, required: true
+
+  defp toggle_row(assigns) do
+    ~H"""
+    <div class={[
+      "flex items-center gap-2 rounded-full pl-2 pr-3 py-2 overflow-hidden transition-colors",
+      if(@disabled, do: "opacity-50"),
+      if(@checked, do: "bg-[#f3defa] border-b-2 border-primary", else: "bg-white border border-gray-200")
+    ]}>
+      <div class={[
+        "flex items-center justify-center w-8 h-8 rounded-full shrink-0",
+        if(@checked, do: "bg-white text-primary-500", else: "bg-gray-100 text-secondary-500")
+      ]}>
+        {render_slot(@icon)}
+      </div>
+      <span class={["flex-1 text-xs text-gray-700", if(@checked, do: "font-semibold")]}>
+        {@label}
+      </span>
+      <div class="flex items-center gap-x-2 shrink-0">
+        <kbd :if={@show_shortcut && @shortcut} class="kbd kbd-sm">
+          {@shortcut}
+        </kbd>
+        <button
+          phx-click={ClaperWeb.Component.Input.checked(@checked, @key)}
+          disabled={@disabled}
+          phx-value-key={@key}
+          type="button"
+          class={"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed #{if @checked, do: "bg-primary-500", else: "bg-gray-200"}"}
+          role="switch"
+          aria-checked={@checked}
+          phx-key={@shortcut}
+          phx-window-keydown={if @shortcut && not @disabled, do: ClaperWeb.Component.Input.checked(@checked, @key)}
+        >
+          <span class={"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out #{if @checked, do: "translate-x-5", else: "translate-x-0"}"}>
+          </span>
+        </button>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/lib/claper_web/live/event_live/manage_slide_preview_component.ex b/lib/claper_web/live/event_live/manage_slide_preview_component.ex
index 56ed52c..ea927b7 100644
--- a/lib/claper_web/live/event_live/manage_slide_preview_component.ex
+++ b/lib/claper_web/live/event_live/manage_slide_preview_component.ex
@@ -12,11 +12,11 @@ defmodule ClaperWeb.EventLive.ManageSlidePreviewComponent do
     <div class="flex flex-col h-full">
       <div class="px-4 py-3 flex items-center justify-between">
         <div class="flex items-center gap-x-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 5.25C7.69269 5.25 4.03598 8.04402 2.74785 11.9196L2.74777 11.9198C2.72991 11.9735 2.72991 12.0315 2.74777 12.0852C4.03886 15.9589 7.69466 18.75 12.0001 18.75C16.3076 18.75 19.9642 15.956 21.2514 12.0806L21.2523 12.0778C21.2702 12.0246 21.2698 11.969 21.2527 11.9183L21.2516 11.9151C19.9606 8.04115 16.3056 5.25 12.0001 5.25ZM1.32449 11.4462C2.81043 6.97587 7.02766 3.75 12.0001 3.75C16.9706 3.75 21.1857 6.97285 22.6747 11.4409C22.7963 11.8027 22.7957 12.1934 22.6744 12.5548C21.1892 17.0247 16.9721 20.25 12.0001 20.25C7.02973 20.25 2.81362 17.0272 1.3246 12.5591L1.32449 12.5588C1.20436 12.1977 1.20434 11.8075 1.32442 11.4464" fill="currentColor" />
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.75C11.4033 9.75 10.831 9.98705 10.409 10.409C9.98705 10.831 9.75 11.4033 9.75 12C9.75 12.5967 9.98705 13.169 10.409 13.591C10.831 14.0129 11.4033 14.25 12 14.25C12.5967 14.25 13.169 14.0129 13.591 13.591C14.0129 13.169 14.25 12.5967 14.25 12C14.25 11.4033 14.0129 10.831 13.591 10.409C13.169 9.98705 12.5967 9.75 12 9.75ZM9.34835 9.34835C10.0516 8.64509 11.0054 8.25 12 8.25C12.9946 8.25 13.9484 8.64509 14.6517 9.34835C15.3549 10.0516 15.75 11.0054 15.75 12C15.75 12.9946 15.3549 13.9484 14.6517 14.6517C13.9484 15.3549 12.9946 15.75 12 15.75C11.0054 15.75 10.0516 15.3549 9.34835 14.6517C8.64509 13.9484 8.25 12.9946 8.25 12C8.25 11.0054 8.64509 10.0516 9.34835 9.34835Z" fill="currentColor" />
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="shrink-0">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 5.25C7.69269 5.25 4.03598 8.04402 2.74785 11.9196L2.74777 11.9198C2.72991 11.9735 2.72991 12.0315 2.74777 12.0852C4.03886 15.9589 7.69466 18.75 12.0001 18.75C16.3076 18.75 19.9642 15.956 21.2514 12.0806L21.2523 12.0778C21.2702 12.0246 21.2698 11.969 21.2527 11.9183L21.2516 11.9151C19.9606 8.04115 16.3056 5.25 12.0001 5.25ZM1.32449 11.4462C2.81043 6.97587 7.02766 3.75 12.0001 3.75C16.9706 3.75 21.1857 6.97285 22.6747 11.4409C22.7963 11.8027 22.7957 12.1934 22.6744 12.5548C21.1892 17.0247 16.9721 20.25 12.0001 20.25C7.02973 20.25 2.81362 17.0272 1.3246 12.5591L1.32449 12.5588C1.20436 12.1977 1.20434 11.8075 1.32442 11.4464" fill="#140553" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.75C11.4033 9.75 10.831 9.98705 10.409 10.409C9.98705 10.831 9.75 11.4033 9.75 12C9.75 12.5967 9.98705 13.169 10.409 13.591C10.831 14.0129 11.4033 14.25 12 14.25C12.5967 14.25 13.169 14.0129 13.591 13.591C14.0129 13.169 14.25 12.5967 14.25 12C14.25 11.4033 14.0129 10.831 13.591 10.409C13.169 9.98705 12.5967 9.75 12 9.75ZM9.34835 9.34835C10.0516 8.64509 11.0054 8.25 12 8.25C12.9946 8.25 13.9484 8.64509 14.6517 9.34835C15.3549 10.0516 15.75 11.0054 15.75 12C15.75 12.9946 15.3549 13.9484 14.6517 14.6517C13.9484 15.3549 12.9946 15.75 12 15.75C11.0054 15.75 10.0516 15.3549 9.34835 14.6517C8.64509 13.9484 8.25 12.9946 8.25 12C8.25 11.0054 8.64509 10.0516 9.34835 9.34835Z" fill="#140553" />
           </svg>
-          <span class="font-semibold text-gray-700">{gettext("Preview")}</span>
+          <span class="font-bold text-sm text-[#140553]">{gettext("Preview")}</span>
         </div>
         <div class="flex items-center gap-x-2 bg-gray-100 rounded-full px-4 py-2 text-sm text-secondary-500">
           <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="none">
diff --git a/lib/claper_web/live/event_live/manage_slide_sidebar_component.ex b/lib/claper_web/live/event_live/manage_slide_sidebar_component.ex
index 1284ba3..45167c8 100644
--- a/lib/claper_web/live/event_live/manage_slide_sidebar_component.ex
+++ b/lib/claper_web/live/event_live/manage_slide_sidebar_component.ex
@@ -7,12 +7,12 @@ defmodule ClaperWeb.EventLive.ManageSlideSidebarComponent do
     ~H"""
     <div class="flex flex-col h-full bg-gray-100 rounded-r-2xl px-4">
       <div class="px-4 py-3 flex items-center gap-x-2">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18" fill="transparent" class="w-5 h-5 text-gray-500">
-          <path d="M0.849609 0.850098H18.8496M1.84961 0.850098V10.8501C1.84961 11.3805 2.06032 11.8892 2.4354 12.2643C2.81047 12.6394 3.31918 12.8501 3.84961 12.8501H15.8496C16.38 12.8501 16.8887 12.6394 17.2638 12.2643C17.6389 11.8892 17.8496 11.3805 17.8496 10.8501V0.850098M9.84961 12.8501V16.8501M6.84961 16.8501H12.8496" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M5.84961 8.8501L8.84961 5.8501L10.8496 7.8501L13.8496 4.8501" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 18" fill="none" class="shrink-0">
+          <path d="M0.849609 0.850098H18.8496M1.84961 0.850098V10.8501C1.84961 11.3805 2.06032 11.8892 2.4354 12.2643C2.81047 12.6394 3.31918 12.8501 3.84961 12.8501H15.8496C16.38 12.8501 16.8887 12.6394 17.2638 12.2643C17.6389 11.8892 17.8496 11.3805 17.8496 10.8501V0.850098M9.84961 12.8501V16.8501M6.84961 16.8501H12.8496" stroke="#140553" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M5.84961 8.8501L8.84961 5.8501L10.8496 7.8501L13.8496 4.8501" stroke="#140553" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
 
-        <span class="font-bold text-gray-700">{gettext("Content")}</span>
+        <span class="font-bold text-sm text-[#140553]">{gettext("Content")}</span>
       </div>
       <div class="flex-1 overflow-y-auto p-3 space-y-2">
         <button
diff --git a/lib/claper_web/live/event_live/manageable_post_component.ex b/lib/claper_web/live/event_live/manageable_post_component.ex
index 75533f9..c2efd37 100644
--- a/lib/claper_web/live/event_live/manageable_post_component.ex
+++ b/lib/claper_web/live/event_live/manageable_post_component.ex
@@ -22,86 +22,86 @@ defmodule ClaperWeb.EventLive.ManageablePostComponent do
 
       <!-- Right: header + bubble -->
       <div class="flex-1 min-w-0 flex flex-col">
-        <!-- Header: name + question badge + actions -->
+        <!-- Header: name + actions -->
         <div class="flex items-center gap-1 min-h-6 mb-1 ml-4">
           <p :if={@post.name} class="font-bold text-xs text-gray-700 truncate">
             {@post.name}
           </p>
-          <div
-            :if={ClaperWeb.Helpers.body_without_links(@post.body) =~ "?"}
-            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-supporting-yellow-400 text-white shrink-0"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-              class="w-3 h-3"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6 3.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7.293 5.293a1 1 0 1 1 .99 1.667c-.459.134-1.033.566-1.033 1.29v.25a.75.75 0 1 0 1.5 0v-.115a2.5 2.5 0 1 0-2.518-4.153.75.75 0 1 0 1.061 1.06Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            <span>{gettext("Question")}</span>
-          </div>
 
           <!-- Actions (visible on hover) -->
           <div
             :if={!@readonly}
             class="ml-auto flex items-center divide-x divide-gray-200 border border-gray-200 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
           >
-            <button
-              class="flex items-center justify-center w-8 h-6"
-              phx-click="pin"
-              phx-value-id={@post.uuid}
-              phx-value-event_id={@event.uuid}
-              title={if @post.pinned, do: gettext("Unpin"), else: gettext("Pin")}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
-                <path
-                  d="M0.5 12.5006L3.58667 9.41327M3.59 9.40994L1.73667 7.5566C1.10067 6.92127 1.74067 5.55927 2.61 5.5046C3.39533 5.4546 5.21333 5.73927 5.818 5.1346L7.478 3.4746C7.88933 3.0626 7.628 2.14127 7.60133 1.63327C7.56267 0.955937 8.64 0.11927 9.21133 0.690603L12.3093 3.78927C12.8827 4.36127 12.0427 5.43527 11.3673 5.39927C10.8593 5.3726 9.93733 5.11127 9.52533 5.5226L7.86533 7.1826C7.26133 7.78727 7.54533 9.6046 7.496 10.3899C7.44133 11.2599 6.07933 11.8999 5.44267 11.2633L3.59 9.40994Z"
-                  stroke="#140553"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
+            <div class="tooltip tooltip-bottom" data-tip={if @post.pinned, do: gettext("Unpin"), else: gettext("Pin")}>
+              <button
+                class="flex items-center justify-center w-8 h-6"
+                phx-click="pin"
+                phx-value-id={@post.uuid}
+                phx-value-event_id={@event.uuid}
+              >
+                <%= if @post.pinned do %>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
+                    <path
+                      d="M0.5 12.5006L3.58667 9.41327M3.59 9.40994L1.73667 7.5566C1.10067 6.92127 1.74067 5.55927 2.61 5.5046C3.39533 5.4546 5.21333 5.73927 5.818 5.1346L7.478 3.4746C7.88933 3.0626 7.628 2.14127 7.60133 1.63327C7.56267 0.955937 8.64 0.11927 9.21133 0.690603L12.3093 3.78927C12.8827 4.36127 12.0427 5.43527 11.3673 5.39927C10.8593 5.3726 9.93733 5.11127 9.52533 5.5226L7.86533 7.1826C7.26133 7.78727 7.54533 9.6046 7.496 10.3899C7.44133 11.2599 6.07933 11.8999 5.44267 11.2633L3.59 9.40994Z"
+                      fill="#140553"
+                      stroke="#140553"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                <% else %>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
+                    <path
+                      d="M0.5 12.5006L3.58667 9.41327M3.59 9.40994L1.73667 7.5566C1.10067 6.92127 1.74067 5.55927 2.61 5.5046C3.39533 5.4546 5.21333 5.73927 5.818 5.1346L7.478 3.4746C7.88933 3.0626 7.628 2.14127 7.60133 1.63327C7.56267 0.955937 8.64 0.11927 9.21133 0.690603L12.3093 3.78927C12.8827 4.36127 12.0427 5.43527 11.3673 5.39927C10.8593 5.3726 9.93733 5.11127 9.52533 5.5226L7.86533 7.1826C7.26133 7.78727 7.54533 9.6046 7.496 10.3899C7.44133 11.2599 6.07933 11.8999 5.44267 11.2633L3.59 9.40994Z"
+                      stroke="#140553"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                <% end %>
+              </button>
+            </div>
             <%= if @post.attendee_identifier do %>
-              <button
-                class="flex items-center justify-center w-8 h-6"
-                phx-click="ban"
-                phx-value-attendee_identifier={@post.attendee_identifier}
-                data-confirm={gettext("Blocking this user will delete all his messages and he will not be able to join again, confirm ?")}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path
-                    d="M6.611 0C5.30347 0 4.0253 0.387729 2.93813 1.11415C1.85095 1.84058 1.00361 2.87308 0.503235 4.08108C0.00286441 5.28908 -0.128055 6.61833 0.127031 7.90074C0.382118 9.18315 1.01175 10.3611 1.93632 11.2857C2.86088 12.2102 4.03885 12.8399 5.32126 13.095C6.60367 13.3501 7.93292 13.2191 9.14092 12.7188C10.3489 12.2184 11.3814 11.371 12.1078 10.2839C12.8343 9.1967 13.222 7.91853 13.222 6.611C13.222 4.85765 12.5255 3.17612 11.2857 1.93632C10.0459 0.696514 8.36435 0 6.611 0ZM1.10184 6.611C1.10073 5.34054 1.54228 4.10938 2.35058 3.12921L10.0928 10.8714C9.28666 11.5326 8.30923 11.9512 7.27439 12.0783C6.23955 12.2054 5.18989 12.0358 4.2477 11.5894C3.30551 11.1429 2.50957 10.4379 1.95261 9.55652C1.39566 8.67513 1.10061 7.65362 1.10184 6.611ZM10.8714 10.0928L3.12921 2.35058C4.18518 1.48642 5.52459 1.04549 6.88739 1.11339C8.25019 1.18129 9.53914 1.75318 10.504 2.71802C11.4688 3.68286 12.0407 4.97181 12.1086 6.33461C12.1765 7.69741 11.7356 9.03682 10.8714 10.0928Z"
-                    fill="#E14640"
-                  />
-                </svg>
-              </button>
+              <div class="tooltip tooltip-bottom" data-tip={gettext("Ban")}>
+                <button
+                  class="flex items-center justify-center w-8 h-6"
+                  phx-click="ban"
+                  phx-value-attendee_identifier={@post.attendee_identifier}
+                  data-confirm={gettext("Blocking this user will delete all his messages and he will not be able to join again, confirm ?")}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path
+                      d="M6.611 0C5.30347 0 4.0253 0.387729 2.93813 1.11415C1.85095 1.84058 1.00361 2.87308 0.503235 4.08108C0.00286441 5.28908 -0.128055 6.61833 0.127031 7.90074C0.382118 9.18315 1.01175 10.3611 1.93632 11.2857C2.86088 12.2102 4.03885 12.8399 5.32126 13.095C6.60367 13.3501 7.93292 13.2191 9.14092 12.7188C10.3489 12.2184 11.3814 11.371 12.1078 10.2839C12.8343 9.1967 13.222 7.91853 13.222 6.611C13.222 4.85765 12.5255 3.17612 11.2857 1.93632C10.0459 0.696514 8.36435 0 6.611 0ZM1.10184 6.611C1.10073 5.34054 1.54228 4.10938 2.35058 3.12921L10.0928 10.8714C9.28666 11.5326 8.30923 11.9512 7.27439 12.0783C6.23955 12.2054 5.18989 12.0358 4.2477 11.5894C3.30551 11.1429 2.50957 10.4379 1.95261 9.55652C1.39566 8.67513 1.10061 7.65362 1.10184 6.611ZM10.8714 10.0928L3.12921 2.35058C4.18518 1.48642 5.52459 1.04549 6.88739 1.11339C8.25019 1.18129 9.53914 1.75318 10.504 2.71802C11.4688 3.68286 12.0407 4.97181 12.1086 6.33461C12.1765 7.69741 11.7356 9.03682 10.8714 10.0928Z"
+                      fill="#E14640"
+                    />
+                  </svg>
+                </button>
+              </div>
             <% else %>
+              <div class="tooltip tooltip-bottom" data-tip={gettext("Ban")}>
+                <button
+                  class="flex items-center justify-center w-8 h-6"
+                  phx-click="ban"
+                  phx-value-user_id={@post.user_id}
+                  data-confirm={gettext("Blocking this user will delete all his messages and he will not be able to join again, confirm ?")}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path
+                      d="M6.611 0C5.30347 0 4.0253 0.387729 2.93813 1.11415C1.85095 1.84058 1.00361 2.87308 0.503235 4.08108C0.00286441 5.28908 -0.128055 6.61833 0.127031 7.90074C0.382118 9.18315 1.01175 10.3611 1.93632 11.2857C2.86088 12.2102 4.03885 12.8399 5.32126 13.095C6.60367 13.3501 7.93292 13.2191 9.14092 12.7188C10.3489 12.2184 11.3814 11.371 12.1078 10.2839C12.8343 9.1967 13.222 7.91853 13.222 6.611C13.222 4.85765 12.5255 3.17612 11.2857 1.93632C10.0459 0.696514 8.36435 0 6.611 0ZM1.10184 6.611C1.10073 5.34054 1.54228 4.10938 2.35058 3.12921L10.0928 10.8714C9.28666 11.5326 8.30923 11.9512 7.27439 12.0783C6.23955 12.2054 5.18989 12.0358 4.2477 11.5894C3.30551 11.1429 2.50957 10.4379 1.95261 9.55652C1.39566 8.67513 1.10061 7.65362 1.10184 6.611ZM10.8714 10.0928L3.12921 2.35058C4.18518 1.48642 5.52459 1.04549 6.88739 1.11339C8.25019 1.18129 9.53914 1.75318 10.504 2.71802C11.4688 3.68286 12.0407 4.97181 12.1086 6.33461C12.1765 7.69741 11.7356 9.03682 10.8714 10.0928Z"
+                      fill="#E14640"
+                    />
+                  </svg>
+                </button>
+              </div>
+            <% end %>
+            <div class="tooltip tooltip-bottom" data-tip={gettext("Delete")}>
               <button
                 class="flex items-center justify-center w-8 h-6"
-                phx-click="ban"
-                phx-value-user_id={@post.user_id}
-                data-confirm={gettext("Blocking this user will delete all his messages and he will not be able to join again, confirm ?")}
+                phx-click="delete"
+                phx-value-id={@post.uuid}
+                phx-value-event_id={@event.uuid}
               >
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path
-                    d="M6.611 0C5.30347 0 4.0253 0.387729 2.93813 1.11415C1.85095 1.84058 1.00361 2.87308 0.503235 4.08108C0.00286441 5.28908 -0.128055 6.61833 0.127031 7.90074C0.382118 9.18315 1.01175 10.3611 1.93632 11.2857C2.86088 12.2102 4.03885 12.8399 5.32126 13.095C6.60367 13.3501 7.93292 13.2191 9.14092 12.7188C10.3489 12.2184 11.3814 11.371 12.1078 10.2839C12.8343 9.1967 13.222 7.91853 13.222 6.611C13.222 4.85765 12.5255 3.17612 11.2857 1.93632C10.0459 0.696514 8.36435 0 6.611 0ZM1.10184 6.611C1.10073 5.34054 1.54228 4.10938 2.35058 3.12921L10.0928 10.8714C9.28666 11.5326 8.30923 11.9512 7.27439 12.0783C6.23955 12.2054 5.18989 12.0358 4.2477 11.5894C3.30551 11.1429 2.50957 10.4379 1.95261 9.55652C1.39566 8.67513 1.10061 7.65362 1.10184 6.611ZM10.8714 10.0928L3.12921 2.35058C4.18518 1.48642 5.52459 1.04549 6.88739 1.11339C8.25019 1.18129 9.53914 1.75318 10.504 2.71802C11.4688 3.68286 12.0407 4.97181 12.1086 6.33461C12.1765 7.69741 11.7356 9.03682 10.8714 10.0928Z"
-                    fill="#E14640"
-                  />
-                </svg>
-              </button>
-            <% end %>
-            <button
-              class="flex items-center justify-center w-8 h-6"
-              phx-click="delete"
-              phx-value-id={@post.uuid}
-              phx-value-event_id={@event.uuid}
-            >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path
                   d="M6.66683 3.33333H9.3335C9.3335 2.97971 9.19302 2.64057 8.94297 2.39052C8.69292 2.14048 8.35379 2 8.00016 2C7.64654 2 7.3074 2.14048 7.05735 2.39052C6.80731 2.64057 6.66683 2.97971 6.66683 3.33333ZM5.66683 3.33333C5.66683 3.02692 5.72718 2.7235 5.84444 2.44041C5.9617 2.15731 6.13358 1.90009 6.35025 1.68342C6.56692 1.46675 6.82414 1.29488 7.10723 1.17761C7.39033 1.06035 7.69375 1 8.00016 1C8.30658 1 8.61 1.06035 8.89309 1.17761C9.17618 1.29488 9.43341 1.46675 9.65008 1.68342C9.86675 1.90009 10.0386 2.15731 10.1559 2.44041C10.2731 2.7235 10.3335 3.02692 10.3335 3.33333H14.1668C14.2994 3.33333 14.4266 3.38601 14.5204 3.47978C14.6142 3.57355 14.6668 3.70073 14.6668 3.83333C14.6668 3.96594 14.6142 4.09312 14.5204 4.18689C14.4266 4.28066 14.2994 4.33333 14.1668 4.33333H13.2868L12.5068 12.4073C12.447 13.026 12.1589 13.6002 11.6986 14.0179C11.2384 14.4356 10.639 14.6669 10.0175 14.6667H5.98283C5.36141 14.6667 4.76223 14.4354 4.30213 14.0177C3.84203 13.6 3.55399 13.0259 3.49416 12.4073L2.7135 4.33333H1.8335C1.70089 4.33333 1.57371 4.28066 1.47994 4.18689C1.38617 4.09312 1.3335 3.96594 1.3335 3.83333C1.3335 3.70073 1.38617 3.57355 1.47994 3.47978C1.57371 3.38601 1.70089 3.33333 1.8335 3.33333H5.66683ZM7.00016 6.5C7.00016 6.36739 6.94748 6.24022 6.85372 6.14645C6.75995 6.05268 6.63277 6 6.50016 6C6.36755 6 6.24038 6.05268 6.14661 6.14645C6.05284 6.24022 6.00016 6.36739 6.00016 6.5V11.5C6.00016 11.6326 6.05284 11.7598 6.14661 11.8536C6.24038 11.9473 6.36755 12 6.50016 12C6.63277 12 6.75995 11.9473 6.85372 11.8536C6.94748 11.7598 7.00016 11.6326 7.00016 11.5V6.5ZM9.50016 6C9.63277 6 9.75995 6.05268 9.85372 6.14645C9.94748 6.24022 10.0002 6.36739 10.0002 6.5V11.5C10.0002 11.6326 9.94748 11.7598 9.85372 11.8536C9.75995 11.9473 9.63277 12 9.50016 12C9.36755 12 9.24038 11.9473 9.14661 11.8536C9.05284 11.7598 9.00016 11.6326 9.00016 11.5V6.5C9.00016 6.36739 9.05284 6.24022 9.14661 6.14645C9.24038 6.05268 9.36755 6 9.50016 6ZM4.4895 12.3113C4.52545 12.6824 4.69833 13.0268 4.97441 13.2774C5.25049 13.528 5.60999 13.6667 5.98283 13.6667H10.0175C10.3903 13.6667 10.7498 13.528 11.0259 13.2774C11.302 13.0268 11.4749 12.6824 11.5108 12.3113L12.2828 4.33333H3.7175L4.4895 12.3113Z"
@@ -109,10 +109,18 @@ defmodule ClaperWeb.EventLive.ManageablePostComponent do
                 />
               </svg>
             </button>
+            </div>
           </div>
         </div>
 
         <!-- Message bubble with tail -->
+        <% is_question = ClaperWeb.Helpers.body_without_links(@post.body) =~ "?" %>
+        <% bubble_bg = cond do
+          @post.pinned && is_question -> "background: linear-gradient(92deg, rgba(0,0,0,0) 0%, rgba(251,191,36,0.38) 50%, rgba(134,17,237,0.38) 98%), #fff"
+          @post.pinned -> "background: linear-gradient(92deg, rgba(0,0,0,0) 0%, rgba(251,191,36,0.38) 98%), #fff"
+          is_question -> "background: linear-gradient(92deg, rgba(0,0,0,0) 0%, rgba(134,17,237,0.38) 98%), #fff"
+          true -> "background: #fff"
+        end %>
         <div class="flex items-end">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -124,8 +132,34 @@ defmodule ClaperWeb.EventLive.ManageablePostComponent do
           >
             <path d="M0 16H16V0C16 5.33333 5.33333 16 0 16Z" fill="white" />
           </svg>
-          <div class="bg-white rounded-tl-2xl rounded-tr-2xl rounded-br-2xl flex-1 min-w-0 px-3 py-4">
-            <p class="text-sm text-gray-700 break-words">
+          <div
+            class="rounded-tl-2xl rounded-tr-2xl rounded-br-2xl flex-1 min-w-0 px-3 py-4 relative overflow-hidden"
+            style={bubble_bg}
+          >
+            <!-- Watermark icons -->
+            <div
+              :if={is_question || @post.pinned}
+              class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-3 opacity-60 pointer-events-none select-none"
+            >
+              <svg
+                :if={@post.pinned}
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 13 13"
+                fill="none"
+              >
+                <path
+                  d="M0.5 12.5006L3.58667 9.41327M3.59 9.40994L1.73667 7.5566C1.10067 6.92127 1.74067 5.55927 2.61 5.5046C3.39533 5.4546 5.21333 5.73927 5.818 5.1346L7.478 3.4746C7.88933 3.0626 7.628 2.14127 7.60133 1.63327C7.56267 0.955937 8.64 0.11927 9.21133 0.690603L12.3093 3.78927C12.8827 4.36127 12.0427 5.43527 11.3673 5.39927C10.8593 5.3726 9.93733 5.11127 9.52533 5.5226L7.86533 7.1826C7.26133 7.78727 7.54533 9.6046 7.496 10.3899C7.44133 11.2599 6.07933 11.8999 5.44267 11.2633L3.59 9.40994Z"
+                  stroke="white"
+                  stroke-width="1.2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span :if={is_question} class="text-2xl text-white leading-none">?</span>
+            </div>
+            <p class="text-sm text-gray-700 break-words relative">
               {ClaperWeb.Helpers.format_body(@post.body)}
             </p>
 
diff --git a/lib/claper_web/live/event_live/manager_settings_component.ex b/lib/claper_web/live/event_live/manager_settings_component.ex
index fe1a8ad..6dbd083 100644
--- a/lib/claper_web/live/event_live/manager_settings_component.ex
+++ b/lib/claper_web/live/event_live/manager_settings_component.ex
@@ -5,314 +5,23 @@ defmodule ClaperWeb.EventLive.ManagerSettingsComponent do
     assigns = assigns |> assign_new(:show_shortcut, fn -> true end)
 
     ~H"""
-    <div class="flex flex-col h-full">
-      <!-- Interactions Options Section -->
-      <div class="px-4 py-3 border-b border-gray-200">
-        <div class="flex items-center gap-x-2 font-semibold text-base text-gray-700">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            class="w-5 h-5 text-gray-500"
-          >
-            <path d="M6.111 11.89A5.5 5.5 0 1 1 15.501 8 .75.75 0 0 0 17 8a7 7 0 1 0-11.95 4.95.75.75 0 0 0 1.06-1.06Z" />
-            <path d="M8.232 6.232a2.5 2.5 0 0 0 0 3.536.75.75 0 1 1-1.06 1.06A4 4 0 1 1 14 8a.75.75 0 0 1-1.5 0 2.5 2.5 0 0 0-4.268-1.768Z" />
-            <path d="M10.766 7.51a.75.75 0 0 0-1.37.365l-.492 6.861a.75.75 0 0 0 1.204.65l1.043-.799.985 3.678a.75.75 0 0 0 1.45-.388l-.978-3.646 1.292.204a.75.75 0 0 0 .74-1.16l-3.874-5.764Z" />
-          </svg>
-          <span>{gettext("Interactions Options")}</span>
-        </div>
-      </div>
-      <div class="px-4 py-3 space-y-2 border-b border-gray-200">
-
-        <%= case @current_interaction do %>
-          <% %Claper.Polls.Poll{} -> %>
-            <div class="flex space-x-2 space-y-1.5 items-center mt-1.5">
-              <ClaperWeb.Component.Input.check_button
-                key={:poll_visible}
-                checked={@state.poll_visible}
-                shortcut={if @create == nil, do: "Z", else: nil}
-              >
-                <svg
-                  :if={@state.poll_visible}
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="h-6 w-6"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4h1m4 0h13" /><path d="M4 4v10a2 2 0 0 0 2 2h10m3.42 -.592c.359 -.362 .58 -.859 .58 -1.408v-10" /><path d="M12 16v4" /><path d="M9 20h6" /><path d="M8 12l2 -2m4 0l2 -2" /><path d="M3 3l18 18" />
-                </svg>
-
-                <svg
-                  :if={!@state.poll_visible}
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="h-6 w-6"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4l18 0" /><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" /><path d="M12 16l0 4" /><path d="M9 20l6 0" /><path d="M8 12l3 -3l2 2l3 -3" />
-                </svg>
-
-                <span :if={@state.poll_visible}>
-                  {gettext("Hide results on presentation")}
-                </span>
-                <span :if={!@state.poll_visible}>
-                  {gettext("Show results on presentation")}
-                </span>
-                <code
-                  :if={@show_shortcut}
-                  class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg"
-                >
-                  z
-                </code>
-                <div :if={!@show_shortcut}></div>
-              </ClaperWeb.Component.Input.check_button>
-            </div>
-          <% %Claper.Quizzes.Quiz{} -> %>
-            <div class="grid grid-cols-1 space-y-1.5 items-center mt-1.5">
-              <ClaperWeb.Component.Input.check_button
-                key={:quiz_show_results}
-                checked={@current_interaction.show_results}
-                shortcut={if @create == nil, do: "Z", else: nil}
-              >
-                <svg
-                  :if={@current_interaction.show_results}
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="h-6 w-6"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4h1m4 0h13" /><path d="M4 4v10a2 2 0 0 0 2 2h10m3.42 -.592c.359 -.362 .58 -.859 .58 -1.408v-10" /><path d="M12 16v4" /><path d="M9 20h6" /><path d="M8 12l2 -2m4 0l2 -2" /><path d="M3 3l18 18" />
-                </svg>
-
-                <svg
-                  :if={!@current_interaction.show_results}
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="h-6 w-6"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4l18 0" /><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" /><path d="M12 16l0 4" /><path d="M9 20l6 0" /><path d="M8 12l3 -3l2 2l3 -3" />
-                </svg>
-
-                <span :if={@current_interaction.show_results}>
-                  {gettext("Hide results on presentation")}
-                </span>
-                <span :if={!@current_interaction.show_results}>
-                  {gettext("Show results on presentation")}
-                </span>
-                <code
-                  :if={@show_shortcut}
-                  class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg"
-                >
-                  z
-                </code>
-                <div :if={!@show_shortcut}></div>
-              </ClaperWeb.Component.Input.check_button>
-              <div>
-                <ClaperWeb.Component.Input.check_button
-                  disabled={!@current_interaction.show_results}
-                  key={:review_quiz_questions}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="w-6 h-6"
-                  >
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 20h14" />
-                  </svg>
-
-                  <span>
-                    {gettext("Review questions")}
-                  </span>
-                  <div></div>
-                </ClaperWeb.Component.Input.check_button>
-              </div>
-              <div class="grid grid-cols-2 gap-2">
-                <ClaperWeb.Component.Input.check_button
-                  disabled={!@current_interaction.show_results}
-                  key={:prev_quiz_question}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-
-                  <span>
-                    {gettext("Previous")}
-                  </span>
-                </ClaperWeb.Component.Input.check_button>
-                <ClaperWeb.Component.Input.check_button
-                  disabled={!@current_interaction.show_results}
-                  key={:next_quiz_question}
-                >
-                  <span>
-                    {gettext("Next")}
-                  </span>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </ClaperWeb.Component.Input.check_button>
-              </div>
-            </div>
-          <% nil -> %>
-            <p class="text-gray-400 italic mt-1.5">No interaction enabled</p>
-          <% _ -> %>
-            <p class="text-gray-400 italic mt-1.5">No settings available for this interaction</p>
-        <% end %>
-
-      </div>
-
-      <!-- Presentation Settings Section -->
-      <div class="px-4 py-3 border-b border-gray-200 space-y-2">
-        <.toggle_row
-          label={if @state.join_screen_visible, do: gettext("Hide instructions to join"), else: gettext("Show instructions to join")}
-          checked={@state.join_screen_visible}
-          key={:join_screen_visible}
-          shortcut={if @create == nil, do: "Q", else: nil}
-          show_shortcut={@show_shortcut}
-        />
-        <.toggle_row
-          label={if @state.chat_visible, do: gettext("Hide messages"), else: gettext("Show messages")}
-          checked={@state.chat_visible}
-          key={:chat_visible}
-          shortcut={if @create == nil, do: "W", else: nil}
-          show_shortcut={@show_shortcut}
-        />
-        <.toggle_row
-          label={if @state.show_only_pinned, do: gettext("Show all messages"), else: gettext("Show pinned messages")}
-          checked={@state.show_only_pinned}
-          key={:show_only_pinned}
-          shortcut={if @create == nil, do: "E", else: nil}
-          disabled={!@state.chat_visible}
-          show_shortcut={@show_shortcut}
-        />
-        <.toggle_row
-          label={if @state.chat_enabled, do: gettext("Disable messages"), else: gettext("Enable messages")}
-          checked={@state.chat_enabled}
-          key={:chat_enabled}
-          shortcut={if @create == nil, do: "A", else: nil}
-          show_shortcut={@show_shortcut}
-        />
-        <.toggle_row
-          label={if @state.anonymous_chat_enabled, do: gettext("Reject anonymous messages"), else: gettext("Allow anonymous messages")}
-          checked={@state.anonymous_chat_enabled}
-          key={:anonymous_chat_enabled}
-          shortcut={if @create == nil, do: "S", else: nil}
-          disabled={!@state.chat_enabled}
-          show_shortcut={@show_shortcut}
-        />
-      </div>
-
-      <!-- Attendees Settings Section -->
-      <div class="px-4 py-3 border-b border-gray-200">
-        <div class="flex items-center gap-x-2 font-semibold text-base text-gray-700 mb-3">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            class="w-5 h-5 text-gray-500"
-          >
-            <path d="M8 16.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" />
-            <path
-              fill-rule="evenodd"
-              d="M4 4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4Zm4-1.5v.75c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75V2.5h1A1.5 1.5 0 0 1 14.5 4v12a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 16V4A1.5 1.5 0 0 1 7 2.5h1Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-          <span>{gettext("Attendees settings")}</span>
-        </div>
-        <div class="space-y-2">
-          <.toggle_row
-            label={if @state.message_reaction_enabled, do: gettext("Disable reactions"), else: gettext("Enable reactions")}
-            checked={@state.message_reaction_enabled}
-            key={:message_reaction_enabled}
-            shortcut={if @create == nil, do: "D", else: nil}
-            show_shortcut={@show_shortcut}
-          />
-          <.toggle_row
-            label={if @state.show_attendee_count, do: gettext("Hide attendee count"), else: gettext("Show attendee count")}
-            checked={@state.show_attendee_count}
-            key={:show_attendee_count}
-            shortcut={if @create == nil, do: "R", else: nil}
-            show_shortcut={@show_shortcut}
-          />
-        </div>
-      </div>
-    </div>
-    """
-  end
-
-  attr :label, :string, required: true
-  attr :checked, :boolean, required: true
-  attr :key, :atom, required: true
-  attr :shortcut, :string, default: nil
-  attr :disabled, :boolean, default: false
-  attr :show_shortcut, :boolean, default: true
-
-  defp toggle_row(assigns) do
-    ~H"""
-    <div class={"flex items-center justify-between py-1 #{if @disabled, do: "opacity-50"}"}>
-      <span class="text-sm text-gray-700">{@label}</span>
-      <div class="flex items-center gap-x-2">
-        <code
-          :if={@show_shortcut && @shortcut}
-          class="px-1.5 py-0.5 text-xs font-medium text-gray-500 bg-gray-100 rounded"
-        >
-          {@shortcut}
-        </code>
-        <button
-          phx-click={ClaperWeb.Component.Input.checked(@checked, @key)}
-          disabled={@disabled}
-          phx-value-key={@key}
-          type="button"
-          class={"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed #{if @checked, do: "bg-primary-500", else: "bg-gray-200"}"}
-          role="switch"
-          aria-checked={@checked}
-          phx-key={@shortcut}
-          phx-window-keydown={if @shortcut && not @disabled, do: ClaperWeb.Component.Input.checked(@checked, @key)}
-        >
-          <span class={"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out #{if @checked, do: "translate-x-5", else: "translate-x-0"}"}>
-          </span>
-        </button>
-      </div>
+    <div class="flex flex-col gap-4 p-4">
+      <ClaperWeb.EventLive.ManageInteractionOptionsComponent.render
+        current_interaction={@current_interaction}
+        state={@state}
+        create={@create}
+        show_shortcut={@show_shortcut}
+      />
+      <ClaperWeb.EventLive.ManagePresentationOptionsComponent.render
+        state={@state}
+        create={@create}
+        show_shortcut={@show_shortcut}
+      />
+      <ClaperWeb.EventLive.ManageAttendeesOptionsComponent.render
+        state={@state}
+        create={@create}
+        show_shortcut={@show_shortcut}
+      />
     </div>
     """
   end