diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/dashboard/layout.tsx
index ac56873f2b4..69c6a6da46a 100644
--- a/apps/wallet-dashboard/app/dashboard/layout.tsx
+++ b/apps/wallet-dashboard/app/dashboard/layout.tsx
@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { Button, Notifications, RouteLink } from '@/components/index';
+import { Notifications, RouteLink } from '@/components/index';
 import React, { useState, type PropsWithChildren } from 'react';
 import { ConnectButton } from '@iota/dapp-kit';
+import { Button } from '@iota/apps-ui-kit';
 
 const routes = [
     { title: 'Home', path: '/dashboard/home' },
@@ -36,7 +37,7 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
                 {routes.map((route) => {
                     return <RouteLink key={route.title} {...route} />;
                 })}
-                <Button onClick={toggleDarkMode}>{isDarkMode ? 'Light Mode' : 'Dark Mode'}</Button>
+                <Button onClick={toggleDarkMode} text={isDarkMode ? 'Light Mode' : 'Dark Mode'} />
                 <ConnectButton />
             </section>
             <div>{children}</div>
diff --git a/apps/wallet-dashboard/package.json b/apps/wallet-dashboard/package.json
index 28e910669ac..1398daf9a87 100644
--- a/apps/wallet-dashboard/package.json
+++ b/apps/wallet-dashboard/package.json
@@ -15,6 +15,7 @@
         "node": ">= v18.17.0"
     },
     "dependencies": {
+        "@iota/apps-ui-kit": "workspace:*",
         "@iota/core": "workspace:*",
         "@iota/dapp-kit": "workspace:*",
         "@iota/iota-sdk": "workspace:*",
diff --git a/apps/wallet-dashboard/tailwind.config.ts b/apps/wallet-dashboard/tailwind.config.ts
index ca8c6b84b6a..e8c9079ca3a 100644
--- a/apps/wallet-dashboard/tailwind.config.ts
+++ b/apps/wallet-dashboard/tailwind.config.ts
@@ -2,24 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Config } from 'tailwindcss';
+// Note: exception for the tailwind preset import
+import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive.preset';
 
-const config: Config = {
+export default {
+    presets: [uiKitResponsivePreset],
     content: [
         './app/**/*.{js,ts,jsx,tsx,mdx}',
         './pages/**/*.{js,ts,jsx,tsx,mdx}',
         './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}',
     ],
     darkMode: 'class',
     theme: {
-        extend: {
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic':
-                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-            },
-        },
+        extend: {},
         plugins: [],
     },
-};
-
-export default config;
+} satisfies Partial<Config>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ecef394ca6..edecb0e30ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -991,6 +991,9 @@ importers:
 
   apps/wallet-dashboard:
     dependencies:
+      '@iota/apps-ui-kit':
+        specifier: workspace:*
+        version: link:../ui-kit
       '@iota/core':
         specifier: workspace:*
         version: link:../core