diff --git a/app/components/EventDetailsTopInfoSection.tsx b/app/components/EventDetailsTopInfoSection.tsx
new file mode 100644
index 0000000..f96543a
--- /dev/null
+++ b/app/components/EventDetailsTopInfoSection.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import BondscapeButton from "@/components/BondscapeButton";
+
+interface Props {
+  visible: boolean;
+  title: string;
+  description: string;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+const EventDetailsTopInfoSection = ({
+  visible,
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+}: Props) => {
+  return (
+    <div className="flex flex-1 flex-col gap-[12px] bg-bondscape-surface p-[24px] rounded-[16px]">
+      <div className="text-2xl font-semibold text-bondscape-text_neutral_900">
+        {title}
+      </div>
+      <div className="flex flex-row items-center justify-between">
+        <div className="flex flex-1 text-bondscape-text_neutral_900 text-base">
+          {description}
+        </div>
+        {visible && (
+          <BondscapeButton
+            textClassName="text-sm"
+            className="w-[165px] px-[20px] py-[10px] rounded-[10px] z-4 h-10"
+            loading={false}
+            text={buttonText}
+            onClick={onButtonClick}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventDetailsTopInfoSection;
diff --git a/app/components/EventQRCodeDialog.tsx b/app/components/EventQRCodeDialog.tsx
new file mode 100644
index 0000000..3545b2c
--- /dev/null
+++ b/app/components/EventQRCodeDialog.tsx
@@ -0,0 +1,134 @@
+"use client";
+import React, { useCallback } from "react";
+import Image from "next/image";
+import { PuffLoader } from "react-spinners";
+import Skeleton from "react-loading-skeleton";
+import { Button } from "primereact/button";
+import { toast } from "react-toastify";
+import { Dialog } from "primereact/dialog";
+
+interface Props {
+  /**
+   * Name of the event to which the QR code is associated.
+   */
+  eventName: string | undefined;
+
+  /**
+   * Link associated to the QR code. If undefined, the button to copy the link will not be disabled.
+   */
+  linkUrl: string | undefined;
+
+  /**
+   * The QR code image source.
+   */
+  qrCodeImageSrc: string | undefined;
+
+  /**
+   * Whether the dialog is visible or not.
+   */
+  visible: boolean;
+
+  /**
+   * Callback to be called when the dialog is hidden.
+   */
+  onHide: () => void;
+}
+
+const EventQRCodeDialog = ({
+  eventName,
+  linkUrl,
+  qrCodeImageSrc,
+  visible,
+  onHide,
+}: Props) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const saveQrCode = useCallback(async () => {
+    if (!qrCodeImageSrc) return;
+
+    setIsLoading(true);
+    try {
+      // Get the QR Code image data
+      const response = await fetch(qrCodeImageSrc);
+      const block = await response.blob();
+      const url = URL.createObjectURL(block);
+
+      // Create a link that contains the image data
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `bondscape_${eventName}_qr_code.png`;
+      document.body.appendChild(a);
+
+      // Click the link to download the image
+      a.click();
+
+      // Remove the link
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
+  }, [eventName, qrCodeImageSrc]);
+
+  return (
+    <Dialog
+      draggable={false}
+      modal={true}
+      blockScroll={true}
+      className="flex w-[480px]"
+      visible={visible}
+      onHide={onHide}
+    >
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <div className="p-2.5 rounded-[8px] bg-white">
+          {qrCodeImageSrc ? (
+            <Image
+              alt={"Qr code"}
+              src={qrCodeImageSrc}
+              width={158}
+              height={158}
+            />
+          ) : (
+            <PuffLoader color={"#A579FF"} />
+          )}
+        </div>
+        <div className="flex flex-1 flex-col gap-[40px] items-center">
+          <div className="text-xl font-semibold text-bondscape-text_neutral_900 mt-6">
+            {eventName ?? <Skeleton width={500} />}
+          </div>
+          <div className="flex flex-col gap-4">
+            {linkUrl && (
+              <Button
+                outlined
+                className="w-[432px] justify-center font-semibold"
+                pt={{
+                  label: {
+                    className: "font-semibold",
+                  },
+                }}
+                label={"Copy Link"}
+                onClick={() => {
+                  navigator.clipboard.writeText(linkUrl);
+                  toast("Link copied to clipboard!");
+                }}
+              />
+            )}
+            <Button
+              loading={isLoading}
+              className="w-[432px] justify-center font-semibold"
+              pt={{
+                label: {
+                  className: "font-semibold",
+                },
+              }}
+              label={"Download QR Code"}
+              onClick={saveQrCode}
+            />
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default EventQRCodeDialog;
diff --git a/app/creator/events/[id]/page.tsx b/app/creator/events/[id]/page.tsx
index 3bfc86b..f5f9f3d 100644
--- a/app/creator/events/[id]/page.tsx
+++ b/app/creator/events/[id]/page.tsx
@@ -1,70 +1,59 @@
 "use client";
-import BondscapeButton from "@/components/BondscapeButton";
 import useCustomLazyQuery from "@/hooks/graphql/useCustomLazyQuery";
 import useBreakpoints from "@/hooks/layout/useBreakpoints";
 import useFormatDateToTZ from "@/hooks/timeformat/useFormatDateToTZ";
 import MainLayout from "@/layouts/MainLayout";
-import {
-  extractTimezoneOffset,
-  serializeTimezoneOffset,
-} from "@/lib/DateUtils";
+import {extractTimezoneOffset, serializeTimezoneOffset,} from "@/lib/DateUtils";
 import GetEventJoinLink from "@/services/axios/requests/GetEventJoinLink";
 import GetQrCode from "@/services/axios/requests/GetQrCode";
 import GetEventById from "@/services/graphql/queries/bondscape/GetEventById";
-import { Event, GQLEventsResult } from "@/types/event";
+import {Event, GQLEventsResult} from "@/types/event";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { ProgressBar } from "primereact/progressbar";
-import { classNames } from "primereact/utils";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {useRouter} from "next/navigation";
+import {ProgressBar} from "primereact/progressbar";
+import {classNames} from "primereact/utils";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import Skeleton from "react-loading-skeleton";
-import { PuffLoader } from "react-spinners";
-import { toast } from "react-toastify";
+import GetEventDetailsLink from "@/services/axios/requests/GetEventDetailsLink";
+import EventDetailsTopInfoSection from "@/components/EventDetailsTopInfoSection";
+import EventQRCodeDialog from "@/components/EventQRCodeDialog";
 
+/**
+ * Event details page.
+ * @constructor
+ */
 export default function EventDetails({ params }: { params: any }) {
-  // States
+  // ------------------------------------------------------------------------------------------------------------------
+  // --- States
+  // ------------------------------------------------------------------------------------------------------------------
+
   const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [eventQrCode, setEventQrCode] = useState("");
-  const [generatingQr, setGeneratingQr] = useState(false);
-  const [qrCodeVisible, setQrCodeVisible] = useState(false);
 
-  // Hooks
+  const [eventQRCodeDialogURL, setEventQRCodeDialogURL] = useState<
+    string | undefined
+  >(undefined);
+  const [eventQRCodeDialogImageSrc, setEventQRCodeDialogImageSrc] = useState<
+    string | undefined
+  >(undefined);
+  const [eventQRCodeDialogVisible, setEventQRCodeDialogVisible] =
+    useState(false);
+
+  const [eventShareQRCode, setEventShareQRCode] = useState("");
+  const [eventJoinQRCode, setEventJoinQRCode] = useState("");
+
+  // ------------------------------------------------------------------------------------------------------------------
+  // --- Hooks
+  // ------------------------------------------------------------------------------------------------------------------
+
   const [isMobile, isMd] = useBreakpoints();
   const router = useRouter();
   const [getEventById] = useCustomLazyQuery<GQLEventsResult>(GetEventById);
   const { getEventPeriodExtended } = useFormatDateToTZ();
 
-  // Callbacks
-
-  const generateQrCode = useCallback(async (url: string) => {
-    const result = await GetQrCode(url, "url");
-    if (result.isOk()) {
-      setEventQrCode(result.value.url);
-    }
-  }, []);
-
-  const toDataURL = useCallback(async () => {
-    setGeneratingQr(true);
-    try {
-      const response = await fetch(eventQrCode);
-      const blob = await response.blob();
-      return URL.createObjectURL(blob);
-    } finally {
-      setGeneratingQr(false);
-    }
-  }, [eventQrCode]);
-
-  const saveQrCode = useCallback(async () => {
-    const a = document.createElement("a");
-    a.href = await toDataURL();
-    a.download = `bondscape_${selectedEvent?.name}_qr_code.png`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }, [selectedEvent?.name, toDataURL]);
+  // ------------------------------------------------------------------------------------------------------------------
+  // --- Callbacks
+  // ------------------------------------------------------------------------------------------------------------------
 
   const loadEvent = useCallback(
     async (eventId: string) => {
@@ -80,17 +69,41 @@ export default function EventDetails({ params }: { params: any }) {
     [getEventById],
   );
 
-  // Effects
+  const showEventJoinQRCode = useCallback(() => {
+    setEventQRCodeDialogImageSrc(eventJoinQRCode);
+    setEventQRCodeDialogURL(undefined);
+    setEventQRCodeDialogVisible(true);
+  }, [eventJoinQRCode]);
+
+  const showEventShareQRCode = useCallback(() => {
+    setEventQRCodeDialogImageSrc(eventShareQRCode);
+    setEventQRCodeDialogURL(selectedEvent?.detailsLink);
+    setEventQRCodeDialogVisible(true);
+  }, [eventShareQRCode, selectedEvent?.detailsLink]);
+
+  // ------------------------------------------------------------------------------------------------------------------
+  // --- Effects
+  // ------------------------------------------------------------------------------------------------------------------
 
   useEffect(() => {
     if (selectedEvent) {
-      GetEventJoinLink(selectedEvent.id).then((result) => {
-        if (result.isOk()) {
-          generateQrCode(result.value);
-        }
-      });
+      GetEventJoinLink(selectedEvent.id)
+        .andThen((url) => GetQrCode(url, "url"))
+        .then((result) => {
+          if (result.isOk()) {
+            setEventJoinQRCode(result.value.url);
+          }
+        });
+
+      GetEventDetailsLink(selectedEvent.id)
+        .andThen((url) => GetQrCode(url, "url"))
+        .then((result) => {
+          if (result.isOk()) {
+            setEventShareQRCode(result.value.url);
+          }
+        });
     }
-  }, [generateQrCode, selectedEvent]);
+  }, [selectedEvent]);
 
   useEffect(() => {
     const eventId = params.id as string;
@@ -110,6 +123,10 @@ export default function EventDetails({ params }: { params: any }) {
     }
   }, [selectedEvent]);
 
+  // ------------------------------------------------------------------------------------------------------------------
+  // --- Screen rendering
+  // ------------------------------------------------------------------------------------------------------------------
+
   if (isMobile || isMd) {
     return (
       <div className="flex flex-1 h-screen justify-center items-center px-xMobile">
@@ -128,26 +145,24 @@ export default function EventDetails({ params }: { params: any }) {
       editButtonHref={`/creator/create/${params.id}`}
     >
       <div className="flex flex-1 flex-col lg:pb-12 xl:pb-24 max-w-[51rem] xl:max-w-[70rem] mx-auto mt-[32px] gap-[24px]">
-        <div className="flex flex-1 flex-col gap-[12px] bg-bondscape-surface p-[24px] rounded-[16px]">
-          <div className="text-2xl font-semibold text-bondscape-text_neutral_900">
-            Event Check-in
-          </div>
-          <div className="flex flex-row items-center justify-between">
-            <div className="text-bondscape-text_neutral_900 text-base">
-              Save this QR and shows it to attendees at the event to let them
-              join the memories creation!
-            </div>
-            {selectedEvent && (
-              <BondscapeButton
-                textClassName="text-sm"
-                className="w-[165px] px-[20px] py-[10px] rounded-[10px] z-4 h-10"
-                loading={false}
-                text={"Show QR Code"}
-                onClick={() => setQrCodeVisible(true)}
-              />
-            )}
-          </div>
-        </div>
+        <EventDetailsTopInfoSection
+          visible={selectedEvent !== undefined}
+          title={"Share your event"}
+          description={
+            "Share your event with other users so they can find it easily!"
+          }
+          buttonText={"Show URL"}
+          onButtonClick={showEventShareQRCode}
+        />
+        <EventDetailsTopInfoSection
+          visible={selectedEvent !== undefined}
+          title={"Event Check-in"}
+          description={
+            "Save this QR and show it to attendees at the event to let them create memories!"
+          }
+          buttonText={"Show QR Code"}
+          onButtonClick={showEventJoinQRCode}
+        />
         <div className="flex flex-1 flex-col bg-bondscape-surface p-[24px] rounded-[16px]">
           <div className="relative w-[48rem] h-[27rem] xl:w-[67rem] xl:h-[37.7rem]">
             {selectedEvent ? (
@@ -435,63 +450,13 @@ export default function EventDetails({ params }: { params: any }) {
           </div>
         </div>
       </div>
-      <Dialog
-        draggable={false}
-        modal={true}
-        blockScroll={true}
-        className="flex w-[480px]"
-        visible={qrCodeVisible}
-        onHide={() => setQrCodeVisible(false)}
-      >
-        <div className="flex flex-1 flex-col items-center justify-center">
-          <div className="p-2.5 rounded-[8px] bg-white">
-            {eventQrCode ? (
-              <Image
-                alt={"Qr code"}
-                src={eventQrCode}
-                width={158}
-                height={158}
-              />
-            ) : (
-              <PuffLoader color={"#A579FF"} />
-            )}
-          </div>
-          <div className="flex flex-1 flex-col gap-[40px] items-center">
-            <div className="text-xl font-semibold text-bondscape-text_neutral_900 mt-6">
-              {selectedEvent?.name ?? <Skeleton width={500} />}
-            </div>
-            {selectedEvent && (
-              <div className="flex flex-col gap-4">
-                <Button
-                  outlined
-                  className="w-[432px] justify-center font-semibold"
-                  pt={{
-                    label: {
-                      className: "font-semibold",
-                    },
-                  }}
-                  label={"Copy Link"}
-                  onClick={() => {
-                    navigator.clipboard.writeText(selectedEvent.detailsLink);
-                    toast("Link copied to clipboard!");
-                  }}
-                />
-                <Button
-                  loading={generatingQr}
-                  className="w-[432px] justify-center font-semibold"
-                  pt={{
-                    label: {
-                      className: "font-semibold",
-                    },
-                  }}
-                  label={"Download QR Code"}
-                  onClick={() => saveQrCode()}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </Dialog>
+      <EventQRCodeDialog
+        eventName={selectedEvent?.name}
+        linkUrl={eventQRCodeDialogURL}
+        qrCodeImageSrc={eventQRCodeDialogImageSrc}
+        visible={eventQRCodeDialogVisible}
+        onHide={() => setEventQRCodeDialogVisible(false)}
+      />
     </MainLayout>
   );
 }
diff --git a/app/services/axios/requests/GetEventDetailsLink/index.ts b/app/services/axios/requests/GetEventDetailsLink/index.ts
new file mode 100644
index 0000000..92189f1
--- /dev/null
+++ b/app/services/axios/requests/GetEventDetailsLink/index.ts
@@ -0,0 +1,11 @@
+import { ResultAsync } from "neverthrow";
+import axiosInstance from "../../index";
+
+const GetEventDetailsLink = (eventId: string): ResultAsync<string, Error> => {
+  return ResultAsync.fromPromise(
+    axiosInstance.get(`/events/${eventId}/links/details`),
+    (e: any) => e ?? Error("Error getting the link"),
+  ).map((response) => response.data);
+};
+
+export default GetEventDetailsLink;