diff --git a/backend/resources/views/emails/orders/attendee-ticket.blade.php b/backend/resources/views/emails/orders/attendee-ticket.blade.php
index df55702afa..2e7514b488 100644
--- a/backend/resources/views/emails/orders/attendee-ticket.blade.php
+++ b/backend/resources/views/emails/orders/attendee-ticket.blade.php
@@ -35,8 +35,7 @@
 
 <x-mail::message>
 # {{ __('You\'re going to') }} {{ $event->getTitle() }}! 🎉
-<br>
-<br>
+
 @if($order->isOrderAwaitingOfflinePayment())
 <div style="border-radius: 4px; background-color: #f8d7da; color: #842029; margin-bottom: 1.5rem; padding: 1rem;">
 <p>
diff --git a/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php b/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
index 6d69ccda10..3a790b06ba 100644
--- a/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
+++ b/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
@@ -7,10 +7,7 @@
 <x-mail::message>
 # {{ __('You\'ve received a new order!') }} 🎉
 
-<br>
 {{ __('Congratulations! You\'ve received a new order for ') }} <b>{{ $event->getTitle() }}</b>! {{ __('Please find the details below.') }}
-<br>
-<br>
 
 @if($order->isOrderAwaitingOfflinePayment())
 <div style="border-radius: 4px; background-color: #f8d7da; color: #842029; margin-bottom: 1.5rem; padding: 1rem;">
diff --git a/backend/resources/views/emails/orders/summary.blade.php b/backend/resources/views/emails/orders/summary.blade.php
index bdd61636ce..ca84e41df1 100644
--- a/backend/resources/views/emails/orders/summary.blade.php
+++ b/backend/resources/views/emails/orders/summary.blade.php
@@ -41,7 +41,7 @@
 
 <p>
 
-# {{ __('Event Details') }}
+## {{ __('Event Details') }}
 **{{ __('Event Name:') }}** {{ $event->getTitle() }}
     <br>
 **{{ __('Date & Time:') }}** {{ __(':date at :time', ['date' => $displayDate, 'time' => $displayTime]) }}
@@ -55,14 +55,14 @@
 @if($eventSettings->getPostCheckoutMessage() && $order->isOrderCompleted())
 <p>
 
-# {{ __('Additional Information') }}
+## {{ __('Additional Information') }}
 
 {!! $eventSettings->getPostCheckoutMessage() !!}
 
 </p>
 @endif
 
-# {{ __('Order Summary') }}
+## {{ __('Order Summary') }}
 - **{{ __('Order Number:') }}** {{ $order->getPublicId() }}
 - **{{ __('Total Amount:') }}** {{ Currency::format($order->getTotalGross(), $event->getCurrency()) }}
 
diff --git a/backend/resources/views/vendor/mail/html/footer.blade.php b/backend/resources/views/vendor/mail/html/footer.blade.php
index 33f7dad76d..e00bda4e31 100644
--- a/backend/resources/views/vendor/mail/html/footer.blade.php
+++ b/backend/resources/views/vendor/mail/html/footer.blade.php
@@ -1,8 +1,8 @@
 <tr>
     <td>
-        <table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+        <table class="footer" align="center" width="600" cellpadding="0" cellspacing="0" role="presentation">
             <tr>
-                <td class="content-cell" align="center">
+                <td class="footer-cell" align="center">
                     {{ Illuminate\Mail\Markdown::parse($slot) }}
                 </td>
             </tr>
diff --git a/backend/resources/views/vendor/mail/html/header.blade.php b/backend/resources/views/vendor/mail/html/header.blade.php
index 6e30a3df94..7de65ac147 100644
--- a/backend/resources/views/vendor/mail/html/header.blade.php
+++ b/backend/resources/views/vendor/mail/html/header.blade.php
@@ -2,11 +2,7 @@
 <tr>
     <td class="header">
         <a href="{{ $url }}" style="display: inline-block;">
-            @if (trim($slot) === 'Laravel')
-                <img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
-            @else
-                {{ $slot }}
-            @endif
+            {{ $slot }}
         </a>
     </td>
 </tr>
