diff --git a/src/api/guardian-network/GuardianNetwork.ts b/src/api/guardian-network/GuardianNetwork.ts
index 191ff4ff..fc932e56 100644
--- a/src/api/guardian-network/GuardianNetwork.ts
+++ b/src/api/guardian-network/GuardianNetwork.ts
@@ -45,10 +45,12 @@ export class GuardianNetwork {
     address,
     appId,
     exclusiveAppId,
+    from,
     pagination = DefaultPageRequest,
     payloadType,
     sourceChain,
     targetChain,
+    to,
     txHash,
     vaaID,
   }: GetOperationsInput): Promise<GetOperationsOutput[]> {
@@ -58,9 +60,11 @@ export class GuardianNetwork {
       address,
       appId,
       exclusiveAppId,
+      from,
       payloadType,
       sourceChain,
       targetChain,
+      to,
       txHash,
     });
 
diff --git a/src/api/guardian-network/types.ts b/src/api/guardian-network/types.ts
index da9f6bd9..9ec6dd32 100644
--- a/src/api/guardian-network/types.ts
+++ b/src/api/guardian-network/types.ts
@@ -280,6 +280,8 @@ export interface GetOperationsInput {
   targetChain?: string;
   txHash?: string;
   vaaID?: string;
+  from?: string;
+  to?: string;
 }
 
 export interface INFTInfo {
diff --git a/src/components/molecules/Calendar/index.tsx b/src/components/molecules/Calendar/index.tsx
new file mode 100644
index 00000000..a03b4849
--- /dev/null
+++ b/src/components/molecules/Calendar/index.tsx
@@ -0,0 +1,262 @@
+import { useRef, useState } from "react";
+import ReactDatePicker from "react-datepicker";
+import { ArrowRightIcon, ChevronDownIcon } from "src/icons/generic";
+import { TSelectedPeriod } from "src/utils/chainActivityUtils";
+import { useOutsideClick } from "src/utils/hooks";
+import "./styles.scss";
+
+interface ICalendarProps {
+  className?: string;
+  startDate: Date;
+  setStartDate: (date: Date) => void;
+  endDate: Date;
+  setEndDate: (date: Date) => void;
+  lastBtnSelected: TSelectedPeriod;
+  setLastBtnSelected: (btn: TSelectedPeriod) => void;
+  startDateDisplayed: Date;
+  endDateDisplayed: Date;
+  isDesktop: boolean;
+  showDateRange?: boolean;
+  showAgoButtons?: boolean;
+}
+
+const Calendar = ({
+  className = "",
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  lastBtnSelected,
+  setLastBtnSelected,
+  startDateDisplayed,
+  endDateDisplayed,
+  isDesktop,
+  showDateRange = false,
+  showAgoButtons = false,
+}: ICalendarProps) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const dateContainerRef = useRef<HTMLDivElement>(null);
+
+  const setTimePeriod = (
+    from: number,
+    to: number | undefined,
+    unit: "days" | "months" | "years" | undefined,
+    resetHours: boolean = true,
+    btnSelected: TSelectedPeriod = "custom",
+  ) => {
+    const start = from === Infinity ? new Date(2021, 7, 1) : new Date();
+    const end = new Date();
+
+    setLastBtnSelected(btnSelected);
+
+    if (resetHours) {
+      start.setHours(0, 0, 0, 0);
+      end.setHours(0, 0, 0, 0);
+    }
+
+    const timeSetters = {
+      days: (date: Date, v: number) => date.setDate(date.getDate() - v),
+      months: (date: Date, v: number) => date.setMonth(date.getMonth() - v),
+      years: (date: Date, v: number) => date.setFullYear(date.getFullYear() - v),
+    };
+
+    if (from !== Infinity && unit) {
+      timeSetters[unit](start, from);
+    }
+
+    if (to && unit) {
+      timeSetters[unit](end, to);
+    }
+
+    setStartDate(start);
+    setEndDate(end);
+    setShowCalendar(false);
+  };
+
+  const handleLast24Hours = () => setTimePeriod(1, undefined, "days", false, "24h");
+  const handleLastWeekBtn = () => setTimePeriod(7, undefined, "days", true, "week");
+  const handleLastMonthBtn = () => setTimePeriod(1, undefined, "months", true, "month");
+  const handleLast6MonthsBtn = () => setTimePeriod(6, undefined, "months", true, "custom");
+  const handleLastYearBtn = () => setTimePeriod(1, undefined, "years", true, "year");
+  const handleAllTime = () => setTimePeriod(Infinity, undefined, undefined, true, "all");
+
+  const handleAgo3Days = () => setTimePeriod(7, 3, "days", true, "custom");
+  const handleAgo1Week = () => setTimePeriod(30, 7, "days", true, "ago1Week");
+  const handleAgo1Month = () => setTimePeriod(3, 1, "months", true, "ago1Month");
+  const handleAgo3Months = () => setTimePeriod(6, 3, "months", true, "ago3Months");
+  const handleAgo6Months = () => setTimePeriod(12, 6, "months", true, "ago6Months");
+  const handleAgoAllTime = () => {
+    setLastBtnSelected("all");
+    setStartDate(null);
+    setEndDate(null);
+    setShowCalendar(false);
+  };
+
+  const handleOutsideClickDate = () => {
+    setStartDate(startDateDisplayed);
+    setEndDate(endDateDisplayed);
+    setShowCalendar(false);
+  };
+
+  useOutsideClick({ ref: dateContainerRef, callback: handleOutsideClickDate });
+
+  return (
+    <div className={`calendar-custom ${className}`} ref={dateContainerRef}>
+      <button className="calendar-custom-btn" onClick={() => setShowCalendar(!showCalendar)}>
+        <span className="calendar-custom-btn-text">
+          {showDateRange && startDateDisplayed && endDateDisplayed ? (
+            <>
+              {startDateDisplayed.toLocaleDateString()} <ArrowRightIcon />{" "}
+              {endDateDisplayed.toLocaleDateString()}
+            </>
+          ) : (
+            <>
+              Date <span className="range-text">range</span>
+            </>
+          )}
+        </span>
+
+        <ChevronDownIcon style={{ transform: showCalendar ? "rotate(-180deg)" : "" }} width={24} />
+      </button>
+
+      <div className={`calendar-custom-box ${showCalendar ? "show-date" : ""}`}>
+        <div
+          className={`calendar-custom-box-date-calendar ${
+            startDate === endDate ? "calendar-custom-box-date-calendar-one-day-selected" : ""
+          }`}
+        >
+          <ReactDatePicker
+            {...({ swapRange: true } as any)}
+            selected={startDate}
+            onChange={(dates: [Date | null, Date | null]) => {
+              const [start, end] = dates;
+              start?.setHours(0, 0, 0, 0);
+              end?.setHours(0, 0, 0, 0);
+
+              if (start?.getTime() !== end?.getTime()) {
+                setStartDate(start);
+                setEndDate(end);
+              }
+
+              if (end?.getTime()) {
+                setLastBtnSelected("custom");
+                setShowCalendar(false);
+              }
+            }}
+            startDate={startDate}
+            endDate={endDate}
+            selectsRange
+            inline
+            maxDate={new Date()}
+            monthsShown={isDesktop ? 2 : 1}
+            showMonthDropdown
+          />
+
+          <div className="calendar-custom-box-date-calendar-btns">
+            <button
+              className="clear-btn"
+              disabled={showAgoButtons ? lastBtnSelected === "all" : lastBtnSelected === "year"}
+              onClick={() => {
+                if (showAgoButtons) {
+                  handleAgoAllTime();
+                } else {
+                  handleLastYearBtn();
+                }
+              }}
+            >
+              Clear
+            </button>
+
+            <button className="done-btn" onClick={() => setShowCalendar(false)}>
+              Done
+            </button>
+          </div>
+        </div>
+
+        <div className="calendar-custom-box-date-selector">
+          {showAgoButtons ? (
+            <div>
+              <button
+                className={`btn ${lastBtnSelected === "ago1Week" ? "active" : ""}`}
+                onClick={handleAgo1Week}
+              >
+                1 week ago
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "ago1Month" ? "active" : ""}`}
+                onClick={handleAgo1Month}
+              >
+                1 month ago
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "ago3Months" ? "active" : ""}`}
+                onClick={handleAgo3Months}
+              >
+                3 months ago
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "ago6Months" ? "active" : ""}`}
+                onClick={handleAgo6Months}
+              >
+                6 months ago
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "all" ? "active" : ""}`}
+                onClick={handleAgoAllTime}
+              >
+                All time
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "custom" ? "active" : ""}`}
+                onClick={handleAgo3Days}
+              >
+                Custom
+              </button>
+            </div>
+          ) : (
+            <div>
+              <button
+                className={`btn ${lastBtnSelected === "24h" ? "active" : ""}`}
+                onClick={handleLast24Hours}
+              >
+                Last 24 hours
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "week" ? "active" : ""}`}
+                onClick={handleLastWeekBtn}
+              >
+                Last week
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "month" ? "active" : ""}`}
+                onClick={handleLastMonthBtn}
+              >
+                Last month
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "year" ? "active" : ""}`}
+                onClick={handleLastYearBtn}
+              >
+                Last year
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "all" ? "active" : ""}`}
+                onClick={handleAllTime}
+              >
+                All time
+              </button>
+              <button
+                className={`btn ${lastBtnSelected === "custom" ? "active" : ""}`}
+                onClick={handleLast6MonthsBtn}
+              >
+                Custom
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;
diff --git a/src/components/molecules/Calendar/styles.scss b/src/components/molecules/Calendar/styles.scss
new file mode 100644
index 00000000..ca4d9b1d
--- /dev/null
+++ b/src/components/molecules/Calendar/styles.scss
@@ -0,0 +1,481 @@
+@use "src/styles/globals.scss" as *;
+
+.calendar-custom {
+  position: relative;
+
+  &-text {
+    @include centered-row;
+    gap: 8px;
+  }
+
+  &-btn {
+    @include button-secondary;
+    color: var(--color-white);
+    height: 48px;
+    justify-content: space-between;
+    padding-right: 8px;
+    width: 100%;
+
+    @include desktop {
+      height: 36px;
+      position: relative;
+    }
+
+    &-text {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      & > svg {
+        color: var(--color-white-60);
+      }
+
+      .range-text {
+        display: block;
+
+        @include desktop {
+          display: none;
+        }
+
+        @media only screen and (min-width: 1260px) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &-box {
+    background-color: var(--color-gray-900);
+    border-radius: 16px;
+    flex-direction: column;
+    min-width: max-content;
+    position: fixed;
+    transition: inset 0.3s ease;
+    z-index: 55;
+    display: none;
+    margin-top: 12px;
+    width: calc(100% - 42px);
+
+    @include desktop {
+      border-radius: 8px;
+      border: none;
+      display: none;
+      inset: unset;
+      left: 0;
+      margin-top: 0;
+      position: absolute;
+      transition: none;
+      width: auto;
+    }
+
+    &.show-date {
+      display: flex;
+      flex-direction: column-reverse;
+      overflow: auto;
+      max-height: calc(100svh - 200px);
+
+      @include desktop {
+        border-radius: 16px;
+        display: flex;
+        flex-direction: row-reverse;
+        inset: unset;
+        left: 0;
+        top: 52px;
+        transform: translateX(-42%);
+      }
+
+      @include bigDesktop {
+        transform: unset;
+      }
+    }
+
+    &-chains {
+      @include centered-column;
+      gap: 8px 24px;
+      justify-content: flex-start;
+      overflow-y: auto;
+      padding: 16px;
+
+      @include desktop {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      &-item {
+        @include centered-row;
+        cursor: pointer;
+        gap: 8px;
+        justify-content: space-between;
+        opacity: 0.5;
+        white-space: nowrap;
+
+        @include desktop {
+          flex-direction: row-reverse;
+          justify-content: start;
+        }
+
+        &:hover {
+          opacity: 1;
+        }
+
+        &.all-chains {
+          grid-column: span 4;
+          margin-bottom: 16px;
+        }
+
+        &-checkbox {
+          @include centered-row;
+          border-radius: 2px;
+          border: 1px solid #6e71a3;
+          color: var(--color-white);
+          cursor: pointer;
+          height: 16px;
+          justify-content: center;
+          width: 16px;
+        }
+      }
+
+      &-bottom {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: 1fr 1fr;
+        padding: 24px 16px 16px 16px;
+
+        @include desktop {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+
+        & > button {
+          align-items: center;
+          border-radius: 8px;
+          cursor: pointer;
+          display: flex;
+          font-size: 16px;
+          font-weight: 600;
+          gap: 16px;
+          height: 44px;
+          justify-content: center;
+
+          &:disabled {
+            cursor: not-allowed;
+            opacity: 0.3;
+          }
+        }
+      }
+    }
+
+    &-date {
+      &-selector {
+        @include centered-column;
+        border-bottom: 1px solid var(--color-gray-800);
+        gap: 73px;
+        justify-content: flex-end;
+        padding: 8px;
+        width: 100%;
+
+        @include desktop {
+          border-bottom: none;
+          border-right: 1px solid var(--color-gray-800);
+          justify-content: flex-start;
+          width: 156px;
+        }
+
+        & > div:first-child {
+          display: grid;
+          gap: 0 16px;
+          grid-template-columns: 1fr 1fr;
+
+          @include desktop {
+            @include centered-column;
+          }
+        }
+
+        & > div {
+          @include centered-column;
+          align-items: flex-start;
+          gap: 8px 0;
+
+          & > .btn {
+            @include text-roboto-body-400;
+            background-color: transparent;
+            border-radius: 8px;
+            border: none;
+            color: var(--color-gray-400);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 400;
+            padding: 8px 0 8px 8px;
+            text-align: start;
+            width: 100%;
+
+            &:hover {
+              background-color: var(--color-white-05);
+            }
+
+            &.active {
+              background-color: var(--color-gray-800);
+              color: var(--color-white);
+            }
+          }
+        }
+      }
+
+      &-calendar {
+        margin: 0 auto auto auto;
+        padding: 16px 16px 72px 16px;
+        width: 100%;
+
+        @include desktop {
+          margin: 0;
+          min-height: unset;
+          width: max-content;
+        }
+
+        & .react-datepicker {
+          @include centered-column;
+          background-color: transparent;
+          border: none;
+          font-size: 16px;
+
+          @include tablet {
+            @include centered-row;
+            align-items: flex-start;
+          }
+
+          @include desktop {
+            display: block;
+          }
+
+          & .react-datepicker__navigation {
+            border-radius: 50%;
+            top: 4px;
+            width: 36px;
+
+            & > span::before {
+              border-color: var(--color-white);
+              top: 0;
+
+              @include desktop {
+                top: 4px;
+              }
+            }
+          }
+
+          & .react-datepicker__header {
+            background-color: transparent;
+            border-radius: 0;
+            border: none;
+            padding: 0;
+
+            @include desktop {
+              padding: 8px 0 0 0;
+            }
+
+            & .react-datepicker__current-month {
+              @include text-roboto-body-500;
+              color: var(--color-white);
+            }
+
+            & .react-datepicker__day-names {
+              padding: 16px 0 0 0;
+
+              @include desktop {
+                padding: 16px 0 8px 0;
+              }
+
+              & .react-datepicker__day-name {
+                @include text-heading6;
+                color: var(--color-gray-600);
+                height: 36px;
+                line-height: 36px;
+                margin: 0;
+                text-transform: uppercase;
+                width: 36px;
+              }
+            }
+          }
+
+          & .react-datepicker__month {
+            margin: 0 24px;
+
+            & .react-datepicker__day {
+              @include text-roboto-body-400;
+              border-radius: 0;
+              color: var(--color-white);
+              line-height: 36px;
+              margin: 0;
+              width: 36px;
+
+              &:hover {
+                background-color: var(--color-gray-600);
+                color: var(--color-white-50);
+                font-weight: 600;
+              }
+
+              &--keyboard-selected {
+                background-color: transparent;
+              }
+
+              &--in-selecting-range {
+                background-color: var(--color-white-05);
+                color: var(--color-white-50);
+              }
+
+              &--selected {
+                background-color: var(--color-gray-800);
+                color: var(--color-white-50);
+              }
+
+              &--in-range {
+                background-color: var(--color-white-05);
+                color: var(--color-white-50);
+              }
+
+              &--range-start:not(&--outside-month) {
+                background-color: var(--color-white-05);
+                border-radius: 50% 0 0 50%;
+                color: var(--color-white-90);
+                font-weight: 600;
+                position: relative;
+                z-index: 1;
+
+                &::before {
+                  background-color: var(--color-gray-800);
+                  border-radius: 50%;
+                  content: "";
+                  display: block;
+                  height: 28px;
+                  left: 50%;
+                  position: absolute;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  width: 28px;
+                  z-index: -1;
+                }
+              }
+
+              &--range-end:not(&--outside-month) {
+                background-color: var(--color-white-05);
+                border-radius: 0 50% 50% 0;
+                color: var(--color-white-90);
+                font-weight: 600;
+                position: relative;
+                z-index: 1;
+
+                &::before {
+                  background-color: var(--color-gray-800);
+                  border-radius: 50%;
+                  content: "";
+                  display: block;
+                  height: 28px;
+                  left: 50%;
+                  position: absolute;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  width: 28px;
+                  z-index: -1;
+                }
+              }
+
+              &--disabled {
+                color: var(--color-white);
+                opacity: 0.3;
+                text-decoration: line-through;
+
+                &:hover {
+                  background-color: transparent;
+                  color: var(--color-white);
+                  cursor: not-allowed;
+                  font-weight: 400;
+                }
+              }
+            }
+          }
+
+          & .react-datepicker__header__dropdown {
+            position: absolute;
+            right: 0;
+            left: 0;
+          }
+
+          & .react-datepicker__month-read-view {
+            & .react-datepicker__month-read-view--selected-month {
+              padding: 0 16px;
+              visibility: hidden;
+            }
+
+            & .react-datepicker__month-read-view--down-arrow {
+              border-color: var(--color-gray-600);
+              left: 0;
+              margin: 0 auto;
+              right: 0;
+            }
+          }
+
+          & .react-datepicker__month-dropdown {
+            background-color: var(--color-gray-800);
+            border-radius: 16px;
+            border: none;
+            padding: 8px;
+            z-index: 88;
+            margin-top: -24px;
+
+            & .react-datepicker__month-option {
+              @include text-roboto-body-400;
+              color: var(--color-white);
+
+              &:hover {
+                background-color: var(--color-white-05);
+              }
+            }
+          }
+        }
+
+        &-one-day-selected {
+          & .react-datepicker {
+            & .react-datepicker__month {
+              & .react-datepicker__day {
+                &--range-start {
+                  border-radius: 0;
+                }
+
+                &--range-end {
+                  border-radius: 0;
+                }
+              }
+            }
+          }
+        }
+
+        &-btns {
+          @include centered-row;
+          bottom: 16px;
+          gap: 20px;
+          position: absolute;
+          right: 16px;
+
+          & > .clear-btn {
+            @include button-ghost;
+          }
+
+          & > .done-btn {
+            @include button-primary;
+            color: var(--color-black);
+            width: 100%;
+
+            @include desktop {
+              padding: 8px 24px;
+              width: auto;
+            }
+
+            &:disabled {
+              cursor: not-allowed;
+              opacity: 0.3;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/molecules/index.tsx b/src/components/molecules/index.tsx
index b0990142..92c263be 100644
--- a/src/components/molecules/index.tsx
+++ b/src/components/molecules/index.tsx
@@ -1,5 +1,6 @@
 export { default as Banner } from "./Banner";
 export { default as BlockSection } from "./BlockSection";
+export { default as Calendar } from "./Calendar";
 export { default as CopyToClipboard } from "./CopyToClipboard";
 export { default as CrossChainChart } from "./CrossChainChart";
 export { default as ErrorPlaceholder } from "./ErrorPlaceholder";
diff --git a/src/components/organisms/ChainActivity/Calendar.tsx b/src/components/organisms/ChainActivity/Calendar.tsx
deleted file mode 100644
index 6ab0b5d7..00000000
--- a/src/components/organisms/ChainActivity/Calendar.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { useRef, useState } from "react";
-import ReactDatePicker from "react-datepicker";
-import { ChevronDownIcon } from "src/icons/generic";
-import { TSelectedPeriod } from "src/utils/chainActivityUtils";
-import { useOutsideClick } from "src/utils/hooks";
-
-interface ICalendarProps {
-  startDate: Date;
-  setStartDate: (date: Date) => void;
-  endDate: Date;
-  setEndDate: (date: Date) => void;
-  lastBtnSelected: TSelectedPeriod;
-  setLastBtnSelected: (btn: TSelectedPeriod) => void;
-  startDateDisplayed: Date;
-  endDateDisplayed: Date;
-  isDesktop: boolean;
-}
-
-export const Calendar = ({
-  startDate,
-  setStartDate,
-  endDate,
-  setEndDate,
-  lastBtnSelected,
-  setLastBtnSelected,
-  startDateDisplayed,
-  endDateDisplayed,
-  isDesktop,
-}: ICalendarProps) => {
-  const [showCalendar, setShowCalendar] = useState(false);
-  const dateContainerRef = useRef<HTMLDivElement>(null);
-
-  const setTimePeriod = (
-    value: number,
-    unit: "days" | "months" | "years",
-    resetHours: boolean = true,
-    btnSelected: TSelectedPeriod = "custom",
-    startDate?: Date,
-    endDate?: Date,
-  ) => {
-    const start = startDate || new Date();
-    const end = endDate || new Date();
-    setLastBtnSelected(btnSelected);
-
-    if (resetHours) {
-      start.setHours(0, 0, 0, 0);
-      end.setHours(0, 0, 0, 0);
-    }
-
-    if (!startDate) {
-      const timeSetters = {
-        days: (date: Date, value: number) => date.setDate(date.getDate() - value),
-        months: (date: Date, value: number) => date.setMonth(date.getMonth() - value),
-        years: (date: Date, value: number) => date.setFullYear(date.getFullYear() - value),
-      };
-
-      timeSetters[unit](start, value);
-    }
-
-    setStartDate(start);
-    setEndDate(end);
-    setShowCalendar(false);
-  };
-
-  const handleLast24Hours = () => setTimePeriod(1, "days", false, "24h");
-  const handleLastWeekBtn = () => setTimePeriod(7, "days", true, "week");
-  const handleLastMonthBtn = () => setTimePeriod(1, "months", true, "month");
-  const handleLast6MonthsBtn = () => setTimePeriod(6, "months", true, "custom");
-  const handleLastYearBtn = () => setTimePeriod(1, "years", true, "year");
-  const handleAllTime = () => {
-    const start = new Date(2021, 7, 1);
-    const end = new Date();
-    setTimePeriod(0, "days", true, "all", start, end);
-  };
-
-  const handleOutsideClickDate = () => {
-    setStartDate(startDateDisplayed);
-    setEndDate(endDateDisplayed);
-    setShowCalendar(false);
-  };
-
-  useOutsideClick({ ref: dateContainerRef, callback: handleOutsideClickDate });
-
-  return (
-    <div
-      className="chain-activity-chart-top-filters-section calendar-section"
-      ref={dateContainerRef}
-    >
-      <button
-        className="chain-activity-chart-top-filters-section-btn"
-        onClick={() => setShowCalendar(!showCalendar)}
-      >
-        <span className="date-range-text">
-          Date <span className="range-text">Range</span>
-        </span>
-
-        <ChevronDownIcon style={{ transform: showCalendar ? "rotate(-180deg)" : "" }} width={24} />
-      </button>
-
-      <div
-        className={`chain-activity-chart-top-filters-section-box ${
-          showCalendar ? "show-date" : ""
-        }`}
-      >
-        <div
-          className={`chain-activity-chart-top-filters-section-box-date-calendar ${
-            startDate === endDate
-              ? "chain-activity-chart-top-filters-section-box-date-calendar-one-day-selected"
-              : ""
-          }`}
-        >
-          <ReactDatePicker
-            {...({ swapRange: true } as any)}
-            selected={startDate}
-            onChange={(dates: [Date | null, Date | null]) => {
-              const [start, end] = dates;
-              start?.setHours(0, 0, 0, 0);
-              end?.setHours(0, 0, 0, 0);
-
-              if (start?.getTime() !== end?.getTime()) {
-                setStartDate(start);
-                setEndDate(end);
-                setLastBtnSelected("custom");
-              }
-            }}
-            startDate={startDate}
-            endDate={endDate}
-            selectsRange
-            inline
-            maxDate={new Date()}
-            monthsShown={isDesktop ? 2 : 1}
-            showMonthDropdown
-          />
-
-          <div className="chain-activity-chart-top-filters-section-box-date-calendar-btns">
-            <button
-              className="clear-btn"
-              onClick={() => {
-                handleAllTime();
-                setShowCalendar(false);
-              }}
-            >
-              Clear
-            </button>
-
-            <button
-              className="done-btn"
-              onClick={() => setShowCalendar(false)}
-              disabled={!startDate || !endDate}
-            >
-              Done
-            </button>
-          </div>
-        </div>
-
-        <div className="chain-activity-chart-top-filters-section-box-date-selector">
-          <div>
-            <button
-              className={`btn ${lastBtnSelected === "24h" ? "active" : ""}`}
-              onClick={handleLast24Hours}
-            >
-              Last 24 hours
-            </button>
-            <button
-              className={`btn ${lastBtnSelected === "week" ? "active" : ""}`}
-              onClick={handleLastWeekBtn}
-            >
-              Last week
-            </button>
-            <button
-              className={`btn ${lastBtnSelected === "month" ? "active" : ""}`}
-              onClick={handleLastMonthBtn}
-            >
-              Last month
-            </button>
-            <button
-              className={`btn ${lastBtnSelected === "year" ? "active" : ""}`}
-              onClick={handleLastYearBtn}
-            >
-              Last year
-            </button>
-            <button
-              className={`btn ${lastBtnSelected === "all" ? "active" : ""}`}
-              onClick={handleAllTime}
-            >
-              All time
-            </button>
-            <button
-              className={`btn ${lastBtnSelected === "custom" ? "active" : ""}`}
-              onClick={handleLast6MonthsBtn}
-            >
-              Custom
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/organisms/ChainActivity/index.tsx b/src/components/organisms/ChainActivity/index.tsx
index 082dc8fa..8ce8b003 100644
--- a/src/components/organisms/ChainActivity/index.tsx
+++ b/src/components/organisms/ChainActivity/index.tsx
@@ -13,7 +13,7 @@ import {
   Select,
   ToggleGroup,
 } from "src/components/atoms";
-import { ErrorPlaceholder, WormholeScanBrand } from "src/components/molecules";
+import { Calendar, ErrorPlaceholder, WormholeScanBrand } from "src/components/molecules";
 import { changePathOpacity, formatterYAxis, updatePathStyles } from "src/utils/apexChartUtils";
 import { getChainName } from "src/utils/wormhole";
 import { getClient } from "src/api/Client";
@@ -50,7 +50,6 @@ import {
   TSelectedPeriod,
 } from "src/utils/chainActivityUtils";
 import { BREAKPOINTS } from "src/consts";
-import { Calendar } from "./Calendar";
 import "./styles.scss";
 
 const TYPE_CHART_LIST = [
@@ -757,9 +756,22 @@ const ChainActivity = () => {
               </button>
             </div>
 
+            <Calendar
+              className="chain-activity-chart-top-filters-calendar"
+              startDate={startDate}
+              setStartDate={setStartDate}
+              endDate={endDate}
+              setEndDate={setEndDate}
+              lastBtnSelected={lastBtnSelected}
+              setLastBtnSelected={setLastBtnSelected}
+              startDateDisplayed={startDateDisplayed}
+              endDateDisplayed={endDateDisplayed}
+              isDesktop={isDesktop}
+            />
+
             <Select
               ariaLabel="Select Chains"
-              className="chain-activity-chart-top-filters-section"
+              className="chain-activity-chart-top-filters-select"
               items={SOURCE_CHAIN_LIST}
               menuPortalTarget={document.querySelector(".chain-activity")}
               menuFixed={!isDesktop}
@@ -768,7 +780,7 @@ const ChainActivity = () => {
               name="sourceChain"
               onValueChange={(value: any) => handleChainSelection(value, "source")}
               text={
-                <div className="chain-activity-chart-top-filters-section-text">
+                <div className="chain-activity-chart-top-filters-select-text">
                   {filters.sourceChain.length > 0 && (
                     <Counter>{filters.sourceChain.length}</Counter>
                   )}
@@ -781,7 +793,7 @@ const ChainActivity = () => {
 
             <Select
               ariaLabel="Select Chains"
-              className="chain-activity-chart-top-filters-section"
+              className="chain-activity-chart-top-filters-select"
               items={TARGET_CHAIN_LIST}
               menuFixed={!isDesktop}
               menuListStyles={{ maxHeight: isDesktop ? 264 : 180 }}
@@ -790,7 +802,7 @@ const ChainActivity = () => {
               name="targetChain"
               onValueChange={(value: any) => handleChainSelection(value, "target")}
               text={
-                <div className="chain-activity-chart-top-filters-section-text">
+                <div className="chain-activity-chart-top-filters-select-text">
                   {filters?.targetChain?.length > 0 && (
                     <Counter>{filters.targetChain.length}</Counter>
                   )}
@@ -806,7 +818,7 @@ const ChainActivity = () => {
             
             <Select
               ariaLabel="Select Protocol"
-              className="chain-activity-chart-top-filters-section"
+              className="chain-activity-chart-top-filters-select"
               controlStyles={{ minWidth: 256 }}
               isMulti={false}
               items={PROTOCOL_LIST}
@@ -821,7 +833,7 @@ const ChainActivity = () => {
                 })
               }
               text={
-                <div className="chain-activity-chart-top-filters-section-text">
+                <div className="chain-activity-chart-top-filters-select-text">
                   {filters?.appId && <Counter>1</Counter>}
                   Protocol
                 </div>
@@ -833,28 +845,6 @@ const ChainActivity = () => {
               }}
             /> */}
 
-            <Calendar
-              startDate={startDate}
-              setStartDate={setStartDate}
-              endDate={endDate}
-              setEndDate={setEndDate}
-              lastBtnSelected={lastBtnSelected}
-              setLastBtnSelected={setLastBtnSelected}
-              startDateDisplayed={startDateDisplayed}
-              endDateDisplayed={endDateDisplayed}
-              isDesktop={isDesktop}
-            />
-
-            <div className="chain-activity-chart-top-filters-buttons">
-              <button className="apply-btn" onClick={applyFilters}>
-                Apply Filters
-              </button>
-
-              <button className="reset-btn" onClick={resetFilters}>
-                Reset Filters
-              </button>
-            </div>
-
             <ToggleGroup
               ariaLabel="Select type"
               className="chain-activity-chart-top-filters-toggle-metric"
@@ -873,6 +863,24 @@ const ChainActivity = () => {
               />
             )}
 
+            <div className="chain-activity-chart-top-filters-buttons">
+              <button className="apply-btn" onClick={applyFilters}>
+                Apply Filters
+              </button>
+
+              <button
+                className="reset-btn"
+                disabled={
+                  filters.sourceChain.length === 0 &&
+                  filters.targetChain.length === 0 &&
+                  lastBtnSelected === "year"
+                }
+                onClick={resetFilters}
+              >
+                Reset Filters
+              </button>
+            </div>
+
             <div
               className={`chain-activity-chart-top-filters-legends ${
                 isFetching || isFetchingAllChains || isError || isErrorAllChains ? "hidden" : ""
diff --git a/src/components/organisms/ChainActivity/styles.scss b/src/components/organisms/ChainActivity/styles.scss
index 398a124d..0e5de404 100644
--- a/src/components/organisms/ChainActivity/styles.scss
+++ b/src/components/organisms/ChainActivity/styles.scss
@@ -215,37 +215,38 @@
           padding: 0;
           position: relative;
           z-index: unset;
-        }
 
