diff --git a/packages/berlin/src/components/tabs/TabsHeader.tsx b/packages/berlin/src/components/tabs/TabsHeader.tsx
index 1c256e88..abee1a7d 100644
--- a/packages/berlin/src/components/tabs/TabsHeader.tsx
+++ b/packages/berlin/src/components/tabs/TabsHeader.tsx
@@ -1,19 +1,16 @@
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';
 import { Body } from '../typography/Body.styled';
 import { Tab } from './TabsHeader.styled';
 
 type TabsHeaderProps = {
   tabNames: string[];
-  initialTab?: string;
+  activeTab?: string;
   className?: string;
   onTabChange?: (tab: string) => void;
 };
 
-export function TabsHeader({ tabNames, initialTab, className, onTabChange }: TabsHeaderProps) {
-  const [activeTab, setActiveTab] = useState<string>(initialTab || tabNames[0]);
-
+export function TabsHeader({ tabNames, activeTab, className, onTabChange }: TabsHeaderProps) {
   const handleTabClick = (tab: string) => {
-    setActiveTab(tab);
     if (onTabChange) {
       onTabChange(tab);
     }
diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx
index 7846f9af..c8e079a3 100644
--- a/packages/berlin/src/pages/Event.tsx
+++ b/packages/berlin/src/pages/Event.tsx
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 // API
-import { fetchEvent, fetchEventCycles } from 'api';
+import { fetchEvent, fetchEventCycles, GetCycleResponse } from 'api';
 
 // Components
 import { Body } from '../components/typography/Body.styled';
@@ -44,8 +44,66 @@ function Event() {
     [eventCycles],
   );
 
+  const initialTab = useMemo(
+    () => (openCycles && openCycles.length > 0 ? 'upcoming' : 'past'),
+    [openCycles],
+  );
+
+  return (
+    <>
+      <Onboarding steps={eventSteps} type="event" />
+      <section className="event grid w-full grid-cols-3 gap-4">
+        <div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
+          <BackButton fallbackRoute="/events" />
+          <Subtitle>{event?.name}</Subtitle>
+          {event?.description && (
+            <div>
+              <Markdown
+                components={{
+                  a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
+                  p: ({ node, ...props }) => <Body>{props.children}</Body>,
+                }}
+              >
+                {event.description}
+              </Markdown>
+            </div>
+          )}
+        </div>
+        {event?.imageUrl && (
+          <div className="col-span-3 md:col-span-1">
+            <img
+              src={event?.imageUrl}
+              alt={`${event.name} image`}
+              className="h-52 w-full object-cover object-center md:h-full"
+            />
+          </div>
+        )}
+        <Questions
+          initialTab={initialTab}
+          key={initialTab}
+          closedCycles={closedCycles}
+          eventId={eventId}
+          openCycles={openCycles}
+        />
+      </section>
+    </>
+  );
+}
+
+function Questions({
+  initialTab,
+  openCycles,
+  closedCycles,
+  eventId,
+}: {
+  initialTab: string;
+  openCycles: GetCycleResponse[] | undefined;
+  eventId?: string;
+  closedCycles: GetCycleResponse[] | undefined;
+}) {
+  const [activeTab, setActiveTab] = useState<string>(initialTab);
+
   const tabNames = ['upcoming', 'past'];
-  const [activeTab, setActiveTab] = useState<string>('upcoming');
 
   const tabs = {
     upcoming: (
@@ -73,46 +131,15 @@ function Event() {
   };
 
   return (
-    <>
-      <Onboarding steps={eventSteps} type="event" />
-      <FlexColumn $gap="2rem" className="event">
-        <section className="grid w-full grid-cols-3 gap-x-4">
-          <div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
-            <BackButton fallbackRoute="/events" />
-            <Subtitle>{event?.name}</Subtitle>
-            {event?.description && (
-              <div>
-                <Markdown
-                  components={{
-                    a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
-                    p: ({ node, ...props }) => <Body>{props.children}</Body>,
-                  }}
-                >
-                  {event.description}
-                </Markdown>
-              </div>
-            )}
-          </div>
-          {event?.imageUrl && (
-            <div className="col-span-1">
-              <img
-                src={event?.imageUrl}
-                alt={`${event.name} image`}
-                className="h-full w-full object-cover object-center"
-              />
-            </div>
-          )}
-        </section>
-        <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
-          <Subtitle>Questions</Subtitle>
-          <Tabs.TabsHeader className="tabs" tabNames={tabNames} onTabChange={setActiveTab} />
-        </section>
-        <FlexColumn className="cycles">
-          <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
-        </FlexColumn>
+    <FlexColumn className="col-span-3">
+      <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
+        <Subtitle>Questions</Subtitle>
+        <Tabs.TabsHeader tabNames={tabNames} activeTab={activeTab} onTabChange={setActiveTab} />
+      </section>
+      <FlexColumn className="cycles">
+        <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
       </FlexColumn>
-    </>
+    </FlexColumn>
   );
 }
-
 export default Event;
