diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
index 51c7d042d..97b0ac9bd 100644
--- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
+++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
@@ -64,7 +64,7 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
   const [outroModelType] = useObservable(viewModel?.outroModelType);
 
   const [titleText, setTitleText] = useState("");
-  const [contentTexts, setContentTexts] = useState<string[]>([""]);
+  const [contentTexts, setContentTexts] = useState("");
 
   const { t: translate } = useTranslation("learningSpace");
 
@@ -74,13 +74,13 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
     switch (storyTypeToDisplay) {
       case StoryElementType.Intro:
         setTitleText(translate("introStoryTitle").toString());
-        setContentTexts(viewModel.introTexts.Value);
+        setContentTexts(viewModel.introTexts.Value.join("\n"));
         break;
       case StoryElementType.Outro:
         setTitleText(translate("outroStoryTitle").toString());
-        if (outroUnlocked) setContentTexts(viewModel.outroTexts.Value);
-        else
-          setContentTexts(translate("outroLockedText").toString().split("\n"));
+        if (outroUnlocked)
+          setContentTexts(viewModel.outroTexts.Value.join("\n"));
+        else setContentTexts(translate("outroLockedText").toString());
         break;
       case StoryElementType.IntroOutro:
         setTitleText(translate("introOutroStoryTitle").toString());
@@ -159,7 +159,7 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
             {(storyTypeToDisplay === StoryElementType.Intro ||
               storyTypeToDisplay === StoryElementType.Outro) && (
               <SingleStoryLayout
-                contentTexts={contentTexts}
+                contentTexts={contentTexts.split("\n")}
                 controller={controller}
                 withBackButton={
                   !introCutsceneRunning &&
diff --git a/src/Components/CoreTest/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.test.tsx b/src/Components/CoreTest/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.test.tsx
index 32a6ed8d6..26a772f8b 100644
--- a/src/Components/CoreTest/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.test.tsx
+++ b/src/Components/CoreTest/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.test.tsx
@@ -116,7 +116,7 @@ describe("StoryElement", () => {
 
   //ANF-ID: [EWE0040]
   // TODO: fix this test. Causes infinite rerenders of the component for some reason -mk
-  test.skip("should render with outroTitle and outroLockedText placeholder when storyTypeToDisplay is Outro and isOutroUnlocked is false", () => {
+  test("should render with outroTitle and outroLockedText placeholder when storyTypeToDisplay is Outro and isOutroUnlocked is false", () => {
     viewModel.storyTypeToDisplay.Value = StoryElementType.Outro;
     viewModel.isOutroUnlocked.Value = false;
     useBuilderMock([viewModel, fakeController]);
@@ -164,7 +164,7 @@ describe("StoryElement", () => {
       const backButton = componentUnderTest.getByText("backButton");
 
       expect(backButton).toBeInTheDocument();
-    }
+    },
   );
 
   test.each([
@@ -196,9 +196,9 @@ describe("StoryElement", () => {
 
       waitFor(() => {
         expect(
-          componentUnderTest.getByText("backButton")
+          componentUnderTest.getByText("backButton"),
         ).not.toBeInTheDocument();
       });
-    }
+    },
   );
 });