diff --git a/app/Http/Controllers/InteractionController.php b/app/Http/Controllers/InteractionController.php
index a9eae6d..e646959 100644
--- a/app/Http/Controllers/InteractionController.php
+++ b/app/Http/Controllers/InteractionController.php
@@ -33,7 +33,7 @@ public function togglesState(Deal $deal, InteractionType $type)
             $message = '';
             if ($existingInteraction) {
                 $existingInteraction->delete();
-                $message = "{$type->value} removed from deal";
+                $message = ucfirst($type->value).' removed from deal';
             } else {
                 $data = [
                     'type' => $type,
@@ -44,7 +44,7 @@ public function togglesState(Deal $deal, InteractionType $type)
                 $deal->interactions()->create($data);
                 Interaction::reguard();
 
-                $message = "{$type->value} added to deal";
+                $message = ucfirst($type->value).' added to deal';
             }
 
             return response()->json(['message' => $message]);
diff --git a/resources/css/app.css b/resources/css/app.css
index 4f63131..106f4bf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -14,7 +14,7 @@ @theme {
     --color-accent-600: oklch(0.45 0.01 232);
 }
 
-@layer components{
+@layer components {
     @import "./button.css";
 
     .wrapper {
@@ -24,7 +24,7 @@ @layer components{
 
 }
 
-@layer base{
+@layer base {
     h2 {
         @apply text-5xl font-black text-center
     }
@@ -33,3 +33,27 @@ @layer base{
 .preload * {
     transition: none !important;
 }
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes disappear {
+    from {
+        display: block;
+        opacity: 1;
+    }
+    to {
+        display: none;
+        opacity: 0;
+    }
+}
+dialog{
+    animation: disappear 300ms ease-in-out;
+}
+dialog[open]{
+    animation: appear 300ms ease-in-out;
+}
diff --git a/resources/js/interaction.js b/resources/js/interaction.js
index 30d6793..fc61c61 100644
--- a/resources/js/interaction.js
+++ b/resources/js/interaction.js
@@ -1,3 +1,5 @@
+import {showToast} from "./toast.js";
+
 async function like(button, id) {
     // Instant feedback for user
     let likeBtns = button.querySelectorAll('.like');
@@ -12,10 +14,16 @@ async function like(button, id) {
         let response = await axios.post('/like/' + id);
 
         if (response.status !== 200) {
+            showToast(response.data.message)
             // Revert the ui
             toggleHidden(likeBtns);
         }
+        else{
+            showToast(response.data.message)
+        }
+
     } catch (e) {
+        showToast(e.response.data.message)
         toggleHidden(likeBtns);
         console.error(e);
     }
@@ -30,10 +38,14 @@ async function favorite(e, id) {
         let response = await axios.post('/favorite/' + id);
 
         if (response.status !== 200) {
+            showToast(response.data.message)
             // Revert the ui
             toggleHidden(favoriteBtns);
+        }else{
+           showToast(response.data.message);
         }
     } catch (e) {
+        showToast(e.response.data.message)
         toggleHidden(favoriteBtns);
         console.error(e);
     }
diff --git a/resources/js/toast.js b/resources/js/toast.js
index 32b1c89..0a4312d 100644
--- a/resources/js/toast.js
+++ b/resources/js/toast.js
@@ -2,14 +2,16 @@ const toast = document.querySelector('.toast');
 const toastBtn = document.querySelector('#toast-btn');
 let toastMessage = toast.querySelector('#toast-message');
 export function showToast(message) {
-    toast.classList.toggle('hidden')
+    toast.classList.remove('translate-x-[100vw]');
+    toast.classList.add('translate-x-0');
     toastMessage.textContent = message;
     setTimeout(() => {
-        toast.classList.toggle('hidden');
-    }, 3000)
+        hideToast();
+    }, 5000)
 }
 function hideToast() {
-    toast.classList.toggle('hidden')
+    toast.classList.remove('translate-x-0');
+    toast.classList.add('translate-x-[100vw]');
 }
 document.hideToast = hideToast;
 document.showToast = showToast;
diff --git a/resources/views/components/dashboard/broker/layout.blade.php b/resources/views/components/dashboard/broker/layout.blade.php
index 532c1c1..587f57f 100644
--- a/resources/views/components/dashboard/broker/layout.blade.php
+++ b/resources/views/components/dashboard/broker/layout.blade.php
@@ -4,7 +4,7 @@
         <x-dashboard.broker.sidebar class="hidden shrink-0 md:w-50 lg:w-60 md:block md:h-screen"
                                     active-class="bg-linear-120 from-[#1a55ed] to-[#9b1cff] text-white"/>
         <section
-            class=" flex flex-col space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
+            class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
 
             {{$heading ?? ''}}
 
@@ -19,6 +19,7 @@ class=" flex flex-col space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
                 <x-ui.alert variant="error">{{$value}}</x-ui.alert>
             </div>
             @endsession
+
             {{$slot}}
         </section>
     </div>
diff --git a/resources/views/components/dashboard/broker/sidebar/index.blade.php b/resources/views/components/dashboard/broker/sidebar/index.blade.php
index 58f3ff4..ebfa59a 100644
--- a/resources/views/components/dashboard/broker/sidebar/index.blade.php
+++ b/resources/views/components/dashboard/broker/sidebar/index.blade.php
@@ -5,10 +5,10 @@
             <div class="">
                 <div class="flex space-x-3 border-b border-b-gray-300 pb-6">
                     <x-logo/>
-                    <div class="">
+                    <a href="{{route('home')}}" class="">
                         <p class="text-2xl font-bold">DealHub</p>
                         <p class="text-accent-600 text-sm">Broker Panel</p>
-                    </div>
+                    </a>
                 </div>
                 <div class="pt-6 flex flex-col space-y-3">
                     <x-dashboard.broker.sidebar.item :link="route('broker.dashboard')">
@@ -37,7 +37,7 @@
                 <form method="post" action="{{route('logout')}}">
                     @csrf
                     @method('delete')
-                    <button class="py-3 px-4">
+                    <button class="py-3 px-4 border border-white hover:bg-red-50 hover:border-red-200 rounded-xl w-full mt-4 active:scale-80 cursor-pointer transition-all duration-300 ease-in-out">
                         <div class="flex space-x-2 items-center text-red-500">
                             <x-heroicon-o-arrow-right-start-on-rectangle class="w-6"/>
                             <p>Logout</p>
diff --git a/resources/views/components/dashboard/broker/sidebar/item.blade.php b/resources/views/components/dashboard/broker/sidebar/item.blade.php
index 3a45700..ab76ce3 100644
--- a/resources/views/components/dashboard/broker/sidebar/item.blade.php
+++ b/resources/views/components/dashboard/broker/sidebar/item.blade.php
@@ -1,5 +1,5 @@
 @props([ 'link' => ''])
 @aware(['activeClass' => 'bg-gray-100 text-gray-900'])
-<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center py-3 px-4 rounded-xl", $activeClass => url()->current() == $link])}} >
+<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center py-3 px-4 rounded-xl hover:bg-gray-100 border border-white ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => url()->current() == $link])}} >
     {{$slot}}
 </a>
diff --git a/resources/views/components/dashboard/broker/stats.blade.php b/resources/views/components/dashboard/broker/stats.blade.php
index 1229d79..d1439ab 100644
--- a/resources/views/components/dashboard/broker/stats.blade.php
+++ b/resources/views/components/dashboard/broker/stats.blade.php
@@ -1,5 +1,5 @@
 @props(['list_count' => 0])
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-8">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-y-4 gap-x-8">
     <x-dashboard.stats-card title="My Listings" :score="$list_count">
         <x-icon-square variant="blue">
             <x-heroicon-o-document-text class="w-8" />
diff --git a/resources/views/components/dashboard/card.blade.php b/resources/views/components/dashboard/card.blade.php
index 738dcd7..8a13aef 100644
--- a/resources/views/components/dashboard/card.blade.php
+++ b/resources/views/components/dashboard/card.blade.php
@@ -1,3 +1,3 @@
-<div {{$attributes->merge(['class' => 'p-6 border border-gray-200 rounded-xl'])}}>
+<div {{$attributes->merge(['class' => 'p-4 md:p-6 border border-gray-200 rounded-xl'])}}>
     {{$slot}}
 </div>
diff --git a/resources/views/components/dashboard/page-heading.blade.php b/resources/views/components/dashboard/page-heading.blade.php
index 732ef05..e72109d 100644
--- a/resources/views/components/dashboard/page-heading.blade.php
+++ b/resources/views/components/dashboard/page-heading.blade.php
@@ -3,9 +3,9 @@
     <div class="flex space-x-6 items-center">
         @if($backLink !== '')
             <div class="">
-                <a href="{{$backLink}}">
+                <x-ui.button-sm :link="$backLink">
                     <x-heroicon-o-arrow-left class="w-4"/>
-                </a>
+                </x-ui.button-sm>
             </div>
         @endif
         <div class="">
diff --git a/resources/views/components/dashboard/user/broker-contact.blade.php b/resources/views/components/dashboard/user/broker-contact.blade.php
index 106d291..f8a615d 100644
--- a/resources/views/components/dashboard/user/broker-contact.blade.php
+++ b/resources/views/components/dashboard/user/broker-contact.blade.php
@@ -1,5 +1,5 @@
 @props(['broker'])
-<div class="p-4 text-sm">
+<div class="p-4 mb-4 text-sm bg-[#f9fafb] border-gray-100 border rounded-xl">
     <p class="font-bold mb-2">Broker Contact</p>
     <div class="text-accent-600 space-y-1">
         <p>{{$broker->name}}</p>
diff --git a/resources/views/components/dashboard/user/listing-card.blade.php b/resources/views/components/dashboard/user/listing-card.blade.php
index 8e56355..1eaf0ba 100644
--- a/resources/views/components/dashboard/user/listing-card.blade.php
+++ b/resources/views/components/dashboard/user/listing-card.blade.php
@@ -1,6 +1,6 @@
 @props(['deal' => '', 'broker' => ''])
-<x-ui.image-card :image="asset('storage/'.$deal->image)">
-    <div class="bg-white pt-8 p-4 h-full space-y-4 flex flex-col justify-between">
+<x-ui.image-card class="shadow-lg" :image="asset('storage/'.$deal->image)">
+    <div class="bg-white pt-8 p-4 h-full space-y-2 flex flex-col justify-between">
         <div class="flex justify-between">
             <x-ui.button-sm variant="neutral">
                 {{$deal->category->name}}
diff --git a/resources/views/components/ui/button-sm.blade.php b/resources/views/components/ui/button-sm.blade.php
index 7349534..b9c97a6 100644
--- a/resources/views/components/ui/button-sm.blade.php
+++ b/resources/views/components/ui/button-sm.blade.php
@@ -1,12 +1,18 @@
-@props(['variant' => ''])
+@props(['variant' => '', 'link' => ''])
 @php
 $variants = [
     'neutral' => 'bg-primary-600 text-white',
-    'ghost' => 'bg-gray-100 text-black text-sm'
+    'ghost' => 'bg-gray-100 text-black text-sm',
 ];
 
 $variantClass = $variants[$variant] ?? '';
 @endphp
-<button {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 $variantClass"])}}>
+@if($link !== '')
+    <a href="{{$link}}" {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 hover: active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
+        {{$slot}}
+    </a>
+@else
+<button {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80  hover:scale-110 active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
     {{$slot}}
 </button>
+@endif
diff --git a/resources/views/components/ui/button.blade.php b/resources/views/components/ui/button.blade.php
index f65da00..bd5d342 100644
--- a/resources/views/components/ui/button.blade.php
+++ b/resources/views/components/ui/button.blade.php
@@ -9,7 +9,7 @@
     $variantClass = $variants[$variant] ?? '';
 @endphp
 @if($link !== '')
-    <a {{$attributes->merge(['class' => "block  active:scale-90 transition-all duration-200 px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
+    <a {{$attributes->merge(['class' => "block px-4 py-2 rounded-lg font-medium hover:opacity-80  active:scale-80 transition-all ease-in-out duration-300 $variantClass", 'href' => $link])}}>
         <div class="flex justify-center items-center space-x-2">
             @if($icon !=='')
                 @svg("heroicon-o-$icon", 'w-5 h-5')
@@ -18,7 +18,7 @@
         </div>
     </a>
 @else
-    <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80  active:scale-90 transition-all duration-200 $variantClass", 'type'=>'submit'])}}>
+    <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80  active:scale-80 transition-all ease-in-out duration-300 $variantClass", 'type'=>'submit'])}}>
         <div class="flex justify-center items-center space-x-2">
             @if($icon !=='')
                 @svg("heroicon-o-$icon", 'w-5 h-5')
diff --git a/resources/views/components/ui/image-card.blade.php b/resources/views/components/ui/image-card.blade.php
index f8b1d2f..e62ec7a 100644
--- a/resources/views/components/ui/image-card.blade.php
+++ b/resources/views/components/ui/image-card.blade.php
@@ -1,7 +1,7 @@
 @props(['image' => '', 'alt' => ''])
-<div class="border border-gray-200 rounded-xl overflow-clip flex flex-col h-full">
+<div {{$attributes->merge(['class' => "border border-gray-200 rounded-xl overflow-clip flex flex-col h-full"])}}>
     <div class="flex flex-col h-full">
-        <div class="rounded-t-xl h-40">
+        <div class="rounded-t-xl h-70">
             <img src="{{$image}}" alt="" class="object-cover">
         </div>
         <div class="flex-1">
diff --git a/resources/views/components/ui/modal.blade.php b/resources/views/components/ui/modal.blade.php
index 58b3455..342bafb 100644
--- a/resources/views/components/ui/modal.blade.php
+++ b/resources/views/components/ui/modal.blade.php
@@ -1,4 +1,5 @@
-<dialog {{$attributes->merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg"])}} >
+<dialog
+    {{$attributes->merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg"])}} >
     <div>
         {{$slot}}
     </div>
diff --git a/resources/views/components/ui/toast.blade.php b/resources/views/components/ui/toast.blade.php
index 6c4147a..491430e 100644
--- a/resources/views/components/ui/toast.blade.php
+++ b/resources/views/components/ui/toast.blade.php
@@ -1,4 +1,4 @@
-<div class="toast hidden fixed top-10 right-5 md:right-10 bg-black text-white rounded-xl shadow-lg p-4 flex space-x-2">
+<div class="toast translate-x-[100vw] transition-transform duration-500 ease-in-out fixed top-10 right-5 md:right-10 bg-black text-white rounded-xl shadow-lg p-4 flex space-x-2">
     <p id="toast-message" class="max-w-70 wrap-break-word"></p>
     <x-ui.button-sm onclick="hideToast()">
         <x-heroicon-o-x-mark class="w-4" />
diff --git a/resources/views/dashboards/broker/deals/create.blade.php b/resources/views/dashboards/broker/deals/create.blade.php
index f88a0db..237ef60 100644
--- a/resources/views/dashboards/broker/deals/create.blade.php
+++ b/resources/views/dashboards/broker/deals/create.blade.php
@@ -8,8 +8,8 @@
         />
     </x-slot:heading>
 
-    <div class="flex items-center justify-center mb-8">
-        <x-dashboard.card class="w-11/12 md:w-8/12">
+    <div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
+        <x-dashboard.card class="w-full">
             <h3 class="text-md font-bold">Deal Information</h3>
             <form method="post" enctype="multipart/form-data" action="{{route('broker.deals.store')}}"
                   class="flex flex-col space-y-8 mt-4">
@@ -32,10 +32,11 @@ class="flex flex-col space-y-8 mt-4">
                     description="Add a link to your website, listing page or contact form"
                 />
 
-                <div class="grid grid-cols-12 w-full space-x-4">
-                    <x-ui.button variant="neutral" class="col-span-10">Submit</x-ui.button>
-                    <a href="{{route('broker.dashboard')}}"
-                       class="ui-btn border border-accent-600/20 col-span-2">Cancel</a>
+                <div class="grid md:grid-cols-12 w-full gap-4">
+                    <x-ui.button variant="neutral" class="md:col-span-10">Submit</x-ui.button>
+                    <x-ui.button link="{{route('broker.dashboard')}}" class="border border-accent-600/20 md:col-span-2">
+                        Cancel
+                    </x-ui.button>
                 </div>
             </form>
         </x-dashboard.card>
diff --git a/resources/views/dashboards/broker/deals/edit.blade.php b/resources/views/dashboards/broker/deals/edit.blade.php
index 76b128d..9f7861a 100644
--- a/resources/views/dashboards/broker/deals/edit.blade.php
+++ b/resources/views/dashboards/broker/deals/edit.blade.php
@@ -8,9 +8,8 @@
         />
     </x-slot:heading>
 
-    <div class="flex items-center justify-center mt-8">
-
-        <x-dashboard.card class="w-11/12 md:w-8/12">
+    <div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
+        <x-dashboard.card class="w-full">
             <h3 class="text-md font-bold">Deal Information</h3>
             <form method="post" enctype="multipart/form-data" action="{{route('broker.deals.update', $deal)}}"
                   class="flex flex-col space-y-8 mt-4">
diff --git a/resources/views/dashboards/broker/profile/edit.blade.php b/resources/views/dashboards/broker/profile/edit.blade.php
index ee47739..500134c 100644
--- a/resources/views/dashboards/broker/profile/edit.blade.php
+++ b/resources/views/dashboards/broker/profile/edit.blade.php
@@ -6,8 +6,8 @@
             :back-link="route('broker.profile.show', $profile)"
         />
     </x-slot:heading>
-    <div class="flex items-center justify-center">
-        <x-dashboard.card class="w-8/12">
+    <div class="flex items-center justify-center  px-4 pb-4 pt-0 md:px-8 md:pb-8">
+        <x-dashboard.card class="w-full">
             <h3 class="text-md font-bold">Profile Information</h3>
             <form method="post" enctype="multipart/form-data" action="{{route('broker.profile.update', $profile)}}"
                   class="flex flex-col space-y-8 mt-4">
@@ -27,10 +27,10 @@ class="flex flex-col space-y-8 mt-4">
                 <x-ui.input name="location" label="Location" :value="$broker->location" required
                             placeholder="Kolkata, India"/>
 
-                <div class="grid grid-cols-12 w-full space-x-4">
-                    <x-ui.button variant="neutral" class="col-span-10">Update</x-ui.button>
+                <div class="grid md:grid-cols-12 w-full gap-4">
+                    <x-ui.button variant="neutral" class="md:col-span-10">Update</x-ui.button>
                     <x-ui.button :link="route('broker.profile.show', $profile)"
-                                 class=" border border-accent-600/20 col-span-2">Cancel
+                                 class=" border border-accent-600/20 md:col-span-2">Cancel
                     </x-ui.button>
                 </div>
             </form>
diff --git a/resources/views/dashboards/broker/profile/show.blade.php b/resources/views/dashboards/broker/profile/show.blade.php
index ea2a2c1..d8cbb04 100644
--- a/resources/views/dashboards/broker/profile/show.blade.php
+++ b/resources/views/dashboards/broker/profile/show.blade.php
@@ -16,8 +16,8 @@ class="border border-accent-600/40">
         </x-dashboard.page-heading>
     </x-slot:heading>
 
-    <div class="flex items-center justify-center">
-        <div class="flex items-center justify-center w-11/12 md:w-10/12">
+    <div class="flex items-center justify-center  px-4 pb-4 pt-0 md:px-8 md:pb-8">
+        <div class="flex items-center justify-center w-full">
             <x-dashboard.card class="w-full">
                 <div class="grid grid-cols-8 gap-6">