diff --git a/src/frontend/apps/impress/src/components/FloatingBar.tsx b/src/frontend/apps/impress/src/components/FloatingBar.tsx
index 38bb3ec71..4ac75e0bb 100644
--- a/src/frontend/apps/impress/src/components/FloatingBar.tsx
+++ b/src/frontend/apps/impress/src/components/FloatingBar.tsx
@@ -34,6 +34,7 @@ const FLOATING_STYLES = css`
 
 export const FloatingBar = ({
   children,
+  $css,
   ...props
 }: PropsWithChildren<BoxType>) => {
   return (
@@ -45,7 +46,10 @@ export const FloatingBar = ({
       $justify="space-between"
       $align="flex-start"
       $padding="sm"
-      $css={FLOATING_STYLES}
+      $css={css`
+        ${FLOATING_STYLES}
+        ${$css}
+      `}
       {...props}
     >
       {children}
diff --git a/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx b/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
index c75930431..64331b294 100644
--- a/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
@@ -1,5 +1,7 @@
+import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { BoxType } from '@/components';
 import { FadeComponent } from '@/components/Effect';
 import { CardFloatingBar, FloatingBar } from '@/components/FloatingBar';
 import { DocSearchButtonModal } from '@/features/docs/doc-search/components/DocSearchButtonModal';
@@ -9,7 +11,7 @@ import { useResponsiveStore } from '@/stores/useResponsiveStore';
 
 import { HeaderIcon } from './HeaderIcon';
 
-export const HeaderFloatingBar = () => {
+export const HeaderFloatingBar = (props: PropsWithChildren<BoxType>) => {
   const { isMobile, isTablet } = useResponsiveStore();
   const { t } = useTranslation();
   const { isPanelOpen } = useLeftPanelStore();
@@ -17,7 +19,7 @@ export const HeaderFloatingBar = () => {
   const isVisible = (isTablet && !isPanelOpen) || isMobile;
 
   return (
-    <FloatingBar $align="center">
+    <FloatingBar $align="center" {...props}>
       {isTablet && (
         <LeftPanelCollapseButton ariaLabel={t('Toggle left panel')} />
       )}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 032eedfc2..436b43450 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -42,7 +42,6 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
         $css={css`
           z-index: 1;
           background-color: var(--c--contextuals--background--surface--primary);
-          box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
           transition:
             transform 0.2s ease-in-out,
             width 0.2s ease-in-out;
@@ -74,6 +73,7 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
           ${
             isMobile
               ? css`
+                  box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
                   position: fixed;
                   z-index: 1000;
                   top: 0;
diff --git a/src/frontend/apps/impress/src/pages/docs/index.tsx b/src/frontend/apps/impress/src/pages/docs/index.tsx
index 5c222d20d..d98cd7b89 100644
--- a/src/frontend/apps/impress/src/pages/docs/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/index.tsx
@@ -1,17 +1,20 @@
 import Head from 'next/head';
 import { useSearchParams } from 'next/navigation';
-import type { ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { DocDefaultFilter, useTrans } from '@/docs/doc-management';
 import { DocsGrid } from '@/docs/docs-grid';
 import { HeaderFloatingBar } from '@/features/header/components/HeaderFloatingBar';
 import { MainLayout } from '@/layouts';
+import { useResponsiveStore } from '@/stores/useResponsiveStore';
 import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { transFilter } = useTrans();
+  const { isDesktop } = useResponsiveStore();
   const searchParams = useSearchParams();
   const target =
     (searchParams.get('target') as DocDefaultFilter) ??
@@ -28,23 +31,40 @@ const Page: NextPageWithLayout = () => {
           key="title"
         />
       </Head>
-      <HeaderFloatingBar />
+      <HeaderFloatingBar
+        $css={
+          isDesktop
+            ? css`
+                &::before {
+                  background: transparent;
+                }
+              `
+            : undefined
+        }
+      />
       <DocsGrid target={target} />
     </>
   );
 };
 
-Page.getLayout = function getLayout(page: ReactElement) {
+const DocsPageLayout = ({ children }: PropsWithChildren) => {
+  const { isDesktop } = useResponsiveStore();
+
   return (
     <MainLayout
       propsContent={{
-        $background:
-          'linear-gradient(53deg, var(--c--contextuals--background--surface--primary) 39.96%, var(--c--contextuals--background--semantic--brand--tertiary) 125.64%)',
+        $background: !isDesktop
+          ? 'var(--c--contextuals--background--surface--primary)'
+          : 'linear-gradient(53deg, var(--c--contextuals--background--surface--primary) 39.96%, var(--c--contextuals--background--semantic--brand--tertiary) 125.64%)',
       }}
     >
-      {page}
+      {children}
     </MainLayout>
   );
 };
 
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <DocsPageLayout>{page}</DocsPageLayout>;
+};
+
 export default Page;