diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
index f14ae60338..2804d1198a 100644
--- a/src/app/components/Modal/index.tsx
+++ b/src/app/components/Modal/index.tsx
@@ -1,5 +1,6 @@
 import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ReactModal from "react-modal";
+import { classNames } from "~/app/utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -7,6 +8,7 @@ type Props = {
   close: () => void;
   contentLabel: string;
   title?: string;
+  position?: "top" | "center";
 };
 
 export default function Modal({
@@ -15,6 +17,7 @@ export default function Modal({
   close: closeModal,
   contentLabel,
   title,
+  position = "center",
 }: Props) {
   return (
     <ReactModal
@@ -24,8 +27,12 @@ export default function Modal({
       isOpen={isOpen}
       onRequestClose={closeModal}
       contentLabel={contentLabel}
-      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center cursor-pointer"
-      className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
+      overlayClassName={classNames(
+        "bg-black bg-opacity-50 fixed inset-0 flex justify-center cursor-pointer",
+        position == "center" && "items-center",
+        position == "top" && "items-start pt-20"
+      )}
+      className="rounded-lg shadow-xl bg-white dark:bg-surface-01dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
       style={{ content: { maxHeight: "90vh" } }}
     >
       {title && (
diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 6cc460d40a..b511e4ec24 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -52,16 +52,17 @@ export default function TransactionModal({
         onClose();
       }}
       contentLabel={"Transactions"}
+      position="top"
     >
       <div className="p-3 flex flex-col gap-4 justify-center ">
         <div>
           <div className="flex items-center justify-center">
             {getTransactionType(transaction) == "outgoing" ? (
-              <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-8">
+              <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-4">
                 <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
               </div>
             ) : (
-              <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-8">
+              <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-4">
                 <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
               </div>
             )}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 53382dcbd7..a9ac5a8f7e 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -49,66 +49,64 @@ export default function TransactionsTable({
         <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
       ) : (
         <>
-          <div className="overflow-hidden">
-            {transactions?.map((tx) => {
-              const type = getTransactionType(tx);
+          {transactions?.map((tx) => {
+            const type = getTransactionType(tx);
 
-              return (
-                <div
-                  key={tx.id}
-                  className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
-                  onClick={() => openDetails(tx)}
-                >
-                  <div className="flex gap-4">
-                    <div className="flex items-center">
-                      {type == "outgoing" ? (
-                        <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
-                          <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
-                        </div>
-                      ) : (
-                        <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
-                          <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
-                        </div>
-                      )}
-                    </div>
-                    <div className="overflow-hidden mr-3">
-                      <div className="text-sm font-medium text-black truncate dark:text-white">
-                        <p className="truncate">
-                          {tx.title ||
-                            tx.boostagram?.message ||
-                            (type == "incoming" ? t("received") : t("sent"))}
-                        </p>
+            return (
+              <div
+                key={tx.id}
+                className="-mx-2 px-2 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
+                onClick={() => openDetails(tx)}
+              >
+                <div className="flex gap-3">
+                  <div className="flex items-center">
+                    {type == "outgoing" ? (
+                      <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
+                        <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
+                      </div>
+                    ) : (
+                      <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
+                        <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
                       </div>
-                      <p className="text-xs text-gray-400 dark:text-neutral-500">
-                        {tx.date}
+                    )}
+                  </div>
+                  <div className="overflow-hidden mr-3">
+                    <div className="text-sm font-medium text-black truncate dark:text-white">
+                      <p className="truncate">
+                        {tx.title ||
+                          tx.boostagram?.message ||
+                          (type == "incoming" ? t("received") : t("sent"))}
                       </p>
                     </div>
-                    <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
-                      <div>
-                        <p
-                          className={classNames(
-                            "text-sm font-medium",
-                            type == "incoming"
-                              ? "text-green-600 dark:color-green-400"
-                              : "text-orange-600 dark:color-orange-400"
-                          )}
-                        >
-                          {type == "outgoing" ? "-" : "+"}{" "}
-                          {getFormattedSats(tx.totalAmount)}
-                        </p>
-
-                        {!!tx.totalAmountFiat && (
-                          <p className="text-xs text-gray-400 dark:text-neutral-600">
-                            ~{tx.totalAmountFiat}
-                          </p>
+                    <p className="text-xs text-gray-400 dark:text-neutral-500">
+                      {tx.date}
+                    </p>
+                  </div>
+                  <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
+                    <div>
+                      <p
+                        className={classNames(
+                          "text-sm",
+                          type == "incoming"
+                            ? "text-green-600 dark:color-green-400"
+                            : "text-orange-600 dark:color-orange-400"
                         )}
-                      </div>
+                      >
+                        {type == "outgoing" ? "-" : "+"}{" "}
+                        {getFormattedSats(tx.totalAmount)}
+                      </p>
+
+                      {!!tx.totalAmountFiat && (
+                        <p className="text-xs text-gray-400 dark:text-neutral-600">
+                          ~{tx.totalAmountFiat}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
           {transaction && (
             <TransactionModal
               transaction={transaction}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index f9e8c63b54..027b92ef0f 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -1089,7 +1089,7 @@
     "transactions_table": {
       "fee": "Fee",
       "preimage": "Preimage",
-      "payment_hash": "Payment hash",
+      "payment_hash": "Payment Hash",
       "received": "Received",
       "sent": "Sent",
       "date_time": "Date & Time",