diff --git a/backend/resources/views/vendor/mail/html/layout.blade.php b/backend/resources/views/vendor/mail/html/layout.blade.php
index 574631dd92..692cf993b1 100644
--- a/backend/resources/views/vendor/mail/html/layout.blade.php
+++ b/backend/resources/views/vendor/mail/html/layout.blade.php
@@ -8,18 +8,28 @@
     <meta name="color-scheme" content="light">
     <meta name="supported-color-schemes" content="light">
     <style>
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 640px) {
             .inner-body {
+                border-radius: 0 !important;
                 width: 100% !important;
             }
 
             .footer {
                 width: 100% !important;
             }
+
+            .content-cell {
+                padding: 28px 24px !important;
+            }
+
+            h1 {
+                font-size: 22px !important;
+            }
         }
 
         @media only screen and (max-width: 500px) {
             .button {
+                text-align: center;
                 width: 100% !important;
             }
         }
@@ -36,7 +46,7 @@
                 <!-- Email Body -->
                 <tr>
                     <td class="body" width="100%" cellpadding="0" cellspacing="0" style="border: hidden !important;">
-                        <table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0"
+                        <table class="inner-body" align="center" width="600" cellpadding="0" cellspacing="0"
                                role="presentation">
                             <!-- Body content -->
                             <tr>
diff --git a/backend/resources/views/vendor/mail/html/message.blade.php b/backend/resources/views/vendor/mail/html/message.blade.php
index 737c8aa3e3..62082a6312 100644
--- a/backend/resources/views/vendor/mail/html/message.blade.php
+++ b/backend/resources/views/vendor/mail/html/message.blade.php
@@ -3,11 +3,9 @@
     <x-slot:header>
         <x-mail::header :url="config('app.email_logo_link_url')">
             @if($appLogo = config('app.email_logo_url'))
-                <img src="{{ $appLogo }}" class="logo" alt="{{ config('app.name') }}"
-                     style="max-width: 300px;">
+                <img src="{{ $appLogo }}" class="logo" alt="{{ config('app.name') }}">
             @else
-                <img src="{{ config('app.frontend_url') }}/logos/hi-events-stacked-light.png" class="logo" alt="{{ config('app.name') }}"
-                     style="max-width: 300px;">
+                <img src="{{ config('app.frontend_url') }}/logos/hi-events-stacked-light.png" class="logo" alt="{{ config('app.name') }}">
             @endif
         </x-mail::header>
     </x-slot:header>
