diff --git a/src/components/layouts/rightaside/RecentPaymentsBar.jsx b/src/components/layouts/rightaside/RecentPaymentsBar.jsx
new file mode 100644
index 0000000..001f472
--- /dev/null
+++ b/src/components/layouts/rightaside/RecentPaymentsBar.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+export default function RecentPaymentsBar() {
+    return (
+        <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Recent Payments[7 days]</p>
+                <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                            <CustomCounter targetNumber={18} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Approved</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                            <CustomCounter targetNumber={5} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Verified</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                            <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Failed</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                            <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Total</p>
+                    </div>
+                </div>
+            </div>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Recent Login</p>
+                <div className='flex flex-col gap-4'>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/layouts/rightaside/RightAsideBar.jsx b/src/components/layouts/rightaside/RightAsideBar.jsx
index 714fcf4..61b0196 100644
--- a/src/components/layouts/rightaside/RightAsideBar.jsx
+++ b/src/components/layouts/rightaside/RightAsideBar.jsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import Icons from '../../Icons'
-import Orders from './Orders'
+//import Orders from './Orders'
 import Tickets from './Tickets'
 import Tasks from './Tasks'
+import RecentPaymentsBar from "./RecentPaymentsBar";
 
 export default function RightAsideBar() {
 
@@ -29,7 +30,7 @@ export default function RightAsideBar() {
         </div>
 
         {/* Body */}
-        {active === 'orders' && <Orders />}
+        {active === 'orders' && <RecentPaymentsBar />}
         {active === 'tickets' && <Tickets />}
         {active === 'tasks' && <Tasks />}
     </div>