UPDATE: Adds web app (#79)

Things missing: * Browse mode * Front end tests * Storybook
2024-08-18 11:44:16 +02:00
parent 083548608e
commit dc23a7f29c
89 changed files with 11245 additions and 364 deletions
--- a/webapp/src/App.css
+++ b/webapp/src/App.css
@@ -0,0 +1,6 @@
+#root {
+  position: absolute;
+  inset: 10px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -0,0 +1,59 @@
+import "./App.css";
+import Workbook from "./components/workbook";
+import "./i18n";
+import styled from "@emotion/styled";
+import init, { Model } from "@ironcalc/wasm";
+import { useEffect, useState } from "react";
+import { WorkbookState } from "./components/workbookState";
+
+function App() {
+  const [model, setModel] = useState<Model | null>(null);
+  const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
+    null,
+  );
+  useEffect(() => {
+    async function start() {
+      await init();
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const modelName = urlParams.get("model");
+      // If there is a model name ?model=example.ic we try to load it
+      // if there is not, or the loading failed we load an empty model
+      if (modelName) {
+        try {
+          const model_bytes = new Uint8Array(
+            await (await fetch(`./${modelName}`)).arrayBuffer(),
+          );
+          const _model = Model.from_bytes(model_bytes);
+          if (!model) setModel(_model);
+        } catch (e) {
+          const _model = new Model("en", "UTC");
+          if (!model) setModel(_model);
+        }
+      } else {
+        const _model = new Model("en", "UTC");
+        if (!model) setModel(_model);
+      }
+      if (!workbookState) setWorkbookState(new WorkbookState());
+    }
+    start();
+  }, [model, workbookState]);
+
+  if (!model || !workbookState) {
+    return <Loading>Loading</Loading>;
+  }
+
+  // We could use context for model, but the problem is that it should initialized to null.
+  // Passing the property down makes sure it is always defined.
+  return <Workbook model={model} workbookState={workbookState} />;
+}
+
+const Loading = styled("div")`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+`;
+
+export default App;
--- a/webapp/src/components/README.md
+++ b/webapp/src/components/README.md
@@ -0,0 +1,12 @@
+# Keyboard and mouse events architecture
+
+This document describes the architecture of the keyboard navigation and mouse events in IronCalc Web
+
+There are two modes for mouse events:
+
+* Normal mode: clicking a cell selects it, clicking on a sheet opens it
+* Browse mode: clicking on a cell updates the formula, etc
+
+While in browse mode some mouse events might end the browse mode
+
+We follow Excel's way of navigating a spreadsheet
--- a/webapp/src/components/WorksheetCanvas/constants.ts
+++ b/webapp/src/components/WorksheetCanvas/constants.ts
@@ -0,0 +1,18 @@
+export const headerCornerBackground = "#FFF";
+export const headerTextColor = "#333";
+export const headerBackground = "#FFF";
+export const headerGlobalSelectorColor = "#EAECF4";
+export const headerSelectedBackground = "#EEEEEE";
+export const headerFullSelectedBackground = "#D3D6E9";
+export const headerSelectedColor = "#333";
+export const headerBorderColor = "#DEE0EF";
+
+export const gridColor = "#D3D6E9";
+export const gridSeparatorColor = "#D3D6E9";
+export const defaultTextColor = "#2E414D";
+
+export const outlineColor = "#F2994A";
+export const outlineBackgroundColor = "#F2994A1A";
+
+export const LAST_COLUMN = 16_384;
+export const LAST_ROW = 1_048_576;
--- a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
+++ b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
--- a/webapp/src/components/borderPicker.tsx
+++ b/webapp/src/components/borderPicker.tsx
@@ -0,0 +1,538 @@
+import { type BorderOptions, BorderStyle, BorderType } from "@ironcalc/wasm";
+import Popover, { type PopoverOrigin } from "@mui/material/Popover";
+import { styled } from "@mui/material/styles";
+import {
+  Grid2X2 as BorderAllIcon,
+  ChevronRight,
+  PencilLine,
+} from "lucide-react";
+import type React from "react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderNoneIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderStyleIcon,
+  BorderTopIcon,
+} from "../icons";
+import { theme } from "../theme";
+import ColorPicker from "./colorPicker";
+
+type BorderPickerProps = {
+  className?: string;
+  onChange: (border: BorderOptions) => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const BorderPicker = (properties: BorderPickerProps) => {
+  const { t } = useTranslation();
+
+  const [borderSelected, setBorderSelected] = useState(BorderType.None);
+  const [borderColor, setBorderColor] = useState("#000000");
+  const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [stylePickerOpen, setStylePickerOpen] = useState(false);
+  const closePicker = (): void => {
+    properties.onChange({
+      color: borderColor,
+      style: borderStyle,
+      border: borderSelected,
+    });
+  };
+  const borderColorButton = useRef(null);
+  const borderStyleButton = useRef(null);
+  return (
+    <>
+      <StyledPopover
+        open={properties.open}
+        onClose={(): void => closePicker()}
+        anchorEl={properties.anchorEl.current}
+        anchorOrigin={
+          properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+        }
+        transformOrigin={
+          properties.transformOrigin || { vertical: "top", horizontal: "left" }
+        }
+      >
+        <BorderPickerDialog>
+          <Borders>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.All}
+                onClick={() => {
+                  if (borderSelected === BorderType.All) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.All);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderAllIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Inner}
+                onClick={() => {
+                  if (borderSelected === BorderType.Inner) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Inner);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderInnerIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterH}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterH) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterH);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterHIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterV}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterV) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterV);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterVIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Outer}
+                onClick={() => {
+                  if (borderSelected === BorderType.Outer) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Outer);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderOuterIcon />
+              </Button>
+            </Line>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.None}
+                onClick={() => {
+                  if (borderSelected === BorderType.None) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.None);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderNoneIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Top}
+                onClick={() => {
+                  if (borderSelected === BorderType.Top) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Top);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderTopIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Right}
+                onClick={() => {
+                  if (borderSelected === BorderType.Right) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Right);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderRightIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Bottom}
+                onClick={() => {
+                  if (borderSelected === BorderType.Bottom) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Bottom);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderBottomIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Left}
+                onClick={() => {
+                  if (borderSelected === BorderType.Left) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Left);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderLeftIcon />
+              </Button>
+            </Line>
+          </Borders>
+          <Divider />
+          <Styles>
+            <ButtonWrapper onClick={() => setColorPickerOpen(true)}>
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                ref={borderColorButton}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <PencilLine />
+              </Button>
+              <div style={{ flexGrow: 2 }}>Border color</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+            <ButtonWrapper
+              onClick={() => setStylePickerOpen(true)}
+              ref={borderStyleButton}
+            >
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderStyleIcon />
+              </Button>
+              <div style={{ flexGrow: 2 }}>Border style</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+          </Styles>
+        </BorderPickerDialog>
+        <ColorPicker
+          color={borderColor}
+          onChange={(color): void => {
+            setBorderColor(color);
+            setColorPickerOpen(false);
+          }}
+          onClose={() => {
+            setColorPickerOpen(false);
+          }}
+          anchorEl={borderColorButton}
+          open={colorPickerOpen}
+        />
+        <StyledPopover
+          open={stylePickerOpen}
+          onClose={(): void => {
+            setStylePickerOpen(false);
+          }}
+          anchorEl={borderStyleButton.current}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+          transformOrigin={{ vertical: 38, horizontal: -6 }}
+        >
+          <BorderStyleDialog>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.None}
+            >
+              <BorderDescription>None</BorderDescription>
+              <NoneLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thin);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thin}
+            >
+              <BorderDescription>Thin</BorderDescription>
+              <SolidLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Medium);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Medium}
+            >
+              <BorderDescription>Medium</BorderDescription>
+              <MediumLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thick);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thick}
+            >
+              <BorderDescription>Thick</BorderDescription>
+              <ThickLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dotted);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dotted}
+            >
+              <BorderDescription>Dotted</BorderDescription>
+              <DottedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dashed}
+            >
+              <BorderDescription>Dashed</BorderDescription>
+              <DashedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Double}
+            >
+              <BorderDescription>Double</BorderDescription>
+              <DoubleLine />
+            </LineWrapper>
+          </BorderStyleDialog>
+        </StyledPopover>
+      </StyledPopover>
+    </>
+  );
+};
+
+type LineWrapperProperties = { $checked: boolean };
+const LineWrapper = styled("div")<LineWrapperProperties>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $checked }): string => {
+    if ($checked) {
+      return "#EEEEEE;";
+    }
+    return "inherit;";
+  }};
+  &:hover {
+    border: 1px solid #eeeeee;
+  }
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid white;
+`;
+
+const CheckIconWrapper = styled("div")`
+  width: 12px;
+`;
+
+type CheckIconProperties = { $checked: boolean };
+const CheckIcon = styled("div")<CheckIconProperties>`
+  width: 2px;
+  background-color: #eee;
+  height: 28px;
+  visibility: ${({ $checked }): string => {
+    if ($checked) {
+      return "visible";
+    }
+    return "hidden";
+  }};
+`;
+const NoneLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #e0e0e0;
+`;
+const SolidLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #333333;
+`;
+const MediumLine = styled("div")`
+  width: 68px;
+  border-top: 2px solid #333333;
+`;
+const ThickLine = styled("div")`
+  width: 68px;
+  border-top: 3px solid #333333;
+`;
+const DashedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dashed #333333;
+`;
+const DottedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dotted #333333;
+`;
+const DoubleLine = styled("div")`
+  width: 68px;
+  border-top: 3px double #333333;
+`;
+
+const Divider = styled("div")`
+  display: inline-flex;
+  heigh: 1px;
+  border-bottom: 1px solid #eee;
+  margin-left: 0px;
+  margin-right: 0px;
+`;
+
+const Borders = styled("div")`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+`;
+
+const Styles = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Line = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ButtonWrapper = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &:hover {
+    background-color: #eee;
+    border-top-color: ${(): string => theme.palette.grey["400"]};
+  }
+  cursor: pointer;
+  padding: 8px;
+`;
+
+const BorderStyleDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledPopover = styled(Popover)`
+  .MuiPopover-paper {
+    border-radius: 10px;
+    border: 0px solid ${({ theme }): string => theme.palette.background.default};
+    box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+  }
+  .MuiPopover-padding {
+    padding: 0px;
+  }
+  .MuiList-padding {
+    padding: 0px;
+  }
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 13px;
+`;
+
+const BorderPickerDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const BorderDescription = styled("div")`
+  width: 70px;
+`;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+const Button = styled("button")<TypeButtonProperties>(
+  ({ disabled, $pressed, $underlinedColor }) => {
+    const result = {
+      width: "24px",
+      height: "24px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      // fontSize: "26px",
+      border: "0px solid #fff",
+      borderRadius: "2px",
+      marginRight: "5px",
+      transition: "all 0.2s",
+      cursor: "pointer",
+      padding: "0px",
+    };
+    if (disabled) {
+      return {
+        ...result,
+        color: theme.palette.grey["600"],
+        cursor: "default",
+      };
+    }
+    return {
+      ...result,
+      borderTop: $underlinedColor ? "3px solid #FFF" : "none",
+      borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
+      color: "#21243A",
+      backgroundColor: $pressed ? theme.palette.grey["600"] : "inherit",
+      "&:hover": {
+        backgroundColor: "#F1F2F8",
+        borderTopColor: "#F1F2F8",
+      },
+      svg: {
+        width: "16px",
+        height: "16px",
+      },
+    };
+  },
+);
+
+const ChevronRightStyled = styled(ChevronRight)`
+  width: 16px;
+  height: 16px;
+`;
+
+export default BorderPicker;
--- a/webapp/src/components/colorPicker.tsx
+++ b/webapp/src/components/colorPicker.tsx
@@ -0,0 +1,271 @@
+import styled from "@emotion/styled";
+import Popover, { type PopoverOrigin } from "@mui/material/Popover";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { theme } from "../theme";
+
+type ColorPickerProps = {
+  className?: string;
+  color: string;
+  onChange: (color: string) => void;
+  onClose: () => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const colorPickerWidth = 240;
+const colorfulHeight = 185; // 150 + 15 + 20
+
+const ColorPicker = (properties: ColorPickerProps) => {
+  const [color, setColor] = useState<string>(properties.color);
+  const recentColors = useRef<string[]>([]);
+
+  const closePicker = (newColor: string): void => {
+    const maxRecentColors = 14;
+    properties.onChange(newColor);
+    const colors = recentColors.current.filter((c) => c !== newColor);
+    recentColors.current = [newColor, ...colors].slice(0, maxRecentColors);
+  };
+
+  const handleClose = (): void => {
+    properties.onClose();
+  };
+
+  useEffect(() => {
+    setColor(properties.color);
+  }, [properties.color]);
+
+  const presetColors = [
+    "#FFFFFF",
+    "#1B717E",
+    "#59B9BC",
+    "#3BB68A",
+    "#8CB354",
+    "#F8CD3C",
+    "#EC5753",
+    "#A23C52",
+    "#D03627",
+    "#523E93",
+    "#3358B7",
+  ];
+
+  return (
+    <Popover
+      open={properties.open}
+      onClose={handleClose}
+      anchorEl={properties.anchorEl.current}
+      anchorOrigin={
+        properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+      }
+      transformOrigin={
+        properties.transformOrigin || { vertical: "top", horizontal: "left" }
+      }
+    >
+      <ColorPickerDialog>
+        <HexColorPicker
+          color={color}
+          onChange={(newColor): void => {
+            setColor(newColor);
+          }}
+        />
+        <ColorPickerInput>
+          <HexWrapper>
+            <HexLabel>{"Hex"}</HexLabel>
+            <HexColorInputBox>
+              <HashLabel>{"#"}</HashLabel>
+              <HexColorInput
+                color={color}
+                onChange={(newColor): void => {
+                  setColor(newColor);
+                }}
+              />
+            </HexColorInputBox>
+          </HexWrapper>
+          <Swatch
+            $color={color}
+            onClick={(): void => {
+              closePicker(color);
+            }}
+          />
+        </ColorPickerInput>
+        <HorizontalDivider />
+        <ColorList>
+          {presetColors.map((presetColor) => (
+            <Button
+              key={presetColor}
+              $color={presetColor}
+              onClick={(): void => {
+                closePicker(presetColor);
+              }}
+            />
+          ))}
+        </ColorList>
+        <HorizontalDivider />
+        <RecentLabel>{"Recent"}</RecentLabel>
+        <ColorList>
+          {recentColors.current.map((recentColor) => (
+            <Button
+              key={recentColor}
+              $color={recentColor}
+              onClick={(): void => {
+                closePicker(recentColor);
+              }}
+            />
+          ))}
+        </ColorList>
+      </ColorPickerDialog>
+    </Popover>
+  );
+};
+
+const RecentLabel = styled.div`
+  font-size: 12px;
+  color: ${theme.palette.text.secondary};
+`;
+
+const ColorList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+`;
+
+const Button = styled.button<{ $color: string }>`
+  width: 20px;
+  height: 20px;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => {
+    return $color;
+  }};
+  box-sizing: border-box;
+  margin-top: 10px;
+  margin-right: 10px;
+  border-radius: 2px;
+`;
+
+const HorizontalDivider = styled.div`
+  height: 0px;
+  width: 100%;
+  border-top: 1px solid ${theme.palette.grey["400"]};
+  margin-top: 15px;
+  margin-bottom: 5px;
+`;
+
+// const StyledPopover = styled(Popover)`
+//   .MuiPopover-paper {
+//     border-radius: 10px;
+//     border: 0px solid ${theme.palette.background.default};
+//     box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+//   }
+//   .MuiPopover-padding {
+//     padding: 0px;
+//   }
+//   .MuiList-padding {
+//     padding: 0px;
+//   }
+// `;
+
+const ColorPickerDialog = styled.div`
+  background: ${theme.palette.background.default};
+  width: ${colorPickerWidth}px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+
+  & .react-colorful {
+    height: ${colorfulHeight}px;
+    width: ${colorPickerWidth}px;
+  }
+  & .react-colorful__saturation {
+    border-bottom: none;
+    border-radius: 5px;
+  }
+  & .react-colorful__hue {
+    height: 20px;
+    margin-top: 15px;
+    border-radius: 5px;
+  }
+  & .react-colorful__saturation-pointer {
+    width: 14px;
+    height: 14px;
+  }
+  & .react-colorful__hue-pointer {
+    width: 7px;
+    border-radius: 3px;
+  }
+`;
+
+const HashLabel = styled.div`
+  margin: auto 0px auto 10px;
+  font-size: 13px;
+  color: #7d8ec2;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexLabel = styled.div`
+  margin: auto 10px auto 0px;
+  font-size: 12px;
+  display: inline-flex;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexColorInputBox = styled.div`
+  display: inline-flex;
+  flex-grow: 1;
+  margin-right: 10px;
+  width: 140px;
+  height: 28px;
+  border: 1px solid ${theme.palette.grey["600"]};
+  border-radius: 5px;
+`;
+
+const HexWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  & input {
+    min-width: 0px;
+    border: 0px;
+    background: ${theme.palette.background.default};
+    outline: none;
+    font-family: ${theme.typography.button.fontFamily};
+    font-size: 12px;
+    text-transform: uppercase;
+    text-align: right;
+    padding-right: 10px;
+    border-radius: 5px;
+  }
+
+  & input:focus {
+    border-color: #4298ef;
+  }
+`;
+
+const Swatch = styled.div<{ $color: string }>`
+  display: inline-flex;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => $color};
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+`;
+
+const ColorPickerInput = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 15px;
+`;
+
+export default ColorPicker;
--- a/webapp/src/components/formatMenu.tsx
+++ b/webapp/src/components/formatMenu.tsx
@@ -0,0 +1,136 @@
+import { Menu, MenuItem, styled } from "@mui/material";
+import { type ComponentProps, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import FormatPicker from "./formatPicker";
+import { NumberFormats } from "./formatUtil";
+
+type FormatMenuProps = {
+  children: React.ReactNode;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+  onExited?: () => void;
+  anchorOrigin?: ComponentProps<typeof Menu>["anchorOrigin"];
+};
+
+const FormatMenu = (properties: FormatMenuProps) => {
+  const { t } = useTranslation();
+  const { onChange } = properties;
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isPickerOpen, setPickerOpen] = useState(false);
+  const anchorElement = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <ChildrenWrapper
+        onClick={(): void => setMenuOpen(true)}
+        ref={anchorElement}
+      >
+        {properties.children}
+      </ChildrenWrapper>
+      <Menu
+        open={isMenuOpen}
+        onClose={(): void => setMenuOpen(false)}
+        anchorEl={anchorElement.current}
+        anchorOrigin={properties.anchorOrigin}
+      >
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}>
+          <MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
+        </MenuItemWrapper>
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}>
+          <MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.number_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.PERCENTAGE)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.percentage_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_eur_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_USD)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_usd_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_gbp_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.DATE_SHORT)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.date_short_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.DATE_LONG)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.date_long_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
+          <MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
+        </MenuItemWrapper>
+      </Menu>
+      <FormatPicker
+        numFmt={properties.numFmt}
+        onChange={properties.onChange}
+        open={isPickerOpen}
+        onClose={(): void => setPickerOpen(false)}
+        onExited={properties.onExited}
+      />
+    </>
+  );
+};
+
+const MenuItemWrapper = styled(MenuItem)`
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  width: 100%;
+`;
+
+const ChildrenWrapper = styled("div")`
+  display: flex;
+`;
+
+const MenuDivider = styled("div")``;
+
+const MenuItemText = styled("div")`
+  color: #000;
+`;
+
+const MenuItemExample = styled("div")`
+  margin-left: 20px;
+`;
+
+export default FormatMenu;
--- a/webapp/src/components/formatPicker.tsx
+++ b/webapp/src/components/formatPicker.tsx
@@ -0,0 +1,49 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type FormatPickerProps = {
+  className?: string;
+  open: boolean;
+  onClose: () => void;
+  onExited?: () => void;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+};
+
+const FormatPicker = (properties: FormatPickerProps) => {
+  const { t } = useTranslation();
+  const [formatCode, setFormatCode] = useState(properties.numFmt);
+
+  const onSubmit = (format_code: string): void => {
+    properties.onChange(format_code);
+    properties.onClose();
+  };
+  return (
+    <Dialog open={properties.open} onClose={properties.onClose}>
+      <DialogTitle>{t("num_fmt.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={properties.numFmt}
+          label={t("num_fmt.label")}
+          name="format_code"
+          onChange={(event) => setFormatCode(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onSubmit(formatCode)}>
+          {t("num_fmt.save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FormatPicker;
--- a/webapp/src/components/formatUtil.ts
+++ b/webapp/src/components/formatUtil.ts
@@ -0,0 +1,36 @@
+export function increaseDecimalPlaces(numberFormat: string): string {
+  // FIXME: Should it be done in the Rust? How should it work?
+  // Increase decimal places for existing numbers with decimals
+  const newNumberFormat = numberFormat.replace(/\.0/g, ".00");
+  // If no decimal places declared, add 0.0
+  if (!newNumberFormat.includes(".")) {
+    if (newNumberFormat.includes("0")) {
+      return newNumberFormat.replace(/0/g, "0.0");
+    }
+    if (newNumberFormat.includes("#")) {
+      return newNumberFormat.replace(/#([^#,]|$)/g, "0.0$1");
+    }
+    return "0.0";
+  }
+  return newNumberFormat;
+}
+
+export function decreaseDecimalPlaces(numberFormat: string): string {
+  // FIXME: Should it be done in the Rust? How should it work?
+  // Decrease decimal places for existing numbers with decimals
+  let newNumberFormat = numberFormat.replace(/\.0/g, ".");
+  // Fix leftover dots
+  newNumberFormat = newNumberFormat.replace(/0\.([^0]|$)/, "0$1");
+  return newNumberFormat;
+}
+
+export enum NumberFormats {
+  AUTO = "general",
+  CURRENCY_EUR = '"€"#,##0.00',
+  CURRENCY_USD = '"$"#,##0.00',
+  CURRENCY_GBP = '"£"#,##0.00',
+  DATE_SHORT = 'dd"/"mm"/"yyyy',
+  DATE_LONG = 'dddd"," mmmm dd"," yyyy',
+  PERCENTAGE = "0.00%",
+  NUMBER = "#,##0.00",
+}
--- a/webapp/src/components/formulaDialog.tsx
+++ b/webapp/src/components/formulaDialog.tsx
@@ -0,0 +1,50 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface FormulaDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  onFormulaChanged: (name: string) => void;
+  defaultFormula: string;
+}
+
+export const FormulaDialog = (properties: FormulaDialogProps) => {
+  const { t } = useTranslation();
+  const [formula, setFormula] = useState(properties.defaultFormula);
+  return (
+    <Dialog open={properties.isOpen} onClose={properties.close}>
+      <DialogTitle>{t("formula_input.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={formula}
+          label={t("formula_input.label")}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onChange={(event) => {
+            setFormula(event.target.value);
+          }}
+          spellCheck="false"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            properties.onFormulaChanged(formula);
+          }}
+        >
+          {t("formula_input.update")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
--- a/webapp/src/components/formulabar.tsx
+++ b/webapp/src/components/formulabar.tsx
@@ -0,0 +1,132 @@
+import { Button, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { Fx } from "../icons";
+import { FormulaDialog } from "./formulaDialog";
+
+type FormulaBarProps = {
+  cellAddress: string;
+  formulaValue: string;
+  onChange: (value: string) => void;
+};
+
+const formulaBarHeight = 30;
+const headerColumnWidth = 30;
+
+function FormulaBar(properties: FormulaBarProps) {
+  const [formulaDialogOpen, setFormulaDialogOpen] = useState(false);
+  const handleCloseFormulaDialog = () => {
+    setFormulaDialogOpen(false);
+  };
+
+  return (
+    <Container>
+      <AddressContainer>
+        <CellBarAddress>{properties.cellAddress}</CellBarAddress>
+        <StyledButton>
+          <ChevronDown />
+        </StyledButton>
+      </AddressContainer>
+      <Divider />
+      <FormulaContainer>
+        <FormulaSymbolButton>
+          <Fx />
+        </FormulaSymbolButton>
+        <Editor
+          onClick={() => {
+            setFormulaDialogOpen(true);
+          }}
+        >
+          {properties.formulaValue}
+        </Editor>
+      </FormulaContainer>
+      <FormulaDialog
+        isOpen={formulaDialogOpen}
+        close={handleCloseFormulaDialog}
+        defaultFormula={properties.formulaValue}
+        onFormulaChanged={(newName) => {
+          properties.onChange(newName);
+          setFormulaDialogOpen(false);
+        }}
+      />
+    </Container>
+  );
+}
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const FormulaSymbolButton = styled(StyledButton)`
+  margin-right: 8px;
+`;
+
+const Divider = styled("div")`
+  background-color: #e0e0e0;
+  width: 1px;
+  height: 20px;
+  margin-left: 16px;
+  margin-right: 16px;
+`;
+
+const FormulaContainer = styled("div")`
+  margin-left: 10px;
+  line-height: 22px;
+  font-weight: normal;
+  width: 100%;
+  height: 22px;
+  display: flex;
+`;
+
+const Container = styled("div")`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: ${(properties): string =>
+    properties.theme.palette.background.default};
+  height: ${formulaBarHeight}px;
+`;
+
+const AddressContainer = styled("div")`
+  padding-left: 16px;
+  color: #333;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 11px;
+  display: flex;
+  font-weight: 600;
+  flex-grow: row;
+  min-width: ${headerColumnWidth}px;
+`;
+
+const CellBarAddress = styled("div")`
+  width: 100%;
+  text-align: "center";
+`;
+
+const Editor = styled("div")`
+  position: relative;
+  width: 100%;
+  padding: 0px;
+  border-width: 0px;
+  outline: none;
+  resize: none;
+  white-space: pre-wrap;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-align: left;
+  span {
+    min-width: 1px;
+  }
+`;
+
+export default FormulaBar;
--- a/webapp/src/components/navigation/index.ts
+++ b/webapp/src/components/navigation/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./navigation";
+export type { NavigationProps } from "./navigation";
--- a/webapp/src/components/navigation/menus.tsx
+++ b/webapp/src/components/navigation/menus.tsx
@@ -0,0 +1,122 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  styled,
+} from "@mui/material";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { SheetOptions } from "./types";
+
+interface SheetRenameDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  onNameChanged: (name: string) => void;
+  defaultName: string;
+}
+
+export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState(properties.defaultName);
+  return (
+    <Dialog open={properties.isOpen} onClose={properties.close}>
+      <DialogTitle>{t("sheet_rename.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={name}
+          label={t("sheet_rename.label")}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onChange={(event) => {
+            setName(event.target.value);
+          }}
+          spellCheck="false"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            properties.onNameChanged(name);
+          }}
+        >
+          {t("sheet_rename.rename")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+interface SheetListMenuProps {
+  isOpen: boolean;
+  close: () => void;
+  anchorEl: HTMLButtonElement | null;
+  onSheetSelected: (index: number) => void;
+  sheetOptionsList: SheetOptions[];
+}
+
+const SheetListMenu = (properties: SheetListMenuProps) => {
+  const { isOpen, close, anchorEl, onSheetSelected, sheetOptionsList } =
+    properties;
+
+  return (
+    <StyledMenu
+      open={isOpen}
+      onClose={close}
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      transformOrigin={{
+        vertical: "bottom",
+        horizontal: 6,
+      }}
+    >
+      {sheetOptionsList.map((tab, index) => (
+        <StyledMenuItem
+          key={tab.sheetId}
+          onClick={(): void => onSheetSelected(index)}
+        >
+          <ItemColor style={{ backgroundColor: tab.color }} />
+          <ItemName>{tab.name}</ItemName>
+        </StyledMenuItem>
+      ))}
+    </StyledMenu>
+  );
+};
+
+const StyledMenu = styled(Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    padding: 4,
+  },
+  "& .MuiList-padding": {
+    padding: 0,
+  },
+});
+
+const StyledMenuItem = styled(MenuItem)({
+  padding: 8,
+  borderRadius: 4,
+});
+
+const ItemColor = styled("div")`
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  margin-right: 8px;
+`;
+
+const ItemName = styled("div")`
+  font-size: 13px;
+  color: #333;
+`;
+
+export default SheetListMenu;
--- a/webapp/src/components/navigation/navigation.tsx
+++ b/webapp/src/components/navigation/navigation.tsx
@@ -0,0 +1,145 @@
+import { styled } from "@mui/material";
+import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StyledButton } from "../toolbar";
+import SheetListMenu from "./menus";
+import Sheet from "./sheet";
+import type { SheetOptions } from "./types";
+
+export interface NavigationProps {
+  sheets: SheetOptions[];
+  selectedIndex: number;
+  onSheetSelected: (index: number) => void;
+  onAddBlankSheet: () => void;
+  onSheetColorChanged: (hex: string) => void;
+  onSheetRenamed: (name: string) => void;
+  onSheetDeleted: () => void;
+}
+
+function Navigation(props: NavigationProps) {
+  const { t } = useTranslation();
+  const { onSheetSelected, sheets, selectedIndex } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Container>
+      <StyledButton
+        title={t("navigation.add_sheet")}
+        $pressed={false}
+        onClick={props.onAddBlankSheet}
+      >
+        <Plus />
+      </StyledButton>
+      <StyledButton
+        onClick={handleClick}
+        title={t("navigation.sheet_list")}
+        $pressed={false}
+      >
+        <Menu />
+      </StyledButton>
+      <Sheets>
+        <SheetInner>
+          {sheets.map((tab, index) => (
+            <Sheet
+              key={tab.sheetId}
+              name={tab.name}
+              color={tab.color}
+              selected={index === selectedIndex}
+              onSelected={() => onSheetSelected(index)}
+              onColorChanged={(hex: string): void => {
+                props.onSheetColorChanged(hex);
+              }}
+              onRenamed={(name: string): void => {
+                props.onSheetRenamed(name);
+              }}
+              onDeleted={(): void => {
+                props.onSheetDeleted();
+              }}
+            />
+          ))}
+        </SheetInner>
+      </Sheets>
+      <LeftDivider />
+      <ChevronLeftStyled />
+      <ChevronRightStyled />
+      <RightDivider />
+      <Advert>ironcalc.com</Advert>
+      <SheetListMenu
+        anchorEl={anchorEl}
+        isOpen={open}
+        close={handleClose}
+        sheetOptionsList={sheets}
+        onSheetSelected={onSheetSelected}
+      />
+    </Container>
+  );
+}
+
+const ChevronLeftStyled = styled(ChevronLeft)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+const ChevronRightStyled = styled(ChevronRight)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+// Note I have to specify the font-family in every component that can be considered stand-alone
+const Container = styled("div")`
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  height: 40px;
+  align-items: center;
+  padding-left: 12px;
+  font-family: Inter;
+  background-color: #fff;
+`;
+
+const Sheets = styled("div")`
+  flex-grow: 2;
+  overflow: hidden;
+`;
+
+const SheetInner = styled("div")`
+  display: flex;
+`;
+
+const LeftDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 10px 0px 0px;
+`;
+
+const RightDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 20px 0px 10px;
+`;
+
+const Advert = styled("div")`
+  color: #f2994a;
+  margin-right: 12px;
+  font-size: 12px;
+`;
+
+export default Navigation;
--- a/webapp/src/components/navigation/sheet.tsx
+++ b/webapp/src/components/navigation/sheet.tsx
@@ -0,0 +1,142 @@
+import { Button, Menu, MenuItem, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { useRef, useState } from "react";
+import ColorPicker from "../colorPicker";
+import { SheetRenameDialog } from "./menus";
+interface SheetProps {
+  name: string;
+  color: string;
+  selected: boolean;
+  onSelected: () => void;
+  onColorChanged: (hex: string) => void;
+  onRenamed: (name: string) => void;
+  onDeleted: () => void;
+}
+function Sheet(props: SheetProps) {
+  const { name, color, selected, onSelected } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const colorButton = useRef(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const handleCloseRenameDialog = () => {
+    setRenameDialogOpen(false);
+  };
+  const handleOpenRenameDialog = () => {
+    setRenameDialogOpen(true);
+  };
+  return (
+    <>
+      <Wrapper
+        style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
+        onClick={() => {
+          onSelected();
+        }}
+        ref={colorButton}
+      >
+        <Name>{name}</Name>
+        <StyledButton onClick={handleOpen}>
+          <ChevronDown />
+        </StyledButton>
+      </Wrapper>
+      <StyledMenu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: 6,
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            handleOpenRenameDialog();
+            handleClose();
+          }}
+        >
+          Rename
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            setColorPickerOpen(true);
+            handleClose();
+          }}
+        >
+          Change Color
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            props.onDeleted();
+            handleClose();
+          }}
+        >
+          {" "}
+          Delete
+        </MenuItem>
+      </StyledMenu>
+      <SheetRenameDialog
+        isOpen={renameDialogOpen}
+        close={handleCloseRenameDialog}
+        defaultName={name}
+        onNameChanged={(newName) => {
+          props.onRenamed(newName);
+          setRenameDialogOpen(false);
+        }}
+      />
+      <ColorPicker
+        color={color}
+        onChange={(color): void => {
+          props.onColorChanged(color);
+          setColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setColorPickerOpen(false);
+        }}
+        anchorEl={colorButton}
+        open={colorPickerOpen}
+      />
+    </>
+  );
+}
+
+const StyledMenu = styled(Menu)``;
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  height: 24px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const Wrapper = styled("div")`
+  display: flex;
+  margin-left: 20px;
+  border-bottom: 3px solid;
+  border-top: 3px solid white;
+  line-height: 34px;
+  align-items: center;
+`;
+
+const Name = styled("div")`
+  font-size: 12px;
+  margin-right: 5px;
+  text-wrap: nowrap;
+`;
+
+export default Sheet;
--- a/webapp/src/components/navigation/types.ts
+++ b/webapp/src/components/navigation/types.ts
@@ -0,0 +1,5 @@
+export interface SheetOptions {
+  name: string;
+  color: string;
+  sheetId: number;
+}
--- a/webapp/src/components/tests/model.test.ts
+++ b/webapp/src/components/tests/model.test.ts
@@ -0,0 +1,13 @@
+import { readFile } from "node:fs/promises";
+import { Model, initSync } from "@ironcalc/wasm";
+import { expect, test } from "vitest";
+
+// This is a simple test that showcases how to load the wasm module in the tests
+
+test("simple calculation", async () => {
+  const buffer = await readFile("node_modules/@ironcalc/wasm/wasm_bg.wasm");
+  initSync(buffer);
+  const model = new Model("en", "UTC");
+  model.setUserInput(0, 1, 1, "=21*2");
+  expect(model.getFormattedCellValue(0, 1, 1)).toBe("42");
+});
--- a/webapp/src/components/tests/util.test.ts
+++ b/webapp/src/components/tests/util.test.ts
@@ -0,0 +1,7 @@
+import { expect, test } from "vitest";
+import { isNavigationKey } from "../util";
+
+test("checks arrow left is a navigation key", () => {
+  expect(isNavigationKey("ArrowLeft")).toBe(true);
+  expect(isNavigationKey("Arrow")).toBe(false);
+});
--- a/webapp/src/components/toolbar.tsx
+++ b/webapp/src/components/toolbar.tsx
@@ -0,0 +1,453 @@
+import type {
+  BorderOptions,
+  HorizontalAlignment,
+  VerticalAlignment,
+} from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  ArrowDownToLine,
+  ArrowUpToLine,
+  Bold,
+  ChevronDown,
+  Euro,
+  Grid2X2,
+  Grid2x2Check,
+  Grid2x2X,
+  Italic,
+  PaintBucket,
+  Paintbrush2,
+  Percent,
+  Redo2,
+  Strikethrough,
+  Type,
+  Underline,
+  Undo2,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+} from "../icons";
+import { theme } from "../theme";
+import BorderPicker from "./borderPicker";
+import ColorPicker from "./colorPicker";
+import FormatMenu from "./formatMenu";
+import {
+  NumberFormats,
+  decreaseDecimalPlaces,
+  increaseDecimalPlaces,
+} from "./formatUtil";
+
+type ToolbarProperties = {
+  canUndo: boolean;
+  canRedo: boolean;
+  onRedo: () => void;
+  onUndo: () => void;
+  onToggleUnderline: (u: boolean) => void;
+  onToggleBold: (v: boolean) => void;
+  onToggleItalic: (v: boolean) => void;
+  onToggleStrike: (v: boolean) => void;
+  onToggleHorizontalAlign: (v: string) => void;
+  onToggleVerticalAlign: (v: string) => void;
+  onCopyStyles: () => void;
+  onTextColorPicked: (hex: string) => void;
+  onFillColorPicked: (hex: string) => void;
+  onNumberFormatPicked: (numberFmt: string) => void;
+  onBorderChanged: (border: BorderOptions) => void;
+  fillColor: string;
+  fontColor: string;
+  bold: boolean;
+  underline: boolean;
+  italic: boolean;
+  strike: boolean;
+  horizontalAlign: HorizontalAlignment;
+  verticalAlign: VerticalAlignment;
+  canEdit: boolean;
+  numFmt: string;
+  showGridLines: boolean;
+  onToggleShowGridLines: (show: boolean) => void;
+};
+
+function Toolbar(properties: ToolbarProperties) {
+  const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
+  const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
+  const [borderPickerOpen, setBorderPickerOpen] = useState(false);
+
+  const fontColorButton = useRef(null);
+  const fillColorButton = useRef(null);
+  const borderButton = useRef(null);
+
+  const { t } = useTranslation();
+
+  const { canEdit } = properties;
+
+  return (
+    <ToolbarContainer>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onUndo}
+        disabled={!properties.canUndo}
+        title={t("toolbar.undo")}
+      >
+        <Undo2 />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onRedo}
+        disabled={!properties.canRedo}
+        title={t("toolbar.redo")}
+      >
+        <Redo2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onCopyStyles}
+        title={t("toolbar.copy_styles")}
+      >
+        <Paintbrush2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.euro")}
+      >
+        <Euro />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.percentage")}
+      >
+        <Percent />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            decreaseDecimalPlaces(properties.numFmt),
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_decrease")}
+      >
+        <DecimalPlacesDecreaseIcon />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            increaseDecimalPlaces(properties.numFmt),
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_increase")}
+      >
+        <DecimalPlacesIncreaseIcon />
+      </StyledButton>
+      <FormatMenu
+        numFmt={properties.numFmt}
+        onChange={(numberFmt): void => {
+          properties.onNumberFormatPicked(numberFmt);
+        }}
+        onExited={(): void => {}}
+        anchorOrigin={{
+          horizontal: 20, // Aligning the menu to the middle of FormatButton
+          vertical: "bottom",
+        }}
+      >
+        <StyledButton
+          type="button"
+          $pressed={false}
+          disabled={!canEdit}
+          title={t("toolbar.format_number")}
+          sx={{
+            width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
+            fontSize: "13px",
+            fontWeight: 400,
+          }}
+        >
+          {"123"}
+          <ChevronDown />
+        </StyledButton>
+      </FormatMenu>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.bold}
+        onClick={() => properties.onToggleBold(!properties.bold)}
+        disabled={!canEdit}
+        title={t("toolbar.bold")}
+      >
+        <Bold />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.italic}
+        onClick={() => properties.onToggleItalic(!properties.italic)}
+        disabled={!canEdit}
+        title={t("toolbar.italic")}
+      >
+        <Italic />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.underline}
+        onClick={() => properties.onToggleUnderline(!properties.underline)}
+        disabled={!canEdit}
+        title={t("toolbar.underline")}
+      >
+        <Underline />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.strike}
+        onClick={() => properties.onToggleStrike(!properties.strike)}
+        disabled={!canEdit}
+        title={t("toolbar.strike_trough")}
+      >
+        <Strikethrough />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.font_color")}
+        ref={fontColorButton}
+        $underlinedColor={properties.fontColor}
+        onClick={() => setFontColorPickerOpen(true)}
+      >
+        <Type />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.fill_color")}
+        ref={fillColorButton}
+        $underlinedColor={properties.fillColor}
+        onClick={() => setFillColorPickerOpen(true)}
+      >
+        <PaintBucket />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "left"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "left" ? "general" : "left",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_left")}
+      >
+        <AlignLeft />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "center"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "center" ? "general" : "center",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_center")}
+      >
+        <AlignCenter />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "right"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "right" ? "general" : "right",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_right")}
+      >
+        <AlignRight />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "top"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "top" ? "bottom" : "top",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_top")}
+      >
+        <ArrowUpToLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "center"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "center" ? "bottom" : "center",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_center")}
+      >
+        <ArrowMiddleFromLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "bottom"}
+        onClick={() => properties.onToggleVerticalAlign("bottom")}
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_bottom")}
+      >
+        <ArrowDownToLine />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => setBorderPickerOpen(true)}
+        ref={borderButton}
+        disabled={!canEdit}
+        title={t("toolbar.borders")}
+      >
+        <Grid2X2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() =>
+          properties.onToggleShowGridLines(!properties.showGridLines)
+        }
+        disabled={!canEdit}
+        title={t("toolbar.show_hide_grid_lines")}
+      >
+        {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
+      </StyledButton>
+
+      <ColorPicker
+        color={properties.fontColor}
+        onChange={(color): void => {
+          properties.onTextColorPicked(color);
+          setFontColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setFontColorPickerOpen(false);
+        }}
+        anchorEl={fontColorButton}
+        open={fontColorPickerOpen}
+      />
+      <ColorPicker
+        color={properties.fillColor}
+        onChange={(color): void => {
+          properties.onFillColorPicked(color);
+          setFillColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setFillColorPickerOpen(false);
+        }}
+        anchorEl={fillColorButton}
+        open={fillColorPickerOpen}
+      />
+      <BorderPicker
+        onChange={(border): void => {
+          properties.onBorderChanged(border);
+          setBorderPickerOpen(false);
+        }}
+        anchorEl={borderButton}
+        open={borderPickerOpen}
+      />
+    </ToolbarContainer>
+  );
+}
+const toolbarHeight = 40;
+
+const ToolbarContainer = styled("div")`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${({ theme }) => theme.palette.background.paper};
+  height: ${toolbarHeight}px;
+  line-height: ${toolbarHeight}px;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey["600"]};
+  font-family: Inter;
+  border-radius: 4px 4px 0px 0px;
+  overflow-x: auto;
+`;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+export const StyledButton = styled("button")<TypeButtonProperties>(
+  ({ disabled, $pressed, $underlinedColor }) => {
+    const result = {
+      width: "24px",
+      height: "24px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "26px",
+      border: "0px solid #fff",
+      borderRadius: "2px",
+      marginRight: "5px",
+      transition: "all 0.2s",
+      cursor: "pointer",
+      backgroundColor: "white",
+      padding: "0px",
+      svg: {
+        width: "16px",
+        height: "16px",
+      },
+    };
+    if (disabled) {
+      return {
+        ...result,
+        color: theme.palette.grey["600"],
+        cursor: "default",
+      };
+    }
+    return {
+      ...result,
+      borderTop: $underlinedColor ? "3px solid #FFF" : "none",
+      borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
+      color: "#21243A",
+      backgroundColor: $pressed ? "#EEE" : "#FFF",
+      "&:hover": {
+        backgroundColor: "#F1F2F8",
+        borderTopColor: "#F1F2F8",
+      },
+    };
+  },
+);
+
+const Divider = styled("div")({
+  width: "0px",
+  height: "10px",
+  borderLeft: "1px solid #D3D6E9",
+  marginLeft: "5px",
+  marginRight: "10px",
+});
+
+export default Toolbar;
--- a/webapp/src/components/types.ts
+++ b/webapp/src/components/types.ts
@@ -0,0 +1,11 @@
+export interface Area {
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+export interface Cell {
+  row: number;
+  column: number;
+}
--- a/webapp/src/components/useKeyboardNavigation.ts
+++ b/webapp/src/components/useKeyboardNavigation.ts
@@ -0,0 +1,225 @@
+import { type KeyboardEvent, type RefObject, useCallback } from "react";
+import { type NavigationKey, isEditingKey, isNavigationKey } from "./util";
+
+export enum Border {
+  Top = "top",
+  Bottom = "bottom",
+  Right = "right",
+  Left = "left",
+}
+
+interface Options {
+  onCellsDeleted: () => void;
+  onExpandAreaSelectedKeyboard: (
+    key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
+  ) => void;
+  onEditKeyPressStart: (initText: string) => void;
+  onCellEditStart: () => void;
+  onBold: () => void;
+  onItalic: () => void;
+  onUnderline: () => void;
+  onNavigationToEdge: (direction: NavigationKey) => void;
+  onPageDown: () => void;
+  onPageUp: () => void;
+  onArrowDown: () => void;
+  onArrowUp: () => void;
+  onArrowLeft: () => void;
+  onArrowRight: () => void;
+  onKeyHome: () => void;
+  onKeyEnd: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onNextSheet: () => void;
+  onPreviousSheet: () => void;
+  root: RefObject<HTMLDivElement>;
+}
+
+// # IronCalc Keyboard accessibility:
+// * ArrowKeys: navigation
+// * Enter: ArrowDown (Excel behaviour not g-sheets)
+// * Tab: arrow right
+// * Shift+Tab: arrow left
+// * Home/End: First/last column
+// * Shift+Arrows: selection
+// * Ctrl+Arrows: navigating to edge
+// * Ctrl+Home/End: navigation to end
+// * PagDown/Up scroll Down/Up
+// * Alt+ArrowDown/Up: next/previous sheet
+//   (NB: Excel uses Ctrl+PageUp/Down for this but that highjacks a browser behaviour,
+//    go to next/previous tab)
+// * Ctrl+u/i/b: style
+// * Ctrl+z/y: undo/redo
+// * F2: start editing
+
+// References:
+// In Google Sheets: Ctrl+/ shows the list of keyboard shortcuts
+// https://support.google.com/docs/answer/181110
+// https://support.microsoft.com/en-us/office/keyboard-shortcuts-in-excel-1798d9d5-842a-42b8-9c99-9b7213f0040f
+
+const useKeyboardNavigation = (
+  options: Options,
+): { onKeyDown: (event: KeyboardEvent) => void } => {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const { key } = event;
+      const { root } = options;
+      // Silence the linter
+      if (!root.current) {
+        return;
+      }
+      if (event.target !== root.current) {
+        return;
+      }
+      if (event.metaKey || event.ctrlKey) {
+        switch (key) {
+          case "z": {
+            options.onUndo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "y": {
+            options.onRedo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "b": {
+            options.onBold();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "i": {
+            options.onItalic();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "u": {
+            options.onUnderline();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          // No default
+        }
+        if (isNavigationKey(key)) {
+          // Ctrl+Arrows, Ctrl+Home/End
+          options.onNavigationToEdge(key);
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.altKey) {
+        switch (key) {
+          case "ArrowDown": {
+            // select next sheet
+            options.onNextSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+          case "ArrowUp": {
+            // select previous sheet
+            options.onPreviousSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+        }
+      }
+      if (key === "F2") {
+        options.onCellEditStart();
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (isEditingKey(key) || key === "Backspace") {
+        const initText = key === "Backspace" ? "" : key;
+        options.onEditKeyPressStart(initText);
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      // Worksheet Navigation
+      if (event.shiftKey) {
+        if (
+          key === "ArrowRight" ||
+          key === "ArrowLeft" ||
+          key === "ArrowUp" ||
+          key === "ArrowDown"
+        ) {
+          options.onExpandAreaSelectedKeyboard(key);
+        } else if (key === "Tab") {
+          options.onArrowLeft();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      }
+      switch (key) {
+        case "ArrowRight":
+        case "Tab": {
+          options.onArrowRight();
+
+          break;
+        }
+        case "ArrowLeft": {
+          options.onArrowLeft();
+
+          break;
+        }
+        case "ArrowDown":
+        case "Enter": {
+          options.onArrowDown();
+
+          break;
+        }
+        case "ArrowUp": {
+          options.onArrowUp();
+
+          break;
+        }
+        case "End": {
+          options.onKeyEnd();
+
+          break;
+        }
+        case "Home": {
+          options.onKeyHome();
+
+          break;
+        }
+        case "Delete": {
+          options.onCellsDeleted();
+
+          break;
+        }
+        case "PageDown": {
+          options.onPageDown();
+
+          break;
+        }
+        case "PageUp": {
+          options.onPageUp();
+
+          break;
+        }
+        // No default
+      }
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options],
+  );
+  return { onKeyDown };
+};
+
+export default useKeyboardNavigation;
--- a/webapp/src/components/usePointer.ts
+++ b/webapp/src/components/usePointer.ts
@@ -0,0 +1,169 @@
+import { type PointerEvent, type RefObject, useCallback, useRef } from "react";
+import type WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import {
+  headerColumnWidth,
+  headerRowHeight,
+} from "./WorksheetCanvas/worksheetCanvas";
+import type { Cell } from "./types";
+
+interface PointerSettings {
+  canvasElement: RefObject<HTMLCanvasElement>;
+  worksheetCanvas: RefObject<WorksheetCanvas | null>;
+  worksheetElement: RefObject<HTMLDivElement>;
+  onCellSelected: (cell: Cell, event: React.MouseEvent) => void;
+  onAreaSelecting: (cell: Cell) => void;
+  onAreaSelected: () => void;
+  onExtendToCell: (cell: Cell) => void;
+  onExtendToEnd: () => void;
+}
+
+interface PointerEvents {
+  onPointerDown: (event: PointerEvent) => void;
+  onPointerMove: (event: PointerEvent) => void;
+  onPointerUp: (event: PointerEvent) => void;
+  onPointerHandleDown: (event: PointerEvent) => void;
+}
+
+const usePointer = (options: PointerSettings): PointerEvents => {
+  const isSelecting = useRef(false);
+  const isExtending = useRef(false);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent): void => {
+      // Range selections are disabled on non-mouse devices. Use touch move only
+      // to scroll for now.
+      if (event.pointerType !== "mouse") {
+        return;
+      }
+
+      if (isSelecting.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (cell) {
+          options.onAreaSelecting(cell);
+        } else {
+          console.log("Failed");
+        }
+      } else if (isExtending.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (!cell) {
+          return;
+        }
+        options.onExtendToCell(cell);
+      }
+    },
+    [options],
+  );
+
+  const onPointerUp = useCallback(
+    (event: PointerEvent): void => {
+      if (isSelecting.current) {
+        const { worksheetElement } = options;
+        isSelecting.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onAreaSelected();
+      } else if (isExtending.current) {
+        const { worksheetElement } = options;
+        isExtending.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onExtendToEnd();
+      }
+    },
+    [options],
+  );
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent) => {
+      let x = event.clientX;
+      let y = event.clientY;
+      const { canvasElement, worksheetElement, worksheetCanvas } = options;
+      const worksheet = worksheetCanvas.current;
+      const canvas = canvasElement.current;
+      const worksheetWrapper = worksheetElement.current;
+      // Silence the linter
+      if (!canvas || !worksheet || !worksheetWrapper) {
+        return;
+      }
+      const canvasRect = canvas.getBoundingClientRect();
+      x -= canvasRect.x;
+      y -= canvasRect.y;
+      // Makes sure is in the sheet area
+      if (
+        x > canvasRect.width ||
+        x < headerColumnWidth ||
+        y < headerRowHeight ||
+        y > canvasRect.height
+      ) {
+        if (
+          x > 0 &&
+          x < headerColumnWidth &&
+          y > headerRowHeight &&
+          y < canvasRect.height
+        ) {
+          // Click on a row number
+          const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
+          if (cell) {
+            // TODO
+            // Row selected
+          }
+        }
+        return;
+      }
+      const cell = worksheet.getCellByCoordinates(x, y);
+      if (cell) {
+        options.onCellSelected(cell, event);
+        isSelecting.current = true;
+        worksheetWrapper.setPointerCapture(event.pointerId);
+      }
+    },
+    [options],
+  );
+
+  const onPointerHandleDown = useCallback(
+    (event: PointerEvent) => {
+      const worksheetWrapper = options.worksheetElement.current;
+      // Silence the linter
+      if (!worksheetWrapper) {
+        return;
+      }
+      isExtending.current = true;
+      worksheetWrapper.setPointerCapture(event.pointerId);
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options],
+  );
+
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerHandleDown,
+    // onContextMenu,
+  };
+};
+
+export default usePointer;
--- a/webapp/src/components/util.ts
+++ b/webapp/src/components/util.ts
@@ -0,0 +1,42 @@
+import type { Area, Cell } from "./types";
+
+import { columnNameFromNumber } from "@ironcalc/wasm";
+
+/**
+ *  Returns true if the keypress should start editing
+ */
+export function isEditingKey(key: string): boolean {
+  if (key.length !== 1) {
+    return false;
+  }
+  const code = key.codePointAt(0) ?? 0;
+  if (code > 0 && code < 255) {
+    return true;
+  }
+  return false;
+}
+
+export type NavigationKey =
+  | "ArrowRight"
+  | "ArrowLeft"
+  | "ArrowDown"
+  | "ArrowUp"
+  | "Home"
+  | "End";
+
+export const isNavigationKey = (key: string): key is NavigationKey =>
+  ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(
+    key,
+  );
+
+export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
+  const isSingleCell =
+    selectedArea.rowStart === selectedArea.rowEnd &&
+    selectedArea.columnEnd === selectedArea.columnStart;
+
+  return isSingleCell && selectedCell
+    ? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
+    : `${columnNameFromNumber(selectedArea.columnStart)}${
+        selectedArea.rowStart
+      }:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
+};
--- a/webapp/src/components/workbook.tsx
+++ b/webapp/src/components/workbook.tsx
@@ -0,0 +1,378 @@
+import type { BorderOptions, Model, WorksheetProperties } from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import { useEffect, useRef, useState } from "react";
+import { LAST_COLUMN } from "./WorksheetCanvas/constants";
+import FormulaBar from "./formulabar";
+import Navigation from "./navigation/navigation";
+import Toolbar from "./toolbar";
+import useKeyboardNavigation from "./useKeyboardNavigation";
+import { type NavigationKey, getCellAddress } from "./util";
+import type { WorkbookState } from "./workbookState";
+import Worksheet from "./worksheet";
+
+const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
+  const { model, workbookState } = props;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Calling `setRedrawId((id) => id + 1);` forces a redraw
+  // This is needed because `model` can change without React being aware of it
+  const setRedrawId = useState(0)[1];
+  const info = model
+    .getWorksheetsProperties()
+    .map(({ name, color, sheet_id }: WorksheetProperties) => {
+      return { name, color: color ? color : "#FFF", sheetId: sheet_id };
+    });
+
+  const onRedo = () => {
+    model.redo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const onUndo = () => {
+    model.undo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const updateRangeStyle = (stylePath: string, value: string) => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row = Math.min(rowStart, rowEnd);
+    const column = Math.min(columnStart, columnEnd);
+    const range = {
+      sheet,
+      row,
+      column,
+      width: Math.abs(columnEnd - columnStart) + 1,
+      height: Math.abs(rowEnd - rowStart) + 1,
+    };
+    model.updateRangeStyle(range, stylePath, value);
+    setRedrawId((id) => id + 1);
+  };
+
+  const onToggleUnderline = (value: boolean) => {
+    updateRangeStyle("font.u", `${value}`);
+  };
+
+  const onToggleItalic = (value: boolean) => {
+    updateRangeStyle("font.i", `${value}`);
+  };
+
+  const onToggleBold = (value: boolean) => {
+    updateRangeStyle("font.b", `${value}`);
+  };
+
+  const onToggleStrike = (value: boolean) => {
+    updateRangeStyle("font.strike", `${value}`);
+  };
+
+  const onToggleHorizontalAlign = (value: string) => {
+    updateRangeStyle("alignment.horizontal", value);
+  };
+
+  const onToggleVerticalAlign = (value: string) => {
+    updateRangeStyle("alignment.vertical", value);
+  };
+
+  const onTextColorPicked = (hex: string) => {
+    updateRangeStyle("font.color", hex);
+  };
+
+  const onFillColorPicked = (hex: string) => {
+    updateRangeStyle("fill.fg_color", hex);
+  };
+
+  const onNumberFormatPicked = (numberFmt: string) => {
+    updateRangeStyle("num_fmt", numberFmt);
+  };
+
+  const onCopyStyles = () => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row1 = Math.min(rowStart, rowEnd);
+    const column1 = Math.min(columnStart, columnEnd);
+    const row2 = Math.max(rowStart, rowEnd);
+    const column2 = Math.max(columnStart, columnEnd);
+
+    const styles = [];
+    for (let row = row1; row <= row2; row++) {
+      const styleRow = [];
+      for (let column = column1; column <= column2; column++) {
+        styleRow.push(model.getCellStyle(sheet, row, column));
+      }
+      styles.push(styleRow);
+    }
+    workbookState.setCopyStyles(styles);
+    // FIXME: This is so that the cursor indicates there are styles to be pasted
+    const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
+    if (el) {
+      (el as HTMLElement).style.cursor =
+        `url('data:image/svg+xml;utf8,<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paintbrush-vertical"><path d="M10 2v2"></path><path d="M14 2v4"></path><path d="M17 2a1 1 0 0 1 1 1v9H6V3a1 1 0 0 1 1-1z"></path><path d="M6 12a1 1 0 0 0-1 1v1a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1v2.9a2 2 0 1 0 4 0V17a1 1 0 0 1 1-1h2a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1"></path></svg>'), auto`;
+    }
+  };
+
+  // FIXME: I *think* we should have only one on onKeyPressed function that goes to
+  // the Rust end
+  const { onKeyDown } = useKeyboardNavigation({
+    onCellsDeleted: (): void => {
+      const {
+        sheet,
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      const row = Math.min(rowStart, rowEnd);
+      const column = Math.min(columnStart, columnEnd);
+
+      const width = Math.abs(columnEnd - columnStart) + 1;
+      const height = Math.abs(rowEnd - rowStart) + 1;
+      model.rangeClearContents(
+        sheet,
+        row,
+        column,
+        row + height,
+        column + width,
+      );
+      setRedrawId((id) => id + 1);
+    },
+    onExpandAreaSelectedKeyboard: (
+      key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
+    ): void => {
+      model.onExpandSelectedRange(key);
+      setRedrawId((id) => id + 1);
+    },
+    onEditKeyPressStart: (initText: string): void => {
+      console.log(initText);
+      throw new Error("Function not implemented.");
+    },
+    onCellEditStart: (): void => {
+      throw new Error("Function not implemented.");
+    },
+    onBold: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.b;
+      onToggleBold(!value);
+    },
+    onItalic: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.i;
+      onToggleItalic(!value);
+    },
+    onUnderline: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.u;
+      onToggleUnderline(!value);
+    },
+    onNavigationToEdge: (direction: NavigationKey): void => {
+      console.log(direction);
+      throw new Error("Function not implemented.");
+    },
+    onPageDown: (): void => {
+      model.onPageDown();
+      setRedrawId((id) => id + 1);
+    },
+    onPageUp: (): void => {
+      model.onPageUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowDown: (): void => {
+      model.onArrowDown();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowUp: (): void => {
+      model.onArrowUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowLeft: (): void => {
+      model.onArrowLeft();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowRight: (): void => {
+      model.onArrowRight();
+      setRedrawId((id) => id + 1);
+    },
+    onKeyHome: (): void => {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], 1);
+      model.setTopLeftVisibleCell(view.top_row, 1);
+      setRedrawId((id) => id + 1);
+    },
+    onKeyEnd: (): void => {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], LAST_COLUMN);
+      model.setTopLeftVisibleCell(view.top_row, LAST_COLUMN - 5);
+      setRedrawId((id) => id + 1);
+    },
+    onUndo: (): void => {
+      model.undo();
+      setRedrawId((id) => id + 1);
+    },
+    onRedo: (): void => {
+      model.redo();
+      setRedrawId((id) => id + 1);
+    },
+    onNextSheet: (): void => {
+      const nextSheet = model.getSelectedSheet() + 1;
+      if (nextSheet >= model.getWorksheetsProperties().length) {
+        model.setSelectedSheet(0);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    onPreviousSheet: (): void => {
+      const nextSheet = model.getSelectedSheet() - 1;
+      if (nextSheet < 0) {
+        model.setSelectedSheet(model.getWorksheetsProperties().length - 1);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    root: rootRef,
+  });
+
+  useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    rootRef.current.focus();
+  });
+
+  const {
+    sheet,
+    row,
+    column,
+    range: [rowStart, columnStart, rowEnd, columnEnd],
+  } = model.getSelectedView();
+
+  const cellAddress = getCellAddress(
+    { rowStart, rowEnd, columnStart, columnEnd },
+    { row, column },
+  );
+  const formulaValue = model.getCellContent(sheet, row, column);
+
+  const style = model.getCellStyle(sheet, row, column);
+
+  return (
+    <Container ref={rootRef} onKeyDown={onKeyDown} tabIndex={0}>
+      <Toolbar
+        canUndo={model.canUndo()}
+        canRedo={model.canRedo()}
+        onRedo={onRedo}
+        onUndo={onUndo}
+        onToggleUnderline={onToggleUnderline}
+        onToggleBold={onToggleBold}
+        onToggleItalic={onToggleItalic}
+        onToggleStrike={onToggleStrike}
+        onToggleHorizontalAlign={onToggleHorizontalAlign}
+        onToggleVerticalAlign={onToggleVerticalAlign}
+        onCopyStyles={onCopyStyles}
+        onTextColorPicked={onTextColorPicked}
+        onFillColorPicked={onFillColorPicked}
+        onNumberFormatPicked={onNumberFormatPicked}
+        onBorderChanged={(border: BorderOptions): void => {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          const row = Math.min(rowStart, rowEnd);
+          const column = Math.min(columnStart, columnEnd);
+
+          const width = Math.abs(columnEnd - columnStart) + 1;
+          const height = Math.abs(rowEnd - rowStart) + 1;
+          const borderArea = {
+            type: border.border,
+            item: border,
+          };
+          model.setAreaWithBorder(
+            { sheet, row, column, width, height },
+            borderArea,
+          );
+          setRedrawId((id) => id + 1);
+        }}
+        fillColor={style.fill.fg_color || "#FFF"}
+        fontColor={style.font.color}
+        bold={style.font.b}
+        underline={style.font.u}
+        italic={style.font.i}
+        strike={style.font.strike}
+        horizontalAlign={
+          style.alignment ? style.alignment.horizontal : "general"
+        }
+        verticalAlign={style.alignment ? style.alignment.vertical : "center"}
+        canEdit={true}
+        numFmt={style.num_fmt}
+        showGridLines={model.getShowGridLines(sheet)}
+        onToggleShowGridLines={(show) => {
+          model.setShowGridLines(sheet, show);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <FormulaBar
+        cellAddress={cellAddress}
+        formulaValue={formulaValue}
+        onChange={(value) => {
+          model.setUserInput(sheet, row, column, value);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Worksheet
+        model={model}
+        workbookState={workbookState}
+        refresh={(): void => {
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Navigation
+        sheets={info}
+        selectedIndex={model.getSelectedSheet()}
+        onSheetSelected={(sheet: number): void => {
+          model.setSelectedSheet(sheet);
+          setRedrawId((value) => value + 1);
+        }}
+        onAddBlankSheet={(): void => {
+          model.newSheet();
+          setRedrawId((value) => value + 1);
+        }}
+        onSheetColorChanged={(hex: string): void => {
+          try {
+            model.setSheetColor(model.getSelectedSheet(), hex);
+            setRedrawId((value) => value + 1);
+          } catch (e) {
+            // TODO: Show a proper modal dialog
+            alert(`${e}`);
+          }
+        }}
+        onSheetRenamed={(name: string): void => {
+          try {
+            model.renameSheet(model.getSelectedSheet(), name);
+            setRedrawId((value) => value + 1);
+          } catch (e) {
+            // TODO: Show a proper modal dialog
+            alert(`${e}`);
+          }
+        }}
+        onSheetDeleted={(): void => {
+          const selectedSheet = model.getSelectedSheet();
+          model.deleteSheet(selectedSheet);
+          setRedrawId((value) => value + 1);
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default Workbook;
--- a/webapp/src/components/workbookState.ts
+++ b/webapp/src/components/workbookState.ts
@@ -0,0 +1,48 @@
+import type { CellStyle } from "@ironcalc/wasm";
+
+export enum AreaType {
+  rowsDown = 0,
+  columnsRight = 1,
+  rowsUp = 2,
+  columnsLeft = 3,
+}
+
+export interface Area {
+  type: AreaType;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+type AreaStyles = CellStyle[][];
+
+export class WorkbookState {
+  private extendToArea: Area | null;
+  private copyStyles: AreaStyles | null;
+
+  constructor() {
+    this.extendToArea = null;
+    this.copyStyles = null;
+  }
+
+  getExtendToArea(): Area | null {
+    return this.extendToArea;
+  }
+
+  clearExtendToArea(): void {
+    this.extendToArea = null;
+  }
+
+  setExtendToArea(area: Area): void {
+    this.extendToArea = area;
+  }
+
+  setCopyStyles(styles: AreaStyles | null): void {
+    this.copyStyles = styles;
+  }
+
+  getCopyStyles(): AreaStyles | null {
+    return this.copyStyles;
+  }
+}
--- a/webapp/src/components/worksheet.tsx
+++ b/webapp/src/components/worksheet.tsx
@@ -0,0 +1,464 @@
+import type { Model } from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  outlineBackgroundColor,
+  outlineColor,
+} from "./WorksheetCanvas/constants";
+import WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import type { Cell } from "./types";
+import usePointer from "./usePointer";
+import { AreaType, type WorkbookState } from "./workbookState";
+
+function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+}
+
+function Worksheet(props: {
+  model: Model;
+  workbookState: WorkbookState;
+  refresh: () => void;
+}) {
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+
+  const worksheetElement = useRef<HTMLDivElement>(null);
+  const scrollElement = useRef<HTMLDivElement>(null);
+  // const rootElement = useRef<HTMLDivElement>(null);
+  const spacerElement = useRef<HTMLDivElement>(null);
+  const cellOutline = useRef<HTMLDivElement>(null);
+  const areaOutline = useRef<HTMLDivElement>(null);
+  const cellOutlineHandle = useRef<HTMLDivElement>(null);
+  const extendToOutline = useRef<HTMLDivElement>(null);
+  const columnResizeGuide = useRef<HTMLDivElement>(null);
+  const rowResizeGuide = useRef<HTMLDivElement>(null);
+  const columnHeaders = useRef<HTMLDivElement>(null);
+  const worksheetCanvas = useRef<WorksheetCanvas | null>(null);
+
+  const ignoreScrollEventRef = useRef(false);
+
+  const { model, workbookState, refresh } = props;
+  const [clientWidth, clientHeight] = useWindowSize();
+  useEffect(() => {
+    const canvasRef = canvasElement.current;
+    const columnGuideRef = columnResizeGuide.current;
+    const rowGuideRef = rowResizeGuide.current;
+    const columnHeadersRef = columnHeaders.current;
+    const worksheetRef = worksheetElement.current;
+
+    const outline = cellOutline.current;
+    const handle = cellOutlineHandle.current;
+    const area = areaOutline.current;
+    const extendTo = extendToOutline.current;
+
+    if (
+      !canvasRef ||
+      !columnGuideRef ||
+      !rowGuideRef ||
+      !columnHeadersRef ||
+      !worksheetRef ||
+      !outline ||
+      !handle ||
+      !area ||
+      !extendTo ||
+      !scrollElement.current
+    )
+      return;
+    model.setWindowWidth(clientWidth - 37);
+    model.setWindowHeight(clientHeight - 149);
+    const canvas = new WorksheetCanvas({
+      width: worksheetRef.clientWidth,
+      height: worksheetRef.clientHeight,
+      model,
+      workbookState,
+      elements: {
+        canvas: canvasRef,
+        columnGuide: columnGuideRef,
+        rowGuide: rowGuideRef,
+        columnHeaders: columnHeadersRef,
+        cellOutline: outline,
+        cellOutlineHandle: handle,
+        areaOutline: area,
+        extendToOutline: extendTo,
+      },
+      onColumnWidthChanges(sheet, column, width) {
+        model.setColumnWidth(sheet, column, width);
+        worksheetCanvas.current?.renderSheet();
+      },
+      onRowHeightChanges(sheet, row, height) {
+        model.setRowHeight(sheet, row, height);
+        worksheetCanvas.current?.renderSheet();
+      },
+    });
+    const scrollX = model.getScrollX();
+    const scrollY = model.getScrollY();
+    const [sheetWidth, sheetHeight] = [scrollX + 100_000, scrollY + 500_000]; //canvas.getSheetDimensions();
+    if (spacerElement.current) {
+      spacerElement.current.style.height = `${sheetHeight}px`;
+      spacerElement.current.style.width = `${sheetWidth}px`;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+    if (scrollX !== left) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollLeft = scrollX;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    if (scrollY !== top) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollTop = scrollY;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    canvas.renderSheet();
+    worksheetCanvas.current = canvas;
+  });
+
+  const sheetNames = model
+    .getWorksheetsProperties()
+    .map((s: { name: string }) => s.name);
+
+  const {
+    onPointerMove,
+    onPointerDown,
+    onPointerHandleDown,
+    onPointerUp,
+    // onContextMenu,
+  } = usePointer({
+    onCellSelected: (cell: Cell, event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      model.setSelectedCell(cell.row, cell.column);
+      refresh();
+    },
+    onAreaSelecting: (cell: Cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      model.onAreaSelecting(row, column);
+      canvas.renderSheet();
+    },
+    onAreaSelected: () => {
+      const styles = workbookState.getCopyStyles();
+      if (styles?.length) {
+        model.onPasteStyles(styles);
+        const canvas = worksheetCanvas.current;
+        if (!canvas) {
+          return;
+        }
+        canvas.renderSheet();
+      }
+      workbookState.setCopyStyles(null);
+      if (worksheetElement.current) {
+        worksheetElement.current.style.cursor = "auto";
+      }
+    },
+    onExtendToCell: (cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      const {
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      // We are either extending by rows or by columns
+      // And we could be doing it in the positive direction (downwards or right)
+      // or the negative direction (upwards or left)
+
+      if (
+        row > rowEnd &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < row - rowEnd) ||
+          (column > columnEnd && column - columnEnd < row - rowEnd))
+      ) {
+        // rows downwards
+        const area = {
+          type: AreaType.rowsDown,
+          rowStart: rowEnd + 1,
+          rowEnd: row,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        row < rowStart &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < rowStart - row) ||
+          (column > columnEnd && column - columnEnd < rowStart - row))
+      ) {
+        // rows upwards
+        const area = {
+          type: AreaType.rowsUp,
+          rowStart: row,
+          rowEnd: rowStart,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column > columnEnd &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < column - columnEnd) ||
+          (row > rowEnd && row - rowEnd < column - columnEnd))
+      ) {
+        // columns right
+        const area = {
+          type: AreaType.columnsRight,
+          rowStart,
+          rowEnd,
+          columnStart: columnEnd + 1,
+          columnEnd: column,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column < columnStart &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < columnStart - column) ||
+          (row > rowEnd && row - rowEnd < columnStart - column))
+      ) {
+        // columns left
+        const area = {
+          type: AreaType.columnsLeft,
+          rowStart,
+          rowEnd,
+          columnStart: column,
+          columnEnd: columnStart,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      }
+    },
+    onExtendToEnd: () => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { sheet, range } = model.getSelectedView();
+      const extendedArea = workbookState.getExtendToArea();
+      if (!extendedArea) {
+        return;
+      }
+      const rowStart = Math.min(range[0], range[2]);
+      const height = Math.abs(range[2] - range[0]) + 1;
+      const width = Math.abs(range[3] - range[1]) + 1;
+      const columnStart = Math.min(range[1], range[3]);
+
+      const area = { sheet, row: rowStart, column: columnStart, width, height };
+
+      switch (extendedArea.type) {
+        case AreaType.rowsDown:
+          model.autoFillRows(area, extendedArea.rowEnd);
+          break;
+        case AreaType.rowsUp: {
+          model.autoFillRows(area, extendedArea.rowStart);
+          break;
+        }
+        case AreaType.columnsRight: {
+          model.autoFillColumns(area, extendedArea.columnEnd);
+          break;
+        }
+        case AreaType.columnsLeft: {
+          model.autoFillColumns(area, extendedArea.columnStart);
+          break;
+        }
+      }
+      workbookState.clearExtendToArea();
+      canvas.renderSheet();
+    },
+    canvasElement,
+    worksheetElement,
+    worksheetCanvas,
+  });
+
+  const onScroll = (): void => {
+    if (!scrollElement.current || !worksheetCanvas.current) {
+      return;
+    }
+    if (ignoreScrollEventRef.current) {
+      // Programmatic scroll ignored
+      return;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+
+    worksheetCanvas.current.setScrollPosition({ left, top });
+    worksheetCanvas.current.renderSheet();
+  };
+
+  return (
+    <Wrapper ref={scrollElement} onScroll={onScroll} className="scroll">
+      <Spacer ref={spacerElement} />
+      <SheetContainer
+        className="sheet-container"
+        ref={worksheetElement}
+        onPointerDown={(event) => {
+          onPointerDown(event);
+        }}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onDoubleClick={(event) => {
+          const { sheet, row, column } = model.getSelectedView();
+          const _text = model.getCellContent(sheet, row, column) || "";
+          // TODO
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+      >
+        <SheetCanvas ref={canvasElement} />
+        <CellOutline ref={cellOutline} />
+        <AreaOutline ref={areaOutline} />
+        <ExtendToOutline ref={extendToOutline} />
+        <CellOutlineHandle
+          ref={cellOutlineHandle}
+          onPointerDown={onPointerHandleDown}
+        />
+        <ColumnResizeGuide ref={columnResizeGuide} />
+        <RowResizeGuide ref={rowResizeGuide} />
+        <ColumnHeaders ref={columnHeaders} />
+      </SheetContainer>
+    </Wrapper>
+  );
+}
+
+const Spacer = styled("div")`
+  position: absolute;
+  height: 5000px;
+  width: 5000px;
+`;
+
+const SheetContainer = styled("div")`
+  position: sticky;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+
+  .column-resize-handle {
+    position: absolute;
+    top: 0px;
+    width: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: col-resize;
+  }
+
+  .column-resize-handle:hover {
+    opacity: 1;
+  }
+  .row-resize-handle {
+    position: absolute;
+    left: 0px;
+    height: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: row-resize;
+  }
+
+  .row-resize-handle:hover {
+    opacity: 1;
+  }
+`;
+
+const Wrapper = styled("div")({
+  position: "absolute",
+  overflow: "scroll",
+  top: 71,
+  left: 0,
+  right: 0,
+  bottom: 41,
+});
+
+const SheetCanvas = styled("canvas")`
+  position: relative;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 40px;
+`;
+
+const ColumnResizeGuide = styled("div")`
+  position: absolute;
+  top: 0px;
+  display: none;
+  height: 100%;
+  width: 0px;
+  border-left: 1px dashed ${outlineColor};
+`;
+
+const ColumnHeaders = styled("div")`
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  display: flex;
+  & .column-header {
+    display: inline-block;
+    text-align: center;
+    overflow: hidden;
+    height: 100%;
+    user-select: none;
+  }
+`;
+
+const RowResizeGuide = styled("div")`
+  position: absolute;
+  display: none;
+  left: 0px;
+  height: 0px;
+  width: 100%;
+  border-top: 1px dashed ${outlineColor};
+`;
+
+const AreaOutline = styled("div")`
+  position: absolute;
+  border: 1px solid ${outlineColor};
+  border-radius: 3px;
+  background-color: ${outlineBackgroundColor};
+`;
+
+const CellOutline = styled("div")`
+  position: absolute;
+  border: 2px solid ${outlineColor};
+  border-radius: 3px;
+  word-break: break-word;
+  font-size: 13px;
+  display: flex;
+`;
+
+const CellOutlineHandle = styled("div")`
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: ${outlineColor};
+  cursor: crosshair;
+  // border: 1px solid white;
+  border-radius: 1px;
+`;
+
+const ExtendToOutline = styled("div")`
+  position: absolute;
+  border: 1px dashed ${outlineColor};
+  border-radius: 3px;
+`;
+
+export default Worksheet;
--- a/webapp/src/fonts.css
+++ b/webapp/src/fonts.css
@@ -0,0 +1,16 @@
+/* inter-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url("fonts/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: url("fonts/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/webapp/src/fonts/inter-v13-latin-600.woff2
+++ b/webapp/src/fonts/inter-v13-latin-600.woff2
--- a/webapp/src/fonts/inter-v13-latin-regular.woff2
+++ b/webapp/src/fonts/inter-v13-latin-regular.woff2
--- a/webapp/src/i18n.ts
+++ b/webapp/src/i18n.ts
@@ -0,0 +1,18 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import translationEN from "./locale/en_us.json";
+
+const resources = {
+  "en-US": { translation: translationEN },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "en-US",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
--- a/webapp/src/icons/arrow-middle-from-line.svg
+++ b/webapp/src/icons/arrow-middle-from-line.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-middle-from-line" clip-path="url(#clip0_107_4135)">
+<path id="Vector" d="M8 14.6667V10.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 5.33333V1.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M14.6667 8H1.33334" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M10 12.6667L8 10.6667L6 12.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M10 3.33333L8 5.33333L6 3.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_107_4135">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/webapp/src/icons/border-bottom.svg
+++ b/webapp/src/icons/border-bottom.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 14H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11.3333V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-center-h.svg
+++ b/webapp/src/icons/border-center-h.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H8M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H8M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H8M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H8M8 14V10.6667M8 2V5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-center-v.svg
+++ b/webapp/src/icons/border-center-v.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 2H12.6667C13.403 2 14 2.59695 14 3.33333V8M5.33333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8M5.33333 14H3.33333C2.59695 14 2 13.403 2 12.6667V8M10.6667 14H12.6667C13.403 14 14 13.403 14 12.6667V8M2 8H5.33333M14 8H10.6667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-inner.svg
+++ b/webapp/src/icons/border-inner.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H10.6667M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H10.6667M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H5.33333M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-left.svg
+++ b/webapp/src/icons/border-left.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66667 2H12.6667C13.403 2 14 2.59695 14 3.33333V12.6667C14 13.403 13.403 14 12.6667 14H4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-none.svg
+++ b/webapp/src/icons/border-none.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-outer.svg
+++ b/webapp/src/icons/border-outer.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667L8 11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-right.svg
+++ b/webapp/src/icons/border-right.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/border-style.svg
+++ b/webapp/src/icons/border-style.svg
@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- <path d="M14 4H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 2"/>
+<path d="M14 12H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.01 2"/> -->
+<style>
+    line {
+      stroke: black;
+    }
+  </style>
+<line x1="0" y1="2" x2="16" y2="2" />
+  <!-- Dashes and gaps of the same size -->
+<line x1="0" y1="8" x2="16" y2="8" stroke-dasharray="2.28 2.28" />
+  <!-- Dashes and gaps of different sizes -->
+<line x1="0" y1="14" x2="16" y2="14" stroke-dasharray="1 2" />
+</svg>
--- a/webapp/src/icons/border-top.svg
+++ b/webapp/src/icons/border-top.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 4.66667V12.6667C14 13.403 13.403 14 12.6667 14H3.33333C2.59695 14 2 13.403 2 12.6667V4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/decrease-decimal.svg
+++ b/webapp/src/icons/decrease-decimal.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 9.33333L5 11.3333L7 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/delete-column.svg
+++ b/webapp/src/icons/delete-column.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L3.66667 14C4.40305 14 5 13.403 5 12.6667L5 3.33333C5 2.59695 4.40305 2 3.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6L2 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L11 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 10L2 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L11 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 3.33333L11 12.6667C11 13.403 11.597 14 12.3333 14L12.6667 14C13.403 14 14 13.403 14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L12.3333 2C11.597 2 11 2.59695 11 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 9.41422L9.41421 6.58579" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/delete-row.svg
+++ b/webapp/src/icons/delete-row.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V3.66667C2 4.40305 2.59695 5 3.33333 5H12.6667C13.403 5 14 4.40305 14 3.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6667 11H3.33333C2.59695 11 2 11.597 2 12.3333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V12.3333C14 11.597 13.403 11 12.6667 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 11V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.41422 6.58578L6.58579 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/fx.svg
+++ b/webapp/src/icons/fx.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.182 13.305C0.303333 13.3917 0.468 13.435 0.676 13.435C0.962 13.435 1.24367 13.3483 1.521 13.175C1.79833 13.0103 2.05833 12.7937 2.301 12.525C2.55233 12.2563 2.77333 11.9703 2.964 11.667C3.16333 11.3637 3.32367 11.069 3.445 10.783C3.575 10.5057 3.653 10.276 3.679 10.094L4.459 5.011H5.954V4.439H4.537L4.706 3.36C4.80133 2.75334 4.96167 2.281 5.187 1.943C5.421 1.59634 5.73733 1.423 6.136 1.423C6.422 1.423 6.67767 1.488 6.903 1.618L7.189 1.787H7.293L7.566 1.28C7.592 1.23667 7.61367 1.189 7.631 1.137C7.657 1.085 7.67 1.04167 7.67 1.007C7.67 0.93767 7.64833 0.881336 7.605 0.838003C7.57033 0.786003 7.49233 0.72967 7.371 0.669003C7.30167 0.643003 7.22367 0.621336 7.137 0.604003C7.05033 0.578003 6.95933 0.565002 6.864 0.565002C6.53467 0.565002 6.20967 0.651669 5.889 0.825003C5.56833 0.98967 5.265 1.21067 4.979 1.488C4.693 1.75667 4.43733 2.047 4.212 2.359C3.98667 2.66234 3.80033 2.957 3.653 3.243C3.51433 3.52034 3.432 3.75434 3.406 3.945L3.328 4.439H2.249V5.011H3.25L2.405 10.692C2.31833 11.2813 2.17533 11.745 1.976 12.083C1.77667 12.4297 1.508 12.603 1.17 12.603C0.953333 12.603 0.788667 12.564 0.676 12.486L0.39 12.278H0.312L0.0779999 12.746C0.026 12.85 0 12.9367 0 13.006C0 13.1187 0.0606667 13.2183 0.182 13.305ZM5.90545 9.98999C5.82745 10.1027 5.78845 10.211 5.78845 10.315H6.65945C6.70279 10.211 6.75045 10.1113 6.80245 10.016C6.85445 9.91199 6.93245 9.78199 7.03645 9.62599C7.14045 9.46132 7.30079 9.23166 7.51745 8.93699C7.73412 8.64232 8.03312 8.25232 8.41445 7.76699L9.45445 10.341H9.49345L11.2745 9.92499V9.82099L10.3385 9.44399L9.37645 6.98699C9.80112 6.50166 10.1521 6.11166 10.4295 5.81699C10.7068 5.52232 10.9235 5.29266 11.0795 5.12799C11.2441 4.96332 11.3568 4.83332 11.4175 4.73799C11.4868 4.63399 11.5215 4.53432 11.5215 4.43899H10.7025C10.6678 4.52566 10.6288 4.61666 10.5855 4.71199C10.5421 4.79866 10.4728 4.91566 10.3775 5.06299C10.2908 5.20166 10.1565 5.39666 9.97445 5.64799C9.79245 5.89932 9.54545 6.22866 9.23345 6.63599L8.31045 4.30899H8.27145L6.43845 4.72499V4.82899L7.38745 5.21899L8.27145 7.40299C7.78612 7.95766 7.38312 8.40399 7.06245 8.74199C6.74179 9.07999 6.48612 9.34432 6.29545 9.53499C6.11345 9.72566 5.98345 9.87732 5.90545 9.98999Z" fill="#828282"/>
+</svg>
--- a/webapp/src/icons/increase-decimal.svg
+++ b/webapp/src/icons/increase-decimal.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 9.33333L12.5 11.3333L10.5 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3333 4.33333C12.3333 3.59695 11.7364 3 11 3C10.2636 3 9.66667 3.59695 9.66667 4.33333V5.66667C9.66667 6.40305 10.2636 7 11 7C11.7364 7 12.3333 6.40305 12.3333 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/index.ts
+++ b/webapp/src/icons/index.ts
@@ -0,0 +1,46 @@
+import DecimalPlacesDecreaseIcon from "./decrease-decimal.svg?react";
+import DecimalPlacesIncreaseIcon from "./increase-decimal.svg?react";
+
+import BorderBottomIcon from "./border-bottom.svg?react";
+import BorderCenterHIcon from "./border-center-h.svg?react";
+import BorderCenterVIcon from "./border-center-v.svg?react";
+import BorderInnerIcon from "./border-inner.svg?react";
+import BorderLeftIcon from "./border-left.svg?react";
+import BorderNoneIcon from "./border-none.svg?react";
+import BorderOuterIcon from "./border-outer.svg?react";
+import BorderRightIcon from "./border-right.svg?react";
+import BorderStyleIcon from "./border-style.svg?react";
+import BorderTopIcon from "./border-top.svg?react";
+
+import ArrowMiddleFromLine from "./arrow-middle-from-line.svg?react";
+import DeleteColumnIcon from "./delete-column.svg?react";
+import DeleteRowIcon from "./delete-row.svg?react";
+import InsertColumnLeftIcon from "./insert-column-left.svg?react";
+import InsertColumnRightIcon from "./insert-column-right.svg?react";
+import InsertRowAboveIcon from "./insert-row-above.svg?react";
+import InsertRowBelow from "./insert-row-below.svg?react";
+
+import Fx from "./fx.svg?react";
+
+export {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+  BorderNoneIcon,
+  BorderStyleIcon,
+  DeleteColumnIcon,
+  DeleteRowIcon,
+  InsertColumnLeftIcon,
+  InsertColumnRightIcon,
+  InsertRowAboveIcon,
+  InsertRowBelow,
+  Fx,
+};
--- a/webapp/src/icons/insert-column-left.svg
+++ b/webapp/src/icons/insert-column-left.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L9.33333 2C8.59695 2 8 2.59695 8 3.33333L8 12.6667C8 13.403 8.59695 14 9.33333 14L12.6667 14C13.403 14 14 13.403 14 12.6667Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6L4 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8L2 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/insert-column-right.svg
+++ b/webapp/src/icons/insert-column-right.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L6.66667 14C7.40305 14 8 13.403 8 12.6667L8 3.33333C8 2.59695 7.40305 2 6.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 10L12 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 8L14 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/insert-row-above.svg
+++ b/webapp/src/icons/insert-row-above.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 8H3.33333C2.59695 8 2 8.59695 2 9.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V9.33333C14 8.59695 13.403 8 12.6667 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 4H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/icons/insert-row-below.svg
+++ b/webapp/src/icons/insert-row-below.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V6.66667C2 7.40305 2.59695 8 3.33333 8H12.6667C13.403 8 14 7.40305 14 6.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 5H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 12H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
--- a/webapp/src/locale/en_us.json
+++ b/webapp/src/locale/en_us.json
@@ -0,0 +1,55 @@
+{
+  "toolbar": {
+    "redo": "Redo",
+    "undo": "Undo",
+    "copy_styles": "Copy styles",
+    "euro": "Format as Euro",
+    "percentage": "Format as Percentage",
+    "bold": "Bold",
+    "italic": "Italic",
+    "underline": "Underline",
+    "strike_through": "Strikethrough",
+    "align_left": "Align left",
+    "align_right": "Align right",
+    "align_center": "Align center",
+    "format_number": "Format number",
+    "font_color": "Font color",
+    "fill_color": "Fill color",
+    "borders": "Borders",
+    "decimal_places_increase": "Increase decimal places",
+    "decimal_places_decrease": "Decrease decimal places",
+    "format_menu": {
+      "auto": "Auto",
+      "number": "Number",
+      "percentage": "Percentage",
+      "currency_eur": "Euro (EUR)",
+      "currency_usd": "Dollar (USD",
+      "currency_gbp": "British Pound (GBD)",
+      "date_short": "Short date",
+      "date_long": "Long date",
+      "custom": "Custom",
+      "number_example": "1,000.00",
+      "percentage_example": "10%",
+      "currency_eur_example": "€",
+      "currency_usd_example": "$",
+      "currency_gbp_example": "£",
+      "date_short_example": "09/24/2024",
+      "date_long_example": "Tuesday, September 24, 2024"
+    }
+  },
+  "num_fmt": {
+    "title": "Custom number format",
+    "label": "Number format",
+    "save": "Save"
+  },
+  "sheet_rename": {
+    "rename": "Save",
+    "label": "New name",
+    "title": "Rename Sheet"
+  },
+  "formula_input": {
+    "update": "Update",
+    "label": "Formula",
+    "title": "Update formula"
+  }
+}
--- a/webapp/src/main.tsx
+++ b/webapp/src/main.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { theme } from "./theme.ts";
+
+// biome-ignore lint: we know the 'root' element exists.
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+);
--- a/webapp/src/theme.ts
+++ b/webapp/src/theme.ts
@@ -0,0 +1,66 @@
+import { createTheme } from "@mui/material/styles";
+import "./fonts.css";
+
+export const theme = createTheme({
+  typography: {
+    fontFamily: "Inter",
+  },
+  palette: {
+    common: {
+      black: "#272525",
+      white: "#FFF",
+    },
+    primary: {
+      main: "#F2994A",
+      light: "#EFAA6D",
+      dark: "#D68742",
+      contrastText: "#FFF",
+    },
+    secondary: {
+      main: "#2F80ED",
+      light: "#4E92EC",
+      dark: "#2B6EC8",
+      contrastText: "#FFF",
+    },
+    error: {
+      main: "#EB5757",
+      light: "#E77A7A",
+      dark: "#CB4C4C",
+      contrastText: "#FFF",
+    },
+    warning: {
+      main: "#F2C94C",
+      light: "#EED384",
+      dark: "#D6B244",
+      contrastText: "#FFF",
+    },
+    info: {
+      main: "#9E9E9E",
+      light: "#E0E0E0",
+      dark: "#757575",
+      contrastText: "#FFF",
+    },
+    success: {
+      main: "#27AE60",
+      light: "#57BD82",
+      dark: "#239152",
+      contrastText: "#FFF",
+    },
+    grey: {
+      "50": "#F2F2F2",
+      "100": "#F5F5F5",
+      "200": "#EEEEEE",
+      "300": "#E0E0E0",
+      "400": "#BDBDBD",
+      "500": "#9E9E9E",
+      "600": "#757575",
+      "700": "#616161",
+      "800": "#424242",
+      "900": "#333333",
+      A100: "#F2F2F2",
+      A200: "#EEEEEE",
+      A400: "#bdbdbd",
+      A700: "#616161",
+    },
+  },
+});
--- a/webapp/src/vite-env.d.ts
+++ b/webapp/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />