diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 4c6d45df..ed0c69bd 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -177,8 +177,9 @@ function createCharts() {
                 });
             });
         </script>
-
     @else
-        @include('partials.steps-to-get-started.view')
+        <x-slot name="outsideContainer">
+            @include('partials.steps-to-get-started.view')
+        </x-slot>
     @endif
 </x-app-layout>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e7256d31..20d99afe 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -77,14 +77,18 @@
     @endif
     <!-- Page Content -->
     <main>
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
-            <div class="block md:hidden w-full">
-                @if (isset($action))
-                    {{ $action }}
-                @endif
+        @if (isset($outsideContainer))
+            {{ $outsideContainer }}
+        @else
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
+                <div class="block md:hidden w-full">
+                    @if (isset($action))
+                        {{ $action }}
+                    @endif
+                </div>
+                {{ $slot }}
             </div>
-            {{ $slot }}
-        </div>
+        @endif
     </main>
 </div>
 <x-toaster-hub/>
diff --git a/resources/views/partials/missing-keys-and-passphrase.blade.php b/resources/views/partials/missing-keys-and-passphrase.blade.php
index fdfb2127..1f7b84c6 100644
--- a/resources/views/partials/missing-keys-and-passphrase.blade.php
+++ b/resources/views/partials/missing-keys-and-passphrase.blade.php
@@ -42,13 +42,18 @@ class="flex-grow sm:flex-grow-0 bg-white/10 hover:bg-white/20 backdrop-blur-sm p
                             {{ __('Show Command') }}
                         </button>
 
-                        <x-modal name="ssh-key-generation" :focusable="true">
-                            <div class="p-6">
-                                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="ssh-key-modal-title">
-                                    {{ __('SSH Key Generation Command') }}
-                                </h2>
-
-                                <div class="mt-4">
+                        <x-modal name="ssh-key-generation" :focusable="true" maxWidth="lg">
+                            <x-slot name="title">
+                                {{ __('SSH Key Generation Command') }}
+                            </x-slot>
+                            <x-slot name="description">
+                                {{ __('Easy, straightforward instructions on how to generate your SSH keys.') }}
+                            </x-slot>
+                            <x-slot name="icon">
+                                heroicon-o-command-line
+                            </x-slot>
+                            <div>
+                                <div>
                                     <p class="text-sm text-gray-500 dark:text-gray-400">
                                         {{ __('Run this command in your terminal to generate SSH keys:') }}
                                     </p>
@@ -91,13 +96,18 @@ class="flex-grow sm:flex-grow-0 bg-white/10 hover:bg-white/20 backdrop-blur-sm p
                             {{ __('How to Set Passphrase') }}
                         </button>
 
-                        <x-modal name="set-passphrase" :focusable="true">
-                            <div class="p-6">
-                                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="set-passphrase-modal-title">
-                                    {{ __('How to Set SSH Passphrase') }}
-                                </h2>
-
-                                <div class="mt-4">
+                        <x-modal name="set-passphrase" :focusable="true"  maxWidth="lg">
+                            <x-slot name="title">
+                                {{ __('How to Set SSH Passphrase') }}
+                            </x-slot>
+                            <x-slot name="description">
+                                {{ __('Easy, straightforward instructions on how to set your passphrase.') }}
+                            </x-slot>
+                            <x-slot name="icon">
+                                heroicon-o-command-line
+                            </x-slot>
+                            <div>
+                                <div>
                                     <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('To set the SSH passphrase:') }}</p>
                                     <ol class="list-decimal list-inside text-sm space-y-2 mt-2">
                                         <li>{{ __('Open your .env file') }}</li>
diff --git a/resources/views/partials/steps-to-get-started/view.blade.php b/resources/views/partials/steps-to-get-started/view.blade.php
index 959c9c2f..abc26560 100644
--- a/resources/views/partials/steps-to-get-started/view.blade.php
+++ b/resources/views/partials/steps-to-get-started/view.blade.php
@@ -1,26 +1,38 @@
 <div class="min-h-screen bg-gradient-to-b from-primary-950 to-primary-900 bg-cover text-white py-16">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-left mb-12">
+        <div class="text-center mb-12">
             <h2 class="text-4xl font-bold mb-4">{{ __('Steps to Get Started') }}</h2>
-            <div class="w-20 h-1 bg-white"></div>
+            <div class="w-20 h-1 bg-white mx-auto"></div>
             <p class="mt-4 text-lg text-gray-300">{{ __('Follow these steps to set up your backup system quickly and easily.') }}</p>
         </div>
 
