diff --git a/webapp/IronCalc/src/IronCalc.tsx b/webapp/IronCalc/src/IronCalc.tsx
index 7200957..38d4bad 100644
--- a/webapp/IronCalc/src/IronCalc.tsx
+++ b/webapp/IronCalc/src/IronCalc.tsx
@@ -1,7 +1,7 @@
 import "./index.css";
 import type { Model } from "@ironcalc/wasm";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import Workbook from "./components/workbook.tsx";
+import Workbook from "./components/Workbook/Workbook.tsx";
 import { WorkbookState } from "./components/workbookState.ts";
 import { theme } from "./theme.ts";
 import "./i18n";
diff --git a/webapp/IronCalc/src/components/borderPicker.tsx b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
similarity index 99%
rename from webapp/IronCalc/src/components/borderPicker.tsx
rename to webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
index 55fcc82..43a8470 100644
--- a/webapp/IronCalc/src/components/borderPicker.tsx
+++ b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
@@ -20,9 +20,9 @@ import {
   BorderRightIcon,
   BorderStyleIcon,
   BorderTopIcon,
-} from "../icons";
-import { theme } from "../theme";
-import ColorPicker from "./ColorPicker";
+} from "../../icons";
+import { theme } from "../../theme";
+import ColorPicker from "../ColorPicker/ColorPicker";
 
 type BorderPickerProps = {
   className?: string;
diff --git a/webapp/IronCalc/src/components/ColorPicker.tsx b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
similarity index 99%
rename from webapp/IronCalc/src/components/ColorPicker.tsx
rename to webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
index d466bd5..18ec8dc 100644
--- a/webapp/IronCalc/src/components/ColorPicker.tsx
+++ b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
@@ -5,7 +5,7 @@ import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 import { useTranslation } from "react-i18next";
-import { theme } from "../theme";
+import { theme } from "../../theme";
 
 type ColorPickerProps = {
   color: string;
diff --git a/webapp/IronCalc/src/components/editor/editor.tsx b/webapp/IronCalc/src/components/Editor/Editor.tsx
similarity index 100%
rename from webapp/IronCalc/src/components/editor/editor.tsx
rename to webapp/IronCalc/src/components/Editor/Editor.tsx
diff --git a/webapp/IronCalc/src/components/editor/useKeyDown.ts b/webapp/IronCalc/src/components/Editor/useKeyDown.ts
similarity index 100%
rename from webapp/IronCalc/src/components/editor/useKeyDown.ts
rename to webapp/IronCalc/src/components/Editor/useKeyDown.ts
diff --git a/webapp/IronCalc/src/components/editor/util.tsx b/webapp/IronCalc/src/components/Editor/util.tsx
similarity index 100%
rename from webapp/IronCalc/src/components/editor/util.tsx
rename to webapp/IronCalc/src/components/Editor/util.tsx
diff --git a/webapp/IronCalc/src/components/formatMenu.tsx b/webapp/IronCalc/src/components/FormatMenu/FormatMenu.tsx
similarity index 99%
rename from webapp/IronCalc/src/components/formatMenu.tsx
rename to webapp/IronCalc/src/components/FormatMenu/FormatMenu.tsx
index 1c3be38..9333fb7 100644
--- a/webapp/IronCalc/src/components/formatMenu.tsx
+++ b/webapp/IronCalc/src/components/FormatMenu/FormatMenu.tsx
@@ -1,7 +1,7 @@
 import { Menu, MenuItem, styled } from "@mui/material";
 import { type ComponentProps, useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import FormatPicker from "./formatPicker";
+import FormatPicker from "./FormatPicker";
 import { NumberFormats } from "./formatUtil";
 
 type FormatMenuProps = {
diff --git a/webapp/IronCalc/src/components/formatPicker.tsx b/webapp/IronCalc/src/components/FormatMenu/FormatPicker.tsx
similarity index 99%
rename from webapp/IronCalc/src/components/formatPicker.tsx
rename to webapp/IronCalc/src/components/FormatMenu/FormatPicker.tsx
index bc6e24f..e3750b1 100644
--- a/webapp/IronCalc/src/components/formatPicker.tsx
+++ b/webapp/IronCalc/src/components/FormatMenu/FormatPicker.tsx
@@ -3,7 +3,7 @@ import { Dialog, TextField } from "@mui/material";
 import { Check, X } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { theme } from "../theme";
+import { theme } from "../../theme";
 
 type FormatPickerProps = {
   className?: string;
diff --git a/webapp/IronCalc/src/components/formatUtil.ts b/webapp/IronCalc/src/components/FormatMenu/formatUtil.ts
similarity index 100%
rename from webapp/IronCalc/src/components/formatUtil.ts
rename to webapp/IronCalc/src/components/FormatMenu/formatUtil.ts
diff --git a/webapp/IronCalc/src/components/formulabar.tsx b/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
similarity index 93%
rename from webapp/IronCalc/src/components/formulabar.tsx
rename to webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
index b60b79d..dab0668 100644
--- a/webapp/IronCalc/src/components/formulabar.tsx
+++ b/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
@@ -1,14 +1,14 @@
 import type { Model } from "@ironcalc/wasm";
 import { styled } from "@mui/material";
-import { Fx } from "../icons";
-import { theme } from "../theme";
+import { Fx } from "../../icons";
+import { theme } from "../../theme";
 import {
   COLUMN_WIDTH_SCALE,
   ROW_HEIGH_SCALE,
-} from "./WorksheetCanvas/constants";
-import { FORMULA_BAR_HEIGHT } from "./constants";
-import Editor from "./editor/editor";
-import type { WorkbookState } from "./workbookState";
+} from "../WorksheetCanvas/constants";
+import { FORMULA_BAR_HEIGHT } from "../constants";
+import Editor from "../Editor/Editor";
+import type { WorkbookState } from "../workbookState";
 
 type FormulaBarProps = {
   cellAddress: string;
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index 64ab76e..f4307c0 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -3,8 +3,8 @@ import type { MenuItemProps } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import { theme } from "../../theme";
-import ColorPicker from "../ColorPicker";
-import { isInReferenceMode } from "../editor/util";
+import ColorPicker from "../ColorPicker/ColorPicker";
+import { isInReferenceMode } from "../Editor/util";
 import type { WorkbookState } from "../workbookState";
 import SheetDeleteDialog from "./SheetDeleteDialog";
 import SheetRenameDialog from "./SheetRenameDialog";
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
index d382a89..0443cfd 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
@@ -3,8 +3,8 @@ import { Menu, Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
+import { StyledButton } from "../Toolbar/Toolbar";
 import { NAVIGATION_HEIGHT } from "../constants";
-import { StyledButton } from "../toolbar";
 import type { WorkbookState } from "../workbookState";
 import SheetListMenu from "./SheetListMenu";
 import SheetTab from "./SheetTab";
diff --git a/webapp/IronCalc/src/components/toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
similarity index 96%
rename from webapp/IronCalc/src/components/toolbar.tsx
rename to webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index 64a5cbc..1a595bc 100644
--- a/webapp/IronCalc/src/components/toolbar.tsx
+++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
@@ -36,19 +36,19 @@ import {
   ArrowMiddleFromLine,
   DecimalPlacesDecreaseIcon,
   DecimalPlacesIncreaseIcon,
-} from "../icons";
-import { theme } from "../theme";
-import ColorPicker from "./ColorPicker";
-import NameManagerDialog from "./NameManagerDialog";
-import type { NameManagerProperties } from "./NameManagerDialog/NameManagerDialog";
-import BorderPicker from "./borderPicker";
-import { TOOLBAR_HEIGHT } from "./constants";
-import FormatMenu from "./formatMenu";
+} from "../../icons";
+import { theme } from "../../theme";
+import BorderPicker from "../BorderPicker/BorderPicker";
+import ColorPicker from "../ColorPicker/ColorPicker";
+import FormatMenu from "../FormatMenu/FormatMenu";
 import {
   NumberFormats,
   decreaseDecimalPlaces,
   increaseDecimalPlaces,
-} from "./formatUtil";
+} from "../FormatMenu/formatUtil";
+import NameManagerDialog from "../NameManagerDialog";
+import type { NameManagerProperties } from "../NameManagerDialog/NameManagerDialog";
+import { TOOLBAR_HEIGHT } from "../constants";
 
 type ToolbarProperties = {
   canUndo: boolean;
diff --git a/webapp/IronCalc/src/components/workbook.tsx b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
similarity index 98%
rename from webapp/IronCalc/src/components/workbook.tsx
rename to webapp/IronCalc/src/components/Workbook/Workbook.tsx
index 110a62f..c8fe7fa 100644
--- a/webapp/IronCalc/src/components/workbook.tsx
+++ b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
@@ -6,26 +6,26 @@ import type {
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
 import { useCallback, useEffect, useRef, useState } from "react";
-import SheetTabBar from "./SheetTabBar/SheetTabBar";
+import FormulaBar from "../FormulaBar/FormulaBar";
+import SheetTabBar from "../SheetTabBar";
+import Toolbar from "../Toolbar/Toolbar";
+import Worksheet from "../Worksheet/Worksheet";
 import {
   COLUMN_WIDTH_SCALE,
   LAST_COLUMN,
   ROW_HEIGH_SCALE,
-} from "./WorksheetCanvas/constants";
+} from "../WorksheetCanvas/constants";
 import {
   CLIPBOARD_ID_SESSION_STORAGE_KEY,
   getNewClipboardId,
-} from "./clipboard";
-import FormulaBar from "./formulabar";
-import Toolbar from "./toolbar";
-import useKeyboardNavigation from "./useKeyboardNavigation";
+} from "../clipboard";
 import {
   type NavigationKey,
   getCellAddress,
   getFullRangeToString,
-} from "./util";
-import type { WorkbookState } from "./workbookState";
-import Worksheet from "./worksheet";
+} from "../util";
+import type { WorkbookState } from "../workbookState";
+import useKeyboardNavigation from "./useKeyboardNavigation";
 
 const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
   const { model, workbookState } = props;
diff --git a/webapp/IronCalc/src/components/useKeyboardNavigation.ts b/webapp/IronCalc/src/components/Workbook/useKeyboardNavigation.ts
similarity index 99%
rename from webapp/IronCalc/src/components/useKeyboardNavigation.ts
rename to webapp/IronCalc/src/components/Workbook/useKeyboardNavigation.ts
index 2c43a73..b03d3e4 100644
--- a/webapp/IronCalc/src/components/useKeyboardNavigation.ts
+++ b/webapp/IronCalc/src/components/Workbook/useKeyboardNavigation.ts
@@ -1,5 +1,5 @@
 import { type KeyboardEvent, type RefObject, useCallback } from "react";
-import { type NavigationKey, isEditingKey, isNavigationKey } from "./util";
+import { type NavigationKey, isEditingKey, isNavigationKey } from "../util";
 
 export enum Border {
   Top = "top",
diff --git a/webapp/IronCalc/src/components/CellContextMenu.tsx b/webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
similarity index 99%
rename from webapp/IronCalc/src/components/CellContextMenu.tsx
rename to webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
index b51d549..6367c31 100644
--- a/webapp/IronCalc/src/components/CellContextMenu.tsx
+++ b/webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
@@ -8,7 +8,7 @@ import {
 } from "lucide-react";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { theme } from "../theme";
+import { theme } from "../../theme";
 
 const red_color = theme.palette.error.main;
 
diff --git a/webapp/IronCalc/src/components/worksheet.tsx b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
similarity index 98%
rename from webapp/IronCalc/src/components/worksheet.tsx
rename to webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
index a354a58..fa2ce1d 100644
--- a/webapp/IronCalc/src/components/worksheet.tsx
+++ b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
@@ -1,7 +1,6 @@
 import { type Model, columnNameFromNumber } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import CellContextMenu from "./CellContextMenu";
 import {
   COLUMN_WIDTH_SCALE,
   LAST_COLUMN,
@@ -9,17 +8,18 @@ import {
   ROW_HEIGH_SCALE,
   outlineBackgroundColor,
   outlineColor,
-} from "./WorksheetCanvas/constants";
-import WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+} from "../WorksheetCanvas/constants";
+import WorksheetCanvas from "../WorksheetCanvas/worksheetCanvas";
 import {
   FORMULA_BAR_HEIGHT,
   NAVIGATION_HEIGHT,
   TOOLBAR_HEIGHT,
-} from "./constants";
-import Editor from "./editor/editor";
-import type { Cell } from "./types";
+} from "../constants";
+import Editor from "../Editor/Editor";
+import type { Cell } from "../types";
+import { AreaType, type WorkbookState } from "../workbookState";
+import CellContextMenu from "./CellContextMenu";
 import usePointer from "./usePointer";
-import { AreaType, type WorkbookState } from "./workbookState";
 
 function useWindowSize() {
   const [size, setSize] = useState([0, 0]);
diff --git a/webapp/IronCalc/src/components/usePointer.ts b/webapp/IronCalc/src/components/Worksheet/usePointer.ts
similarity index 96%
rename from webapp/IronCalc/src/components/usePointer.ts
rename to webapp/IronCalc/src/components/Worksheet/usePointer.ts
index 68cb99b..7c36f15 100644
--- a/webapp/IronCalc/src/components/usePointer.ts
+++ b/webapp/IronCalc/src/components/Worksheet/usePointer.ts
@@ -1,14 +1,14 @@
 import type { Model } from "@ironcalc/wasm";
 import { type PointerEvent, type RefObject, useCallback, useRef } from "react";
-import type WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import type WorksheetCanvas from "../WorksheetCanvas/worksheetCanvas";
 import {
   headerColumnWidth,
   headerRowHeight,
-} from "./WorksheetCanvas/worksheetCanvas";
-import { isInReferenceMode } from "./editor/util";
-import type { Cell } from "./types";
-import { rangeToStr } from "./util";
-import type { WorkbookState } from "./workbookState";
+} from "../WorksheetCanvas/worksheetCanvas";
+import { isInReferenceMode } from "../Editor/util";
+import type { Cell } from "../types";
+import { rangeToStr } from "../util";
+import type { WorkbookState } from "../workbookState";
 
 interface PointerSettings {
   canvasElement: RefObject<HTMLCanvasElement | null>;
diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
index 3c705f3..150cca4 100644
--- a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
+++ b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
@@ -1,6 +1,6 @@
 import type { Model } from "@ironcalc/wasm";
 import { columnNameFromNumber } from "@ironcalc/wasm";
-import { getColor } from "../editor/util";
+import { getColor } from "../Editor/util";
 import type { Cell } from "../types";
 import type { WorkbookState } from "../workbookState";
 import {
diff --git a/webapp/IronCalc/src/components/tests/util.test.ts b/webapp/IronCalc/src/components/tests/util.test.ts
index b8f91cd..370efaa 100644
--- a/webapp/IronCalc/src/components/tests/util.test.ts
+++ b/webapp/IronCalc/src/components/tests/util.test.ts
@@ -1,7 +1,10 @@
 import { readFile } from "node:fs/promises";
 import { type SelectedView, initSync } from "@ironcalc/wasm";
 import { expect, test } from "vitest";
-import { decreaseDecimalPlaces, increaseDecimalPlaces } from "../formatUtil";
+import {
+  decreaseDecimalPlaces,
+  increaseDecimalPlaces,
+} from "../FormatMenu/formatUtil";
 import { getFullRangeToString, isNavigationKey } from "../util";
 
 test("checks arrow left is a navigation key", () => {