diff --git a/src/components/Desktop/Desktop.css b/src/components/Desktop/Desktop.css
new file mode 100644
index 0000000..6876378
--- /dev/null
+++ b/src/components/Desktop/Desktop.css
@@ -0,0 +1,21 @@
+.desktop {
+ position: fixed;
+ inset: 0;
+ background-size: cover;
+ overflow: hidden;
+}
+
+.desktop-icons {
+ position: absolute;
+ top: calc(var(--menubar-height) + 16px);
+ right: 16px;
+ display: grid;
+ grid-template-columns: repeat(2, 80px);
+ gap: 8px;
+}
+
+.desktop-icon-cell {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx
index a915dc7..1bbede8 100644
--- a/src/components/Desktop/Desktop.tsx
+++ b/src/components/Desktop/Desktop.tsx
@@ -1 +1,72 @@
-export default function Desktop() { return
Desktop
; }
+import { useState, useCallback } from 'react';
+import MenuBar from '../MenuBar/MenuBar';
+import Dock from '../Dock/Dock';
+import DesktopIcon from '../DesktopIcon/DesktopIcon';
+import Window from '../Window/Window';
+import ContextMenu from '../ContextMenu/ContextMenu';
+import { useOS } from '../../context/WindowContext';
+import { APPS, WALLPAPERS } from '../../config/apps';
+import './Desktop.css';
+
+interface CtxMenu { x: number; y: number }
+
+export default function Desktop() {
+ const { state, openWindow, setWallpaper } = useOS();
+ const [ctxMenu, setCtxMenu] = useState(null);
+
+ const handleContextMenu = useCallback((e: React.MouseEvent) => {
+ e.preventDefault();
+ setCtxMenu({ x: e.clientX, y: e.clientY });
+ }, []);
+
+ const handleChangeWallpaper = useCallback(() => {
+ const next = (state.wallpaper + 1) % WALLPAPERS.length;
+ setWallpaper(next);
+ }, [state.wallpaper, setWallpaper]);
+
+ const handleAboutThisMac = useCallback(() => {
+ openWindow('about');
+ }, [openWindow]);
+
+ return (
+ setCtxMenu(null)}
+ >
+
+
+
+ {APPS.map(app => (
+
+ openWindow(app.id)} />
+
+ ))}
+
+
+ {APPS.map(app => (
+
+ ))}
+
+
+
+ {ctxMenu && (
+
setCtxMenu(null)}
+ onChangeWallpaper={handleChangeWallpaper}
+ onAboutThisMac={handleAboutThisMac}
+ />
+ )}
+
+ );
+}