diff --git a/.changeset/dark-notes-reply.md b/.changeset/dark-notes-reply.md
new file mode 100644
index 0000000..89bd8fb
--- /dev/null
+++ b/.changeset/dark-notes-reply.md
@@ -0,0 +1,5 @@
+---
+"@churchapps/apphelper": patch
+---
+
+Use theme-aware colors for notes and message reply in dark mode.
diff --git a/apphelper/src/components/notes/AddNote.tsx b/apphelper/src/components/notes/AddNote.tsx
index f746713..78cca5c 100644
--- a/apphelper/src/components/notes/AddNote.tsx
+++ b/apphelper/src/components/notes/AddNote.tsx
@@ -103,7 +103,7 @@ export function AddNote({ context, onCancel, ...props }: Props) {
     <Box sx={{ width: "100%" }}>
       <ErrorMessages errors={errors} />
 
-      <Paper variant="outlined" sx={{ p: 2, bgcolor: "grey.50", borderColor: "grey.300" }}>
+      <Paper variant="outlined" sx={(theme) => ({ p: 2, bgcolor: theme.palette.mode === "dark" ? "background.default" : "grey.50", borderColor: theme.palette.mode === "dark" ? "grey.800" : "grey.300" })}>
         <Stack direction="row" spacing={2} alignItems="flex-start">
           <Avatar
             src={image}
@@ -130,15 +130,15 @@ export function AddNote({ context, onCancel, ...props }: Props) {
                   "& textarea": { resize: "vertical", minHeight: "40px" }
                 }
               }}
-              sx={{
-                bgcolor: "white",
+              sx={(theme) => ({
+                bgcolor: theme.palette.mode === "dark" ? "background.paper" : "white",
                 borderRadius: 1,
                 p: 1,
                 border: "1px solid",
-                borderColor: "grey.300",
-                "&:hover": { borderColor: "grey.400" },
+                borderColor: theme.palette.mode === "dark" ? "grey.700" : "grey.300",
+                "&:hover": { borderColor: theme.palette.mode === "dark" ? "grey.600" : "grey.400" },
                 "&.Mui-focused": { borderColor: "primary.main" }
-              }}
+              })}
             />
 
             <Box sx={{ display: "flex", alignItems: "center", mt: 1 }}>
diff --git a/apphelper/src/components/notes/Notes.tsx b/apphelper/src/components/notes/Notes.tsx
index ebf2eae..3d2c641 100644
--- a/apphelper/src/components/notes/Notes.tsx
+++ b/apphelper/src/components/notes/Notes.tsx
@@ -7,6 +7,7 @@ import { ConversationStore } from "../../helpers/ConversationStore";
 import { SubscriptionManager } from "../../helpers/SubscriptionManager";
 import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { SubscriptionToggle, filterVisibleMessages } from "./SubscriptionToggle";
+import { Box } from "@mui/material";
 
 interface Props {
   conversationId: string;
@@ -185,14 +186,15 @@ export function Notes(props: Props) {
         {getNotesWrapper()}
       </div>
       {messages && (
-        <div style={{
+        <Box sx={(theme) => ({
           flexShrink: 0,
-          borderTop: "1px solid #e0e0e0",
-          backgroundColor: "#fafafa",
+          borderTop: 1,
+          borderColor: "divider",
+          backgroundColor: theme.palette.mode === "dark" ? "background.default" : "#fafafa",
           padding: "12px",
           minHeight: "auto",
           maxHeight: "200px"
-        }}>
+        })}>
           <AddNote
             context={props.context}
             conversationId={props.conversationId}
@@ -201,7 +203,7 @@ export function Notes(props: Props) {
             messageId={editMessageId ?? undefined}
             onCancel={() => setEditMessageId(null)}
           />
-        </div>
+        </Box>
       )}
     </div>
   ) : (