-        &.open {
-          inset: max(16px, calc(100% - 708px)) 0 0 0;
-
-          @include desktop {
-            inset: unset;
-          }
+          & > div {
+            &.chain-activity-chart-top-filters-select {
+              order: 1;
+            }
 
-          & > .chain-activity-chart-top-filters-section {
-            @include desktop {
-              width: max-content;
+            &.chain-activity-chart-top-filters-calendar {
+              order: 3;
             }
 
-            & .select-searchable-dropdown {
-              width: 100%;
-              justify-content: space-between;
+            &.chain-activity-chart-top-filters-buttons {
+              order: 4;
             }
 
-            & .chain-activity-chart-top-filters-section-btn {
-              width: 100%;
-              justify-content: space-between;
+            &.chain-activity-chart-top-filters-toggle-metric {
+              order: 5;
             }
           }
         }
 
+        &.open {
+          inset: max(16px, calc(100% - 708px)) 0 0 0;
+
+          @include desktop {
+            inset: unset;
+          }
+        }
+
         &-title {
           @include centered-row;
           justify-content: center;
           width: 100%;
-          order: 1;
 
           @include desktop {
             display: none;
@@ -263,6 +264,30 @@
           }
         }
 
+        &-select {
+          & .select-searchable-dropdown {
+            width: 100%;
+            justify-content: space-between;
+          }
+
+          &-text {
+            @include centered-row;
+            gap: 4px;
+
+            & .counter {
+              margin-right: 4px;
+            }
+
+            & > span {
+              @include desktop {
+                @media screen and (max-width: 1260px) {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+
         &-legends {
           display: none;
 
@@ -344,484 +369,6 @@
           }
         }
 
-        &-section {
-          position: relative;
-          order: 3;
-
-          @include desktop {
-            order: unset;
-          }
-
-          &-text {
-            @include centered-row;
-            gap: 8px;
-
-            & .hidden-desktop-1180 {
-              margin-left: -4px;
-              @include desktop {
-                @media screen and (max-width: 1180px) {
-                  display: none;
-                }
-              }
-            }
-          }
-
-          &-btn {
-            @include button-secondary;
-            color: var(--color-white);
-            height: 48px;
-            padding-right: 8px;
-
-            @include desktop {
-              height: 36px;
-              position: relative;
-            }
-          }
-
-          &-box {
-            background-color: var(--color-gray-900);
-            border-radius: 16px;
-            flex-direction: column;
-            min-width: max-content;
-            position: fixed;
-            transition: inset 0.3s ease;
-            z-index: 55;
-            display: none;
-            margin-top: 12px;
-            width: calc(100% - 42px);
-
-            @include desktop {
-              border-radius: 8px;
-              border: none;
-              display: none;
-              inset: unset;
-              left: 0;
-              margin-top: 0;
-              position: absolute;
-              transition: none;
-              width: auto;
-            }
-
-            &.show-date {
-              display: flex;
-              flex-direction: column-reverse;
-              overflow: auto;
-              max-height: calc(100svh - 200px);
-
-              @include desktop {
-                border-radius: 16px;
-                display: flex;
-                flex-direction: row-reverse;
-                inset: unset;
-                left: 0;
-                top: 52px;
-                transform: translateX(-42%);
-              }
-
-              @include bigDesktop {
-                transform: unset;
-              }
-            }
-
-            &-chains {
-              @include centered-column;
-              gap: 8px 24px;
-              justify-content: flex-start;
-              overflow-y: auto;
-              padding: 16px;
-
-              @include desktop {
-                display: grid;
-                grid-template-columns: repeat(4, 1fr);
-              }
-
-              &-item {
-                @include centered-row;
-                cursor: pointer;
-                gap: 8px;
-                justify-content: space-between;
-                opacity: 0.5;
-                white-space: nowrap;
-
-                @include desktop {
-                  flex-direction: row-reverse;
-                  justify-content: start;
-                }
-
-                &:hover {
-                  opacity: 1;
-                }
-
-                &.all-chains {
-                  grid-column: span 4;
-                  margin-bottom: 16px;
-                }
-
-                &-checkbox {
-                  @include centered-row;
-                  border-radius: 2px;
-                  border: 1px solid #6e71a3;
-                  color: var(--color-white);
-                  cursor: pointer;
-                  height: 16px;
-                  justify-content: center;
-                  width: 16px;
-                }
-              }
-
-              &-bottom {
-                display: grid;
-                gap: 16px;
-                grid-template-columns: 1fr 1fr;
-                padding: 24px 16px 16px 16px;
-
-                @include desktop {
-                  display: flex;
-                  flex-direction: row-reverse;
-                }
-
-                & > button {
-                  align-items: center;
-                  border-radius: 8px;
-                  cursor: pointer;
-                  display: flex;
-                  font-size: 16px;
-                  font-weight: 600;
-                  gap: 16px;
-                  height: 44px;
-                  justify-content: center;
-
-                  &:disabled {
-                    cursor: not-allowed;
-                    opacity: 0.3;
-                  }
-                }
-              }
-            }
-
-            &-date {
-              &-selector {
-                @include centered-column;
-                border-bottom: 1px solid var(--color-gray-800);
-                gap: 73px;
-                justify-content: flex-end;
-                padding: 8px;
-                width: 100%;
-
-                @include desktop {
-                  border-bottom: none;
-                  border-right: 1px solid var(--color-gray-800);
-                  justify-content: flex-start;
-                  width: 156px;
-                }
-
-                & > div:first-child {
-                  display: grid;
-                  gap: 0 16px;
-                  grid-template-columns: 1fr 1fr;
-
-                  @include desktop {
-                    @include centered-column;
-                  }
-                }
-
-                & > div {
-                  @include centered-column;
-                  align-items: flex-start;
-                  gap: 8px 0;
-
-                  & > .btn {
-                    @include text-roboto-body-400;
-                    background-color: transparent;
-                    border-radius: 8px;
-                    border: none;
-                    color: var(--color-gray-400);
-                    cursor: pointer;
-                    font-size: 14px;
-                    font-weight: 400;
-                    padding: 8px 0 8px 8px;
-                    text-align: start;
-                    width: 100%;
-
-                    &:hover {
-                      background-color: var(--color-white-05);
-                    }
-
-                    &.active {
-                      background-color: var(--color-gray-800);
-                      color: var(--color-white);
-                    }
-                  }
-                }
-              }
-
-              &-calendar {
-                margin: 0 auto auto auto;
-                padding: 16px 16px 72px 16px;
-                width: 100%;
-
-                @include desktop {
-                  margin: 0;
-                  min-height: unset;
-                  width: max-content;
-                }
-
-                & .react-datepicker {
-                  @include centered-column;
-                  background-color: transparent;
-                  border: none;
-                  font-size: 16px;
-
-                  @include tablet {
-                    @include centered-row;
-                    align-items: flex-start;
-                  }
-
-                  @include desktop {
-                    display: block;
-                  }
-
-                  & .react-datepicker__navigation {
-                    border-radius: 50%;
-                    top: 4px;
-                    width: 36px;
-
-                    & > span::before {
-                      border-color: var(--color-white);
-                      top: 0;
-
-                      @include desktop {
-                        top: 4px;
-                      }
-                    }
-                  }
-
-                  & .react-datepicker__header {
-                    background-color: transparent;
-                    border-radius: 0;
-                    border: none;
-                    padding: 0;
-
-                    @include desktop {
-                      padding: 8px 0 0 0;
-                    }
-
-                    & .react-datepicker__current-month {
-                      @include text-roboto-body-500;
-                      color: var(--color-white);
-                    }
-
-                    & .react-datepicker__day-names {
-                      padding: 16px 0 0 0;
-
-                      @include desktop {
-                        padding: 16px 0 8px 0;
-                      }
-
-                      & .react-datepicker__day-name {
-                        @include text-heading6;
-                        color: var(--color-gray-600);
-                        height: 36px;
-                        line-height: 36px;
-                        margin: 0;
-                        text-transform: uppercase;
-                        width: 36px;
-                      }
-                    }
-                  }
-
-                  & .react-datepicker__month {
-                    margin: 0 24px;
-
-                    & .react-datepicker__day {
-                      @include text-roboto-body-400;
-                      border-radius: 0;
-                      color: var(--color-white);
-                      line-height: 36px;
-                      margin: 0;
-                      width: 36px;
-
-                      &:hover {
-                        background-color: var(--color-gray-600);
-                        color: var(--color-white-50);
-                        font-weight: 600;
-                      }
-
-                      &--keyboard-selected {
-                        background-color: transparent;
-                      }
-
-                      &--in-selecting-range {
-                        background-color: var(--color-white-05);
-                        color: var(--color-white-50);
-                      }
-
-                      &--selected {
-                        background-color: var(--color-gray-800);
-                        color: var(--color-white-50);
-                      }
-
-                      &--in-range {
-                        background-color: var(--color-white-05);
-                        color: var(--color-white-50);
-                      }
-
-                      &--range-start:not(&--outside-month) {
-                        background-color: var(--color-white-05);
-                        border-radius: 50% 0 0 50%;
-                        color: var(--color-white-90);
-                        font-weight: 600;
-                        position: relative;
-                        z-index: 1;
-
-                        &::before {
-                          background-color: var(--color-gray-800);
-                          border-radius: 50%;
-                          content: "";
-                          display: block;
-                          height: 28px;
-                          left: 50%;
-                          position: absolute;
-                          top: 50%;
-                          transform: translate(-50%, -50%);
-                          width: 28px;
-                          z-index: -1;
-                        }
-                      }
-
-                      &--range-end:not(&--outside-month) {
-                        background-color: var(--color-white-05);
-                        border-radius: 0 50% 50% 0;
-                        color: var(--color-white-90);
-                        font-weight: 600;
-                        position: relative;
-                        z-index: 1;
-
-                        &::before {
-                          background-color: var(--color-gray-800);
-                          border-radius: 50%;
-                          content: "";
-                          display: block;
-                          height: 28px;
-                          left: 50%;
-                          position: absolute;
-                          top: 50%;
-                          transform: translate(-50%, -50%);
-                          width: 28px;
-                          z-index: -1;
-                        }
-                      }
-
-                      &--disabled {
-                        color: var(--color-white);
-                        opacity: 0.3;
-                        text-decoration: line-through;
-
-                        &:hover {
-                          background-color: transparent;
-                          color: var(--color-white);
-                          cursor: not-allowed;
-                          font-weight: 400;
-                        }
-                      }
-                    }
-                  }
-
-                  & .react-datepicker__header__dropdown {
-                    position: absolute;
-                    right: 0;
-                    left: 0;
-                  }
-
-                  & .react-datepicker__month-read-view {
-                    & .react-datepicker__month-read-view--selected-month {
-                      padding: 0 16px;
-                      visibility: hidden;
-                    }
-
-                    & .react-datepicker__month-read-view--down-arrow {
-                      border-color: var(--color-gray-600);
-                      left: 0;
-                      margin: 0 auto;
-                      right: 0;
-                    }
-                  }
-
-                  & .react-datepicker__month-dropdown {
-                    background-color: var(--color-gray-800);
-                    border-radius: 16px;
-                    border: none;
-                    padding: 8px;
-                    z-index: 88;
-                    margin-top: -24px;
-
-                    & .react-datepicker__month-option {
-                      @include text-roboto-body-400;
-                      color: var(--color-white);
-
-                      &:hover {
-                        background-color: var(--color-white-05);
-                      }
-                    }
-                  }
-                }
-
-                &-one-day-selected {
-                  & .react-datepicker {
-                    & .react-datepicker__month {
-                      & .react-datepicker__day {
-                        &--range-start {
-                          border-radius: 0;
-                        }
-
-                        &--range-end {
-                          border-radius: 0;
-                        }
-                      }
-                    }
-                  }
-                }
-
-                &-btns {
-                  @include centered-row;
-                  bottom: 16px;
-                  gap: 20px;
-                  position: absolute;
-                  right: 16px;
-
-                  & > .clear-btn {
-                    @include button-ghost;
-                  }
-
-                  & > .done-btn {
-                    @include button-primary;
-                    color: var(--color-black);
-                    width: 100%;
-
-                    @include desktop {
-                      padding: 8px 24px;
-                      width: auto;
-                    }
-
-                    &:disabled {
-                      cursor: not-allowed;
-                      opacity: 0.3;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        & .calendar-section {
-          order: 2;
-
-          @include desktop {
-            order: unset;
-          }
-        }
-
         & .select-searchable-dropdown {
           height: 48px;
 
@@ -834,11 +381,9 @@
           @include centered-column;
           gap: 8px;
           margin-top: auto;
-          order: 4;
 
           @include desktop {
             margin-right: auto;
-            order: unset;
           }
 
           & > .apply-btn {
@@ -856,34 +401,24 @@
             @include button-ghost;
             height: 48px;
             justify-content: center;
-            padding: 0px;
 
             @include desktop {
-              word-break: break-all;
-              width: 40px;
-              margin-left: -2px;
-              font-size: 12px;
               height: 36px;
-            }
 
-            @media only screen and (min-width: 1100px) {
-              margin-left: 0px;
-              padding: 8px;
-              width: 100%;
-              word-break: normal;
-              font-size: 14px;
+              @media only screen and (max-width: 1100px) {
+                font-size: 12px;
+                width: 40px;
+              }
             }
           }
         }
 
         &-toggle-metric {
           max-width: 100%;
-          order: 3;
 
           @include desktop {
             margin-right: 94px;
             max-width: max-content;
-            order: unset;
           }
 
           & .toggle-group-root {
@@ -950,21 +485,3 @@
     }
   }
 }
-
-.date-range-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  .range-text {
-    display: block;
-
-    @include desktop {
-      display: none;
-    }
-
-    @media only screen and (min-width: 1215px) {
-      display: block;
-    }
-  }
-}
diff --git a/src/pages/Txs/Information/Filters/index.tsx b/src/pages/Txs/Information/Filters/index.tsx
index e49468e7..b0a71d9c 100644
--- a/src/pages/Txs/Information/Filters/index.tsx
+++ b/src/pages/Txs/Information/Filters/index.tsx
@@ -2,6 +2,7 @@ import { chainToChainId } from "@wormhole-foundation/sdk";
 import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { BlockchainIcon, Counter, Select, ToggleGroup } from "src/components/atoms";
+import { Calendar } from "src/components/molecules";
 import {
   BREAKPOINTS,
   GATEWAY_APP_ID,
@@ -12,6 +13,7 @@ import {
 import { getChainName } from "src/utils/wormhole";
 import { useEnvironment } from "src/context/EnvironmentContext";
 import { ChainFilterMainnet, ChainFilterTestnet, PROTOCOL_LIST } from "src/utils/filterUtils";
+import { TSelectedPeriod } from "src/utils/chainActivityUtils";
 import {
   useWindowSize,
   useNavigateCustom,
@@ -20,34 +22,24 @@ import {
 } from "src/utils/hooks";
 import { CrossIcon, FilterListIcon } from "src/icons/generic";
 import "./styles.scss";
+import { IParams } from "../..";
 
 interface Props {
+  params: IParams;
   setIsPaginationLoading: Dispatch<SetStateAction<boolean>>;
 }
 
-interface ICheckedState {
-  appId: Array<{ value: string }>;
-  exclusiveAppId: Array<{ value: string }>;
-  sourceChain: Array<{ value: string }>;
-  targetChain: Array<{ value: string }>;
-}
-
-enum FilterKeys {
-  AppId = "appId",
-  ExclusiveAppId = "exclusiveAppId",
-  SourceChain = "sourceChain",
-  TargetChain = "targetChain",
-}
-
-const PAYLOAD_TYPE = "payloadType";
+const filterKeys = ["appId", "exclusiveAppId", "sourceChain", "targetChain"] as const;
+type TFilterKey = (typeof filterKeys)[number];
 
 const parseParams = (params: string | null) => {
   if (!params) return [];
   return params.split(",").map(value => ({ value }));
 };
 
-const Filters = ({ setIsPaginationLoading }: Props) => {
+const Filters = ({ params, setIsPaginationLoading }: Props) => {
   const navigate = useNavigateCustom();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [showFilters, setShowFilters] = useState(false);
   const filterContainerRef = useRef<HTMLDivElement>(null);
   const showFiltersButtonRef = useRef<HTMLButtonElement>(null);
@@ -55,31 +47,32 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
   const { width } = useWindowSize();
   const isDesktop = width >= BREAKPOINTS.desktop;
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const appIdParams = searchParams.get(FilterKeys.AppId) || "";
-  const exclusiveAppIdParams = searchParams.get(FilterKeys.ExclusiveAppId) || "";
-  const sourceChainParams = searchParams.get(FilterKeys.SourceChain) || "";
-  const targetChainParams = searchParams.get(FilterKeys.TargetChain) || "";
-  const payloadTypeParams = searchParams.get(PAYLOAD_TYPE) || "";
-
-  const [checkedState, setCheckedState] = useState<ICheckedState>({
-    appId: parseParams(appIdParams),
-    exclusiveAppId: parseParams(exclusiveAppIdParams),
-    sourceChain: parseParams(sourceChainParams),
-    targetChain: parseParams(targetChainParams),
+  const [startDate, setStartDate] = useState(params.from ? new Date(params.from) : null);
+  const [endDate, setEndDate] = useState(params.to ? new Date(params.to) : null);
+  const [startDateDisplayed, setStartDateDisplayed] = useState(
+    params.from ? new Date(params.from) : null,
+  );
+  const [endDateDisplayed, setEndDateDisplayed] = useState(params.to ? new Date(params.to) : null);
+  const [lastBtnSelected, setLastBtnSelected] = useState<TSelectedPeriod>("all");
+
+  const [checkedState, setCheckedState] = useState({
+    appId: parseParams(params.appId),
+    exclusiveAppId: parseParams(params.exclusiveAppId),
+    sourceChain: parseParams(params.sourceChain),
+    targetChain: parseParams(params.targetChain),
   });
 
   const totalFilterCounter =
-    (appIdParams ? 1 : 0) +
-    (exclusiveAppIdParams ? 1 : 0) +
-    (sourceChainParams ? 1 : 0) +
-    (targetChainParams ? 1 : 0);
+    (params.appId ? 1 : 0) +
+    (params.exclusiveAppId ? 1 : 0) +
+    (params.sourceChain ? 1 : 0) +
+    (params.targetChain ? 1 : 0);
 
   const disableApplyButton =
-    checkedState.exclusiveAppId.map(item => item.value).join(",") === exclusiveAppIdParams &&
-    checkedState.appId.map(item => item.value).join(",") === appIdParams &&
-    checkedState.sourceChain.map(item => item.value).join(",") === sourceChainParams &&
-    checkedState.targetChain.map(item => item.value).join(",") === targetChainParams;
+    checkedState.exclusiveAppId.map(item => item.value).join(",") === params.exclusiveAppId &&
+    checkedState.appId.map(item => item.value).join(",") === params.appId &&
+    checkedState.sourceChain.map(item => item.value).join(",") === params.sourceChain &&
+    checkedState.targetChain.map(item => item.value).join(",") === params.targetChain;
 
   const { environment } = useEnvironment();
   const currentNetwork = environment.network;
@@ -125,41 +118,32 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
   };
 
   const resetFilters = () => {
-    Object.values(FilterKeys).forEach(key => searchParams.delete(key));
+    filterKeys.forEach(key => searchParams.delete(key));
     setSearchParams(searchParams);
     setIsPaginationLoading(true);
     setShowFilters(false);
   };
 
   const applyFilters = useCallback(() => {
-    const appendFilter = (key: string, values: { value: string }[]) => {
+    const appendFilter = (key: TFilterKey, values: { value: string }[]) => {
       if (values.length > 0) {
         const joinedValues = values.map(item => item.value).join(",");
         searchParams.append(key, joinedValues);
       }
     };
 
-    Object.values(FilterKeys).forEach(key => searchParams.delete(key));
+    filterKeys.forEach(key => searchParams.delete(key));
 
-    appendFilter(FilterKeys.AppId, checkedState.appId);
-    appendFilter(FilterKeys.ExclusiveAppId, checkedState.exclusiveAppId);
-    appendFilter(FilterKeys.SourceChain, checkedState.sourceChain);
-    appendFilter(FilterKeys.TargetChain, checkedState.targetChain);
+    appendFilter("appId", checkedState.appId);
+    appendFilter("exclusiveAppId", checkedState.exclusiveAppId);
+    appendFilter("sourceChain", checkedState.sourceChain);
+    appendFilter("targetChain", checkedState.targetChain);
 
-    searchParams.set("page", "1");
+    searchParams.delete("page");
     setSearchParams(searchParams);
     setIsPaginationLoading(true);
     setShowFilters(false);
-  }, [checkedState, searchParams, setSearchParams, setShowFilters, setIsPaginationLoading]);
-
-  useEffect(() => {
-    setCheckedState({
-      appId: parseParams(appIdParams),
-      exclusiveAppId: parseParams(exclusiveAppIdParams),
-      sourceChain: parseParams(sourceChainParams),
-      targetChain: parseParams(targetChainParams),
-    });
-  }, [appIdParams, exclusiveAppIdParams, sourceChainParams, targetChainParams]);
+  }, [checkedState, searchParams, setIsPaginationLoading, setSearchParams]);
 
   useLockBodyScroll({
     isLocked: !isDesktop && showFilters,
@@ -168,10 +152,10 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
 
   const handleCloseFilters = () => {
     setCheckedState({
-      appId: parseParams(appIdParams),
-      exclusiveAppId: parseParams(exclusiveAppIdParams),
-      sourceChain: parseParams(sourceChainParams),
-      targetChain: parseParams(targetChainParams),
+      appId: parseParams(params.appId),
+      exclusiveAppId: parseParams(params.exclusiveAppId),
+      sourceChain: parseParams(params.sourceChain),
+      targetChain: parseParams(params.targetChain),
     });
 
     setShowFilters(false);
@@ -183,6 +167,26 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
     callback: handleCloseFilters,
   });
 
+  useEffect(() => {
+    if (startDate && endDate) {
+      searchParams.set("from", startDate.toISOString());
+      searchParams.set("to", endDate.toISOString());
+      setStartDateDisplayed(startDate);
+      setEndDateDisplayed(endDate);
+    } else if (!startDate && !endDate) {
+      searchParams.delete("from");
+      searchParams.delete("to");
+      setStartDateDisplayed(null);
+      setEndDateDisplayed(null);
+    }
+
+    if (endDate?.toLocaleDateString() !== endDateDisplayed?.toLocaleDateString()) {
+      searchParams.delete("page");
+    }
+
+    setSearchParams(searchParams);
+  }, [endDate, endDateDisplayed, searchParams, setSearchParams, startDate]);
+
   return (
     <div className="filters">
       {showFilters && !isDesktop && <div className="filters-bg" />}
@@ -198,17 +202,17 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
           ]}
           onValueChange={value => {
             if (value === "0") {
-              searchParams.delete(PAYLOAD_TYPE);
+              searchParams.delete("payloadType");
             } else {
-              searchParams.set(PAYLOAD_TYPE, value);
-              searchParams.set("page", "1");
+              searchParams.set("payloadType", value);
+              searchParams.delete("page");
             }
 
             setIsPaginationLoading(true);
             setSearchParams(searchParams);
             navigate(`?${searchParams.toString()}`);
           }}
-          value={payloadTypeParams || "0"}
+          value={params.payloadType || "0"}
         />
 
         <button
@@ -220,6 +224,21 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
           <span>Filters</span>
           {totalFilterCounter > 0 && <Counter>{totalFilterCounter}</Counter>}
         </button>
+
+        <Calendar
+          className="filters-container-calendar"
+          startDate={startDate}
+          setStartDate={setStartDate}
+          endDate={endDate}
+          setEndDate={setEndDate}
+          lastBtnSelected={lastBtnSelected}
+          setLastBtnSelected={setLastBtnSelected}
+          startDateDisplayed={startDateDisplayed}
+          endDateDisplayed={endDateDisplayed}
+          isDesktop={isDesktop}
+          showDateRange
+          showAgoButtons
+        />
       </div>
 
       {((isDesktop && showFilters) || !isDesktop) && (
@@ -332,14 +351,10 @@ const Filters = ({ setIsPaginationLoading }: Props) => {
           </button>
 
           <button
-            className={`filters-container-reset-btn ${
-              checkedState.exclusiveAppId.length === 0 &&
-              checkedState.appId.length === 0 &&
-              checkedState.sourceChain.length === 0 &&
-              checkedState.targetChain.length === 0
-                ? "hidden"
-                : ""
-            }`}
+            className="filters-container-reset-btn"
+            disabled={
+              !params.appId && !params.exclusiveAppId && !params.sourceChain && !params.targetChain
+            }
             onClick={resetFilters}
           >
             Reset Filters
diff --git a/src/pages/Txs/Information/Filters/styles.scss b/src/pages/Txs/Information/Filters/styles.scss
index 0aa3bc55..52532f10 100644
--- a/src/pages/Txs/Information/Filters/styles.scss
+++ b/src/pages/Txs/Information/Filters/styles.scss
@@ -3,7 +3,6 @@
 .filters {
   @include centered-column;
   position: relative;
-  width: 100%;
 
   &-bg {
     background-color: var(--color-black-50);
@@ -128,6 +127,31 @@
       }
     }
 
+    &-calendar {
+      & > .calendar-custom-btn {
+        height: 36px;
+
+        & > span {
+          margin: 0 auto;
+          padding-left: 24px;
+
+          @include desktop {
+            margin: 0;
+            padding: 0;
+          }
+        }
+      }
+
+      & > .calendar-custom-box {
+        position: absolute;
+        width: 100%;
+
+        @include desktop {
+          width: auto;
+        }
+      }
+    }
+
     &-title {
       @include text-roboto-subheading-500;
       text-align: center;
diff --git a/src/pages/Txs/Information/index.tsx b/src/pages/Txs/Information/index.tsx
index b222dece..c311b6b9 100644
--- a/src/pages/Txs/Information/index.tsx
+++ b/src/pages/Txs/Information/index.tsx
@@ -1,22 +1,22 @@
 import { Dispatch, SetStateAction } from "react";
 import { useLocation } from "react-router-dom";
 import { Column } from "react-table";
-import { PAGE_SIZE, TransactionOutput } from "..";
+import { IParams, PAGE_SIZE, TransactionOutput } from "..";
 import { Table } from "src/components/organisms";
 import { Pagination } from "src/components/atoms";
 import { useNavigateCustom, useWindowSize } from "src/utils/hooks";
 import Filters from "./Filters";
 import { BREAKPOINTS } from "src/consts";
-import "./styles.scss";
 import { useEnvironment } from "src/context/EnvironmentContext";
+import "./styles.scss";
 
 interface Props {
   currentPage: number;
   isPaginationLoading: boolean;
   isTxsFiltered: boolean;
   onChangePagination: (pageNumber: number) => void;
+  params: IParams;
   parsedTxsData: TransactionOutput[] | undefined;
-  payloadTypeParams: string;
   setIsPaginationLoading: Dispatch<SetStateAction<boolean>>;
 }
 
@@ -25,8 +25,8 @@ const Information = ({
   isPaginationLoading,
   isTxsFiltered = false,
   onChangePagination,
+  params,
   parsedTxsData,
-  payloadTypeParams,
   setIsPaginationLoading,
 }: Props) => {
   const navigate = useNavigateCustom();
@@ -39,7 +39,7 @@ const Information = ({
   //att status txhash sourcechain token name token address time
   //trans status txhash from to protocol time
 
-  const isAttestation = payloadTypeParams === "2";
+  const isAttestation = params.payloadType === "2";
   const columns: Column[] | any = [
     {
       Header: "STATUS",
@@ -49,7 +49,7 @@ const Information = ({
       Header: "SOURCE TX HASH",
       accessor: "txHash",
     },
-    !payloadTypeParams && {
+    !params.payloadType && {
       Header: "TYPE",
       accessor: "type",
     },
@@ -120,7 +120,6 @@ const Information = ({
         goFirstPage={() => goFirstPage()}
         goPrevPage={() => goPrevPage(currentPage)}
         goNextPage={() => goNextPage(currentPage)}
-        // goLastPage={() => goLastPage()}
         goPage={isTxsFiltered ? null : goPage}
         disabled={isPaginationLoading}
         disableNextButton={parsedTxsData?.length <= 0 || parsedTxsData?.length < PAGE_SIZE}
@@ -132,7 +131,9 @@ const Information = ({
   return (
     <section className="txs-information">
       <div className="txs-information-top">
-        {!isTxsFiltered && <Filters setIsPaginationLoading={setIsPaginationLoading} />}
+        {!isTxsFiltered && (
+          <Filters params={params} setIsPaginationLoading={setIsPaginationLoading} />
+        )}
 
         <div className="txs-pagination">
           <PaginationComponent />
diff --git a/src/pages/Txs/Information/styles.scss b/src/pages/Txs/Information/styles.scss
index 50b2129e..85dd8d7a 100644
--- a/src/pages/Txs/Information/styles.scss
+++ b/src/pages/Txs/Information/styles.scss
@@ -7,12 +7,13 @@
 
   &-top {
     @include centered-column;
-    column-gap: 24px;
+    gap: 24px;
     margin-bottom: 32px;
 
     @include desktop {
       @include centered-row;
       justify-content: space-between;
+      flex-wrap: wrap;
       margin-bottom: 20px;
     }
   }
@@ -240,10 +241,10 @@
   .txs-pagination {
     display: flex;
     justify-content: center;
-    width: 100%;
 
     @include desktop {
       justify-content: flex-end;
+      margin-left: auto;
     }
 
     &-bottom {
diff --git a/src/pages/Txs/Top/index.tsx b/src/pages/Txs/Top/index.tsx
index c2db90ce..718f9e9c 100644
--- a/src/pages/Txs/Top/index.tsx
+++ b/src/pages/Txs/Top/index.tsx
@@ -14,9 +14,10 @@ interface Props {
   addressChainId: ChainId;
   liveMode: boolean;
   setLiveMode: (b: boolean) => void;
+  showLiveMode: boolean;
 }
 
-const Top = ({ address, addressChainId, liveMode, setLiveMode }: Props) => {
+const Top = ({ address, addressChainId, liveMode, setLiveMode, showLiveMode }: Props) => {
   const { environment } = useEnvironment();
   const currentNetwork = environment.network;
   const { width } = useWindowSize();
@@ -56,7 +57,7 @@ const Top = ({ address, addressChainId, liveMode, setLiveMode }: Props) => {
           {t("txs.top.title")}
         </h1>
 
-        {!address && (
+        {showLiveMode && (
           <Switch
             label="LIVE MODE"
             showIndicator
diff --git a/src/pages/Txs/index.tsx b/src/pages/Txs/index.tsx
index 0403aef0..49f67a98 100644
--- a/src/pages/Txs/index.tsx
+++ b/src/pages/Txs/index.tsx
@@ -50,6 +50,18 @@ export interface TransactionOutput {
   time: React.ReactNode;
 }
 
+export interface IParams {
+  page: string | null;
+  address: string | null;
+  appId: string | null;
+  exclusiveAppId: string | null;
+  sourceChain: string | null;
+  targetChain: string | null;
+  payloadType: string | null;
+  from: string | null;
+  to: string | null;
+}
+
 export const PAGE_SIZE = 50;
 
 export const ETH_LIMIT = {
@@ -62,27 +74,32 @@ const Txs = () => {
   const currentNetwork = environment.network;
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const address = searchParams.get("address") || null;
-  const appIdParams = searchParams.get("appId") || null;
-  const exclusiveAppIdParams = searchParams.get("exclusiveAppId") || null;
-  const sourceChainParams = searchParams.get("sourceChain") || null;
-  const targetChainParams = searchParams.get("targetChain") || null;
-  const payloadTypeParams = searchParams.get("payloadType") || null;
+  const params: IParams = {
+    page: searchParams.get("page") || null,
+    address: searchParams.get("address") || null,
+    appId: searchParams.get("appId") || null,
+    exclusiveAppId: searchParams.get("exclusiveAppId") || null,
+    sourceChain: searchParams.get("sourceChain") || null,
+    targetChain: searchParams.get("targetChain") || null,
+    payloadType: searchParams.get("payloadType") || null,
+    from: searchParams.get("from") || null,
+    to: searchParams.get("to") || null,
+  };
 
   useEffect(() => {
-    if (address) {
+    if (params.address) {
       analytics.page({ title: "TXS_LIST_ADDRESS" });
     } else {
       analytics.page({ title: "TXS_LIST_TXN" });
     }
-  }, [address]);
+  }, [params.address]);
 
-  const page = Number(searchParams.get("page"));
+  const page = Number(params.page) || 1;
   const currentPage = page >= 1 ? page : 1;
   const prevPage = useRef(currentPage);
 
-  const q = address ? address : "txs";
-  const isTxsFiltered = address ? true : false;
+  const q = params.address ? params.address : "txs";
+  const isTxsFiltered = params.address ? true : false;
   const REFETCH_TIME = 1000 * 8;
 
   const [errorCode, setErrorCode] = useState<number | undefined>(undefined);
@@ -91,6 +108,7 @@ const Txs = () => {
   const [parsedTxsData, setParsedTxsData] = useState<TransactionOutput[] | undefined>(undefined);
 
   const [liveMode, setLiveMode] = useLocalStorage<boolean>("liveMode", true);
+  const showLiveMode = !params.address && !params.from && !params.to;
   const [lastUpdatedList, setLastUpdatedList] =
     useState<{ txHash: string; status: string }[]>(null);
 
@@ -110,7 +128,7 @@ const Txs = () => {
 
   useEffect(() => {
     setErrorCode(undefined);
-  }, [address]);
+  }, [params.address]);
 
   useEffect(() => {
     setIsPaginationLoading(true);
@@ -123,24 +141,26 @@ const Txs = () => {
   );
 
   const getOperationsInput: GetOperationsInput = {
-    address,
+    address: params.address,
     pagination: {
       page: currentPage - 1,
       pageSize: PAGE_SIZE,
       sortOrder: Order.DESC,
     },
-    appId: appIdParams,
-    exclusiveAppId: exclusiveAppIdParams,
-    sourceChain: sourceChainParams,
-    targetChain: targetChainParams,
-    payloadType: payloadTypeParams,
+    appId: params.appId,
+    exclusiveAppId: params.exclusiveAppId,
+    sourceChain: params.sourceChain,
+    targetChain: params.targetChain,
+    payloadType: params.payloadType,
+    from: params.from,
+    to: params.to,
   };
 
   const { refetch, isLoading: isLoadingOperations } = useQuery(
     ["getTxs", getOperationsInput],
     () => getClient().guardianNetwork.getOperations(getOperationsInput),
     {
-      refetchInterval: () => (liveMode && !address ? REFETCH_TIME : false),
+      refetchInterval: () => (liveMode && showLiveMode ? REFETCH_TIME : false),
       onError: (err: Error) => {
         let statusCode = 404;
 
@@ -162,7 +182,7 @@ const Txs = () => {
         const destinationChainId = firstStandarizedProperties?.toChain;
 
         const addressChainId =
-          String(address).toLowerCase() === String(originAddress).toLowerCase()
+          String(params.address).toLowerCase() === String(originAddress).toLowerCase()
             ? originChainId
             : destinationChainId;
 
@@ -280,8 +300,8 @@ const Txs = () => {
                 : parsedDestinationAddress;
               // -----
 
-              const isOutflow = sourceAddress?.toLowerCase() === address?.toLowerCase();
-              const isInflow = targetAddress?.toLowerCase() === address?.toLowerCase();
+              const isOutflow = sourceAddress?.toLowerCase() === params.address?.toLowerCase();
+              const isInflow = targetAddress?.toLowerCase() === params.address?.toLowerCase();
               const isInOut = sourceAddress?.toLowerCase() === targetAddress?.toLowerCase();
 
               // --- Status Logic
@@ -510,11 +530,11 @@ const Txs = () => {
                       {!isAttestation && toChain && (
                         <>
                           <div className="tx-chains-container-arrow">
-                            {(!address || !isInOut) && (
-                              <ArrowRightIcon className={address ? "is-address" : ""} />
+                            {(!params.address || !isInOut) && (
+                              <ArrowRightIcon className={params.address ? "is-address" : ""} />
                             )}
 
-                            {address && (isInOut || isOutflow || isInflow) && (
+                            {params.address && (isInOut || isOutflow || isInflow) && (
                               <div
                                 className={`tx-chains-container-arrow-flow tx-chains-container-arrow-flow-${
                                   isInOut ? "self" : isOutflow ? "out" : "in"
@@ -703,10 +723,11 @@ const Txs = () => {
         ) : (
           <>
             <Top
-              address={address}
+              address={params.address}
               addressChainId={addressChainId}
               liveMode={liveMode}
               setLiveMode={setLiveMode}
+              showLiveMode={showLiveMode}
             />
             <Information
               parsedTxsData={isPaginationLoading ? [] : parsedTxsData}
@@ -715,7 +736,7 @@ const Txs = () => {
               isPaginationLoading={isPaginationLoading || isLoadingOperations}
               setIsPaginationLoading={setIsPaginationLoading}
               isTxsFiltered={isTxsFiltered}
-              payloadTypeParams={payloadTypeParams}
+              params={params}
             />
           </>
         )}
diff --git a/src/utils/chainActivityUtils.ts b/src/utils/chainActivityUtils.ts
index d7a7526a..f385ed12 100644
--- a/src/utils/chainActivityUtils.ts
+++ b/src/utils/chainActivityUtils.ts
@@ -36,7 +36,17 @@ export interface ICompleteData {
   };
 }
 
-export type TSelectedPeriod = "24h" | "week" | "month" | "year" | "all" | "custom";
+export type TSelectedPeriod =
+  | "24h"
+  | "week"
+  | "month"
+  | "year"
+  | "all"
+  | "ago1Week"
+  | "ago1Month"
+  | "ago3Months"
+  | "ago6Months"
+  | "custom";
 
 export const DAY_IN_MILLISECONDS = 86400000;
 export const SHORT_TIMESPAN_LIMIT = 6;