diff --git a/lib/ente_theme_data.dart b/lib/ente_theme_data.dart
index d2dde0851..d819c066d 100644
--- a/lib/ente_theme_data.dart
+++ b/lib/ente_theme_data.dart
@@ -224,6 +224,14 @@ extension CustomColorScheme on ColorScheme {
   Color get inverseBackgroundColor =>
       brightness != Brightness.light ? backgroundBaseLight : backgroundBaseDark;
 
+  Color get fabForegroundColor => brightness == Brightness.light
+      ? const Color.fromRGBO(255, 255, 255, 1)
+      : const Color.fromRGBO(40, 40, 40, 1);
+
+  Color get fabBackgroundColor => brightness != Brightness.light
+      ? const Color.fromRGBO(255, 255, 255, 1)
+      : const Color.fromRGBO(40, 40, 40, 1);
+
   Color get defaultTextColor =>
       brightness == Brightness.light ? textBaseLight : textBaseDark;
 
diff --git a/lib/ui/home_page.dart b/lib/ui/home_page.dart
index 976266f04..9e711a398 100644
--- a/lib/ui/home_page.dart
+++ b/lib/ui/home_page.dart
@@ -152,8 +152,8 @@ class _HomePageState extends State<HomePage> {
       childPadding: const EdgeInsets.all(5),
       spaceBetweenChildren: 4,
       tooltip: 'Add Code',
-      foregroundColor: Theme.of(context).colorScheme.background,
-      backgroundColor: Theme.of(context).colorScheme.inverseBackgroundColor,
+      foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
+      backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
       overlayOpacity: 0.5,
       overlayColor: Theme.of(context).colorScheme.background,
       elevation: 8.0,
@@ -161,16 +161,16 @@ class _HomePageState extends State<HomePage> {
       children: [
         SpeedDialChild(
           child: const Icon(Icons.qr_code),
-          foregroundColor: Theme.of(context).colorScheme.background,
-          backgroundColor: Theme.of(context).colorScheme.inverseBackgroundColor,
-          label: 'Scan a QR Code',
+          foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
+          backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
+          labelWidget: const SpeedDialLabelWidget("Scan a QR Code"),
           onTap: _redirectToScannerPage,
         ),
         SpeedDialChild(
           child: const Icon(Icons.keyboard),
-          foregroundColor: Theme.of(context).colorScheme.background,
-          backgroundColor: Theme.of(context).colorScheme.inverseBackgroundColor,
-          label: 'Enter details manually',
+          foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
+          backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
+          labelWidget: const SpeedDialLabelWidget("Enter details manually"),
           onTap: _redirectToManualEntryPage,
         ),
       ],
@@ -224,3 +224,30 @@ class _HomePageState extends State<HomePage> {
     );
   }
 }
+
+class SpeedDialLabelWidget extends StatelessWidget {
+  final String label;
+
+  const SpeedDialLabelWidget(
+    this.label, {
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(4),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        color: Theme.of(context).colorScheme.fabBackgroundColor,
+      ),
+      child: Text(
+        label,
+        style: TextStyle(
+          color: Theme.of(context).colorScheme.fabForegroundColor,
+        ),
+      ),
+    );
+  }
+}