diff --git a/src/app/components/AllowanceMenu/index.tsx b/src/app/components/AllowanceMenu/index.tsx
index 4c77148981..b9158b6c28 100644
--- a/src/app/components/AllowanceMenu/index.tsx
+++ b/src/app/components/AllowanceMenu/index.tsx
@@ -89,7 +89,7 @@ function AllowanceMenu({ allowance, onEdit, onDelete }: Props) {
             />
           </button>
         </div>
-        <div className="p-5 border-t border-b border-gray-200 dark:bg-gray-800">
+        <div className="p-5 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-500">
           <label
             htmlFor="budget"
             className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-400"
diff --git a/src/app/components/Button/index.tsx b/src/app/components/Button/index.tsx
index d7d1f05282..a68e9d90e0 100644
--- a/src/app/components/Button/index.tsx
+++ b/src/app/components/Button/index.tsx
@@ -33,7 +33,7 @@ export default function Button({
         fullWidth && "w-full",
         primary
           ? "bg-orange-bitcoin text-white border border-transparent"
-          : `bg-white text-gray-700 border border-gray-200 dark:bg-gray-700 dark:text-gray-200`,
+          : `bg-white text-gray-700 border border-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500`,
         primary && !disabled && "hover:bg-orange-bitcoin-700",
         !primary && !disabled && "hover:bg-gray-100 dark:hover:bg-gray-600",
         disabled ? "cursor-default opacity-60" : "cursor-pointer",
diff --git a/src/app/components/Form/Input/index.tsx b/src/app/components/Form/Input/index.tsx
index a82523d809..a7ce391fb4 100644
--- a/src/app/components/Form/Input/index.tsx
+++ b/src/app/components/Form/Input/index.tsx
@@ -21,7 +21,7 @@ export default function Input({
       type={type}
       name={name}
       id={id}
-      className="shadow-sm focus:ring-orange-bitcoin focus:border-orange-bitcoin block w-full sm:text-sm border-gray-300 rounded-md placeholder-gray-400"
+      className="shadow-sm focus:ring-orange-bitcoin focus:border-orange-bitcoin block w-full sm:text-sm border-gray-300 rounded-md placeholder-gray-400 dark:bg-gray-200 dark:placeholder-gray-600"
       placeholder={placeholder}
       required={required}
       onChange={onChange}
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index 5384ac4ba3..cfcb2c6422 100644
--- a/src/app/components/Header/index.tsx
+++ b/src/app/components/Header/index.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 function Header({ title, headerLeft, headerRight }: Props) {
   return (
-    <div className="flex justify-between bg-white px-4 py-2 border-b border-gray-200 dark:bg-gray-700">
+    <div className="flex justify-between bg-white px-4 py-2 border-b border-gray-200 dark:bg-gray-700 dark:border-gray-500">
       <div className="flex items-center">
         {headerLeft && <div className="mr-3">{headerLeft}</div>}
         <h1 className="text-lg font-medium dark:text-white">{title}</h1>
diff --git a/src/app/components/Menu/MenuList.tsx b/src/app/components/Menu/MenuList.tsx
index c006e3701e..269f105ae2 100644
--- a/src/app/components/Menu/MenuList.tsx
+++ b/src/app/components/Menu/MenuList.tsx
@@ -22,7 +22,7 @@ function List({ position = "left", children }: Props) {
           position === "left"
             ? "left-0 origin-top-left"
             : "right-0 origin-top-right"
-        } absolute z-50 mt-2 py-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 dark:border dark:border-white`}
+        } absolute z-50 mt-2 py-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 dark:border dark:border-gray-500`}
       >
         {children}
       </Menu.Items>
diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx
index 4ebe150557..565ea29631 100644
--- a/src/app/components/Navbar/Navbar.tsx
+++ b/src/app/components/Navbar/Navbar.tsx
@@ -19,7 +19,7 @@ export default function Navbar({
   children,
 }: Props) {
   return (
-    <div className="px-4 py-2 bg-white flex justify-between items-center border-b border-gray-200 dark:bg-gray-800">
+    <div className="px-4 py-2 bg-white flex justify-between items-center border-b border-gray-200 dark:bg-gray-800 dark:border-gray-500">
       <div className="flex w-8/12 md:w-4/12 lg:w-3/12">
         <div className="relative pl-2 flex bg-gray-100 rounded-md dark:bg-gray-600">
           <div className="flex items-center">
diff --git a/src/app/components/PaymentSummary.tsx b/src/app/components/PaymentSummary.tsx
index d42f87a96a..18bd643c78 100644
--- a/src/app/components/PaymentSummary.tsx
+++ b/src/app/components/PaymentSummary.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 function PaymentSummary({ amount, amountAlt, description }: Props) {
   return (
-    <div className="p-4 bg-gray-50 border-t border-b border-gray-200">
+    <div className="p-4 bg-gray-50 border-t border-b border-gray-200 rounded-lg dark:bg-gray-200">
       <dl className="mb-0">
         <dt className="uppercase font-semibold text-gray-500 text-xs">
           Amount
diff --git a/src/app/screens/Onboard/ConnectLnd/index.tsx b/src/app/screens/Onboard/ConnectLnd/index.tsx
index 95ae94a1cd..3d5670d951 100644
--- a/src/app/screens/Onboard/ConnectLnd/index.tsx
+++ b/src/app/screens/Onboard/ConnectLnd/index.tsx
@@ -146,7 +146,7 @@ export default function ConnectLnd() {
               </div>
               <p className="text-center my-4 dark:text-white">OR</p>
               <div
-                className={`cursor-pointer bg-white flex flex-col items-center p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
+                className={`cursor-pointer bg-white dark:bg-gray-800 flex flex-col items-center p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
                   isDragging ? "border-blue-500 bg-blue-50" : ""
                 }`}
                 onDrop={dropHandler}
@@ -160,7 +160,7 @@ export default function ConnectLnd() {
                   className="mb-3 h-9 w-9 text-blue-500"
                   aria-hidden="true"
                 />
-                <p>
+                <p className="dark:text-white">
                   Drag and drop your macaroon here or{" "}
                   <span className="underline">browse</span>
                 </p>