+        @if (!ssh_keys_exist())
+            <div class="bg-yellow-50 dark:bg-yellow-900/50 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mb-8 text-center">
+                <div class="flex items-center justify-center text-yellow-800 dark:text-yellow-200">
+                    @svg('heroicon-o-exclamation-triangle', 'h-5 w-5 mr-2')
+                    <span class="font-medium">{{ __('SSH Keys Required') }}</span>
+                </div>
+                <p class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
+                    {{ __('Please generate SSH keys before proceeding with the first step.') }}
+                </p>
+            </div>
+        @endif
+
         <div class="grid md:grid-cols-3 gap-8">
             @foreach ([
                 [
                     'step' => 1,
                     'title' => __('Link your first Remote Server'),
-                    'description' => __('We support Ubuntu and Debian distributions primarily.'),
+                    'description' => __('Get started easily with popular Linux distributions like Ubuntu and Debian. We\'ve got you covered!'),
                     'icons' => ['ubuntu', 'debian', 'tux'],
                     'route' => 'remote-servers.create',
                     'buttonText' => __('Link Remote Server'),
-                    'condition' => Auth::user()->remoteServers->isEmpty()
+                    'condition' => Auth::user()->remoteServers->isEmpty() && ssh_keys_exist()
                 ],
                 [
                     'step' => 2,
                     'title' => __('Connect a Backup Destination'),
-                    'description' => __('Add your S3 bucket API details to store your backups safely.'),
+                    'description' => __('Securely store your backups in the cloud. Easy setup with S3 buckets, and support for other popular storage solutions.'),
                     'icons' => ['aws', 'upcloud', 'gcp'],
                     'route' => 'backup-destinations.create',
                     'buttonText' => __('Add your Backup Destination'),
@@ -36,22 +48,22 @@
                     'condition' => Auth::user()->remoteServers->isNotEmpty() && Auth::user()->backupDestinations->isNotEmpty()
                 ]
             ] as $index => $step)
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl border border-gray-200 dark:border-gray-700">
                     <div class="p-6 flex flex-col h-full relative">
-                        <div class="absolute top-0 right-0 mt-4 mr-4 bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold">
+                        <div class="absolute top-0 right-0 mt-4 mr-4 bg-primary-500 text-white rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg shadow-md">
                             {{ $index + 1 }}
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                             {{ $step['title'] }}
                         </h3>
                         @if (isset($step['icons']))
-                            <div class="flex justify-center space-x-4 my-6">
+                            <div class="flex justify-center space-x-6 my-6">
                                 @foreach ($step['icons'] as $icon)
-                                    <x-dynamic-component :component="'icons.' . $icon" class="h-12 w-12 {{ $icon === 'upcloud' ? 'text-gray-700 dark:text-white' : 'text-gray-700 dark:text-gray-300' }}" />
+                                    <x-dynamic-component :component="'icons.' . $icon" class="h-14 w-14 {{ $icon === 'upcloud' ? 'text-gray-700 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} transition-all duration-300 hover:scale-110" />
                                 @endforeach
                             </div>
                         @endif
-                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 flex-grow">
                             {{ $step['description'] }}
                         </p>
                         @if (isset($step['additional_info']))
@@ -61,15 +73,15 @@
                         @endif
                         <div class="mt-auto">
                             @if (Auth::user()->{$step['step'] == 1 ? 'remoteServers' : 'backupDestinations'}->isNotEmpty())
-                                <div class="bg-green-100 dark:bg-green-800 border-l-4 border-green-500 p-4 mb-4 rounded-r">
-                                    <p class="text-green-700 dark:text-green-200 flex items-center">
+                                <div class="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 p-3 rounded-lg text-sm">
+                                    <p class="flex items-center font-medium">
                                         @svg('heroicon-o-check-circle', 'h-5 w-5 mr-2')
                                         <span>{{ __('You have completed this step.') }}</span>
                                     </p>
                                 </div>
                             @elseif ($step['condition'])
-                                <a href="{{ route($step['route']) }}" wire:navigate class="group">
-                                    <x-primary-button class="w-full justify-center group-hover:bg-primary-600 transition-colors duration-300">
+                                <a href="{{ route($step['route']) }}" wire:navigate class="block w-full">
+                                    <x-primary-button class="w-full justify-center bg-primary-600 hover:bg-primary-700 transition-colors duration-300">
                                         <span>{{ $step['buttonText'] }}</span>
                                         @svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1')
                                     </x-primary-button>
@@ -88,7 +100,7 @@
 
         <div class="text-center mt-16">
             <x-application-logo class="h-24 w-24 mx-auto animate-pulse" />
-            <p class="mt-4 text-gray-300">{{ __("You're on your way to secure, automated backups!") }}</p>
+            <p class="mt-4 text-lg text-gray-300">{{ __("You're on your way to secure, automated backups!") }}</p>
         </div>
     </div>
 </div>