diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 49f93bc3..74841042 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -250,49 +250,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         </div>
       </li>
     );
-  } else if (view === DashboardViewType.Structure) {
-    return (
-      <div className="relative">
-        <div
-          className={cn(`flex items-center space-x-3 py-1 px-2 rounded cursor-pointer hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)]`, isSelected && `bg-[var(--vscode-list-activeSelectionBackground)]`)}
-        >
-          <ItemSelection filePath={pageData.fmFilePath} show />
-          
-          <MarkdownIcon className="w-4 h-4 text-[var(--vscode-symbolIcon-fileForeground)] flex-shrink-0" />
-          
-          <button
-            title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
-            onClick={onOpenFile}
-            className="flex-1 text-left truncate font-medium"
-          >
-            {escapedTitle}
-          </button>
-
-          <div className="flex items-center space-x-2 flex-shrink-0">
-            {pageData.date && (
-              <DateField 
-                value={pageData.date} 
-                format={pageData.fmDateFormat}
-                className="text-xs text-[var(--vscode-descriptionForeground)]"
-              />
-            )}
-            
-            {draftField && draftField.name && typeof pageData[draftField.name] !== "undefined" && (
-              <Status draft={pageData[draftField.name]} published={pageData.fmPublished} />
-            )}
-
-            <ContentActions
-              path={pageData.fmFilePath}
-              relPath={pageData.fmRelFileWsPath}
-              contentType={pageData.fmContentType}
-              scripts={settings?.scripts}
-              onOpen={onOpenFile}
-              listView
-            />
-          </div>
-        </div>
-      </div>
-    );
   }
 
   return null;
diff --git a/src/dashboardWebView/components/Contents/StructureItem.tsx b/src/dashboardWebView/components/Contents/StructureItem.tsx
new file mode 100644
index 00000000..3deb5225
--- /dev/null
+++ b/src/dashboardWebView/components/Contents/StructureItem.tsx
@@ -0,0 +1,79 @@
+import { useRecoilValue } from 'recoil';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
+import { Page } from '../../models/Page';
+import { SettingsSelector } from '../../state';
+import { DateField } from '../Common/DateField';
+import { ContentActions } from './ContentActions';
+import { useMemo } from 'react';
+import { Status } from './Status';
+import * as React from 'react';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import useCard from '../../hooks/useCard';
+import { ItemSelection } from '../Common/ItemSelection';
+import { openFile } from '../../utils';
+import useSelectedItems from '../../hooks/useSelectedItems';
+import { cn } from '../../../utils/cn';
+
+export interface IStructureItemProps extends Page { }
+
+export const StructureItem: React.FunctionComponent<IStructureItemProps> = ({
+  ...pageData
+}: React.PropsWithChildren<IStructureItemProps>) => {
+  const { selectedFiles } = useSelectedItems();
+  const settings = useRecoilValue(SettingsSelector);
+  const draftField = useMemo(() => settings?.draftField, [settings]);
+  const { escapedTitle } = useCard(pageData, settings?.dashboardState?.contents?.cardFields);
+
+  const isSelected = useMemo(() => selectedFiles.includes(pageData.fmFilePath), [selectedFiles, pageData.fmFilePath]);
+
+  const onOpenFile = React.useCallback(() => {
+    openFile(pageData.fmFilePath);
+  }, [pageData.fmFilePath]);
+
+  return (
+    <div className="relative">
+      <div
+        className={cn(
+          `flex items-center space-x-3 py-1 px-2 rounded cursor-pointer hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)]`,
+          isSelected && `bg-[var(--vscode-list-activeSelectionBackground)]`
+        )}
+      >
+        <ItemSelection filePath={pageData.fmFilePath} show />
+        
+        <MarkdownIcon className="w-4 h-4 text-[var(--vscode-symbolIcon-fileForeground)] flex-shrink-0" />
+        
+        <button
+          title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+          onClick={onOpenFile}
+          className="flex-1 text-left truncate font-medium"
+        >
+          {escapedTitle}
+        </button>
+
+        <div className="flex items-center space-x-2 flex-shrink-0">
+          {pageData.date && (
+            <DateField 
+              value={pageData.date} 
+              format={pageData.fmDateFormat}
+              className="text-xs text-[var(--vscode-descriptionForeground)]"
+            />
+          )}
+          
+          {draftField && draftField.name && typeof pageData[draftField.name] !== "undefined" && (
+            <Status draft={pageData[draftField.name]} published={pageData.fmPublished} />
+          )}
+
+          <ContentActions
+            path={pageData.fmFilePath}
+            relPath={pageData.fmRelFileWsPath}
+            contentType={pageData.fmContentType}
+            scripts={settings?.scripts}
+            onOpen={onOpenFile}
+            listView
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Contents/StructureView.tsx b/src/dashboardWebView/components/Contents/StructureView.tsx
index 0dedcf39..a429c292 100644
--- a/src/dashboardWebView/components/Contents/StructureView.tsx
+++ b/src/dashboardWebView/components/Contents/StructureView.tsx
@@ -3,7 +3,7 @@ import { ChevronRightIcon, FolderIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { Page } from '../../models';
-import { Item } from './Item';
+import { StructureItem } from './StructureItem';
 
 export interface IStructureViewProps {
   pages: Page[];
@@ -112,7 +112,7 @@ export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
               <ul className="space-y-2">
                 {node.pages.map((page, idx) => (
                   <li key={`${page.slug}-${idx}`}>
-                    <Item {...page} />
+                    <StructureItem {...page} />
                   </li>
                 ))}
               </ul>
@@ -156,7 +156,7 @@ export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
                   <ul className="space-y-1 mb-3">
                     {node.pages.map((page, idx) => (
                       <li key={`${page.slug}-${idx}`} style={{ paddingLeft: `${paddingLeft + 20}px` }}>
-                        <Item {...page} />
+                        <StructureItem {...page} />
                       </li>
                     ))}
                   </ul>