diff --git a/src/Components/Core/Adapters/BackendAdapter/MockBackendAdapter.ts b/src/Components/Core/Adapters/BackendAdapter/MockBackendAdapter.ts
index f07bc2e89..af8a248f0 100644
--- a/src/Components/Core/Adapters/BackendAdapter/MockBackendAdapter.ts
+++ b/src/Components/Core/Adapters/BackendAdapter/MockBackendAdapter.ts
@@ -891,7 +891,11 @@ export default class MockBackendAdapter implements IBackendPort {
           spaceTemplateStyle: "Campus",
           spaceStory: {
             introStory: {
-              storyTexts: ["Hallo", "Ich bin ein Story-Element"],
+              storyTexts: [
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolorekasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+              ],
               elementModel: "a_npc_defaultnpc",
             },
             outroStory: {
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
index c9c6678d4..74aea9509 100644
--- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
+++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
@@ -1,3 +1,12 @@
+import campusNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_dozentlukas.png";
+import campusNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_dozentlukas_close.png";
+import arcadeNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_sheriffjustice.png";
+import arcadeNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_sheriffjustice_close.png";
+import defaultNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_defaultnpc.png";
+import defaultNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_defaultnpc_close.png";
+import robotNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_alerobot.png";
+import robotNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_alerobot_close.png";
+
 import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
 import useBuilder from "~ReactComponents/ReactRelated/CustomHooks/useBuilder";
 import StoryElementViewModel from "./StoryElementViewModel";
@@ -6,10 +15,31 @@ import BUILDER_TYPES from "~DependencyInjection/Builders/BUILDER_TYPES";
 import useObservable from "~ReactComponents/ReactRelated/CustomHooks/useObservable";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import StyledModal from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledModal";
 import tailwindMerge from "../../../Utils/TailwindMerge";
 import { StoryElementType } from "src/Components/Core/Domain/Types/StoryElementType";
 import StyledButton from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledButton";
+import StyledContainer from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledContainer";
+import {
+  LearningElementModel,
+  LearningElementModelTypeEnums,
+} from "src/Components/Core/Domain/LearningElementModels/LearningElementModelTypes";
+
+function getNPCImage(
+  model: LearningElementModel | null,
+  close: boolean
+): string {
+  switch (model) {
+    case LearningElementModelTypeEnums.QuizElementModelTypes.RobotNPC:
+      return close ? robotNPCClose : robotNPC;
+    case LearningElementModelTypeEnums.QuizElementModelTypes.ArcadeNPC:
+      return close ? arcadeNPCClose : arcadeNPC;
+    case LearningElementModelTypeEnums.QuizElementModelTypes.CampusNPC:
+      return close ? campusNPCClose : campusNPC;
+    case LearningElementModelTypeEnums.QuizElementModelTypes.DefaultNPC:
+    default:
+      return close ? defaultNPCClose : defaultNPC;
+  }
+}
 
 export default function StoryElement({ className }: AdLerUIComponent<{}>) {
   const [viewModel, controller] = useBuilder<
@@ -19,6 +49,7 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
   const [isOpen, setOpen] = useObservable<boolean>(viewModel?.isOpen);
   const [pageId] = useObservable<number>(viewModel?.pageId);
   const [type] = useObservable<StoryElementType>(viewModel?.type);
+
   useObservable<boolean>(viewModel?.showOnlyIntro);
   useObservable<boolean>(viewModel?.showOnlyOutro);
   useObservable<boolean>(viewModel?.outroUnlocked);
@@ -87,101 +118,163 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
   } else {
     return null;
   }
+
   return (
-    <StyledModal
-      title={titleText}
-      onClose={() => {
-        closeModal();
-        controller.closePanel();
-      }}
-      showModal={isOpen}
-      className={tailwindMerge(
-        className,
-        "flex flex-col justify-center gap-2 p-5 rounded-lg"
-      )}
-    >
-      {!complexStory && createBasicLayout(contentTexts, pageId, controller)}
-      {complexStory && (
-        <>
-          {!viewModel.showOnlyIntro.Value && !viewModel.showOnlyOutro.Value && (
-            <>
-              <StyledButton
-                shape="freefloatcenter"
-                onClick={controller.onIntroButtonClicked}
-              >
-                {translate("introStoryTitle").toString()}
-              </StyledButton>
+    <StyledContainer className={tailwindMerge(className, "")}>
+      <div className="z-50 fixed top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center w-screen h-full lg:grid lg:grid-rows-3 lg:items-start">
+        {/* Background NPC */}
+        <div className="flex items-end justify-start invisible w-full row-start-2 pl-16 lg:visible lg:h-full">
+          <img
+            className="z-20 invisible object-contain h-0 -scale-x-100 brightness-125 lg:visible lg:h-full "
+            alt="LearningImage!"
+            src={getNPCImage(viewModel.modelType.Value, true)}
+          ></img>
+        </div>
+        {/* Modal */}
+        <div className="flex items-start justify-center pb-2 w-full lg:w-[95vw] max-w-7xl h-full lg:h-[32vh] pt-2 lg:pt-0 row-start-3 ">
+          <div className="grid grid-rows-5 p-2 xl:px-8 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto h-full w-full max-w-[95%] max-h-[95%] lg:max-h-[100%]   overflow-auto">
+            {/* Header */}
+            <div className="z-20 flex items-start justify-center w-full h-20 gap-2 p-2 pb-3 overflow-hidden text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl ">
+              <img
+                className="visible h-16 -scale-x-100 lg:invisible lg:h-0"
+                alt="LearningImage!"
+                src={getNPCImage(viewModel.modelType.Value, false)}
+              ></img>
+
+              <div className="w-full lg:text-xl">{titleText}</div>
+
               <StyledButton
-                shape="freefloatcenter"
-                onClick={controller.onOutroButtonClicked}
+                onClick={controller.closePanel}
+                className="w-8 h-8 p-1 text-xs roboto-black xl:w-10 xl:h-10 lg:w-10 lg:h-10 md:w-10 md:h-10 sm:w-10 sm:h-10"
+                shape="closebutton"
               >
-                {translate("outroStoryTitle").toString()}
+                X
               </StyledButton>
-            </>
-          )}
-          {(viewModel.showOnlyIntro.Value || viewModel.showOnlyOutro.Value) &&
-            createBasicLayoutWithBackButton(
-              contentTexts,
-              pageId,
-              controller,
-              translate("backButton").toString()
-            )}
-        </>
-      )}
-    </StyledModal>
-  );
-}
-
-function createBasicLayout(
-  contentTexts: string[],
-  pageId: number,
-  controller: IStoryElementController
-) {
-  return (
-    <>
-      {contentTexts[pageId].toString()}
-      <div className="flex justify-center gap-2">
-        {pageId < contentTexts.length - 1 && (
-          <StyledButton shape="square" onClick={controller.increasePageId}>
-            {">"}
-          </StyledButton>
-        )}
-        {pageId > 0 && (
-          <StyledButton shape="square" onClick={controller.decreasePageId}>
-            {"<"}
-          </StyledButton>
-        )}
+            </div>
+            <div className="row-span-4 items-center justify-center w-full grid grid-rows-4 lg:px-4">
+              {!complexStory &&
+                createBasicLayout(contentTexts, pageId, controller)}
+              {complexStory && (
+                <>
+                  {!viewModel.showOnlyIntro.Value &&
+                    !viewModel.showOnlyOutro.Value && (
+                      <>
+                        <StyledButton
+                          shape="freefloatcenter"
+                          onClick={controller.onIntroButtonClicked}
+                          className="!text-xl w-32"
+                        >
+                          {translate("introStoryTitle").toString()}
+                        </StyledButton>
+                        <StyledButton
+                          shape="freefloatcenter"
+                          onClick={controller.onOutroButtonClicked}
+                          className="!text-xl w-32"
+                        >
+                          {translate("outroStoryTitle").toString()}
+                        </StyledButton>
+                      </>
+                    )}
+                  {(viewModel.showOnlyIntro.Value ||
+                    viewModel.showOnlyOutro.Value) &&
+                    createBasicLayoutWithBackButton(
+                      contentTexts,
+                      pageId,
+                      controller,
+                      translate("backButton").toString()
+                    )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
-    </>
+    </StyledContainer>
   );
-}
-function createBasicLayoutWithBackButton(
-  contentTexts: string[],
-  pageId: number,
-  controller: IStoryElementController,
-  backbuttonText: string
-) {
-  return (
-    <>
-      {contentTexts[pageId].toString()}
-      <div className="flex justify-center gap-2">
-        {pageId < contentTexts.length - 1 && (
-          <StyledButton shape="square" onClick={controller.increasePageId}>
-            {">"}
-          </StyledButton>
-        )}
-        {pageId > 0 && (
-          <StyledButton shape="square" onClick={controller.decreasePageId}>
-            {"<"}
+
+  function createBasicLayout(
+    contentTexts: string[],
+    pageId: number,
+    controller: IStoryElementController
+  ) {
+    return (
+      <>
+        <div className="row-span-3 flex justify-center items-center bg-buttonbgblue p-2 rounded-xl">
+          {contentTexts[pageId].toString()}
+        </div>
+        <div className="flex lg:w-[80vw] max-w-5xl justify-between">
+          <div className="grid grid-cols-2 w-32">
+            <div>
+              {" "}
+              {pageId > 0 && (
+                <StyledButton
+                  shape="closebutton"
+                  onClick={controller.decreasePageId}
+                >
+                  {"<"}
+                </StyledButton>
+              )}
+            </div>
+
+            <div className="col-start-2">
+              {pageId < contentTexts.length - 1 && (
+                <StyledButton
+                  shape="closebutton"
+                  onClick={controller.increasePageId}
+                >
+                  {">"}
+                </StyledButton>
+              )}
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+  function createBasicLayoutWithBackButton(
+    contentTexts: string[],
+    pageId: number,
+    controller: IStoryElementController,
+    backbuttonText: string
+  ) {
+    return (
+      <>
+        <div className="row-span-3 flex justify-center items-center bg-buttonbgblue p-2 rounded-xl">
+          {contentTexts[pageId].toString()}
+        </div>
+        <div className="flex lg:w-[80vw] max-w-5xl justify-between">
+          <StyledButton
+            shape="freefloatleft"
+            onClick={controller.backToMenuButtonClicked}
+          >
+            {backbuttonText}
           </StyledButton>
-        )}
-        <StyledButton
-          shape="freefloatleft"
-          onClick={controller.backToMenuButtonClicked}
-        >
-          {backbuttonText}
-        </StyledButton>
-      </div>
-    </>
-  );
+          <div className="grid grid-cols-2 w-32">
+            <div>
+              {" "}
+              {pageId > 0 && (
+                <StyledButton
+                  shape="closebutton"
+                  onClick={controller.decreasePageId}
+                >
+                  {"<"}
+                </StyledButton>
+              )}
+            </div>
+
+            <div className="col-start-2">
+              {pageId < contentTexts.length - 1 && (
+                <StyledButton
+                  shape="closebutton"
+                  onClick={controller.increasePageId}
+                >
+                  {">"}
+                </StyledButton>
+              )}
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
 }
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementPresenter.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementPresenter.ts
index 0b0acaa74..5bbcab8b9 100644
--- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementPresenter.ts
+++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementPresenter.ts
@@ -20,6 +20,7 @@ export default class StoryElementPresenter implements IStoryElementPresenter {
 
   onLearningSpaceLoaded(learningSpaceTO: LearningSpaceTO): void {
     this.viewModel.type.Value = learningSpaceTO.storyElement.storyType;
+    this.viewModel.modelType.Value = learningSpaceTO.storyElement.modelType;
     this.viewModel.introTexts.Value =
       learningSpaceTO.storyElement.introStoryTexts;
     this.viewModel.outroTexts.Value =
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementViewModel.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementViewModel.ts
index 131bc9a01..b29e62d69 100644
--- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementViewModel.ts
+++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementViewModel.ts
@@ -1,5 +1,6 @@
 import { StoryElementType } from "src/Components/Core/Domain/Types/StoryElementType";
 import Observable from "../../../../../../Lib/Observable";
+import { LearningElementModel } from "src/Components/Core/Domain/LearningElementModels/LearningElementModelTypes";
 
 export default class StoryElementViewModel {
   introTexts: Observable<string[] | null> = new Observable<string[] | null>(
@@ -17,4 +18,6 @@ export default class StoryElementViewModel {
   //MenuNavigation
   showOnlyIntro: Observable<boolean> = new Observable<boolean>(false);
   showOnlyOutro: Observable<boolean> = new Observable<boolean>(false);
+  modelType: Observable<LearningElementModel | null> =
+    new Observable<LearningElementModel | null>(null);
 }
diff --git a/src/localize/de/learningSpace.json b/src/localize/de/learningSpace.json
index e89ff0d6e..65070c0f8 100644
--- a/src/localize/de/learningSpace.json
+++ b/src/localize/de/learningSpace.json
@@ -12,12 +12,12 @@
   "exitRoomTitle": "Raum verlassen?",
   "exitRoomButton": "Raum verlassen",
 
-  "introStoryTitle": "Lernraum Einführung",
-  "outroStoryTitle": "Lernraum Abschluss",
-  "introOutroStoryTitle": "Lernraum Einführung & Abschluss",
+  "introStoryTitle": "Intro",
+  "outroStoryTitle": "Outro",
+  "introOutroStoryTitle": "Wähle zwischen Intro oder Outro der Lernraumstory",
   "outroLockedTitle": "Lernraum Abschluss gesperrt",
   "outroLockedText": "Dieses Element ist noch nicht verfügbar. Schließe zuerst den Raum ab!",
-  "backButton": "Zurück zur Auswahl",
+  "backButton": "Intro/Outro Auswahl",
 
   "spaceScore": "{{current}} von {{required}}",