diff --git a/CHANGELOG.md b/CHANGELOG.md
index c415e7b2..0b212be3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to
 
 - ✅(e2e) fix e2e test for other browsers #1799
 - 🐛(frontend) add fallback for unsupported Blocknote languages #1810
+- 🐛(frontend) fix emojipicker closing in tree #1808
 
 ### Changed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
index 39af6409..8744633a 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
@@ -4,7 +4,6 @@ import {
   createDoc,
   expectLoginPage,
   keyCloakSignIn,
-  randomName,
   updateDocTitle,
   verifyDocName,
 } from './utils-common';
@@ -20,50 +19,6 @@ test.describe('Doc Tree', () => {
     await page.goto('/');
   });
 
-  test('create new sub pages', async ({ page, browserName }) => {
-    const [titleParent] = await createDoc(
-      page,
-      'doc-tree-content',
-      browserName,
-      1,
-    );
-    await verifyDocName(page, titleParent);
-    const addButton = page.getByTestId('new-doc-button');
-    const docTree = page.getByTestId('doc-tree');
-
-    await expect(addButton).toBeVisible();
-
-    // Wait for and intercept the POST request to create a new page
-    const responsePromise = page.waitForResponse(
-      (response) =>
-        response.url().includes('/documents/') &&
-        response.url().includes('/children/') &&
-        response.request().method() === 'POST',
-    );
-
-    await clickOnAddRootSubPage(page);
-    const response = await responsePromise;
-    expect(response.ok()).toBeTruthy();
-    const subPageJson = await response.json();
-
-    await expect(docTree).toBeVisible();
-    const subPageItem = docTree
-      .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
-      .first();
-
-    await expect(subPageItem).toBeVisible();
-    await subPageItem.click();
-    await verifyDocName(page, '');
-    const input = page.getByRole('textbox', { name: 'Document title' });
-    await input.click();
-    const [randomDocName] = randomName('doc-tree-test', browserName, 1);
-    await input.fill(randomDocName);
-    await input.press('Enter');
-    await expect(subPageItem.getByText(randomDocName)).toBeVisible();
-    await page.reload();
-    await expect(subPageItem.getByText(randomDocName)).toBeVisible();
-  });
-
   test('check the reorder of sub pages', async ({ page, browserName }) => {
     await createDoc(page, 'doc-tree-content', browserName, 1);
     const addButton = page.getByTestId('new-doc-button');
diff --git a/src/frontend/apps/impress/src/components/Emoji/EmojiPicker.tsx b/src/frontend/apps/impress/src/components/Emoji/EmojiPicker.tsx
index 8861d517..e1177aba 100644
--- a/src/frontend/apps/impress/src/components/Emoji/EmojiPicker.tsx
+++ b/src/frontend/apps/impress/src/components/Emoji/EmojiPicker.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 
 import { Box } from '@/components';
 
+export const PICKER_HEIGHT = 500;
+
 interface EmojiPickerProps {
   emojiData: EmojiMartData;
   onClickOutside: () => void;
@@ -27,12 +29,7 @@ export const EmojiPicker = ({
   };
 
   const pickerContent = (
-    <Box
-      $position="absolute"
-      $zIndex={1000}
-      $margin="2rem 0 0 0"
-      onKeyDownCapture={handleKeyDown}
-    >
+    <Box $position="absolute" $zIndex={1000} onKeyDownCapture={handleKeyDown}>
       <Picker
         data={emojiData}
         locale={i18n.resolvedLanguage}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
index 8a0613c4..c5518c1d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -1,11 +1,14 @@
 import { MouseEvent, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import {
+  Box,
   BoxButton,
   BoxButtonType,
   EmojiPicker,
+  PICKER_HEIGHT,
   Text,
   TextType,
   emojidata,
@@ -66,9 +69,24 @@ export const DocIcon = ({
 
       if (!openEmojiPicker && iconRef.current) {
         const rect = iconRef.current.getBoundingClientRect();
+
+        const pickerHeight = PICKER_HEIGHT;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+
+        // Position picker above if not enough space below and enough space above
+        const shouldPositionAbove =
+          spaceBelow < pickerHeight && spaceAbove >= pickerHeight;
+
+        // Offset to align the picker properly
+        const ROW_OFFSET_TOP = 55;
+        const ROW_OFFSET_BOTTOM = 10;
+
         setPickerPosition({
-          top: rect.bottom + window.scrollY + 8,
-          left: rect.left + window.scrollX,
+          top: shouldPositionAbove
+            ? rect.top - pickerHeight + ROW_OFFSET_TOP
+            : rect.bottom + ROW_OFFSET_BOTTOM,
+          left: rect.left,
         });
       }
 
@@ -120,13 +138,13 @@ export const DocIcon = ({
       </BoxButton>
       {openEmojiPicker &&
         createPortal(
-          <div
-            style={{
-              position: 'absolute',
-              top: pickerPosition.top,
-              left: pickerPosition.left,
-              zIndex: 1000,
-            }}
+          <Box
+            $position="fixed"
+            $css={css`
+              top: ${pickerPosition.top}px;
+              left: ${pickerPosition.left}px;
+              z-index: 1000;
+            `}
           >
             <EmojiPicker
               emojiData={emojidata}
@@ -134,7 +152,7 @@ export const DocIcon = ({
               onClickOutside={handleClickOutside}
               withOverlay={true}
             />
-          </div>,
+          </Box>,
           document.body,
         )}
     </>