diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index d20e002..3ef0d43 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -23,7 +23,7 @@
 }
 
 .cursor-pointer{
-    cursor: pointer
+    cursor: pointer;
 }
 
 /* Accounts */
@@ -32,4 +32,14 @@
 #profileImage:hover {
     transition: 0.3s ease-in-out;
     opacity: 0.5;
-}
\ No newline at end of file
+}
+
+/* Transaction Add Button */
+.transaction-add-button{
+    transform: scale(1);
+    transition: 0.3s ease-in-out;
+}
+
+.transaction-add-button:hover {
+    transform: scale(1.1);
+}
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index cf8a753..0789866 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -228,6 +228,10 @@ class="ms-auto text-sm font-weight-bold">{{ $category['percentage'] }}%</span>
             </div>
         </div>
     </div>
+
+    <div id="modalDiv">
+        @include('transactions.add-edit-modal')
+    </div>
 @endsection
 
 @section('script')
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 392bf89..3b056aa 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -4,7 +4,7 @@
         <div class="col-12">
             <!-- Navbar -->
             <nav
-                class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-2 start-0 end-0">
+                class="d-lg-block d-none navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-2 start-0 end-0">
                 <div class="container-fluid px-0">
                     <button class="navbar-toggler shadow-none border-0 outline-none px-0" type="button"
                         data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation"
@@ -21,31 +21,31 @@ class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-
                     </a>
                     <div class="d-lg-none d-block">
                         @if (Auth::check())
-                        <div class="dropdown">
-                            <a class="avatar avatar-sm shadow-md cursor-pointer rounded-circle overflow-hidden mt-2"
-                                type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <img src="{{ Auth::user()->image ? asset('storage/' . Auth::user()->image) : asset('assets/img/user-placeholder.png') }}"
-                                    alt="team4">
-                            </a>
-                            <ul class="dropdown-menu dropdown-menu-end">
-                                <li>
-                                    <a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
-                                        class="nav-link dropdown-item">
-                                        Profile
-                                    </a>
-                                </li>
-                                <li>
-                                    <form method="POST" action="{{ route('logout') }}">
-                                        @csrf
-                                        <a class="nav-link dropdown-item"
-                                            onclick="event.preventDefault(); this.closest('form').submit();">
-                                            Logout
+                            <div class="dropdown">
+                                <a class="avatar avatar-sm shadow-md cursor-pointer rounded-circle overflow-hidden mt-2"
+                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <img src="{{ Auth::user()->image ? asset('storage/' . Auth::user()->image) : asset('assets/img/user-placeholder.png') }}"
+                                        alt="team4">
+                                </a>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
+                                            class="nav-link dropdown-item">
+                                            Profile
                                         </a>
-                                    </form>
-                                </li>
-                            </ul>
-                        </div>
-                    @endif
+                                    </li>
+                                    <li>
+                                        <form method="POST" action="{{ route('logout') }}">
+                                            @csrf
+                                            <a class="nav-link dropdown-item"
+                                                onclick="event.preventDefault(); this.closest('form').submit();">
+                                                Logout
+                                            </a>
+                                        </form>
+                                    </li>
+                                </ul>
+                            </div>
+                        @endif
                     </div>
                     <div class="collapse navbar-collapse" id="navigation">
                         <ul class="navbar-nav mx-auto ms-xl-auto ">
@@ -104,12 +104,44 @@ class="nav-link dropdown-item">
                                 </div>
                             @endif
                         </ul>
-                        
+
 
                     </div>
                 </div>
             </nav>
             <!-- End Navbar -->
+
+            {{-- Mobile Bottom Navigation --}}
+            <nav class="d-lg-none fixed-bottom bottom-2 mx-3 px-5 py-2 shadow start-0 end-0 bg-white blur blur-rounded">
+
+                <div class="d-flex justify-content-between align-items-center">
+                    <a href="{{ route('dashboard') }}" class="text-dark text-decoration-none">
+                        <i class="fas fa-chart-line fa-lg"></i>
+                    </a>
+
+                    <a href="{{ route('transactions.index') }}" class="text-dark text-decoration-none">                        
+                        <i class="far fa-credit-card fa-lg"></i>
+                    </a>
+
+                    <a href="#" data-bs-toggle="modal" data-bs-target="#transactionModal" onclick="openModalForAdd()"
+                        class="bg-primary shadow text-white rounded-circle d-flex align-items-center justify-content-center transaction-add-button"
+                        style="width: 40px; height: 40px;">
+                        <span class="btn-inner--icon">
+                            <i class="fas fa-plus"></i>
+                        </span>
+                    </a>
+
+
+                    <a href="{{ route('accounts.index') }}" class="text-dark text-decoration-none">
+                        <i class="far fa-building fa-lg"></i>
+                    </a>
+
+                    <a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
+                        class="text-dark text-decoration-none">
+                        <i class="far fa-user fa-lg"></i>
+                    </a>
+                </div>
+            </nav>
         </div>
     </div>
 </div>
diff --git a/resources/views/partials/success-toast.blade.php b/resources/views/partials/success-toast.blade.php
index 8151157..c39b34e 100644
--- a/resources/views/partials/success-toast.blade.php
+++ b/resources/views/partials/success-toast.blade.php
@@ -1,5 +1,5 @@
 {{-- Success Toast --}}
-<div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
+<div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000" style="z-index: 1040;">
     <div class="d-flex">
       <div id="successToastBody" class="toast-body">
         <!-- The message will be updated dynamically -->