diff --git a/interface/src/pages/About.tsx b/interface/src/pages/About.tsx
index ffeca441..7a996245 100644
--- a/interface/src/pages/About.tsx
+++ b/interface/src/pages/About.tsx
@@ -1,7 +1,7 @@
 const About: React.FC = () => {
 
   return (
-    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100/50">
+    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100/50 dark:divide-zinc-700/50">
       <div>
         <h2 className="text-lg font-bold">About</h2>
         <p className="py-2">BetterSEQTA+ is a branch of BetterSEQTA which was originally developed by Nulkem. It was discontinued. So BetterSEQTA+ has come in to fill in that gap!</p>
diff --git a/interface/src/pages/Settings.tsx b/interface/src/pages/Settings.tsx
index 3fc3605d..6841671d 100644
--- a/interface/src/pages/Settings.tsx
+++ b/interface/src/pages/Settings.tsx
@@ -63,7 +63,7 @@ const Settings: React.FC = () => {
   ];
 
   return (
-    <div className="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100">
+    <div className="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
       {settings.map((setting, index) => (
         <div className="flex items-center justify-between px-4 py-3" key={index}>
           <div className="pr-4">
diff --git a/interface/src/pages/Shortcuts.tsx b/interface/src/pages/Shortcuts.tsx
index ef5b1d6a..32a37f18 100644
--- a/interface/src/pages/Shortcuts.tsx
+++ b/interface/src/pages/Shortcuts.tsx
@@ -55,7 +55,7 @@ export default function Shortcuts() {
   };
 
   return (
-    <div className="flex flex-col divide-y divide-zinc-100">
+    <div className="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
 
       <AnimatePresence>
         {isFormVisible ? (