diff --git a/backend/resources/views/vendor/mail/html/themes/default.css b/backend/resources/views/vendor/mail/html/themes/default.css
index 607cae0a21..5ad747f517 100644
--- a/backend/resources/views/vendor/mail/html/themes/default.css
+++ b/backend/resources/views/vendor/mail/html/themes/default.css
@@ -3,17 +3,18 @@
 body,
 body *:not(html):not(style):not(br):not(tr):not(code) {
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     position: relative;
 }
 
 body {
     -webkit-text-size-adjust: none;
-    background-color: #ffffff;
-    color: #718096;
+    -webkit-font-smoothing: antialiased;
+    background-color: #f4f2f7;
+    color: #56506a;
     height: 100%;
-    line-height: 1.4;
+    line-height: 1.65;
     margin: 0;
     padding: 0;
     width: 100% !important;
@@ -23,12 +24,13 @@ p,
 ul,
 ol,
 blockquote {
-    line-height: 1.4;
+    line-height: 1.65;
     text-align: left;
 }
 
 a {
-    color: #3869d4;
+    color: #40296c;
+    text-decoration: underline;
 }
 
 a img {
@@ -38,36 +40,84 @@ a img {
 /* Typography */
 
 h1 {
-    color: #3d4852;
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #191029;
+    font-size: 25px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+    margin: 0 0 16px;
     text-align: left;
 }
 
 h2 {
-    font-size: 16px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #2b2140;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
+    margin: 28px 0 10px;
     text-align: left;
 }
 
 h3 {
-    font-size: 14px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #2b2140;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 24px 0 8px;
     text-align: left;
 }
 
 p {
     font-size: 16px;
-    line-height: 1.5em;
-    margin-top: 0;
+    line-height: 1.65;
+    margin: 0 0 16px;
     text-align: left;
 }
 
 p.sub {
-    font-size: 12px;
+    color: #8e879e;
+    font-size: 13px;
+}
+
+strong,
+b {
+    color: #2b2140;
+    font-weight: 600;
+}
+
+ul,
+ol {
+    margin: 0 0 16px;
+    padding-left: 20px;
+}
+
+li {
+    font-size: 16px;
+    line-height: 1.65;
+    margin-bottom: 6px;
+}
+
+hr {
+    border: none;
+    border-top: 1px solid #ebe7f2;
+    margin: 32px 0;
+}
+
+blockquote {
+    border-left: 3px solid #e2dcee;
+    color: #8e879e;
+    margin: 0 0 16px;
+    padding: 2px 0 2px 16px;
+}
+
+code {
+    background-color: #f3f0f9;
+    border-radius: 4px;
+    color: #40296c;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 14px;
+    padding: 2px 6px;
 }
 
 img {
@@ -80,7 +130,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
+    background-color: #f4f2f7;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -98,21 +148,22 @@ img {
 /* Header */
 
 .header {
-    padding: 25px 0;
+    padding: 32px 0 28px;
     text-align: center;
 }
 
 .header a {
-    color: #3d4852;
+    color: #191029;
     font-size: 19px;
-    font-weight: bold;
+    font-weight: 700;
+    letter-spacing: -0.02em;
     text-decoration: none;
 }
 
 /* Logo */
 
 .logo {
-    max-width: 300px;
+    max-width: 220px;
     width: 150px;
 }
 
@@ -122,9 +173,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
-    border-bottom: 1px solid #edf2f7;
-    border-top: 1px solid #edf2f7;
+    background-color: #f4f2f7;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -133,27 +182,31 @@ img {
 .inner-body {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
-    -premailer-width: 570px;
+    -premailer-width: 600px;
     background-color: #ffffff;
-    border-color: #e8e5ef;
-    border-radius: 2px;
-    border-width: 1px;
-    box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015);
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(25, 16, 41, 0.04), 0 10px 28px rgba(25, 16, 41, 0.06);
     margin: 0 auto;
     padding: 0;
-    width: 570px;
+    width: 600px;
 }
 
 /* Subcopy */
 
 .subcopy {
-    border-top: 1px solid #e8e5ef;
-    margin-top: 25px;
-    padding-top: 25px;
+    border-top: 1px solid #ebe7f2;
+    margin-top: 32px;
+    padding-top: 24px;
 }
 
 .subcopy p {
-    font-size: 14px;
+    color: #8e879e;
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.subcopy a {
+    color: #8e879e;
 }
 
 /* Footer */
@@ -161,21 +214,27 @@ img {
 .footer {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
-    -premailer-width: 570px;
+    -premailer-width: 600px;
     margin: 0 auto;
     padding: 0;
     text-align: center;
-    width: 570px;
+    width: 600px;
+}
+
+.footer-cell {
+    padding: 28px 32px 40px;
 }
 
 .footer p {
-    color: #b0adc5;
-    font-size: 12px;
+    color: #948da3;
+    font-size: 13px;
+    line-height: 1.6;
+    margin: 0;
     text-align: center;
 }
 
 .footer a {
-    color: #b0adc5;
+    color: #948da3;
     text-decoration: underline;
 }
 
@@ -185,27 +244,35 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    margin: 30px auto;
+    border-collapse: collapse;
+    margin: 24px auto;
     width: 100%;
 }
 
 .table th {
-    border-bottom: 1px solid #edeff2;
+    border-bottom: 1px solid #ebe7f2;
+    color: #8e879e;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
     margin: 0;
-    padding-bottom: 8px;
+    padding: 0 0 10px;
+    text-align: left;
+    text-transform: uppercase;
 }
 
 .table td {
-    color: #74787e;
+    border-bottom: 1px solid #f2eff7;
+    color: #56506a;
     font-size: 15px;
-    line-height: 18px;
+    line-height: 1.5;
     margin: 0;
-    padding: 10px 0;
+    padding: 12px 0;
 }
 
 .content-cell {
     max-width: 100vw;
-    padding: 32px;
+    padding: 40px;
 }
 
 /* Buttons */
@@ -214,7 +281,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    margin: 30px auto;
+    margin: 28px auto;
     padding: 0;
     text-align: center;
     width: 100%;
@@ -222,52 +289,53 @@ img {
 
 .button {
     -webkit-text-size-adjust: none;
-    border-radius: 4px;
-    color: #fff;
+    border-radius: 10px;
+    color: #ffffff;
     display: inline-block;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    line-height: 1.2;
     overflow: hidden;
+    padding: 15px 34px;
     text-decoration: none;
 }
 
 .button-blue,
 .button-primary {
-    background-color: #2d3748;
-    padding: 16px 48px;
+    background-color: #40296c;
+    box-shadow: 0 2px 6px rgba(64, 41, 108, 0.24);
 }
 
 .button-green,
 .button-success {
-    background-color: #48bb78;
-    border-bottom: 8px solid #48bb78;
-    border-left: 18px solid #48bb78;
-    border-right: 18px solid #48bb78;
-    border-top: 8px solid #48bb78;
+    background-color: #16a34a;
+    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.24);
 }
 
 .button-red,
 .button-error {
-    background-color: #e53e3e;
-    border-bottom: 8px solid #e53e3e;
-    border-left: 18px solid #e53e3e;
-    border-right: 18px solid #e53e3e;
-    border-top: 8px solid #e53e3e;
+    background-color: #dc2626;
+    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.24);
 }
 
 /* Panels */
 
 .panel {
-    border-left: #2d3748 solid 4px;
-    margin: 21px 0;
+    margin: 24px 0;
 }
 
 .panel-content {
-    background-color: #edf2f7;
-    color: #718096;
-    padding: 16px;
+    background-color: #f7f5fb;
+    border-left: 3px solid #40296c;
+    border-radius: 10px;
+    color: #56506a;
+    padding: 18px 20px;
 }
 
 .panel-content p {
-    color: #718096;
+    color: #56506a;
+    margin-bottom: 12px;
 }
 
 .panel-item {
diff --git a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
index 139ce3f85a..246fc4901b 100644
--- a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
+++ b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
@@ -61,15 +61,18 @@
   &::after {
     content: '';
     position: absolute;
-    top: 0;
-    right: 0;
+    top: -1px;
     bottom: 0;
-    width: 1px;
+    left: 100%;
+    width: 18px;
     background: linear-gradient(
                     to right,
-                    rgba(255, 255, 255, 0.1),
-                    rgba(255, 255, 255, 0)
+                    rgba(20, 10, 40, 0.11),
+                    rgba(20, 10, 40, 0.045) 45%,
+                    rgba(20, 10, 40, 0)
     );
+    opacity: 0;
+    transition: opacity 0.2s ease;
     pointer-events: none;
   }
 }
@@ -83,19 +86,27 @@
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
+    top: -1px;
     bottom: 0;
-    width: 1px;
+    right: 100%;
+    width: 18px;
     background: linear-gradient(
                     to left,
-                    rgba(255, 255, 255, 0.1),
-                    rgba(255, 255, 255, 0)
+                    rgba(20, 10, 40, 0.11),
+                    rgba(20, 10, 40, 0.045) 45%,
+                    rgba(20, 10, 40, 0)
     );
+    opacity: 0;
+    transition: opacity 0.2s ease;
     pointer-events: none;
   }
 }
 
+.showStartShadow tbody .stickyLeft::after,
+.showEndShadow tbody .stickyRight::before {
+  opacity: 1;
+}
+
 .tableHead .stickyLeft,
 .tableHead .stickyRight {
   background-color: #f2f0f5;
diff --git a/frontend/src/components/common/TanStackTable/index.tsx b/frontend/src/components/common/TanStackTable/index.tsx
index 9e272ac1b0..062edfd23b 100644
--- a/frontend/src/components/common/TanStackTable/index.tsx
+++ b/frontend/src/components/common/TanStackTable/index.tsx
@@ -1,6 +1,6 @@
 import {ColumnDef, flexRender, getCoreRowModel, useReactTable, VisibilityState,} from '@tanstack/react-table';
 import {Table as MantineTable} from '@mantine/core';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Card} from '../Card';
 import classes from './TanStackTable.module.scss';
 
@@ -49,6 +49,34 @@ export function TanStackTable<TData>({
         return {};
     });
 
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const [showStartShadow, setShowStartShadow] = useState(false);
+    const [showEndShadow, setShowEndShadow] = useState(false);
+
+    const updateStickyShadows = useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        const {scrollLeft, clientWidth, scrollWidth} = viewport;
+        setShowStartShadow(scrollLeft > 1);
+        setShowEndShadow(scrollWidth - clientWidth - scrollLeft > 1);
+    }, []);
+
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        updateStickyShadows();
+        const resizeObserver = new ResizeObserver(updateStickyShadows);
+        resizeObserver.observe(viewport);
+        if (viewport.firstElementChild) {
+            resizeObserver.observe(viewport.firstElementChild);
+        }
+        return () => resizeObserver.disconnect();
+    }, [updateStickyShadows]);
+
     const table = useReactTable({
         data,
         columns,
@@ -69,8 +97,12 @@ export function TanStackTable<TData>({
     const tableContent = (
         <MantineTable.ScrollContainer minWidth={200} scrollAreaProps={{
             type: 'hover',
+            viewportRef: viewportRef,
+            onScrollPositionChange: updateStickyShadows,
         }}>
-            <MantineTable className={classes.table}>
+            <MantineTable
+                className={`${classes.table} ${showStartShadow ? classes.showStartShadow : ''} ${showEndShadow ? classes.showEndShadow : ''}`}
+            >
                 {!hideHeader && (
                     <MantineTable.Thead className={classes.tableHead}>
                         {table.getHeaderGroups().map((headerGroup) => (
diff --git a/frontend/src/components/forms/OrganizerForm/index.tsx b/frontend/src/components/forms/OrganizerForm/index.tsx
index fa6c1aaf92..a7887d7b3d 100644
--- a/frontend/src/components/forms/OrganizerForm/index.tsx
+++ b/frontend/src/components/forms/OrganizerForm/index.tsx
@@ -95,15 +95,20 @@ export const OrganizerCreateForm = ({onSuccess, onCancel}: OrganizerFormProps) =
     }
 
     useEffect(() => {
-        if (meFetched) {
-            form.setFieldValue('currency', String(account?.currency_code));
+        if (!accountFetched) {
+            return;
         }
-        if (accountFetched) {
-            form.setFieldValue('name', String(account?.name));
-            form.setFieldValue('email', String(me?.email));
-            form.setFieldValue('timezone', String(me?.timezone));
+        form.setFieldValue('currency', account?.currency_code ?? '');
+        form.setFieldValue('name', account?.name ?? '');
+    }, [accountFetched]);
+
+    useEffect(() => {
+        if (!meFetched) {
+            return;
         }
-    }, [accountFetched, meFetched]);
+        form.setFieldValue('email', me?.email ?? '');
+        form.setFieldValue('timezone', me?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }, [meFetched]);
 
     return (
         <LoadingContainer>
diff --git a/frontend/src/components/layouts/AppLayout/AppLayout.module.scss b/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
index 1161f7668e..a2ef5e82a1 100644
--- a/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
+++ b/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
@@ -6,8 +6,9 @@
     "topbar"
     "main";
   grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   height: 100vh;
+  height: 100dvh;
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   @media (min-width: 768px) {
@@ -15,13 +16,13 @@
       "sidebar topbar"
       "sidebar main";
     grid-template-rows: auto 1fr;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 280px minmax(0, 1fr);
 
     &.closed {
       grid-template-areas:
         "topbar"
         "main";
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
     }
   }
 
diff --git a/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss b/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
index fb722a5a00..51a1c09652 100644
--- a/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
+++ b/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
@@ -130,6 +130,7 @@
     display: flex;
     align-items: center;
     margin-left: auto;
+    flex-shrink: 0;
   }
 
   &.withShadow {
@@ -138,6 +139,7 @@
 
   .burger {
     --burger-color: var(--hi-color-white);
+    flex-shrink: 0;
     @include mixins.respond-above(md) {
       display: none;
     }
@@ -150,16 +152,18 @@
     display: flex;
     justify-content: center;
     padding-inline: 5px;
+    min-width: 0;
 
     a {
       display: flex;
+      min-width: 0;
     }
 
     img {
-      max-width: 120px;
+      max-width: min(120px, 100%);
 
       @include mixins.respond-below(sm) {
-        max-width: 100px;
+        max-width: min(100px, 100%);
       }
     }
 
diff --git a/frontend/src/components/layouts/Event/Event.module.scss b/frontend/src/components/layouts/Event/Event.module.scss
index c8163729d2..5189aae103 100644
--- a/frontend/src/components/layouts/Event/Event.module.scss
+++ b/frontend/src/components/layouts/Event/Event.module.scss
@@ -6,9 +6,10 @@
   position: relative;
   margin-left: 0px;
   margin-right: auto;
+  flex-shrink: 0;
 
   @include mixins.respond-below(md) {
-    margin-left: 16px;
+    margin-left: 8px;
   }
 
   .statusAction {
diff --git a/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss b/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
index 4dcc37182e..bb1b526e1c 100644
--- a/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
+++ b/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
@@ -70,9 +70,10 @@
   position: relative;
   margin-left: 0px;
   margin-right: auto;
+  flex-shrink: 0;
 
   @include mixins.respond-below(md) {
-    margin-left: 16px;
+    margin-left: 8px;
   }
 
   .statusAction {