change semantics

Update README deployment steps and add deploy:secrets script to package.json update local inference script and README update lockfile reconfigure package scripts for development update test execution pass server tests Update README with revised Bun commands and workspace details remove pnpm package manager designator create bun server
2025-09-08 22:56:46 +00:00 · 2025-06-02 18:41:16 -04:00
parent 1055cda2f1
commit 497eb22ad8
218 changed files with 1273 additions and 4987 deletions
--- a/packages/client/src/components/BuiltWithButton.tsx
+++ b/packages/client/src/components/BuiltWithButton.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { IconButton } from "@chakra-ui/react";
+import { LucideHammer } from "lucide-react";
+import { toolbarButtonZIndex } from "./toolbar/Toolbar";
+
+export default function BuiltWithButton() {
+  return (
+    <IconButton
+      aria-label="Build Info"
+      icon={<LucideHammer />}
+      size="md"
+      bg="transparent"
+      stroke="text.accent"
+      color="text.accent"
+      onClick={() => alert("Built by Geoff Seemueller")}
+      _hover={{
+        bg: "transparent",
+        svg: {
+          stroke: "accent.secondary",
+          transition: "stroke 0.3s ease-in-out",
+        },
+      }}
+      zIndex={toolbarButtonZIndex}
+    />
+  );
+}
--- a/packages/client/src/components/ThemeSelection.tsx
+++ b/packages/client/src/components/ThemeSelection.tsx
@@ -0,0 +1,54 @@
+import { getColorThemes } from "../layout/theme/color-themes";
+import { Center, IconButton, VStack } from "@chakra-ui/react";
+import userOptionsStore from "../stores/UserOptionsStore";
+import { Circle } from "lucide-react";
+import { toolbarButtonZIndex } from "./toolbar/Toolbar";
+import React from "react";
+import { useIsMobile } from "./contexts/MobileContext";
+
+export function ThemeSelectionOptions() {
+  const children = [];
+
+  const isMobile = useIsMobile();
+
+  for (const theme of getColorThemes()) {
+    children.push(
+      <IconButton
+        as="div"
+        role="button"
+        key={theme.name}
+        onClick={() => userOptionsStore.selectTheme(theme.name)}
+        size="xs"
+        icon={
+          <Circle
+            size={!isMobile ? 16 : 20}
+            stroke="transparent"
+            style={{
+              background: `conic-gradient(${theme.colors.background.primary.startsWith("#") ? theme.colors.background.primary : theme.colors.background.secondary} 0 50%, ${theme.colors.text.secondary} 50% 100%)`,
+              borderRadius: "50%",
+              boxShadow: "0 0 0.5px 0.25px #fff",
+              cursor: "pointer",
+              transition: "background 0.2s",
+            }}
+          />
+        }
+        bg="transparent"
+        borderRadius="50%" // Ensures the button has a circular shape
+        stroke="transparent"
+        color="transparent"
+        _hover={{
+          svg: {
+            transition: "stroke 0.3s ease-in-out", // Smooth transition effect
+          },
+        }}
+        zIndex={toolbarButtonZIndex}
+      />,
+    );
+  }
+
+  return (
+    <VStack align={!isMobile ? "end" : "start"} p={1.2}>
+      <Center>{children}</Center>
+    </VStack>
+  );
+}
--- a/packages/client/src/components/WelcomeHome.tsx
+++ b/packages/client/src/components/WelcomeHome.tsx
@@ -0,0 +1,83 @@
+import { motion } from "framer-motion";
+import { Box, Center, VStack } from "@chakra-ui/react";
+import {
+  welcome_home_text,
+  welcome_home_tip,
+} from "../static-data/welcome_home_text";
+import {renderMarkdown} from "./markdown/MarkdownComponent";
+
+
+function WelcomeHomeMessage({ visible }) {
+  const containerVariants = {
+    visible: {
+      transition: {
+        staggerChildren: 0.15,
+      },
+    },
+    hidden: {
+      transition: {
+        staggerChildren: 0.05,
+        staggerDirection: -1,
+      },
+    },
+  };
+
+  const textVariants = {
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.165, 0.84, 0.44, 1],
+      },
+    },
+    hidden: {
+      opacity: 0,
+      y: 20,
+      transition: {
+        duration: 0.3,
+        ease: [0.165, 0.84, 0.44, 1],
+      },
+    },
+  };
+
+  return (
+    <Center>
+      <VStack spacing={8} align="center" maxW="400px">
+        {/* Welcome Message */}
+        <Box
+          fontSize="sm"
+          fontStyle="italic"
+          textAlign="center"
+          color="text.secondary"
+          mt={4}
+        >
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={visible ? "visible" : "hidden"}
+          >
+            <Box userSelect={"none"}>
+              <motion.div variants={textVariants}>
+                {renderMarkdown(welcome_home_text)}
+              </motion.div>
+            </Box>
+          </motion.div>
+        </Box>
+        <motion.div variants={textVariants}>
+          <Box
+            fontSize="sm"
+            fontStyle="italic"
+            textAlign="center"
+            color="text.secondary"
+            mt={1}
+          >
+            {renderMarkdown(welcome_home_tip)}
+          </Box>
+        </motion.div>
+      </VStack>
+    </Center>
+  );
+}
+
+export default WelcomeHomeMessage;
--- a/packages/client/src/components/tests/ThemeSelection.test.tsx
+++ b/packages/client/src/components/tests/ThemeSelection.test.tsx
@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeSelectionOptions } from '../ThemeSelection';
+import userOptionsStore from '../../stores/UserOptionsStore';
+import * as MobileContext from '../contexts/MobileContext';
+
+// Mock dependencies
+vi.mock('../../layout/theme/color-themes', () => ({
+  getColorThemes: () => [
+    { 
+      name: 'light', 
+      colors: { 
+        background: { primary: '#ffffff', secondary: '#f0f0f0' },
+        text: { secondary: '#333333' }
+      }
+    },
+    { 
+      name: 'dark', 
+      colors: { 
+        background: { primary: '#121212', secondary: '#1e1e1e' },
+        text: { secondary: '#e0e0e0' }
+      }
+    }
+  ]
+}));
+
+vi.mock('../../stores/UserOptionsStore', () => ({
+  default: {
+    selectTheme: vi.fn()
+  }
+}));
+
+vi.mock('../toolbar/Toolbar', () => ({
+  toolbarButtonZIndex: 100
+}));
+
+describe('ThemeSelectionOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders theme options for desktop view', () => {
+    // Mock useIsMobile to return false (desktop view)
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(false);
+    
+    render(<ThemeSelectionOptions />);
+    
+    // Should render 2 theme buttons (from our mock)
+    const buttons = screen.getAllByRole("button")
+    expect(buttons).toHaveLength(2);
+  });
+
+  it('renders theme options for mobile view', () => {
+    // Mock useIsMobile to return true (mobile view)
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(true);
+    
+    render(<ThemeSelectionOptions />);
+    
+    // Should still render 2 theme buttons
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+  });
+
+  it('calls selectTheme when a theme button is clicked', () => {
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(false);
+    
+    render(<ThemeSelectionOptions />);
+    
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[0]); // Click the first theme button (light)
+    
+    // Verify that selectTheme was called with the correct theme name
+    expect(userOptionsStore.selectTheme).toHaveBeenCalledWith('light');
+    
+    fireEvent.click(buttons[1]); // Click the second theme button (dark)
+    expect(userOptionsStore.selectTheme).toHaveBeenCalledWith('dark');
+  });
+});
--- a/packages/client/src/components/tests/WelcomeHome.test.tsx
+++ b/packages/client/src/components/tests/WelcomeHome.test.tsx
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import WelcomeHomeMessage from '../WelcomeHome';
+import { welcome_home_text, welcome_home_tip } from '../../static-data/welcome_home_text';
+import { renderMarkdown } from '../markdown/MarkdownComponent';
+
+// Mock the renderMarkdown function
+vi.mock('../markdown/MarkdownComponent', () => ({
+  renderMarkdown: vi.fn((text) => `Rendered: ${text}`),
+}));
+
+describe('WelcomeHomeMessage', () => {
+  it('renders correctly when visible', () => {
+    render(<WelcomeHomeMessage visible={true} />);
+    
+    // Check if the rendered markdown content is in the document
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+    expect(screen.getByText(`Rendered: ${welcome_home_tip}`)).toBeInTheDocument();
+    
+    // Verify that renderMarkdown was called with the correct arguments
+    expect(renderMarkdown).toHaveBeenCalledWith(welcome_home_text);
+    expect(renderMarkdown).toHaveBeenCalledWith(welcome_home_tip);
+  });
+
+  it('applies animation variants based on visible prop', () => {
+    const { rerender } = render(<WelcomeHomeMessage visible={true} />);
+    
+    // When visible is true, the component should have the visible animation state
+    // Since we've mocked framer-motion, we can't directly test the animation state
+    // But we can verify that the component renders the content
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+    
+    // Re-render with visible=false
+    rerender(<WelcomeHomeMessage visible={false} />);
+    
+    // Content should still be in the document even when not visible
+    // (since we've mocked the animations)
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+  });
+});
--- a/packages/client/src/components/about/AboutComponent.tsx
+++ b/packages/client/src/components/about/AboutComponent.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Grid, GridItem, Image, Text } from "@chakra-ui/react";
+
+const fontSize = "md";
+
+function AboutComponent() {
+  return (
+    <Grid
+      templateColumns="1fr"
+      gap={4}
+      maxW={["100%", "100%", "100%"]}
+      mx="auto"
+      className="about-container"
+    >
+      <GridItem colSpan={1} justifySelf="center" mb={[6, 6, 8]}>
+        <Image
+          src="/me.png"
+          alt="Geoff Seemueller"
+          borderRadius="full"
+          boxSize={["120px", "150px"]}
+          objectFit="cover"
+        />
+      </GridItem>
+      <GridItem
+        colSpan={1}
+        maxW={["100%", "100%", "container.md"]}
+        justifySelf="center"
+        minH={"100%"}
+      >
+        <Grid templateColumns="1fr" gap={4} overflowY={"auto"}>
+          <GridItem>
+            <Text fontSize={fontSize}>
+              If you're interested in collaborating on innovative projects that
+              push technological boundaries and create real value, I'd be keen
+              to connect and explore potential opportunities.
+            </Text>
+          </GridItem>
+        </Grid>
+      </GridItem>
+    </Grid>
+  );
+}
+
+export default AboutComponent;
--- a/packages/client/src/components/chat/Chat.tsx
+++ b/packages/client/src/components/chat/Chat.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Box, Grid, GridItem } from "@chakra-ui/react";
+import ChatMessages from "./messages/ChatMessages";
+import ChatInput from "./input/ChatInput";
+import chatStore from "../../stores/ClientChatStore";
+import menuState from "../../stores/AppMenuStore";
+import WelcomeHome from "../WelcomeHome";
+
+const Chat = observer(({ height, width }) => {
+  const scrollRef = useRef();
+  const [isAndroid, setIsAndroid] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsAndroid(/android/i.test(window.navigator.userAgent));
+    }
+  }, []);
+
+  return (
+    <Grid
+      templateRows="1fr auto"
+      templateColumns="1fr"
+      height={height}
+      width={width}
+      gap={0}
+    >
+      <GridItem alignSelf="center" hidden={!(chatStore.items.length < 1)}>
+        <WelcomeHome visible={chatStore.items.length < 1} />
+      </GridItem>
+
+      <GridItem
+        overflow="auto"
+        width="100%"
+        maxH="100%"
+        ref={scrollRef}
+        // If there are attachments, use "100px". Otherwise, use "128px" on Android, "73px" elsewhere.
+        pb={
+          isAndroid
+              ? "128px"
+              : "73px"
+        }
+        alignSelf="flex-end"
+      >
+        <ChatMessages scrollRef={scrollRef} />
+      </GridItem>
+
+      <GridItem
+        position="relative"
+        bg="background.primary"
+        zIndex={1000}
+        width="100%"
+      >
+        <Box
+          w="100%"
+          display="flex"
+          justifyContent="center"
+          mx="auto"
+          hidden={menuState.isOpen}
+        >
+          <ChatInput
+            input={chatStore.input}
+            setInput={(value) => chatStore.setInput(value)}
+            handleSendMessage={chatStore.sendMessage}
+            isLoading={chatStore.isLoading}
+          />
+        </Box>
+      </GridItem>
+    </Grid>
+  );
+});
+
+export default Chat;
--- a/packages/client/src/components/chat/IntermediateStepsComponent.tsx
+++ b/packages/client/src/components/chat/IntermediateStepsComponent.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import clientChatStore from "../../stores/ClientChatStore";
+
+export const IntermediateStepsComponent = observer(({ hidden }) => {
+  return (
+    <div hidden={hidden}>
+      {clientChatStore.intermediateSteps.map((step, index) => {
+        switch (step.kind) {
+          case "web-search": {
+            return <WebSearchResult key={index} data={step.data} />;
+          }
+          case "tool-result":
+            return <ToolResult key={index} data={step.data} />;
+          default:
+            return <GenericStep key={index} data={step.data} />;
+        }
+      })}
+    </div>
+  );
+});
+
+const WebSearchResult = () => {
+  return (
+    <div>
+      {/*{webResults?.map(r => <Box>*/}
+      {/*    <Text>{r.title}</Text>*/}
+      {/*    <Text>{r.url}</Text>*/}
+      {/*    <Text>{r.snippet}</Text>*/}
+      {/*</Box>)}*/}
+    </div>
+  );
+};
+
+export const ToolResult = ({ data }) => {
+  return (
+    <div className="tool-result">
+      <h3>Tool Result</h3>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};
+
+export const GenericStep = ({ data }) => {
+  return (
+    <div className="generic-step">
+      <h3>Generic Step</h3>
+      <p>{data.description || "No additional information provided."}</p>
+    </div>
+  );
+};
--- a/packages/client/src/components/chat/input-menu/FlyoutSubMenu.tsx
+++ b/packages/client/src/components/chat/input-menu/FlyoutSubMenu.tsx
@@ -0,0 +1,127 @@
+import React, { useRef } from "react";
+import { observer } from "mobx-react-lite";
+import {
+  Box,
+  Divider,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { ChevronRight } from "lucide-react";
+
+const FlyoutSubMenu: React.FC<{
+  title: string;
+  flyoutMenuOptions: { name: string; value: string }[];
+  onClose: () => void;
+  handleSelect: (item) => Promise<void>;
+  isSelected?: (item) => boolean;
+  parentIsOpen: boolean;
+  setMenuState?: (state) => void;
+}> = observer(
+  ({
+    title,
+    flyoutMenuOptions,
+    onClose,
+    handleSelect,
+    isSelected,
+    parentIsOpen,
+    setMenuState,
+  }) => {
+    const { isOpen, onOpen, onClose: onSubMenuClose } = useDisclosure();
+
+    const menuRef = new useRef();
+
+    return (
+      <Menu
+        placement="right-start"
+        isOpen={isOpen && parentIsOpen}
+        closeOnBlur={true}
+        lazyBehavior={"keepMounted"}
+        isLazy={true}
+        onClose={(e) => {
+          onSubMenuClose();
+        }}
+        closeOnSelect={false}
+      >
+        <MenuButton
+          as={MenuItem}
+          onClick={onOpen}
+          ref={menuRef}
+          bg="background.tertiary"
+          color="text.primary"
+          _hover={{ bg: "rgba(0, 0, 0, 0.05)" }}
+          _focus={{ bg: "rgba(0, 0, 0, 0.1)" }}
+        >
+          <HStack width={"100%"} justifyContent={"space-between"}>
+            <Text>{title}</Text>
+            <ChevronRight size={"1rem"} />
+          </HStack>
+        </MenuButton>
+        <Portal>
+          <MenuList
+            key={title}
+            maxHeight={56}
+            overflowY="scroll"
+            visibility={"visible"}
+            minWidth="180px"
+            bg="background.tertiary"
+            boxShadow="lg"
+            transform="translateY(-50%)"
+            zIndex={9999}
+            position="absolute"
+            left="100%"
+            bottom={-10}
+            sx={{
+              "::-webkit-scrollbar": {
+                width: "8px",
+              },
+              "::-webkit-scrollbar-thumb": {
+                background: "background.primary",
+                borderRadius: "4px",
+              },
+              "::-webkit-scrollbar-track": {
+                background: "background.tertiary",
+              },
+            }}
+          >
+            {flyoutMenuOptions.map((item, index) => (
+              <Box key={"itemflybox" + index}>
+                <MenuItem
+                  key={"itemfly" + index}
+                  onClick={() => {
+                    onSubMenuClose();
+                    onClose();
+                    handleSelect(item);
+                  }}
+                  bg={
+                    isSelected(item)
+                      ? "background.secondary"
+                      : "background.tertiary"
+                  }
+                  _hover={{ bg: "rgba(0, 0, 0, 0.05)" }}
+                  _focus={{ bg: "rgba(0, 0, 0, 0.1)" }}
+                >
+                  {item.name}
+                </MenuItem>
+                {index < flyoutMenuOptions.length - 1 && (
+                  <Divider
+                    key={item.name + "-divider"}
+                    color="text.tertiary"
+                    w={"100%"}
+                  />
+                )}
+              </Box>
+            ))}
+          </MenuList>
+        </Portal>
+      </Menu>
+    );
+  },
+);
+
+export default FlyoutSubMenu;
--- a/packages/client/src/components/chat/input-menu/InputMenu.tsx
+++ b/packages/client/src/components/chat/input-menu/InputMenu.tsx
@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useDisclosure,
+  useOutsideClick,
+} from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import { ChevronDown, Copy, RefreshCcw, Settings } from "lucide-react";
+import ClientChatStore from "../../../stores/ClientChatStore";
+import clientChatStore from "../../../stores/ClientChatStore";
+import FlyoutSubMenu from "./FlyoutSubMenu";
+import { useIsMobile } from "../../contexts/MobileContext";
+import { useIsMobile as useIsMobileUserAgent } from "../../../hooks/_IsMobileHook";
+import { getModelFamily, SUPPORTED_MODELS } from "../lib/SupportedModels";
+import { formatConversationMarkdown } from "../lib/exportConversationAsMarkdown";
+
+export const MsM_commonButtonStyles = {
+  bg: "transparent",
+  color: "text.primary",
+  borderRadius: "full",
+  padding: 2,
+  border: "none",
+  _hover: { bg: "rgba(255, 255, 255, 0.2)" },
+  _active: { bg: "rgba(255, 255, 255, 0.3)" },
+  _focus: { boxShadow: "none" },
+};
+
+const InputMenu: React.FC<{ isDisabled?: boolean }> = observer(
+  ({ isDisabled }) => {
+    const isMobile = useIsMobile();
+    const isMobileUserAgent = useIsMobileUserAgent();
+    const {
+      isOpen,
+      onOpen,
+      onClose,
+      onToggle,
+      getDisclosureProps,
+      getButtonProps,
+    } = useDisclosure();
+
+    const [controlledOpen, setControlledOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+      setControlledOpen(isOpen);
+    }, [isOpen]);
+
+
+    const getSupportedModels = async () => {
+        // Check if fetch is available (browser environment)
+        if (typeof fetch !== 'undefined') {
+            try {
+                return await (await fetch("/api/models")).json();
+            } catch (error) {
+                console.error("Error fetching models:", error);
+                return [];
+            }
+        } else {
+            // In test environment or where fetch is not available
+            console.log("Fetch not available, using default models");
+            return [];
+        }
+    }
+
+      useEffect(() => {
+           getSupportedModels().then((supportedModels) => {
+               // Check if setSupportedModels method exists before calling it
+               if (clientChatStore.setSupportedModels) {
+                   clientChatStore.setSupportedModels(supportedModels);
+               } else {
+                   console.log("setSupportedModels method not available in this environment");
+               }
+           });
+      }, []);
+
+
+    const handleClose = useCallback(() => {
+      onClose();
+    }, [isOpen]);
+
+    const handleCopyConversation = useCallback(() => {
+      navigator.clipboard
+        .writeText(formatConversationMarkdown(clientChatStore.items))
+        .then(() => {
+          window.alert(
+            "Conversation copied to clipboard. \n\nPaste it somewhere safe!",
+          );
+          onClose();
+        })
+        .catch((err) => {
+          console.error("Could not copy text to clipboard: ", err);
+          window.alert("Failed to copy conversation. Please try again.");
+        });
+    }, [onClose]);
+
+    async function selectModelFn({ name, value }) {
+        clientChatStore.setModel(value);
+    }
+
+    function isSelectedModelFn({ name, value }) {
+      return clientChatStore.model === value;
+    }
+
+    const menuRef = useRef();
+    const [menuState, setMenuState] = useState();
+
+    useOutsideClick({
+      enabled: !isMobile && isOpen,
+      ref: menuRef,
+      handler: () => {
+        handleClose();
+      },
+    });
+
+    return (
+      <Menu
+        isOpen={controlledOpen}
+        onClose={onClose}
+        onOpen={onOpen}
+        autoSelect={false}
+        closeOnSelect={false}
+        closeOnBlur={isOpen && !isMobileUserAgent}
+        isLazy={true}
+        lazyBehavior={"unmount"}
+      >
+        {isMobile ? (
+          <MenuButton
+            as={IconButton}
+            bg="text.accent"
+            icon={<Settings size={20} />}
+            isDisabled={isDisabled}
+            aria-label="Settings"
+            _hover={{ bg: "rgba(255, 255, 255, 0.2)" }}
+            _focus={{ boxShadow: "none" }}
+            {...MsM_commonButtonStyles}
+          />
+        ) : (
+          <MenuButton
+            as={Button}
+            rightIcon={<ChevronDown size={16} />}
+            isDisabled={isDisabled}
+            variant="ghost"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            minW="auto"
+            {...MsM_commonButtonStyles}
+          >
+            <Text noOfLines={1} maxW="100px" fontSize="sm">
+              {clientChatStore.model}
+            </Text>
+          </MenuButton>
+        )}
+        <MenuList
+          bg="background.tertiary"
+          border="none"
+          borderRadius="md"
+          boxShadow="lg"
+          minW={"10rem"}
+          ref={menuRef}
+        >
+          <FlyoutSubMenu
+            title="Text Models"
+            flyoutMenuOptions={clientChatStore.supportedModels.map((m) => ({ name: m, value: m }))}
+            onClose={onClose}
+            parentIsOpen={isOpen}
+            setMenuState={setMenuState}
+            handleSelect={selectModelFn}
+            isSelected={isSelectedModelFn}
+          />
+          <Divider color="text.tertiary" />
+          {/*Export conversation button*/}
+          <MenuItem
+            bg="background.tertiary"
+            color="text.primary"
+            onClick={handleCopyConversation}
+            _hover={{ bg: "rgba(0, 0, 0, 0.05)" }}
+            _focus={{ bg: "rgba(0, 0, 0, 0.1)" }}
+          >
+            <Flex align="center">
+              <Copy size="16px" style={{ marginRight: "8px" }} />
+              <Box>Export</Box>
+            </Flex>
+          </MenuItem>
+          {/*New conversation button*/}
+          <MenuItem
+            bg="background.tertiary"
+            color="text.primary"
+            onClick={() => {
+              clientChatStore.setActiveConversation("conversation:new");
+              onClose();
+            }}
+            _hover={{ bg: "rgba(0, 0, 0, 0.05)" }}
+            _focus={{ bg: "rgba(0, 0, 0, 0.1)" }}
+          >
+            <Flex align="center">
+              <RefreshCcw size="16px" style={{ marginRight: "8px" }} />
+              <Box>New</Box>
+            </Flex>
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    );
+  },
+);
+
+export default InputMenu;
--- a/packages/client/src/components/chat/input/ChatInput.tsx
+++ b/packages/client/src/components/chat/input/ChatInput.tsx
@@ -0,0 +1,157 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import chatStore from "../../../stores/ClientChatStore";
+import InputMenu from "../input-menu/InputMenu";
+import InputTextarea from "./ChatInputTextArea";
+import SendButton from "./ChatInputSendButton";
+import { useMaxWidth } from "../../../hooks/useMaxWidth";
+import userOptionsStore from "../../../stores/UserOptionsStore";
+
+const ChatInput = observer(() => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const maxWidth = useMaxWidth();
+  const [inputValue, setInputValue] = useState<string>("");
+
+  const [containerHeight, setContainerHeight] = useState(56);
+  const [containerBorderRadius, setContainerBorderRadius] = useState(9999);
+
+  const [shouldFollow, setShouldFollow] = useState<boolean>(
+    userOptionsStore.followModeEnabled,
+  );
+  const [couldFollow, setCouldFollow] = useState<boolean>(chatStore.isLoading);
+
+  const [inputWidth, setInputWidth] = useState<string>("50%");
+
+  useEffect(() => {
+    setShouldFollow(chatStore.isLoading && userOptionsStore.followModeEnabled);
+    setCouldFollow(chatStore.isLoading);
+  }, [chatStore.isLoading, userOptionsStore.followModeEnabled]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    setInputValue(chatStore.input);
+  }, [chatStore.input]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const observer = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          const newHeight = entry.target.clientHeight;
+          setContainerHeight(newHeight);
+
+          const newBorderRadius = Math.max(28 - (newHeight - 56) * 0.2, 16);
+          setContainerBorderRadius(newBorderRadius);
+        }
+      });
+
+      observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    chatStore.sendMessage();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      chatStore.sendMessage();
+    }
+  };
+
+  const inputMaxWidth = useBreakpointValue(
+    { base: "50rem", lg: "50rem", md: "80%", sm: "100vw" },
+    { ssr: true },
+  );
+  const inputMinWidth = useBreakpointValue({ lg: "40rem" }, { ssr: true });
+
+  useEffect(() => {
+    setInputWidth("100%");
+  }, [inputMaxWidth, inputMinWidth]);
+
+  return (
+    <Box
+      width={inputWidth}
+      maxW={inputMaxWidth}
+      minWidth={inputMinWidth}
+      mx="auto"
+      p={2}
+      pl={2}
+      pb={`calc(env(safe-area-inset-bottom) + 16px)`}
+      bottom={0}
+      position="fixed"
+      zIndex={1000}
+    >
+      {couldFollow && (
+        <Box
+          position="absolute"
+          top={-8}
+          right={0}
+          zIndex={1001}
+          display="flex"
+          justifyContent="flex-end"
+        >
+          <Button
+            size="sm"
+            variant="ghost"
+            colorScheme="blue"
+            onClick={(_) => {
+              userOptionsStore.toggleFollowMode();
+            }}
+            isDisabled={!chatStore.isLoading}
+          >
+            {shouldFollow ? "Disable Follow Mode" : "Enable Follow Mode"}
+          </Button>
+        </Box>
+      )}
+      <Grid
+        ref={containerRef}
+        p={2}
+        bg="background.secondary"
+        borderRadius={`${containerBorderRadius}px`}
+        templateColumns="auto 1fr auto"
+        gap={2}
+        alignItems="center"
+        style={{
+          transition: "border-radius 0.2s ease",
+        }}
+      >
+        <GridItem>
+          <InputMenu
+            selectedModel={chatStore.model}
+            onSelectModel={chatStore.setModel}
+            isDisabled={chatStore.isLoading}
+          />
+        </GridItem>
+        <GridItem>
+          <InputTextarea
+            inputRef={inputRef}
+            value={chatStore.input}
+            onChange={chatStore.setInput}
+            onKeyDown={handleKeyDown}
+            isLoading={chatStore.isLoading}
+          />
+        </GridItem>
+        <GridItem>
+          <SendButton
+            isLoading={chatStore.isLoading}
+            isDisabled={chatStore.isLoading || !chatStore.input.trim()}
+            onClick={handleSubmit}
+          />
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+});
+
+export default ChatInput;
--- a/packages/client/src/components/chat/input/ChatInputSendButton.tsx
+++ b/packages/client/src/components/chat/input/ChatInputSendButton.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Button } from "@chakra-ui/react";
+import clientChatStore from "../../../stores/ClientChatStore";
+import { CirclePause, Send } from "lucide-react";
+
+import { motion } from "framer-motion";
+
+interface SendButtonProps {
+  isLoading: boolean;
+  isDisabled: boolean;
+  onClick: (e: React.FormEvent) => void;
+  onStop?: () => void;
+}
+
+const SendButton: React.FC<SendButtonProps> = ({ onClick }) => {
+  const isDisabled =
+    clientChatStore.input.trim().length === 0 && !clientChatStore.isLoading;
+  return (
+    <Button
+      onClick={(e) =>
+        clientChatStore.isLoading
+          ? clientChatStore.stopIncomingMessage()
+          : onClick(e)
+      }
+      bg="transparent"
+      color={
+        clientChatStore.input.trim().length <= 1 ? "brand.700" : "text.primary"
+      }
+      borderRadius="full"
+      p={2}
+      isDisabled={isDisabled}
+      _hover={{ bg: !isDisabled ? "rgba(255, 255, 255, 0.2)" : "inherit" }}
+      _active={{ bg: !isDisabled ? "rgba(255, 255, 255, 0.3)" : "inherit" }}
+      _focus={{ boxShadow: "none" }}
+    >
+      {clientChatStore.isLoading ? <MySpinner /> : <Send size={20} />}
+    </Button>
+  );
+};
+
+const MySpinner = ({ onClick }) => (
+  <motion.div
+    initial={{ opacity: 0, scale: 0.9 }}
+    animate={{ opacity: 1, scale: 1 }}
+    exit={{ opacity: 0, scale: 0.9 }}
+    transition={{
+      duration: 0.4,
+      ease: "easeInOut",
+    }}
+  >
+    <CirclePause color={"#F0F0F0"} size={24} onClick={onClick} />
+  </motion.div>
+);
+
+export default SendButton;
--- a/packages/client/src/components/chat/input/ChatInputTextArea.tsx
+++ b/packages/client/src/components/chat/input/ChatInputTextArea.tsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {observer} from "mobx-react-lite";
+import {Box, chakra, InputGroup,} from "@chakra-ui/react";
+import AutoResize from "react-textarea-autosize";
+
+const AutoResizeTextArea = chakra(AutoResize);
+
+interface InputTextAreaProps {
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  isLoading: boolean;
+}
+
+const InputTextArea: React.FC<InputTextAreaProps> = observer(
+  ({ inputRef, value, onChange, onKeyDown, isLoading }) => {
+
+    const [heightConstraint, setHeightConstraint] = useState<
+      number | undefined
+    >(10);
+
+    useEffect(() => {
+      if (value.length > 10) {
+        setHeightConstraint();
+      }
+    }, [value]);
+
+    return (
+      <Box
+        position="relative"
+        width="100%"
+        height={heightConstraint}
+        display="flex"
+        flexDirection="column"
+      >
+
+        {/* Input Area */}
+        <InputGroup position="relative">
+          <AutoResizeTextArea
+            fontFamily="Arial, sans-serif"
+            ref={inputRef}
+            value={value}
+            height={heightConstraint}
+            autoFocus
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={onKeyDown}
+            p={2}
+            pr="8px"
+            pl="17px"
+            bg="rgba(255, 255, 255, 0.15)"
+            color="text.primary"
+            borderRadius="20px"
+            border="none"
+            placeholder="Free my mind..."
+            _placeholder={{ color: "gray.400" }}
+            _focus={{
+              outline: "none",
+            }}
+            disabled={isLoading}
+            minRows={1}
+            maxRows={12}
+            style={{
+              touchAction: "none",
+              resize: "none",
+              overflowY: "auto",
+              width: "100%",
+              transition: "height 0.2s ease-in-out",
+            }}
+          />
+        </InputGroup>
+      </Box>
+    );
+  },
+);
+
+export default InputTextArea;
--- a/packages/client/src/components/chat/input/tests/ChatInput.test.tsx
+++ b/packages/client/src/components/chat/input/tests/ChatInput.test.tsx
@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import ChatInput from '../ChatInput';
+import userOptionsStore from '../../../../stores/UserOptionsStore';
+import chatStore from '../../../../stores/ClientChatStore';
+
+// Mock browser APIs
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// Add ResizeObserver to the global object
+global.ResizeObserver = MockResizeObserver;
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock dependencies
+vi.mock('../../../../stores/UserOptionsStore', () => ({
+  default: {
+    followModeEnabled: false,
+    toggleFollowMode: vi.fn(),
+    setFollowModeEnabled: vi.fn(),
+  },
+}));
+
+vi.mock('../../../../stores/ClientChatStore', () => ({
+  default: {
+    isLoading: false,
+    input: '',
+    setInput: vi.fn(),
+    sendMessage: vi.fn(),
+    setModel: vi.fn(),
+    model: 'test-model',
+    supportedModels: ['test-model', 'another-model'],
+  },
+}));
+
+// Mock the hooks
+vi.mock('../../../../hooks/useMaxWidth', () => ({
+  useMaxWidth: () => '100%',
+}));
+
+// Mock Chakra UI hooks
+vi.mock('@chakra-ui/react', async () => {
+  const actual = await vi.importActual('@chakra-ui/react');
+  return {
+    ...actual,
+    useBreakpointValue: () => '50rem',
+    useBreakpoint: () => 'lg',
+  };
+});
+
+// Mock the child components
+vi.mock('../input-menu/InputMenu', () => ({
+  default: ({ selectedModel, onSelectModel, isDisabled }) => (
+    <div data-testid="input-menu">
+      <span>Model: {selectedModel}</span>
+      <button disabled={isDisabled} onClick={() => onSelectModel('new-model')}>
+        Select Model
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock('./ChatInputTextArea', () => ({
+  default: ({ inputRef, value, onChange, onKeyDown, isLoading }) => (
+    <textarea
+      data-testid="input-textarea"
+      aria-label="Chat input"
+      ref={inputRef}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={onKeyDown}
+      disabled={isLoading}
+    />
+  ),
+}));
+
+vi.mock('./ChatInputSendButton', () => ({
+  default: ({ isLoading, isDisabled, onClick }) => (
+    <button
+      data-testid="send-button"
+      aria-label="Send message"
+      disabled={isDisabled}
+      onClick={onClick}
+    >
+      {isLoading ? 'Loading...' : 'Send'}
+    </button>
+  ),
+}));
+
+describe('ChatInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Reset the mocked state
+    (userOptionsStore.followModeEnabled as any) = false;
+    (chatStore.isLoading as any) = false;
+    (chatStore.input as any) = '';
+  });
+
+  it('should not show follow mode button when not loading', () => {
+    render(<ChatInput />);
+
+    // The follow mode button should not be visible
+    const followButton = screen.queryByText('Enable Follow Mode');
+    expect(followButton).not.toBeInTheDocument();
+  });
+
+  it('should show follow mode button when loading', () => {
+    // Set isLoading to true
+    (chatStore.isLoading as any) = true;
+
+    render(<ChatInput />);
+
+    // The follow mode button should be visible
+    const followButton = screen.getByText('Enable Follow Mode');
+    expect(followButton).toBeInTheDocument();
+
+    // The button should be enabled
+    expect(followButton).not.toBeDisabled();
+  });
+
+  it('should show "Disable Follow Mode" text when follow mode is enabled', () => {
+    // Set isLoading to true and followModeEnabled to true
+    (chatStore.isLoading as any) = true;
+    (userOptionsStore.followModeEnabled as any) = true;
+
+    render(<ChatInput />);
+
+    // The follow mode button should show "Disable Follow Mode"
+    const followButton = screen.getByText('Disable Follow Mode');
+    expect(followButton).toBeInTheDocument();
+  });
+
+  it('should call toggleFollowMode when follow mode button is clicked', () => {
+    // Set isLoading to true
+    (chatStore.isLoading as any) = true;
+
+    render(<ChatInput />);
+
+    // Click the follow mode button
+    const followButton = screen.getByText('Enable Follow Mode');
+    fireEvent.click(followButton);
+
+    // toggleFollowMode should be called
+    expect(userOptionsStore.toggleFollowMode).toHaveBeenCalled();
+  });
+
+  it('should not render follow mode button when not loading', () => {
+    // Set isLoading to false
+    (chatStore.isLoading as any) = false;
+
+    render(<ChatInput />);
+
+    // The follow mode button should not be visible
+    const followButton = screen.queryByText('Enable Follow Mode');
+    expect(followButton).not.toBeInTheDocument();
+  });
+
+  // Note: We've verified that the follow mode button works correctly.
+  // Testing the send button and keyboard events is more complex due to the component structure.
+  // For a complete test, we would need to mock more of the component's dependencies and structure.
+  // This is left as a future enhancement.
+});
--- a/packages/client/src/components/chat/lib/SupportedModels.ts
+++ b/packages/client/src/components/chat/lib/SupportedModels.ts
@@ -0,0 +1,88 @@
+const SUPPORTED_MODELS_GROUPS = {
+  openai: [
+    // "o1-preview",
+    // "o1-mini",
+    // "gpt-4o",
+    // "gpt-3.5-turbo"
+  ],
+  groq: [
+    // "mixtral-8x7b-32768",
+    // "deepseek-r1-distill-llama-70b",
+    "meta-llama/llama-4-scout-17b-16e-instruct",
+    "gemma2-9b-it",
+    "mistral-saba-24b",
+    // "qwen-2.5-32b",
+    "llama-3.3-70b-versatile",
+    // "llama-3.3-70b-versatile"
+    // "llama-3.1-70b-versatile",
+    // "llama-3.3-70b-versatile"
+  ],
+  cerebras: ["llama-3.3-70b"],
+  claude: [
+    // "claude-3-5-sonnet-20241022",
+    // "claude-3-opus-20240229"
+  ],
+  fireworks: [
+    // "llama-v3p1-405b-instruct",
+    // "llama-v3p1-70b-instruct",
+    // "llama-v3p2-90b-vision-instruct",
+    // "mixtral-8x22b-instruct",
+    // "mythomax-l2-13b",
+    // "yi-large"
+  ],
+  google: [
+    // "gemini-2.0-flash-exp",
+    // "gemini-1.5-flash",
+    // "gemini-exp-1206",
+    // "gemini-1.5-pro"
+  ],
+  xai: [
+    // "grok-beta",
+    // "grok-2",
+    // "grok-2-1212",
+    // "grok-2-latest",
+    // "grok-beta"
+  ],
+  cloudflareAI: [
+    "llama-3.2-3b-instruct", // max_tokens
+    "llama-3-8b-instruct", // max_tokens
+    "llama-3.1-8b-instruct-fast", // max_tokens
+    "deepseek-math-7b-instruct",
+    "deepseek-coder-6.7b-instruct-awq",
+    "hermes-2-pro-mistral-7b",
+    "openhermes-2.5-mistral-7b-awq",
+    "mistral-7b-instruct-v0.2",
+    "neural-chat-7b-v3-1-awq",
+    "openchat-3.5-0106",
+    // "gemma-7b-it",
+  ],
+};
+
+export type SupportedModel =
+    | keyof typeof SUPPORTED_MODELS_GROUPS
+    | (typeof SUPPORTED_MODELS_GROUPS)[keyof typeof SUPPORTED_MODELS_GROUPS][number];
+
+export type ModelFamily = keyof typeof SUPPORTED_MODELS_GROUPS;
+
+function getModelFamily(model: string): ModelFamily | undefined {
+  return Object.keys(SUPPORTED_MODELS_GROUPS)
+      .filter((family) => {
+        return SUPPORTED_MODELS_GROUPS[
+            family as keyof typeof SUPPORTED_MODELS_GROUPS
+            ].includes(model.trim());
+      })
+      .at(0) as ModelFamily | undefined;
+}
+
+const SUPPORTED_MODELS = [
+  // ...SUPPORTED_MODELS_GROUPS.xai,
+  // ...SUPPORTED_MODELS_GROUPS.claude,
+  // ...SUPPORTED_MODELS_GROUPS.google,
+  ...SUPPORTED_MODELS_GROUPS.groq,
+  // ...SUPPORTED_MODELS_GROUPS.fireworks,
+  // ...SUPPORTED_MODELS_GROUPS.openai,
+  // ...SUPPORTED_MODELS_GROUPS.cerebras,
+  // ...SUPPORTED_MODELS_GROUPS.cloudflareAI,
+];
+
+export { SUPPORTED_MODELS, SUPPORTED_MODELS_GROUPS, getModelFamily };
--- a/packages/client/src/components/chat/lib/domPurify.ts
+++ b/packages/client/src/components/chat/lib/domPurify.ts
@@ -0,0 +1,33 @@
+import DOMPurify from "isomorphic-dompurify";
+
+function domPurify(dirty: string) {
+  return DOMPurify.sanitize(dirty, {
+    USE_PROFILES: { html: true },
+    ALLOWED_TAGS: [
+      "b",
+      "i",
+      "u",
+      "a",
+      "p",
+      "span",
+      "div",
+      "table",
+      "thead",
+      "tbody",
+      "tr",
+      "td",
+      "th",
+      "ul",
+      "ol",
+      "li",
+      "code",
+      "pre",
+    ],
+    ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "style"],
+    FORBID_TAGS: ["script", "iframe"],
+    KEEP_CONTENT: true,
+    SAFE_FOR_TEMPLATES: true,
+  });
+}
+
+export default domPurify;
--- a/packages/client/src/components/chat/lib/exportConversationAsMarkdown.ts
+++ b/packages/client/src/components/chat/lib/exportConversationAsMarkdown.ts
@@ -0,0 +1,18 @@
+// Function to generate a Markdown representation of the current conversation
+import { type IMessage } from "../../../stores/ClientChatStore";
+import { Instance } from "mobx-state-tree";
+
+export function formatConversationMarkdown(
+  messages: Instance<typeof IMessage>[],
+): string {
+  return messages
+    .map((message) => {
+      if (message.role === "user") {
+        return `**You**: ${message.content}`;
+      } else if (message.role === "assistant") {
+        return `**Geoff's AI**: ${message.content}`;
+      }
+      return "";
+    })
+    .join("\n\n");
+}
--- a/packages/client/src/components/chat/messages/ChatMessageContent.tsx
+++ b/packages/client/src/components/chat/messages/ChatMessageContent.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+import MessageMarkdownRenderer from "./MessageMarkdownRenderer";
+
+const ChatMessageContent = ({ content }) => {
+  return <MessageMarkdownRenderer markdown={content} />;
+};
+
+export default React.memo(ChatMessageContent);
--- a/packages/client/src/components/chat/messages/ChatMessages.tsx
+++ b/packages/client/src/components/chat/messages/ChatMessages.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import {Box, Grid, GridItem} from "@chakra-ui/react";
+import MessageBubble from "./MessageBubble";
+import {observer} from "mobx-react-lite";
+import chatStore from "../../../stores/ClientChatStore";
+import {useIsMobile} from "../../contexts/MobileContext";
+
+interface ChatMessagesProps {
+  scrollRef: React.RefObject<HTMLDivElement>;
+}
+
+const ChatMessages: React.FC<ChatMessagesProps> = observer(({ scrollRef }) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <Box
+      pt={isMobile ? 24 : undefined}
+      overflowY={"scroll"}
+      overflowX={"hidden"}
+    >
+      <Grid
+        fontFamily="Arial, sans-serif"
+        templateColumns="1fr"
+        gap={2}
+        bg="transparent"
+        borderRadius="md"
+        boxShadow="md"
+        whiteSpace="pre-wrap"
+      >
+        {chatStore.items.map((msg, index) => {
+          if (index < chatStore.items.length - 1) {
+            return (
+              <GridItem key={index}>
+                <MessageBubble x scrollRef={scrollRef} msg={msg} />
+              </GridItem>
+            );
+          } else {
+            return (
+              <GridItem key={index} mb={isMobile ? 4 : undefined}>
+                <MessageBubble scrollRef={scrollRef} msg={msg} />
+              </GridItem>
+            );
+          }
+        })}
+      </Grid>
+    </Box>
+  );
+});
+
+export default ChatMessages;
--- a/packages/client/src/components/chat/messages/MessageBubble.tsx
+++ b/packages/client/src/components/chat/messages/MessageBubble.tsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import MessageRenderer from "./ChatMessageContent";
+import { observer } from "mobx-react-lite";
+import MessageEditor from "./MessageEditorComponent";
+import UserMessageTools from "./UserMessageTools";
+import clientChatStore from "../../../stores/ClientChatStore";
+import UserOptionsStore from "../../../stores/UserOptionsStore";
+import MotionBox from "./MotionBox";
+
+
+
+const LoadingDots = () => {
+  return (
+      <Flex>
+        {[0, 1, 2].map((i) => (
+            <MotionBox
+                key={i}
+                width="8px"
+                height="8px"
+                borderRadius="50%"
+                backgroundColor="text.primary"
+                margin="0 4px"
+                animate={{
+                  scale: [1, 1.2, 1],
+                  opacity: [0.5, 1, 0.5],
+                }}
+                transition={{
+                  duration: 1,
+                  repeat: Infinity,
+                  delay: i * 0.2,
+                }}
+            />
+        ))}
+      </Flex>
+  );
+}
+
+function renderMessage(msg: any) {
+  if (msg.role === "user") {
+    return (
+      <Text as="p" fontSize="sm" lineHeight="short" color="text.primary">
+        {msg.content}
+      </Text>
+    );
+  }
+  return <MessageRenderer content={msg.content} />;
+}
+
+const MessageBubble = observer(({ msg, scrollRef }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isUser = msg.role === "user";
+  const senderName = isUser ? "You" : "Geoff's AI";
+  const isLoading = !msg.content || !(msg.content.trim().length > 0);
+  const messageRef = useRef();
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    if (clientChatStore.items.length > 0 && clientChatStore.isLoading && UserOptionsStore.followModeEnabled) { // Refine condition
+      scrollRef.current?.scrollTo({
+        top: scrollRef.current.scrollHeight,
+        behavior: "auto",
+      });
+    }
+  });
+
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems={isUser ? "flex-end" : "flex-start"}
+      role="listitem"
+      flex={0}
+      aria-label={`Message from ${senderName}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Text
+        fontSize="xs"
+        color="text.tertiary"
+        textAlign={isUser ? "right" : "left"}
+        alignSelf={isUser ? "flex-end" : "flex-start"}
+        mb={1}
+      >
+        {senderName}
+      </Text>
+
+      <MotionBox
+        minW={{ base: "99%", sm: "99%", lg: isUser ? "55%" : "60%" }}
+        maxW={{ base: "99%", sm: "99%", lg: isUser ? "65%" : "65%" }}
+        p={3}
+        borderRadius="1.5em"
+        bg={isUser ? "#0A84FF" : "#3A3A3C"}
+        color="text.primary"
+        textAlign="left"
+        boxShadow="0 2px 4px rgba(0, 0, 0, 0.1)"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        overflow="hidden"
+        wordBreak="break-word"
+        whiteSpace="pre-wrap"
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Box
+            flex="1"
+            overflowWrap="break-word"
+            whiteSpace="pre-wrap"
+            ref={messageRef}
+            sx={{
+              "pre, code": {
+                maxWidth: "100%",
+                whiteSpace: "pre-wrap",
+                overflowX: "auto",
+              },
+            }}
+          >
+            {isEditing ? (
+              <MessageEditor message={msg} onCancel={handleCancelEdit} />
+            ) : isLoading ? (
+              <LoadingDots />
+            ) : (
+              renderMessage(msg)
+            )}
+          </Box>
+          {isUser && (
+            <Box
+              ml={2}
+              width="32px"
+              height="32px"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {isHovered && !isEditing && (
+                <UserMessageTools message={msg} onEdit={handleEdit} />
+              )}
+            </Box>
+          )}
+        </Flex>
+      </MotionBox>
+    </Flex>
+  );
+});
+
+export default MessageBubble;
--- a/packages/client/src/components/chat/messages/MessageEditorComponent.tsx
+++ b/packages/client/src/components/chat/messages/MessageEditorComponent.tsx
@@ -0,0 +1,84 @@
+import React, { KeyboardEvent, useEffect } from "react";
+import { Box, Flex, IconButton, Textarea } from "@chakra-ui/react";
+import { Check, X } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { Instance } from "mobx-state-tree";
+import Message from "../../../models/Message";
+import messageEditorStore from "../../../stores/MessageEditorStore";
+
+interface MessageEditorProps {
+  message: Instance<typeof Message>;
+  onCancel: () => void;
+}
+
+const MessageEditor = observer(({ message, onCancel }: MessageEditorProps) => {
+  useEffect(() => {
+    messageEditorStore.setMessage(message);
+
+    return () => {
+      messageEditorStore.onCancel();
+    };
+  }, [message]);
+
+  const handleCancel = () => {
+    messageEditorStore.onCancel();
+    onCancel();
+  };
+
+  const handleSave = async () => {
+    await messageEditorStore.handleSave();
+    onCancel();
+  };
+
+
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSave();
+    }
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  return (
+    <Box width="100%">
+      <Textarea
+        value={messageEditorStore.editedContent}
+        onChange={(e) => messageEditorStore.setEditedContent(e.target.value)}
+        onKeyDown={handleKeyDown}
+        minHeight="100px"
+        bg="transparent"
+        border="1px solid"
+        borderColor="whiteAlpha.300"
+        _hover={{ borderColor: "whiteAlpha.400" }}
+        _focus={{ borderColor: "brand.100", boxShadow: "none" }}
+        resize="vertical"
+        color="text.primary"
+      />
+      <Flex justify="flex-end" mt={2} gap={2}>
+        <IconButton
+          aria-label="Cancel edit"
+          icon={<X />}
+          onClick={handleCancel}
+          size="sm"
+          variant="ghost"
+          color={"accent.danger"}
+        />
+        <IconButton
+          aria-label="Save edit"
+          icon={<Check />}
+          onClick={handleSave}
+          size="sm"
+          variant="ghost"
+          color={"accent.confirm"}
+        />
+      </Flex>
+    </Box>
+  );
+});
+
+export default MessageEditor;
--- a/packages/client/src/components/chat/messages/MessageMarkdown.tsx
+++ b/packages/client/src/components/chat/messages/MessageMarkdown.tsx
@@ -0,0 +1,577 @@
+import React from "react";
+
+import {
+  Box,
+  Code,
+  Divider,
+  Heading,
+  Link,
+  List,
+  ListItem,
+  OrderedList,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { marked } from "marked";
+import CodeBlock from "../../code/CodeBlock";
+import ImageWithFallback from "../../markdown/ImageWithFallback";
+import markedKatex from "marked-katex-extension";
+import katex from "katex";
+import domPurify from "../lib/domPurify";
+
+try {
+  if (localStorage) {
+    marked.use(
+      markedKatex({
+        nonStandard: false,
+        displayMode: true,
+        throwOnError: false,
+        strict: true,
+        colorIsTextColor: true,
+        errorColor: "red",
+      }),
+    );
+  }
+} catch (_) {}
+
+const MemoizedCodeBlock = React.memo(CodeBlock);
+
+/**
+ * Utility to map heading depth to Chakra heading styles that
+ * roughly match typical markdown usage.
+ */
+const getHeadingProps = (depth: number) => {
+  switch (depth) {
+    case 1:
+      return { as: "h1", size: "xl", mt: 4, mb: 2 };
+    case 2:
+      return { as: "h2", size: "lg", mt: 3, mb: 2 };
+    case 3:
+      return { as: "h3", size: "md", mt: 2, mb: 1 };
+    case 4:
+      return { as: "h4", size: "sm", mt: 2, mb: 1 };
+    case 5:
+      return { as: "h5", size: "sm", mt: 2, mb: 1 };
+    case 6:
+      return { as: "h6", size: "xs", mt: 2, mb: 1 };
+    default:
+      return { as: `h${depth}`, size: "md", mt: 2, mb: 1 };
+  }
+};
+
+interface TableToken extends marked.Tokens.Table {
+  align: Array<"center" | "left" | "right" | null>;
+  header: (string | marked.Tokens.TableCell)[];
+  rows: (string | marked.Tokens.TableCell)[][];
+}
+
+const CustomHeading: React.FC<{ text: string; depth: number }> = ({
+  text,
+  depth,
+}) => {
+  const headingProps = getHeadingProps(depth);
+  return (
+    <Heading {...headingProps} wordBreak="break-word" maxWidth="100%">
+      {text}
+    </Heading>
+  );
+};
+
+const CustomParagraph: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <Text
+      as="p"
+      fontSize="sm"
+      color="text.accent"
+      lineHeight="short"
+      wordBreak="break-word"
+      maxWidth="100%"
+    >
+      {children}
+    </Text>
+  );
+};
+
+const CustomBlockquote: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <Box
+      as="blockquote"
+      borderLeft="4px solid"
+      borderColor="gray.200"
+      fontStyle="italic"
+      color="gray.600"
+      pl={4}
+      maxWidth="100%"
+      wordBreak="break-word"
+      mb={2}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const CustomCodeBlock: React.FC<{ code: string; language?: string }> = ({
+  code,
+  language,
+}) => {
+  return (
+    <MemoizedCodeBlock
+      language={language}
+      code={code}
+      onRenderComplete={() => Promise.resolve()}
+    />
+  );
+};
+
+const CustomHr: React.FC = () => <Divider my={4} />;
+
+const CustomList: React.FC<{
+  ordered?: boolean;
+  start?: number;
+  children: React.ReactNode;
+}> = ({ ordered, start, children }) => {
+  const commonStyles = {
+    fontSize: "sm",
+    wordBreak: "break-word" as const,
+    maxWidth: "100%" as const,
+    stylePosition: "outside" as const,
+    mb: 2,
+    pl: 4,
+  };
+
+  return ordered ? (
+    <OrderedList start={start} {...commonStyles}>
+      {children}
+    </OrderedList>
+  ) : (
+    <List styleType="disc" {...commonStyles}>
+      {children}
+    </List>
+  );
+};
+
+const CustomListItem: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return <ListItem mb={1}>{children}</ListItem>;
+};
+
+const CustomKatex: React.FC<{ math: string; displayMode: boolean }> = ({
+  math,
+  displayMode,
+}) => {
+  const renderedMath = katex.renderToString(math, { displayMode });
+
+  return (
+    <Box
+      as="span"
+      display={displayMode ? "block" : "inline"}
+      p={displayMode ? 4 : 1}
+      my={displayMode ? 4 : 0}
+      borderRadius="md"
+      overflow="auto"
+      maxWidth="100%"
+      dangerouslySetInnerHTML={{ __html: renderedMath }}
+    />
+  );
+};
+
+const CustomTable: React.FC<{
+  header: React.ReactNode[];
+  align: Array<"center" | "left" | "right" | null>;
+  rows: React.ReactNode[][];
+}> = ({ header, align, rows }) => {
+  return (
+    <Table
+      variant="simple"
+      size="sm"
+      my={4}
+      borderRadius="md"
+      overflow="hidden"
+    >
+      <Thead bg="background.secondary">
+        <Tr>
+          {header.map((cell, i) => (
+            <Th
+              key={i}
+              textAlign={align[i] || "left"}
+              fontWeight="bold"
+              p={2}
+              minW={16}
+              wordBreak="break-word"
+            >
+              {cell}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, rIndex) => (
+          <Tr key={rIndex}>
+            {row.map((cell, cIndex) => (
+              <Td
+                key={cIndex}
+                textAlign={align[cIndex] || "left"}
+                p={2}
+                wordBreak="break-word"
+              >
+                {cell}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
+const CustomHtmlBlock: React.FC<{ content: string }> = ({ content }) => {
+  return <Box dangerouslySetInnerHTML={{ __html: content }} mb={2} />;
+};
+
+const CustomText: React.FC<{ text: React.ReactNode }> = ({ text }) => {
+  return (
+    <Text
+      fontSize="sm"
+      lineHeight="short"
+      wordBreak="break-word"
+      maxWidth="100%"
+      as="span"
+    >
+      {text}
+    </Text>
+  );
+};
+
+interface CustomStrongProps {
+  children: React.ReactNode;
+}
+const CustomStrong: React.FC<CustomStrongProps> = ({ children }) => {
+  return <Text as="strong">{children}</Text>;
+};
+
+const CustomEm: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Text
+      as="em"
+      fontStyle="italic"
+      lineHeight="short"
+      wordBreak="break-word"
+      display="inline"
+    >
+      {children}
+    </Text>
+  );
+};
+
+const CustomDel: React.FC<{ text: string }> = ({ text }) => {
+  return (
+    <Text
+      as="del"
+      textDecoration="line-through"
+      lineHeight="short"
+      wordBreak="break-word"
+      display="inline"
+    >
+      {text}
+    </Text>
+  );
+};
+
+const CustomCodeSpan: React.FC<{ code: string }> = ({ code }) => {
+  const bg = useColorModeValue("gray.100", "gray.800");
+  return (
+    <Code
+      fontSize="sm"
+      bg={bg}
+      overflowX="clip"
+      borderRadius="md"
+      wordBreak="break-word"
+      maxWidth="100%"
+      p={0.5}
+    >
+      {code}
+    </Code>
+  );
+};
+
+const CustomMath: React.FC<{ math: string; displayMode?: boolean }> = ({
+  math,
+  displayMode = false,
+}) => {
+  return (
+    <Box
+      as="span"
+      display={displayMode ? "block" : "inline"}
+      p={displayMode ? 4 : 1}
+      my={displayMode ? 4 : 0}
+      borderRadius="md"
+      overflow="auto"
+      maxWidth="100%"
+      className={`math ${displayMode ? "math-display" : "math-inline"}`}
+    >
+      {math}
+    </Box>
+  );
+};
+
+const CustomLink: React.FC<{
+  href: string;
+  title?: string;
+  children: React.ReactNode;
+}> = ({ href, title, children, ...props }) => {
+  return (
+    <Link
+      href={href}
+      title={title}
+      isExternal
+      sx={{
+        "& span": {
+          color: "text.link",
+        },
+      }}
+      maxWidth="100%"
+      color="teal.500"
+      wordBreak="break-word"
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+const CustomImage: React.FC<{ href: string; text: string; title?: string }> = ({
+  href,
+  text,
+  title,
+}) => {
+  return (
+    <ImageWithFallback
+      src={href}
+      alt={text}
+      title={title}
+      maxW="100%"
+      width="auto"
+      height="auto"
+      my={2}
+    />
+  );
+};
+
+/**
+ * A helper function that iterates through a list of Marked tokens
+ * and returns an array of React elements. This is the heart of the
+ * custom-rendering logic, used both top-level and for nested tokens.
+ */
+function parseTokens(tokens: marked.Token[]): JSX.Element[] {
+  const output: JSX.Element[] = [];
+  let blockquoteContent: JSX.Element[] = [];
+
+  tokens.forEach((token, i) => {
+    switch (token.type) {
+      case "heading":
+        output.push(
+          <CustomHeading key={i} text={token.text} depth={token.depth} />,
+        );
+        break;
+
+      case "paragraph": {
+        const parsedContent = token.tokens
+          ? parseTokens(token.tokens)
+          : token.text;
+        if (blockquoteContent.length > 0) {
+          blockquoteContent.push(
+            <CustomParagraph key={i}>{parsedContent}</CustomParagraph>,
+          );
+        } else {
+          output.push(
+            <CustomParagraph key={i}>{parsedContent}</CustomParagraph>,
+          );
+        }
+        break;
+      }
+      case "br":
+        output.push(<br key={i} />);
+        break;
+      case "escape": {
+        break;
+      }
+      case "blockquote_start":
+        blockquoteContent = [];
+        break;
+
+      case "blockquote_end":
+        output.push(
+          <CustomBlockquote key={i}>
+            {parseTokens(blockquoteContent)}
+          </CustomBlockquote>,
+        );
+        blockquoteContent = [];
+        break;
+      case "blockquote": {
+        output.push(
+          <CustomBlockquote key={i}>
+            {token.tokens ? parseTokens(token.tokens) : null}
+          </CustomBlockquote>,
+        );
+        break;
+      }
+      case "math":
+        output.push(
+          <CustomMath key={i} math={(token as any).value} displayMode={true} />,
+        );
+        break;
+
+      case "inlineMath":
+        output.push(
+          <CustomMath
+            key={i}
+            math={(token as any).value}
+            displayMode={false}
+          />,
+        );
+        break;
+      case "inlineKatex":
+      case "blockKatex": {
+        const katexToken = token as any;
+        output.push(
+          <CustomKatex
+            key={i}
+            math={katexToken.text}
+            displayMode={katexToken.displayMode}
+          />,
+        );
+        break;
+      }
+      case "code":
+        output.push(
+          <CustomCodeBlock key={i} code={token.text} language={token.lang} />,
+        );
+        break;
+
+      case "hr":
+        output.push(<CustomHr key={i} />);
+        break;
+
+      case "list": {
+        const { ordered, start, items } = token;
+        const listItems = items.map((listItem, idx) => {
+          const nestedContent = parseTokens(listItem.tokens);
+          return <CustomListItem key={idx}>{nestedContent}</CustomListItem>;
+        });
+
+        output.push(
+          <CustomList key={i} ordered={ordered} start={start}>
+            {listItems}
+          </CustomList>,
+        );
+        break;
+      }
+      case "table": {
+        const tableToken = token as TableToken;
+
+        output.push(
+          <CustomTable
+            key={i}
+            header={tableToken.header.map((cell) =>
+              typeof cell === "string" ? cell : parseTokens(cell.tokens || []),
+            )}
+            align={tableToken.align}
+            rows={tableToken.rows.map((row) =>
+              row.map((cell) =>
+                typeof cell === "string"
+                  ? cell
+                  : parseTokens(cell.tokens || []),
+              ),
+            )}
+          />,
+        );
+        break;
+      }
+      case "html":
+        output.push(<CustomHtmlBlock key={i} content={token.text} />);
+        break;
+      case "def":
+      case "space":
+        break;
+      case "strong":
+        output.push(
+          <CustomStrong key={i}>
+            {parseTokens(token.tokens || [])}
+          </CustomStrong>,
+        );
+        break;
+      case "em":
+        output.push(
+          <CustomEm key={i}>
+            {token.tokens ? parseTokens(token.tokens) : token.text}
+          </CustomEm>,
+        );
+        break;
+
+      case "codespan":
+        output.push(<CustomCodeSpan key={i} code={token.text} />);
+        break;
+
+      case "link":
+        output.push(
+          <CustomLink key={i} href={token.href} title={token.title}>
+            {token.tokens ? parseTokens(token.tokens) : token.text}
+          </CustomLink>,
+        );
+        break;
+
+      case "image":
+        output.push(
+          <CustomImage
+            key={i}
+            href={token.href}
+            title={token.title}
+            text={token.text}
+          />,
+        );
+        break;
+
+      case "text": {
+        const parsedContent = token.tokens
+          ? parseTokens(token.tokens)
+          : token.text;
+
+        if (blockquoteContent.length > 0) {
+          blockquoteContent.push(
+            <React.Fragment key={i}>{parsedContent}</React.Fragment>,
+          );
+        } else {
+          output.push(<CustomText key={i} text={parsedContent} />);
+        }
+        break;
+      }
+      default:
+        console.warn("Unhandled token type:", token.type, token);
+    }
+  });
+
+  return output;
+}
+
+export function renderMessageMarkdown(markdown: string): JSX.Element[] {
+  marked.setOptions({
+    breaks: true,
+    gfm: true,
+    silent: false,
+    async: true,
+  });
+
+  const tokens = marked.lexer(domPurify(markdown));
+  return parseTokens(tokens);
+}
--- a/packages/client/src/components/chat/messages/MessageMarkdownRenderer.tsx
+++ b/packages/client/src/components/chat/messages/MessageMarkdownRenderer.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import {renderMessageMarkdown} from "./MessageMarkdown";
+
+interface CustomMarkdownRendererProps {
+  markdown: string;
+}
+
+const MessageMarkdownRenderer: React.FC<CustomMarkdownRendererProps> = ({
+  markdown,
+}) => {
+  return <div>{renderMessageMarkdown(markdown)}</div>;
+};
+
+export default MessageMarkdownRenderer;
--- a/packages/client/src/components/chat/messages/MotionBox.tsx
+++ b/packages/client/src/components/chat/messages/MotionBox.tsx
@@ -0,0 +1,4 @@
+import {motion} from "framer-motion";
+import {Box} from "@chakra-ui/react";
+
+export default motion(Box);
--- a/packages/client/src/components/chat/messages/UserMessageTools.tsx
+++ b/packages/client/src/components/chat/messages/UserMessageTools.tsx
@@ -0,0 +1,34 @@
+import { observer } from "mobx-react-lite";
+import { IconButton } from "@chakra-ui/react";
+import { Edit2Icon } from "lucide-react";
+
+const UserMessageTools = observer(({ disabled = false, message, onEdit }) => (
+  <IconButton
+    bg="transparent"
+    color="text.primary"
+    aria-label="Edit message"
+    title="Edit message"
+    icon={<Edit2Icon size={"1em"} />}
+    onClick={() => onEdit(message)}
+    _active={{
+      bg: "transparent",
+      svg: {
+        stroke: "brand.100",
+        transition: "stroke 0.3s ease-in-out",
+      },
+    }}
+    _hover={{
+      bg: "transparent",
+      svg: {
+        stroke: "accent.secondary",
+        transition: "stroke 0.3s ease-in-out",
+      },
+    }}
+    variant="ghost"
+    size="sm"
+    isDisabled={disabled}
+    _focus={{ boxShadow: "none" }}
+  />
+));
+
+export default UserMessageTools;
--- a/packages/client/src/components/chat/messages/tests/MessageBubble.test.tsx
+++ b/packages/client/src/components/chat/messages/tests/MessageBubble.test.tsx
@@ -0,0 +1,155 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import MessageBubble from '../MessageBubble';
+import messageEditorStore from "../../../../stores/MessageEditorStore";
+
+// Mock browser APIs
+class MockResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+
+// Add ResizeObserver to the global object
+global.ResizeObserver = MockResizeObserver;
+
+// Mock the Message model
+vi.mock('../../../../models/Message', () => ({
+    default: {
+        // This is needed for the Instance<typeof Message> type
+    }
+}));
+
+// Mock the stores
+vi.mock('../../../../stores/ClientChatStore', () => ({
+    default: {
+        items: [],
+        isLoading: false,
+        editMessage: vi.fn().mockReturnValue(true)
+    }
+}));
+
+vi.mock('../../../../stores/UserOptionsStore', () => ({
+    default: {
+        followModeEnabled: false,
+        setFollowModeEnabled: vi.fn()
+    }
+}));
+
+// Mock the MessageEditorStore
+vi.mock('../../../../stores/MessageEditorStore', () => ({
+    default: {
+        editedContent: 'Test message',
+        setEditedContent: vi.fn(),
+        setMessage: vi.fn(),
+        onCancel: vi.fn(),
+        handleSave: vi.fn().mockImplementation(function() {
+            // Use the mocked messageEditorStore from the import
+            messageEditorStore.onCancel();
+            return Promise.resolve();
+        })
+    }
+}));
+
+// Mock the MessageRenderer component
+vi.mock('../ChatMessageContent', () => ({
+    default: ({ content }) => <div data-testid="message-content">{content}</div>
+}));
+
+// Mock the UserMessageTools component
+vi.mock('../UserMessageTools', () => ({
+    default: ({ message, onEdit }) => (
+        <button data-testid="edit-button" onClick={() => onEdit(message)}>
+            Edit
+        </button>
+    )
+}));
+
+vi.mock("../MotionBox", async (importOriginal) => {
+    const actual = await importOriginal()
+
+    return { default: {
+            ...actual.default,
+            div: (props: any) => React.createElement('div', props, props.children),
+            motion: (props: any) => React.createElement('div', props, props.children),
+
+        }
+    }
+});
+
+describe('MessageBubble', () => {
+    const mockScrollRef = { current: { scrollTo: vi.fn() } };
+    const mockUserMessage = {
+        role: 'user',
+        content: 'Test message'
+    };
+    const mockAssistantMessage = {
+        role: 'assistant',
+        content: 'Assistant response'
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should render user message correctly', () => {
+        render(<MessageBubble msg={mockUserMessage} scrollRef={mockScrollRef} />);
+
+        expect(screen.getByText('You')).toBeInTheDocument();
+        expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it('should render assistant message correctly', () => {
+        render(<MessageBubble msg={mockAssistantMessage} scrollRef={mockScrollRef} />);
+
+        expect(screen.getByText("Geoff's AI")).toBeInTheDocument();
+        expect(screen.getByTestId('message-content')).toHaveTextContent('Assistant response');
+    });
+
+    it('should show edit button on hover for user messages', async () => {
+        render(<MessageBubble msg={mockUserMessage} scrollRef={mockScrollRef} />);
+
+        // Simulate hover
+        fireEvent.mouseEnter(screen.getByRole('listitem'));
+
+        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
+    });
+
+    it('should show editor when edit button is clicked', () => {
+        render(<MessageBubble msg={mockUserMessage} scrollRef={mockScrollRef} />);
+
+        // Simulate hover and click edit
+        fireEvent.mouseEnter(screen.getByRole('listitem'));
+        fireEvent.click(screen.getByTestId('edit-button'));
+
+        // Check if the textarea is rendered (part of MessageEditor)
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should hide editor after message is edited and saved', async () => {
+        render(<MessageBubble msg={mockUserMessage} scrollRef={mockScrollRef} />);
+
+        // Show the editor
+        fireEvent.mouseEnter(screen.getByRole('listitem'));
+        fireEvent.click(screen.getByTestId('edit-button'));
+
+        // Verify editor is shown
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+        // Find and click the save button
+        const saveButton = screen.getByLabelText('Save edit');
+        fireEvent.click(saveButton);
+
+        // Wait for the editor to disappear
+        await waitFor(() => {
+            // Check that the editor is no longer visible
+            expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+            // And the message content is visible again
+            expect(screen.getByText('Test message')).toBeInTheDocument();
+        });
+
+        // Verify that handleSave was called
+        expect(messageEditorStore.handleSave).toHaveBeenCalled();
+    });
+});
--- a/packages/client/src/components/chat/messages/tests/MessageEditorComponent.test.tsx
+++ b/packages/client/src/components/chat/messages/tests/MessageEditorComponent.test.tsx
@@ -0,0 +1,164 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import MessageEditor from '../MessageEditorComponent';
+
+// Import the mocked stores
+import clientChatStore from '../../../../stores/ClientChatStore';
+import messageEditorStore from '../../../../stores/MessageEditorStore';
+
+// Mock the Message model
+vi.mock('../../../../models/Message', () => {
+  return {
+    default: {
+      // This is needed for the Instance<typeof Message> type
+    }
+  };
+});
+
+// Mock fetch globally
+globalThis.fetch = vi.fn(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({})
+    })
+);
+
+// Mock the ClientChatStore
+vi.mock('../../../../stores/ClientChatStore', () => {
+  const mockStore = {
+    items: [],
+    removeAfter: vi.fn(),
+    sendMessage: vi.fn(),
+    setIsLoading: vi.fn(),
+    editMessage: vi.fn().mockReturnValue(true)
+  };
+
+  // Add the mockUserMessage to the items array
+  mockStore.items.indexOf = vi.fn().mockReturnValue(0);
+
+  return {
+    default: mockStore
+  };
+});
+
+// Mock the MessageEditorStore
+vi.mock('../../../../stores/MessageEditorStore', () => {
+  const mockStore = {
+    editedContent: 'Test message', // Set initial value to match the test expectation
+    message: null,
+    setEditedContent: vi.fn(),
+    setMessage: vi.fn((message) => {
+      mockStore.message = message;
+      mockStore.editedContent = message.content;
+    }),
+    onCancel: vi.fn(),
+    handleSave: vi.fn()
+  };
+
+  return {
+    default: mockStore
+  };
+});
+
+describe('MessageEditor', () => {
+  // Create a message object with a setContent method
+  const mockUserMessage = { 
+    content: 'Test message', 
+    role: 'user',
+    setContent: vi.fn()
+  };
+  const mockOnCancel = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render with the message content', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveValue('Test message');
+    expect(messageEditorStore.setMessage).toHaveBeenCalledWith(mockUserMessage);
+  });
+
+  it('should update the content when typing', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.change(textarea, { target: { value: 'Updated message' } });
+
+    expect(messageEditorStore.setEditedContent).toHaveBeenCalledWith('Updated message');
+  });
+
+  it('should call handleSave when save button is clicked', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel}/>);
+
+    const saveButton = screen.getByLabelText('Save edit');
+    fireEvent.click(saveButton);
+
+    expect(messageEditorStore.handleSave).toHaveBeenCalled();
+  });
+
+  it('should call onCancel when cancel button is clicked', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const cancelButton = screen.getByLabelText('Cancel edit');
+    fireEvent.click(cancelButton);
+
+    expect(messageEditorStore.onCancel).toHaveBeenCalled();
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('should call handleSave when Ctrl+Enter is pressed', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true });
+
+    expect(messageEditorStore.handleSave).toHaveBeenCalled();
+  });
+
+  it('should call handleSave when Meta+Enter is pressed', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
+
+    expect(messageEditorStore.handleSave).toHaveBeenCalled();
+  });
+
+  it('should call onCancel when Escape is pressed', () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    const textarea = screen.getByRole('textbox');
+    fireEvent.keyDown(textarea, { key: 'Escape' });
+
+    expect(messageEditorStore.onCancel).toHaveBeenCalled();
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('should call handleSave and onCancel when saving the message', async () => {
+    render(<MessageEditor message={mockUserMessage} onCancel={mockOnCancel} />);
+
+    // Find and click the save button
+    const saveButton = screen.getByLabelText('Save edit');
+    fireEvent.click(saveButton);
+
+    // Verify that handleSave was called
+    expect(messageEditorStore.handleSave).toHaveBeenCalled();
+
+    // In the real implementation, handleSave calls onCancel at the end
+    // Let's simulate that behavior for this test
+    messageEditorStore.onCancel.mockImplementation(() => {
+      mockOnCancel();
+    });
+
+    // Call onCancel to simulate what happens in the real implementation
+    messageEditorStore.onCancel();
+
+    // Verify that onCancel was called
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+});
--- a/packages/client/src/components/code/CodeBlock.tsx
+++ b/packages/client/src/components/code/CodeBlock.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { buildCodeHighlighter } from "./CodeHighlighter";
+
+interface CodeBlockProps {
+  language: string;
+  code: string;
+  onRenderComplete: () => void;
+}
+
+const highlighter = buildCodeHighlighter();
+
+const CodeBlock: React.FC<CodeBlockProps> = ({
+  language,
+  code,
+  onRenderComplete,
+}) => {
+  const [html, setHtml] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const highlightCode = useCallback(async () => {
+    try {
+      const highlighted = (await highlighter).codeToHtml(code, {
+        lang: language,
+        theme: "github-dark",
+      });
+      setHtml(highlighted);
+    } catch (error) {
+      console.error("Error highlighting code:", error);
+      setHtml(`<pre>${code}</pre>`);
+    } finally {
+      setLoading(false);
+      onRenderComplete();
+    }
+  }, [language, code, onRenderComplete]);
+
+  useEffect(() => {
+    highlightCode();
+  }, [highlightCode]);
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          backgroundColor: "#24292e",
+          padding: "10px",
+          borderRadius: "1.5em",
+        }}
+      >
+        Loading code...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: html }}
+      style={{
+        transition: "none",
+        padding: 20,
+        backgroundColor: "#24292e",
+        overflowX: "auto",
+        borderRadius: ".37em",
+        fontSize: ".75rem",
+      }}
+    />
+  );
+};
+
+export default React.memo(CodeBlock);
--- a/packages/client/src/components/code/CodeHighlighter.ts
+++ b/packages/client/src/components/code/CodeHighlighter.ts
@@ -0,0 +1,75 @@
+import { createHighlighterCore } from "shiki";
+
+export async function buildCodeHighlighter() {
+  const [
+    githubDark,
+    html,
+    javascript,
+    jsx,
+    typescript,
+    tsx,
+    go,
+    rust,
+    python,
+    java,
+    kotlin,
+    shell,
+    sql,
+    yaml,
+    toml,
+    markdown,
+    json,
+    xml,
+    zig,
+    wasm,
+  ] = await Promise.all([
+    import("shiki/themes/github-dark.mjs"),
+    import("shiki/langs/html.mjs"),
+    import("shiki/langs/javascript.mjs"),
+    import("shiki/langs/jsx.mjs"),
+    import("shiki/langs/typescript.mjs"),
+    import("shiki/langs/tsx.mjs"),
+    import("shiki/langs/go.mjs"),
+    import("shiki/langs/rust.mjs"),
+    import("shiki/langs/python.mjs"),
+    import("shiki/langs/java.mjs"),
+    import("shiki/langs/kotlin.mjs"),
+    import("shiki/langs/shell.mjs"),
+    import("shiki/langs/sql.mjs"),
+    import("shiki/langs/yaml.mjs"),
+    import("shiki/langs/toml.mjs"),
+    import("shiki/langs/markdown.mjs"),
+    import("shiki/langs/json.mjs"),
+    import("shiki/langs/xml.mjs"),
+    import("shiki/langs/zig.mjs"),
+    import("shiki/wasm"),
+  ]);
+
+  // Create the highlighter instance with the loaded themes and languages
+  const instance = await createHighlighterCore({
+    themes: [githubDark], // Set the Base_theme
+    langs: [
+      html,
+      javascript,
+      jsx,
+      typescript,
+      tsx,
+      go,
+      rust,
+      python,
+      java,
+      kotlin,
+      shell,
+      sql,
+      yaml,
+      toml,
+      markdown,
+      json,
+      xml,
+      zig,
+    ],
+    loadWasm: wasm, // Ensure correct loading of WebAssembly
+  });
+
+  return instance;
+}
--- a/packages/client/src/components/connect/ConnectComponent.tsx
+++ b/packages/client/src/components/connect/ConnectComponent.tsx
@@ -0,0 +1,169 @@
+import React from "react";
+import {
+  Alert,
+  AlertIcon,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Link,
+  List,
+  ListItem,
+} from "@chakra-ui/react";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { Fragment, useState } from "react";
+
+function ConnectComponent() {
+  const [formData, setFormData] = useState({
+    markdown: "",
+    email: "",
+    firstname: "",
+    lastname: "",
+  });
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [validationError, setValidationError] = useState("");
+
+  const handleChange = (field: string) => (value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setIsSubmitted(false);
+    setValidationError("");
+  };
+
+  const handleSubmitButton = async () => {
+    setValidationError("");
+
+    if (!formData.email || !formData.firstname || !formData.markdown) {
+      setValidationError("Please fill in all required fields.");
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/contact", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        setIsSubmitted(true);
+        setIsError(false);
+        setFormData({
+          markdown: "",
+          email: "",
+          firstname: "",
+          lastname: "",
+        });
+      } else {
+        setIsError(true);
+      }
+    } catch (error) {
+      setIsError(true);
+    }
+  };
+
+  return (
+    <Fragment>
+      <List color="text.primary" mb={4}>
+        <ListItem>
+          Email:{" "}
+          <Link href="mailto:geoff@seemueller.io" color="teal.500">
+            geoff@seemueller.io
+          </Link>
+        </ListItem>
+      </List>
+      <Box w="100%">
+        <HStack spacing={4} mb={4}>
+          <Input
+            placeholder="First name *"
+            value={formData.firstname}
+            onChange={(e) => handleChange("firstname")(e.target.value)}
+            color="text.primary"
+            borderColor="text.primary"
+          />
+          <Input
+            placeholder="Last name *"
+            value={formData.lastname}
+            onChange={(e) => handleChange("lastname")(e.target.value)}
+            color="text.primary"
+            borderColor="text.primary"
+            // bg="text.primary"
+          />
+        </HStack>
+        <Input
+          placeholder="Email *"
+          value={formData.email}
+          onChange={(e) => handleChange("email")(e.target.value)}
+          mb={4}
+          borderColor="text.primary"
+          color="text.primary"
+        />
+        <MarkdownEditor
+          onChange={handleChange("markdown")}
+          markdown={formData.markdown}
+          placeholder="Your Message..."
+        />
+      </Box>
+      <Button
+        variant="outline"
+        // colorScheme="blackAlpha"
+        onClick={handleSubmitButton}
+        alignSelf="flex-end"
+        size="md"
+        mt={4}
+        mb={4}
+        float="right"
+        _hover={{
+          bg: "",
+          transform: "scale(1.05)",
+        }}
+        _active={{
+          bg: "gray.800",
+          transform: "scale(1)",
+        }}
+      >
+        SEND
+      </Button>
+      <Box mt={12}>
+        {isSubmitted && (
+          <Alert
+            status="success"
+            borderRadius="md"
+            color="text.primary"
+            bg="green.500"
+          >
+            <AlertIcon />
+            Message sent successfully!
+          </Alert>
+        )}
+
+        {isError && (
+          <Alert
+            status="error"
+            borderRadius="md"
+            color="text.primary"
+            bg="red.500"
+          >
+            <AlertIcon />
+            There was an error sending your message. Please try again.
+          </Alert>
+        )}
+        {validationError && (
+          <Alert
+            status="warning"
+            borderRadius="md"
+            color="background.primary"
+            bg="yellow.500"
+          >
+            <AlertIcon />
+            {validationError}
+          </Alert>
+        )}
+      </Box>
+    </Fragment>
+  );
+}
+
+export default ConnectComponent;
--- a/packages/client/src/components/connect/MarkdownEditor.tsx
+++ b/packages/client/src/components/connect/MarkdownEditor.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Textarea } from "@chakra-ui/react";
+
+export const MarkdownEditor = (props: {
+  placeholder: string;
+  markdown: string;
+  onChange: (p: any) => any;
+}) => {
+  return (
+    <Box>
+      <link rel="stylesheet" href="/packages/client/public" media="print" onLoad="this.media='all'" />
+      <Textarea
+        value={props.markdown}
+        placeholder={props.placeholder}
+        onChange={(e) => props.onChange(e.target.value)}
+        width="100%"
+        minHeight="150px"
+        height="100%"
+        resize="none"
+      />
+    </Box>
+  );
+};
--- a/packages/client/src/components/contexts/ChakraContext.tsx
+++ b/packages/client/src/components/contexts/ChakraContext.tsx
@@ -0,0 +1,18 @@
+import {
+  ChakraProvider,
+  cookieStorageManagerSSR,
+  localStorageManager,
+} from "@chakra-ui/react";
+
+export function Chakra({ cookies, children, theme }) {
+  const colorModeManager =
+    typeof cookies === "string"
+      ? cookieStorageManagerSSR("color_state", cookies)
+      : localStorageManager;
+
+  return (
+    <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
+      {children}
+    </ChakraProvider>
+  );
+}
--- a/packages/client/src/components/contexts/MobileContext.tsx
+++ b/packages/client/src/components/contexts/MobileContext.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { useMediaQuery } from "@chakra-ui/react";
+
+// Create the context to provide mobile state
+const MobileContext = createContext(false);
+
+// Create a provider component to wrap your app
+export const MobileProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isFallbackMobile] = useMediaQuery("(max-width: 768px)");
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const mobile =
+      /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+        userAgent.toLowerCase(),
+      );
+    setIsMobile(mobile);
+  }, []);
+
+  // Provide the combined mobile state globally
+  const mobileState = isMobile || isFallbackMobile;
+
+  return (
+    <MobileContext.Provider value={mobileState}>
+      {children}
+    </MobileContext.Provider>
+  );
+};
+
+// Custom hook to use the mobile context in any component
+export function useIsMobile() {
+  return useContext(MobileContext);
+}
+
+export default MobileContext;
--- a/packages/client/src/components/demo/DemoCard.tsx
+++ b/packages/client/src/components/demo/DemoCard.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { Badge, Box, Flex, Heading, Image, Text } from "@chakra-ui/react";
+
+function DemoCard({ icon, title, description, imageUrl, badge, onClick }) {
+  return (
+    <Box
+      bg="background.secondary"
+      borderRadius="md"
+      overflowY="hidden"
+      boxShadow="md"
+      transition="transform 0.2s"
+      _hover={{ transform: "scale(1.05)", cursor: "pointer" }}
+      color="text.primary"
+      onClick={onClick}
+      display="flex"
+      flexDirection="column"
+      minW={"12rem"}
+      maxW={"18rem"}
+      minH={"35rem"}
+      maxH={"20rem"}
+    >
+      {imageUrl && (
+        <Image
+          src={imageUrl}
+          alt={title}
+          objectFit="cover"
+          minH="16rem"
+          maxH="20rem"
+          width="100%"
+        />
+      )}
+      <Flex direction="column" flex="1" p={4}>
+        <Box display="flex" alignItems="center" mb={2}>
+          {icon}
+          <Heading as="h4" size="md" ml={2}>
+            {title}
+          </Heading>
+        </Box>
+        <Text fontSize="sm" flex="1">
+          {description}
+        </Text>
+      </Flex>
+      {badge && (
+        <Box p={2}>
+          <Badge colorScheme={"teal"}>{badge}</Badge>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default DemoCard;
--- a/packages/client/src/components/demo/DemoComponent.tsx
+++ b/packages/client/src/components/demo/DemoComponent.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { SimpleGrid } from "@chakra-ui/react";
+import { Rocket, Shield } from "lucide-react";
+import DemoCard from "./DemoCard";
+
+function DemoComponent() {
+  return (
+    <SimpleGrid
+      columns={{ base: 1, sm: 1, lg: 2 }}
+      spacing={"7%"}
+      minH={"min-content"}
+      h={"100vh"}
+    >
+      <DemoCard
+        icon={<Rocket size={24} color="teal" />}
+        title="toak"
+        description="A tool for turning git repositories into markdown, without their secrets"
+        imageUrl="/code-tokenizer-md.jpg"
+        badge="npm"
+        onClick={() => {
+          window.open("https://github.com/seemueller-io/toak");
+        }}
+      />
+      <DemoCard
+        icon={<Shield size={24} color="teal" />}
+        title="REHOBOAM"
+        description="Explore the latest in AI news around the world in real-time"
+        imageUrl="/rehoboam.png"
+        badge="APP"
+        onClick={() => {
+          window.open("https://rehoboam.seemueller.io");
+        }}
+      />
+    </SimpleGrid>
+  );
+}
+
+export default DemoComponent;
--- a/packages/client/src/components/feedback/FeedbackModal.tsx
+++ b/packages/client/src/components/feedback/FeedbackModal.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useToast,
+  VStack,
+} from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import feedbackState from "../../stores/ClientFeedbackStore";
+
+const FeedbackModal = observer(({ isOpen, onClose, zIndex }) => {
+  const toast = useToast();
+
+  const handleSubmitFeedback = async () => {
+    const success = await feedbackState.submitFeedback();
+
+    if (success) {
+      toast({
+        title: "Feedback Submitted",
+        description: "Thank you for your feedback!",
+        status: "success",
+        duration: 3000,
+        isClosable: true,
+      });
+      feedbackState.reset();
+      onClose();
+    } else if (feedbackState.error) {
+      if (!feedbackState.input.trim() || feedbackState.input.length > 500) {
+        return;
+      }
+
+      toast({
+        title: "Submission Failed",
+        description: feedbackState.error,
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const handleClose = () => {
+    feedbackState.reset();
+    onClose();
+  };
+
+  const charactersRemaining = 500 - (feedbackState.input?.length || 0);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      size="md"
+      motionPreset="slideInBottom"
+      zIndex={zIndex}
+    >
+      <ModalOverlay />
+      <ModalContent bg="gray.800" color="text.primary">
+        <ModalHeader textAlign="center">Feedback</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={4} align="stretch">
+            <Text fontSize="md" textAlign="center">
+              Your thoughts help me improve. Let me know what you think!
+            </Text>
+
+            <Box position="relative">
+              <Textarea
+                placeholder="Type your feedback here..."
+                value={feedbackState.input}
+                onChange={(e) => feedbackState.setInput(e.target.value)}
+                bg="gray.700"
+                color="white"
+                minHeight="120px"
+                resize="vertical"
+              />
+              <Text
+                position="absolute"
+                bottom="2"
+                right="2"
+                fontSize="xs"
+                color={charactersRemaining < 50 ? "orange.300" : "gray.400"}
+              >
+                {charactersRemaining} characters remaining
+              </Text>
+            </Box>
+
+            {feedbackState.error && (
+              <Text color="red.500" fontSize="sm">
+                {feedbackState.error}
+              </Text>
+            )}
+          </VStack>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onClick={handleSubmitFeedback}
+            isLoading={feedbackState.isLoading}
+            colorScheme="teal"
+            mr={3}
+            disabled={feedbackState.isLoading || !feedbackState.input.trim()}
+          >
+            Submit
+          </Button>
+          <Button variant="outline" onClick={handleClose} colorScheme="gray">
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+});
+
+export default FeedbackModal;
--- a/packages/client/src/components/icons/DogecoinIcon.tsx
+++ b/packages/client/src/components/icons/DogecoinIcon.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Box } from "@chakra-ui/react";
+
+const TealDogecoinIcon = (props) => (
+  <Box
+    as="svg"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    boxSize={props.boxSize || "1em"}
+    {...props}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      fill="#008080"
+    />
+    <path
+      d="M12 21.6797C17.3459 21.6797 21.6797 17.3459 21.6797 12C21.6797 6.65405 17.3459 2.32031 12 2.32031C6.65405 2.32031 2.32031 6.65405 2.32031 12C2.32031 17.3459 6.65405 21.6797 12 21.6797Z"
+      fill="#009999"
+    />
+    <path
+      d="M12 21.4757C17.2333 21.4757 21.4758 17.2333 21.4758 12C21.4758 6.76666 17.2333 2.52423 12 2.52423C6.76672 2.52423 2.52429 6.76666 2.52429 12C2.52429 17.2333 6.76672 21.4757 12 21.4757Z"
+      fill="#00CCCC"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.5001 9.54053C16.4888 6.92891 13.9888 6.44507 13.9888 6.44507H6.85606L6.88358 9.10523H8.30406V15.0454H6.85596V17.7007H13.7913C15.4628 17.7007 16.8026 16.0211 16.8026 16.0211C18.9482 12.9758 17.5 9.54053 17.5 9.54053H17.5001ZM13.8285 14.2314C13.8285 14.2314 13.2845 15.0163 12.6927 15.0163H11.5087L11.4806 9.11173H13.0001C13.0001 9.11173 13.7041 9.25894 14.1959 10.6521C14.1959 10.6521 14.848 12.6468 13.8285 14.2314Z"
+      fill="white"
+      fill-opacity="0.8"
+    />
+  </Box>
+);
+
+export default TealDogecoinIcon;
--- a/packages/client/src/components/legal/LegalDoc.tsx
+++ b/packages/client/src/components/legal/LegalDoc.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Box, VStack } from "@chakra-ui/react";
+import {renderMarkdown} from "../markdown/MarkdownComponent";
+
+function LegalDoc({ text }) {
+  return (
+    <Box maxWidth="800px" margin="0 auto">
+      <VStack spacing={6} align="stretch">
+        <Box
+          color="text.primary"
+          wordBreak="break-word"
+          whiteSpace="pre-wrap"
+          spacing={4}
+        >
+            {renderMarkdown(text)}
+        </Box>
+      </VStack>
+    </Box>
+  );
+}
+
+export default LegalDoc;
--- a/packages/client/src/components/markdown/ImageWithFallback.tsx
+++ b/packages/client/src/components/markdown/ImageWithFallback.tsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { Image, Box, Spinner, Text, Flex } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+
+const shimmer = keyframes`
+    0% { background-position: -100% 0; }
+    100% { background-position: 100% 0; }
+`;
+
+const ImageWithFallback = ({
+  alt,
+  src,
+  fallbackSrc = "/fallback.png",
+  ...props
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const isSlowLoadingSource = src.includes("text2image.seemueller.io");
+
+  const handleImageLoad = () => setIsLoading(false);
+  const handleImageError = () => {
+    setIsLoading(false);
+    props.onError?.();
+  };
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, [src]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY;
+      setScrollPosition(scrolled);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const parallaxOffset = scrollPosition * 0.2;
+
+  return (
+    <Box
+      position="relative"
+      w="full"
+      maxW="full"
+      borderRadius="md"
+      my={2}
+      overflow="hidden"
+    >
+      {isLoading && isSlowLoadingSource && (
+        <Flex
+          align="center"
+          justify="center"
+          direction="column"
+          w="full"
+          h="300px"
+          borderRadius="md"
+          bg="background.secondary"
+          backgroundImage="linear-gradient(90deg, rgba(51,51,51,0.2) 25%, rgba(34,34,34,0.4) 50%, rgba(51,51,51,0.2) 75%)"
+          backgroundSize="200% 100%"
+          animation={`${shimmer} 1.5s infinite`}
+        >
+          <Spinner size="xl" color="blue.500" mb={4} />
+          <Text fontSize="lg" color="gray.600">
+            Generating...
+          </Text>
+        </Flex>
+      )}
+      <Image
+        src={src}
+        alt={alt}
+        fallbackSrc={fallbackSrc}
+        onLoad={handleImageLoad}
+        onError={handleImageError}
+        display={isLoading ? "none" : "block"}
+        transform={`translateY(${parallaxOffset}px)`}
+        transition="transform 0.1s ease-out"
+        {...props}
+      />
+    </Box>
+  );
+};
+
+export default ImageWithFallback;
--- a/packages/client/src/components/markdown/MarkdownComponent.tsx
+++ b/packages/client/src/components/markdown/MarkdownComponent.tsx
@@ -0,0 +1,576 @@
+import React from "react";
+
+import {
+    Box,
+    Code,
+    Divider,
+    Heading,
+    Link,
+    List,
+    ListItem,
+    OrderedList,
+    Table,
+    Tbody,
+    Td,
+    Text,
+    Th,
+    Thead,
+    Tr,
+    useColorModeValue,
+} from "@chakra-ui/react";
+import {marked} from "marked";
+
+import markedKatex from "marked-katex-extension";
+import katex from "katex";
+import CodeBlock from "../code/CodeBlock";
+import ImageWithFallback from "./ImageWithFallback";
+
+try {
+    if (localStorage) {
+        marked.use(
+            markedKatex({
+                nonStandard: false,
+                displayMode: true,
+                throwOnError: false,
+                strict: true,
+                colorIsTextColor: true,
+                errorColor: "red",
+            }),
+        );
+    }
+} catch (_) {
+}
+
+const MemoizedCodeBlock = React.memo(CodeBlock);
+
+const getHeadingProps = (depth: number) => {
+    switch (depth) {
+        case 1:
+            return {as: "h1", size: "xl", mt: 4, mb: 2};
+        case 2:
+            return {as: "h2", size: "lg", mt: 3, mb: 2};
+        case 3:
+            return {as: "h3", size: "md", mt: 2, mb: 1};
+        case 4:
+            return {as: "h4", size: "sm", mt: 2, mb: 1};
+        case 5:
+            return {as: "h5", size: "sm", mt: 2, mb: 1};
+        case 6:
+            return {as: "h6", size: "xs", mt: 2, mb: 1};
+        default:
+            return {as: `h${depth}`, size: "md", mt: 2, mb: 1};
+    }
+};
+
+interface TableToken extends marked.Tokens.Table {
+    align: Array<"center" | "left" | "right" | null>;
+    header: (string | marked.Tokens.TableCell)[];
+    rows: (string | marked.Tokens.TableCell)[][];
+}
+
+const CustomHeading: React.FC<{ text: string; depth: number }> = ({
+                                                                      text,
+                                                                      depth,
+                                                                  }) => {
+    const headingProps = getHeadingProps(depth);
+    return (
+        <Heading
+            {...headingProps}
+            wordBreak="break-word"
+            maxWidth="100%"
+            color="text.accent"
+        >
+            {text}
+        </Heading>
+    );
+};
+
+const CustomParagraph: React.FC<{ children: React.ReactNode }> = ({
+                                                                      children,
+                                                                  }) => {
+    return (
+        <Text
+            as="p"
+            fontSize="sm"
+            lineHeight="short"
+            wordBreak="break-word"
+            maxWidth="100%"
+        >
+            {children}
+        </Text>
+    );
+};
+
+const CustomBlockquote: React.FC<{ children: React.ReactNode }> = ({
+                                                                       children,
+                                                                   }) => {
+    return (
+        <Box
+            as="blockquote"
+            borderLeft="4px solid"
+            borderColor="gray.200"
+            fontStyle="italic"
+            color="gray.600"
+            pl={4}
+            maxWidth="100%"
+            wordBreak="break-word"
+            mb={2}
+        >
+            {children}
+        </Box>
+    );
+};
+
+const CustomCodeBlock: React.FC<{ code: string; language?: string }> = ({
+                                                                            code,
+                                                                            language,
+                                                                        }) => {
+    return (
+        <MemoizedCodeBlock
+            language={language}
+            code={code}
+            onRenderComplete={() => Promise.resolve()}
+        />
+    );
+};
+
+const CustomHr: React.FC = () => <Divider my={4}/>;
+
+const CustomList: React.FC<{
+    ordered?: boolean;
+    start?: number;
+    children: React.ReactNode;
+}> = ({ordered, start, children}) => {
+    const commonStyles = {
+        fontSize: "sm",
+        wordBreak: "break-word" as const,
+        maxWidth: "100%" as const,
+        stylePosition: "outside" as const,
+        mb: 2,
+        pl: 4,
+    };
+
+    return ordered ? (
+        <OrderedList start={start} {...commonStyles}>
+            {children}
+        </OrderedList>
+    ) : (
+        <List styleType="disc" {...commonStyles}>
+            {children}
+        </List>
+    );
+};
+
+const CustomListItem: React.FC<{
+    children: React.ReactNode;
+}> = ({children}) => {
+    return <ListItem mb={1}>{children}</ListItem>;
+};
+
+const CustomKatex: React.FC<{ math: string; displayMode: boolean }> = ({
+                                                                           math,
+                                                                           displayMode,
+                                                                       }) => {
+    const renderedMath = katex.renderToString(math, {displayMode});
+
+    return (
+        <Box
+            as="span"
+            display={displayMode ? "block" : "inline"}
+            // bg={bg}
+            p={displayMode ? 4 : 1}
+            my={displayMode ? 4 : 0}
+            borderRadius="md"
+            overflow="auto"
+            maxWidth="100%"
+            dangerouslySetInnerHTML={{__html: renderedMath}}
+        />
+    );
+};
+
+const CustomTable: React.FC<{
+    header: React.ReactNode[];
+    align: Array<"center" | "left" | "right" | null>;
+    rows: React.ReactNode[][];
+}> = ({header, align, rows}) => {
+    return (
+        <Table
+            variant="simple"
+            size="sm"
+            my={4}
+            borderRadius="md"
+            overflow="hidden"
+        >
+            <Thead bg="background.secondary">
+                <Tr>
+                    {header.map((cell, i) => (
+                        <Th
+                            key={i}
+                            textAlign={align[i] || "left"}
+                            fontWeight="bold"
+                            p={2}
+                            minW={16}
+                            wordBreak="break-word"
+                        >
+                            {cell}
+                        </Th>
+                    ))}
+                </Tr>
+            </Thead>
+            <Tbody>
+                {rows.map((row, rIndex) => (
+                    <Tr key={rIndex}>
+                        {row.map((cell, cIndex) => (
+                            <Td
+                                key={cIndex}
+                                textAlign={align[cIndex] || "left"}
+                                p={2}
+                                wordBreak="break-word"
+                            >
+                                {cell}
+                            </Td>
+                        ))}
+                    </Tr>
+                ))}
+            </Tbody>
+        </Table>
+    );
+};
+
+const CustomHtmlBlock: React.FC<{ content: string }> = ({content}) => {
+    return <Box as="span" display="inline" dangerouslySetInnerHTML={{__html: content}} mb={2}/>;
+};
+
+const CustomText: React.FC<{ text: React.ReactNode }> = ({text}) => {
+    return (
+        <Text
+            fontSize="sm"
+            lineHeight="short"
+            color="text.accent"
+            wordBreak="break-word"
+            maxWidth="100%"
+            as="span"
+        >
+            {text}
+        </Text>
+    );
+};
+
+interface CustomStrongProps {
+    children: React.ReactNode;
+}
+
+const CustomStrong: React.FC<CustomStrongProps> = ({children}) => {
+    return <Text as="strong">{children}</Text>;
+};
+
+const CustomEm: React.FC<{ children: React.ReactNode }> = ({children}) => {
+    return (
+        <Text
+            as="em"
+            fontStyle="italic"
+            lineHeight="short"
+            wordBreak="break-word"
+            display="inline"
+        >
+            {children}
+        </Text>
+    );
+};
+
+const CustomDel: React.FC<{ text: string }> = ({text}) => {
+    return (
+        <Text
+            as="del"
+            textDecoration="line-through"
+            lineHeight="short"
+            wordBreak="break-word"
+            display="inline"
+        >
+            {text}
+        </Text>
+    );
+};
+
+const CustomCodeSpan: React.FC<{ code: string }> = ({code}) => {
+    const bg = useColorModeValue("gray.100", "gray.800");
+    return (
+        <Code
+            fontSize="sm"
+            bg={bg}
+            overflowX="clip"
+            borderRadius="md"
+            wordBreak="break-word"
+            maxWidth="100%"
+            p={0.5}
+        >
+            {code}
+        </Code>
+    );
+};
+
+const CustomMath: React.FC<{ math: string; displayMode?: boolean }> = ({
+                                                                           math,
+                                                                           displayMode = false,
+                                                                       }) => {
+    return (
+        <Box
+            as="span"
+            display={displayMode ? "block" : "inline"}
+            p={displayMode ? 4 : 1}
+            my={displayMode ? 4 : 0}
+            borderRadius="md"
+            overflow="auto"
+            maxWidth="100%"
+            className={`math ${displayMode ? "math-display" : "math-inline"}`}
+        >
+            {math}
+        </Box>
+    );
+};
+
+const CustomLink: React.FC<{
+    href: string;
+    title?: string;
+    children: React.ReactNode;
+}> = ({href, title, children, ...props}) => {
+    return (
+        <Link
+            href={href}
+            title={title}
+            isExternal
+            sx={{
+                "& span": {
+                    color: "text.link",
+                },
+            }}
+            maxWidth="100%"
+            color="teal.500"
+            wordBreak="break-word"
+            {...props}
+        >
+            {children}
+        </Link>
+    );
+};
+
+const CustomImage: React.FC<{ href: string; text: string; title?: string }> = ({
+                                                                                   href,
+                                                                                   text,
+                                                                                   title,
+                                                                               }) => {
+    return (
+        <ImageWithFallback
+            src={href}
+            alt={text}
+            title={title}
+            maxW="100%"
+            width="auto"
+            height="auto"
+            my={2}
+        />
+    );
+};
+
+function parseTokens(tokens: marked.Token[]): JSX.Element[] {
+    const output: JSX.Element[] = [];
+    let blockquoteContent: JSX.Element[] = [];
+
+    tokens.forEach((token, i) => {
+        switch (token.type) {
+            case "heading":
+                output.push(
+                    <CustomHeading key={i} text={token.text} depth={token.depth}/>,
+                );
+                break;
+
+            case "paragraph": {
+                const parsedContent = token.tokens
+                    ? parseTokens(token.tokens)
+                    : token.text;
+                if (blockquoteContent.length > 0) {
+                    blockquoteContent.push(
+                        <CustomParagraph key={i}>{parsedContent}</CustomParagraph>,
+                    );
+                } else {
+                    output.push(
+                        <CustomParagraph key={i}>{parsedContent}</CustomParagraph>,
+                    );
+                }
+                break;
+            }
+            case "br":
+                output.push(<br key={i}/>);
+                break;
+            case "escape": {
+                break;
+            }
+            case "blockquote_start":
+                blockquoteContent = [];
+                break;
+
+            case "blockquote_end":
+                output.push(
+                    <CustomBlockquote key={i}>
+                        {parseTokens(blockquoteContent)}
+                    </CustomBlockquote>,
+                );
+                blockquoteContent = [];
+                break;
+            case "blockquote": {
+                output.push(
+                    <CustomBlockquote key={i}>
+                        {token.tokens ? parseTokens(token.tokens) : null}
+                    </CustomBlockquote>,
+                );
+                break;
+            }
+            case "math":
+                output.push(
+                    <CustomMath key={i} math={(token as any).value} displayMode={true}/>,
+                );
+                break;
+
+            case "inlineMath":
+                output.push(
+                    <CustomMath
+                        key={i}
+                        math={(token as any).value}
+                        displayMode={false}
+                    />,
+                );
+                break;
+            case "inlineKatex":
+            case "blockKatex": {
+                const katexToken = token as any;
+                output.push(
+                    <CustomKatex
+                        key={i}
+                        math={katexToken.text}
+                        displayMode={katexToken.displayMode}
+                    />,
+                );
+                break;
+            }
+            case "code":
+                output.push(
+                    <CustomCodeBlock key={i} code={token.text} language={token.lang}/>,
+                );
+                break;
+
+            case "hr":
+                output.push(<CustomHr key={i}/>);
+                break;
+            case "list": {
+                const {ordered, start, items} = token;
+                const listItems = items.map((listItem, idx) => {
+                    const nestedContent = parseTokens(listItem.tokens);
+                    return <CustomListItem key={idx}>{nestedContent}</CustomListItem>;
+                });
+
+                output.push(
+                    <CustomList key={i} ordered={ordered} start={start}>
+                        {listItems}
+                    </CustomList>,
+                );
+                break;
+            }
+            case "table": {
+                const tableToken = token as TableToken;
+
+                output.push(
+                    <CustomTable
+                        key={i}
+                        header={tableToken.header.map((cell) =>
+                            typeof cell === "string" ? cell : parseTokens(cell.tokens || []),
+                        )}
+                        align={tableToken.align}
+                        rows={tableToken.rows.map((row) =>
+                            row.map((cell) =>
+                                typeof cell === "string"
+                                    ? cell
+                                    : parseTokens(cell.tokens || []),
+                            ),
+                        )}
+                    />,
+                );
+                break;
+            }
+            case "html":
+                output.push(<CustomHtmlBlock key={i} content={token.text}/>);
+                break;
+            case "def":
+            case "space":
+                break;
+            case "strong":
+                output.push(
+                    <CustomStrong key={i}>
+                        {parseTokens(token.tokens || [])}
+                    </CustomStrong>,
+                );
+                break;
+            case "em":
+                output.push(
+                    <CustomEm key={i}>
+                        {token.tokens ? parseTokens(token.tokens) : token.text}
+                    </CustomEm>,
+                );
+                break;
+
+            case "codespan":
+                output.push(<CustomCodeSpan key={i} code={token.text}/>);
+                break;
+
+            case "link":
+                output.push(
+                    <CustomLink key={i} href={token.href} title={token.title}>
+                        {token.tokens ? parseTokens(token.tokens) : token.text}
+                    </CustomLink>,
+                );
+                break;
+
+            case "image":
+                output.push(
+                    <CustomImage
+                        key={i}
+                        href={token.href}
+                        title={token.title}
+                        text={token.text}
+                    />,
+                );
+                break;
+
+            case "text": {
+                const parsedContent = token.tokens
+                    ? parseTokens(token.tokens)
+                    : token.text;
+
+                if (blockquoteContent.length > 0) {
+                    blockquoteContent.push(
+                        <React.Fragment key={i}>{parsedContent}</React.Fragment>,
+                    );
+                } else {
+                    output.push(<CustomText key={i} text={parsedContent}/>);
+                }
+                break;
+            }
+
+            default:
+                console.warn("Unhandled token type:", token.type, token);
+        }
+    });
+
+    return output;
+}
+
+export function renderMarkdown(markdown: string): JSX.Element[] {
+    marked.setOptions({
+        breaks: true,
+        gfm: true,
+        silent: false,
+        async: true,
+    });
+
+    const tokens = marked.lexer(markdown);
+    return parseTokens(tokens);
+}
--- a/packages/client/src/components/resume/ResumeComponent.tsx
+++ b/packages/client/src/components/resume/ResumeComponent.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from "react";
+import { Box, Flex, useMediaQuery } from "@chakra-ui/react";
+import { resumeData } from "../../static-data/resume_data";
+import SectionContent from "./SectionContent";
+import SectionButton from "./SectionButton";
+
+const sections = ["professionalSummary", "skills", "experience", "education"];
+
+export default function ResumeComponent() {
+  const [activeSection, setActiveSection] = React.useState(
+    "professionalSummary",
+  );
+  const [isMobile] = useMediaQuery("(max-width: 1243px)");
+
+  const handleSectionClick = useCallback((section) => {
+    setActiveSection(section);
+  }, []);
+
+  const capitalizeFirstLetter = useCallback((word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  }, []);
+
+  const sectionButtons = useMemo(
+    () =>
+      sections.map((section) => (
+        <SectionButton
+          key={section}
+          onClick={() => handleSectionClick(section)}
+          activeSection={activeSection}
+          section={section}
+          mobile={isMobile}
+          callbackfn={capitalizeFirstLetter}
+        />
+      )),
+    [activeSection, isMobile, handleSectionClick, capitalizeFirstLetter],
+  );
+
+  return (
+    <Box p={"unset"}>
+      <Flex
+        direction={isMobile ? "column" : "row"}
+        mb={8}
+        wrap="nowrap"
+        gap={isMobile ? 2 : 4}
+        minWidth="0"
+      >
+        {sectionButtons}
+      </Flex>
+      <Box
+        bg="background.secondary"
+        color="text.primary"
+        borderRadius="md"
+        boxShadow="md"
+        borderWidth={1}
+        borderColor="brand.300"
+        minHeight="300px"
+      >
+        <SectionContent activeSection={activeSection} resumeData={resumeData} />
+      </Box>
+    </Box>
+  );
+}
--- a/packages/client/src/components/resume/SectionButton.tsx
+++ b/packages/client/src/components/resume/SectionButton.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Button } from "@chakra-ui/react";
+import { ChevronRight } from "lucide-react";
+
+function SectionButton(props: {
+  onClick: () => void;
+  activeSection: string;
+  section: string;
+  mobile: boolean;
+  callbackfn: (word) => string;
+}) {
+  return (
+    <Button
+      mt={1}
+      onClick={props.onClick}
+      variant={props.activeSection === props.section ? "solid" : "outline"}
+      colorScheme="brand"
+      rightIcon={<ChevronRight size={16} />}
+      size="md"
+      width={props.mobile ? "100%" : "auto"}
+    >
+      {props.section
+        .replace(/([A-Z])/g, " $1")
+        .trim()
+        .split(" ")
+        .map(props.callbackfn)
+        .join(" ")}
+    </Button>
+  );
+}
+
+export default SectionButton;
--- a/packages/client/src/components/resume/SectionContent.tsx
+++ b/packages/client/src/components/resume/SectionContent.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import {
+  Box,
+  Grid,
+  GridItem,
+  Heading,
+  ListItem,
+  Text,
+  UnorderedList,
+  VStack,
+} from "@chakra-ui/react";
+
+const fontSize = "md";
+
+const ProfessionalSummary = ({ professionalSummary }) => (
+  <Box>
+    <Grid
+      templateColumns="1fr"
+      gap={4}
+      maxW={["100%", "100%", "100%"]}
+      mx="auto"
+      className="about-container"
+    >
+      <GridItem
+        colSpan={1}
+        maxW={["100%", "100%", "container.md"]}
+        justifySelf="center"
+        minH={"100%"}
+      >
+        <Grid templateColumns="1fr" gap={4} overflowY={"auto"}>
+          <GridItem>
+            <Text fontSize="md">{professionalSummary}</Text>
+          </GridItem>
+        </Grid>
+      </GridItem>
+    </Grid>
+  </Box>
+);
+
+const Skills = ({ skills }) => (
+  <VStack align={"baseline"} spacing={6} mb={4}>
+    <UnorderedList spacing={2} mb={0}>
+      <Box>
+        {skills?.map((skill, index) => (
+          <ListItem p={1} key={index}>
+            {skill}
+          </ListItem>
+        ))}
+      </Box>
+    </UnorderedList>
+  </VStack>
+);
+
+const Experience = ({ experience }) => (
+  <VStack align="start" spacing={6} mb={4}>
+    {experience?.map((job, index) => (
+      <Box key={index} width="100%">
+        <Heading as="h3" size="md" mb={2}>
+          {job.title}
+        </Heading>
+        <Text fontWeight="bold">{job.company}</Text>
+        <Text color="gray.500" mb={2}>
+          {job.timeline}
+        </Text>
+        <Text>{job.description}</Text>
+      </Box>
+    ))}
+  </VStack>
+);
+
+const Education = ({ education }) => (
+  <UnorderedList spacing={2} mb={4}>
+    {education?.map((edu, index) => <ListItem key={index}>{edu}</ListItem>)}
+  </UnorderedList>
+);
+
+const SectionContent = ({ activeSection, resumeData }) => {
+  const components = {
+    professionalSummary: ProfessionalSummary,
+    skills: Skills,
+    experience: Experience,
+    education: Education,
+  };
+
+  const ActiveComponent = components[activeSection];
+
+  return (
+    <Box p={4} minHeight="300px" width="100%">
+      {ActiveComponent ? (
+        <ActiveComponent {...resumeData} />
+      ) : (
+        <Text>Select a section to view details.</Text>
+      )}
+    </Box>
+  );
+};
+
+export default SectionContent;
--- a/packages/client/src/components/services/ServicesComponent.tsx
+++ b/packages/client/src/components/services/ServicesComponent.tsx
@@ -0,0 +1,64 @@
+// ServicesComponent.js
+import React, { useCallback, useMemo } from "react";
+import { Box, Flex, useMediaQuery } from "@chakra-ui/react";
+import { servicesData } from "../../static-data/services_data";
+import SectionButton from "../resume/SectionButton";
+import ServicesSectionContent from "./ServicesComponentSection";
+
+const sections = ["servicesOverview", "offerings"];
+
+export default function ServicesComponent() {
+  const [activeSection, setActiveSection] = React.useState("servicesOverview");
+  const [isMobile] = useMediaQuery("(max-width: 1243px)");
+
+  const handleSectionClick = useCallback((section) => {
+    setActiveSection(section);
+  }, []);
+
+  const capitalizeFirstLetter = useCallback((word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  }, []);
+
+  const sectionButtons = useMemo(
+    () =>
+      sections.map((section) => (
+        <SectionButton
+          key={section}
+          onClick={() => handleSectionClick(section)}
+          activeSection={activeSection}
+          section={section}
+          mobile={isMobile}
+          callbackfn={capitalizeFirstLetter}
+        />
+      )),
+    [activeSection, isMobile, handleSectionClick, capitalizeFirstLetter],
+  );
+
+  return (
+    <Box p={"unset"}>
+      <Flex
+        direction={isMobile ? "column" : "row"}
+        mb={8}
+        wrap="nowrap"
+        gap={isMobile ? 2 : 4}
+        minWidth="0" // Ensures flex items can shrink if needed
+      >
+        {sectionButtons}
+      </Flex>
+      <Box
+        bg="background.secondary"
+        color="text.primary"
+        borderRadius="md"
+        boxShadow="md"
+        borderWidth={1}
+        borderColor="brand.300"
+        minHeight="300px"
+      >
+        <ServicesSectionContent
+          activeSection={activeSection}
+          data={servicesData}
+        />
+      </Box>
+    </Box>
+  );
+}
--- a/packages/client/src/components/services/ServicesComponentSection.tsx
+++ b/packages/client/src/components/services/ServicesComponentSection.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { Box, Heading, Text, VStack } from "@chakra-ui/react";
+
+const ServicesOverview = ({ servicesOverview }) => (
+  <Text fontSize="md">{servicesOverview}</Text>
+);
+
+const Offerings = ({ offerings }) => (
+  <VStack align="start" spacing={6} mb={4}>
+    {offerings.map((service, index) => (
+      <Box key={index}>
+        <Heading as="h3" size="md" mb={2}>
+          {service.title}
+        </Heading>
+        <Text mb={4}>{service.description}</Text>
+      </Box>
+    ))}
+  </VStack>
+);
+
+const ServicesSectionContent = ({ activeSection, data }) => {
+  const components = {
+    servicesOverview: ServicesOverview,
+    offerings: Offerings,
+  };
+
+  const ActiveComponent = components[activeSection];
+
+  return (
+    <Box p={4} minHeight="300px" width="100%">
+      {ActiveComponent ? (
+        <ActiveComponent {...data} />
+      ) : (
+        <Text>Select a section to view details.</Text>
+      )}
+    </Box>
+  );
+};
+
+export default ServicesSectionContent;
--- a/packages/client/src/components/toolbar/GithubButton.tsx
+++ b/packages/client/src/components/toolbar/GithubButton.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { IconButton } from "@chakra-ui/react";
+import { Github } from "lucide-react";
+import { toolbarButtonZIndex } from "./Toolbar";
+
+export default function GithubButton() {
+  return (
+    <IconButton
+      as="a"
+      href="https://github.com/geoffsee"
+      target="_blank"
+      aria-label="GitHub"
+      icon={<Github />}
+      size="md"
+      bg="transparent"
+      stroke="text.accent"
+      color="text.accent"
+      _hover={{
+        bg: "transparent",
+        svg: {
+          stroke: "accent.secondary",
+          transition: "stroke 0.3s ease-in-out",
+        },
+      }}
+      title="GitHub"
+      zIndex={toolbarButtonZIndex}
+    />
+  );
+}
--- a/packages/client/src/components/toolbar/SupportThisSiteButton.tsx
+++ b/packages/client/src/components/toolbar/SupportThisSiteButton.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { IconButton, useDisclosure } from "@chakra-ui/react";
+import { LucideHeart } from "lucide-react";
+import { toolbarButtonZIndex } from "./Toolbar";
+import SupportThisSiteModal from "./SupportThisSiteModal";
+
+export default function SupportThisSiteButton() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <IconButton
+        as="a"
+        aria-label="Support"
+        icon={<LucideHeart />}
+        cursor="pointer"
+        onClick={onOpen}
+        size="md"
+        stroke="text.accent"
+        bg="transparent"
+        _hover={{
+          bg: "transparent",
+          svg: {
+            stroke: "accent.danger",
+            transition: "stroke 0.3s ease-in-out",
+          },
+        }}
+        title="Support"
+        variant="ghost"
+        zIndex={toolbarButtonZIndex}
+        sx={{
+          svg: {
+            stroke: "text.accent",
+            strokeWidth: "2px",
+            transition: "stroke 0.2s ease-in-out",
+          },
+        }}
+      />
+      <SupportThisSiteModal isOpen={isOpen} onClose={onClose} />
+    </>
+  );
+}
--- a/packages/client/src/components/toolbar/SupportThisSiteModal.tsx
+++ b/packages/client/src/components/toolbar/SupportThisSiteModal.tsx
@@ -0,0 +1,225 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  useClipboard,
+  useToast,
+  VStack,
+} from "@chakra-ui/react";
+import { QRCodeCanvas } from "qrcode.react";
+import { FaBitcoin, FaEthereum } from "react-icons/fa";
+import { observer } from "mobx-react-lite";
+import clientTransactionStore from "../../stores/ClientTransactionStore";
+import DogecoinIcon from "../icons/DogecoinIcon";
+
+const SupportThisSiteModal = observer(({ isOpen, onClose, zIndex }) => {
+  const { hasCopied, onCopy } = useClipboard(
+    clientTransactionStore.depositAddress || "",
+  );
+  const toast = useToast();
+
+  const handleCopy = () => {
+    if (clientTransactionStore.depositAddress) {
+      onCopy();
+      toast({
+        title: "Address Copied!",
+        description: "Thank you for your support!",
+        status: "success",
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const handleConfirmAmount = async () => {
+    try {
+      await clientTransactionStore.prepareTransaction();
+      toast({
+        title: "Success",
+        description: `Use your wallet app (Coinbase, ...ect) to send the selected asset to the provided address.`,
+        status: "success",
+        duration: 6000,
+        isClosable: true,
+      });
+    } catch (error) {
+      toast({
+        title: "Transaction Failed",
+        description: "There was an issue preparing your transaction.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const donationMethods = [
+    {
+      name: "Ethereum",
+      icon: FaEthereum,
+    },
+    {
+      name: "Bitcoin",
+      icon: FaBitcoin,
+    },
+    {
+      name: "Dogecoin",
+      icon: DogecoinIcon,
+    },
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="md"
+      motionPreset="slideInBottom"
+      zIndex={zIndex}
+    >
+      <ModalOverlay />
+      <ModalContent bg="gray.800" color="text.primary">
+        <ModalHeader textAlign="center" mb={2}>
+          Support
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={8} align="center">
+            <Text fontSize="md" textAlign="center">
+              Your contributions are fuel for magic.
+            </Text>
+            <Tabs
+              align="center"
+              variant="soft-rounded"
+              colorScheme="teal"
+              isFitted
+            >
+              <TabList mb={2} w={"20%"}>
+                {donationMethods.map((method) => (
+                  <Tab
+                    p={4}
+                    key={method.name}
+                    onClick={() => {
+                      clientTransactionStore.setSelectedMethod(method.name);
+                    }}
+                  >
+                    <Box p={1} w={"fit-content"}>
+                      <method.icon />{" "}
+                    </Box>
+                    {method.name}
+                  </Tab>
+                ))}
+              </TabList>
+              <TabPanels>
+                {donationMethods.map((method) => (
+                  <TabPanel key={method.name}>
+                    {!clientTransactionStore.userConfirmed ? (
+                      <VStack spacing={4}>
+                        <Text>Enter your information:</Text>
+                        <Input
+                          placeholder="Your name"
+                          value={
+                            clientTransactionStore.donerId as string | undefined
+                          }
+                          onChange={(e) =>
+                            clientTransactionStore.setDonerId(e.target.value)
+                          }
+                          type="text"
+                          bg="gray.700"
+                          color="white"
+                          w="100%"
+                        />
+                        <Text>Enter the amount you wish to donate:</Text>
+                        <Input
+                          placeholder="Enter amount"
+                          value={
+                            clientTransactionStore.amount as number | undefined
+                          }
+                          onChange={(e) =>
+                            clientTransactionStore.setAmount(e.target.value)
+                          }
+                          type="number"
+                          bg="gray.700"
+                          color="white"
+                          w="100%"
+                        />
+                        <Button
+                          onClick={handleConfirmAmount}
+                          size="md"
+                          colorScheme="teal"
+                        >
+                          Confirm Amount
+                        </Button>
+                      </VStack>
+                    ) : (
+                      <>
+                        <Box
+                          bg="white"
+                          p={2}
+                          borderRadius="lg"
+                          mb={4}
+                          w={"min-content"}
+                        >
+                          <QRCodeCanvas
+                            value={
+                              clientTransactionStore.depositAddress as string
+                            }
+                            size={180}
+                          />
+                        </Box>
+
+                        <Box
+                          bg="gray.700"
+                          p={4}
+                          borderRadius="md"
+                          wordBreak="unset"
+                          w="100%"
+                          textAlign="center"
+                          mb={4}
+                        >
+                          <Text fontWeight="bold" fontSize="xs">
+                            {clientTransactionStore.depositAddress}
+                          </Text>
+                        </Box>
+                        <Button
+                          onClick={handleCopy}
+                          size="md"
+                          colorScheme="teal"
+                          mb={4}
+                        >
+                          {hasCopied ? "Address Copied!" : "Copy Address"}
+                        </Button>
+                        <Text fontSize="md" fontWeight="bold">
+                          Transaction ID: {clientTransactionStore.txId}
+                        </Text>
+                      </>
+                    )}
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </Tabs>
+          </VStack>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="outline" mr={3} onClick={onClose} colorScheme="gray">
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+});
+
+export default SupportThisSiteModal;
--- a/packages/client/src/components/toolbar/Toolbar.tsx
+++ b/packages/client/src/components/toolbar/Toolbar.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Flex } from "@chakra-ui/react";
+import SupportThisSiteButton from "./SupportThisSiteButton";
+import GithubButton from "./GithubButton";
+import BuiltWithButton from "../BuiltWithButton";
+
+const toolbarButtonZIndex = 901;
+
+export { toolbarButtonZIndex };
+
+function ToolBar({ isMobile }) {
+  return (
+    <Flex
+      direction={isMobile ? "row" : "column"}
+      alignItems={isMobile ? "flex-start" : "flex-end"}
+      pb={4}
+    >
+      <SupportThisSiteButton />
+      <GithubButton />
+      <BuiltWithButton />
+    </Flex>
+  );
+}
+
+export default ToolBar;