diff --git a/packages/web/components/swap-tool/trade-details.tsx b/packages/web/components/swap-tool/trade-details.tsx
index 2bd87d8473..d4ddd8417f 100644
--- a/packages/web/components/swap-tool/trade-details.tsx
+++ b/packages/web/components/swap-tool/trade-details.tsx
@@ -87,7 +87,7 @@ export const TradeDetails = observer(
             >
               <div ref={details} className="flex w-full flex-col">
                 <Closer isInAmountEmpty={isInAmountEmpty} close={close} />
-                <div className="flex min-h-[2rem] w-full items-center justify-between sm:min-h-[1.5rem]">
+                <div className="flex min-h-[2rem] w-full items-start justify-between sm:min-h-[1.5rem]">
                   <SkeletonLoader
                     isLoaded={Boolean(swapState?.inBaseOutQuoteSpotPrice)}
                   >
@@ -102,7 +102,7 @@ export const TradeDetails = observer(
                         <span
                           onClick={() => setOutAsBase(!outAsBase)}
                           className={classNames(
-                            "body2 sm:caption text-osmoverse-300",
+                            "body2 sm:caption py-1 text-osmoverse-300",
                             {
                               "animate-pulse": inPriceFetching || isLoading,
                             }
@@ -140,7 +140,7 @@ export const TradeDetails = observer(
                             height={16}
                           />
                         )}
-                        <span className="body2 sm:caption text-wosmongton-300">
+                        <span className="body2 sm:caption whitespace-nowrap text-wosmongton-300">
                           {open ? t("swap.hideDetails") : t("swap.showDetails")}
                         </span>
                       </div>
@@ -178,7 +178,8 @@ export const TradeDetails = observer(
                                 "text-bullish-400": !isPriceImpactHigh,
                               })}
                             >
-                              -{formatPretty(priceImpact ?? new Dec(0))}
+                              {!priceImpact?.toDec().isZero() && "~"}
+                              {formatPretty(priceImpact ?? new Dec(0))}
                             </span>
                           </div>
                         </GenericDisclaimer>
diff --git a/packages/web/components/transactions/transaction-content.tsx b/packages/web/components/transactions/transaction-content.tsx
index 9e68e6d7dd..59f513c0ff 100644
--- a/packages/web/components/transactions/transaction-content.tsx
+++ b/packages/web/components/transactions/transaction-content.tsx
@@ -91,17 +91,20 @@ export const TransactionContent = ({
             <Tab.List className="flex items-center gap-8">
               {TX_PAGE_TABS.map((defaultTab) => (
                 <Tab key={defaultTab}>
-                  <h5
-                    className={classNames({
-                      "text-osmoverse-500": defaultTab !== tab,
-                    })}
+                  <span
+                    className={classNames(
+                      {
+                        "text-osmoverse-500": defaultTab !== tab,
+                      },
+                      "sm:subtitle1 sm:subtitle1 text-h5 font-h5"
+                    )}
                   >
                     {t(
                       defaultTab === "history"
                         ? "transactions.history"
                         : "transactions.orders"
                     )}
-                  </h5>
+                  </span>
                 </Tab>
               ))}
             </Tab.List>
diff --git a/packages/web/components/transactions/transaction-details/transaction-details-content.tsx b/packages/web/components/transactions/transaction-details/transaction-details-content.tsx
index 5d94b897aa..748c4ab708 100644
--- a/packages/web/components/transactions/transaction-details/transaction-details-content.tsx
+++ b/packages/web/components/transactions/transaction-details/transaction-details-content.tsx
@@ -11,7 +11,11 @@ import { IconButton } from "~/components/buttons/icon-button";
 import { displayFiatPrice } from "~/components/transactions/transaction-utils";
 import { Button } from "~/components/ui/button";
 import { EventName } from "~/config";
-import { useAmplitudeAnalytics, useTranslation } from "~/hooks";
+import {
+  useAmplitudeAnalytics,
+  useFeatureFlags,
+  useTranslation,
+} from "~/hooks";
 import { theme } from "~/tailwind.config";
 import { formatPretty } from "~/utils/formatter";
 
@@ -77,12 +81,16 @@ export const TransactionDetailsContent = ({
     failed: t("transactions.swapFailed"),
   };
 
+  const featureFlags = useFeatureFlags();
+
   return (
     <div
       className={classNames("flex flex-col overflow-y-auto", {
         // 4.5rem is the height of the navbar
         "sticky top-[4.5rem] ml-4 h-[calc(100vh_-_4.5rem)] w-[480px] border-osmoverse-700 bg-osmoverse-900 pl-4 pt-3":
           !isModal,
+        "bg-osmoverse-900": !featureFlags.limitOrders,
+        "bg-osmoverse-1000": featureFlags.limitOrders,
       })}
     >
       <div className="flex flex-col px-4 pb-8 md:p-0">
diff --git a/packages/web/modals/base.tsx b/packages/web/modals/base.tsx
index 8fae634c04..3caf9bac22 100644
--- a/packages/web/modals/base.tsx
+++ b/packages/web/modals/base.tsx
@@ -6,6 +6,7 @@ import { useUnmount } from "react-use";
 import { Icon } from "~/components/assets";
 import { IconButton } from "~/components/ui/button";
 import { SpriteIconId } from "~/config";
+import { useFeatureFlags } from "~/hooks";
 import { useWindowSize } from "~/hooks/window/use-window-size";
 
 if (setAppElement) {
@@ -39,7 +40,7 @@ export const ModalBase = ({
   children,
 }: PropsWithChildren<ModalBaseProps>) => {
   const { isMobile } = useWindowSize();
-
+  const featureFlags = useFeatureFlags();
   const bodyOpenClassNames = classNames("overflow-hidden", bodyOpenClassName);
   useUnmount(() => {
     document.body.classList.remove(bodyOpenClassNames);
@@ -58,8 +59,12 @@ export const ModalBase = ({
         overlayClassName
       )}
       className={classNames(
-        "absolute mx-10 my-8 flex max-h-[95vh] w-full max-w-modal flex-col overflow-auto rounded-3xl bg-osmoverse-800 p-8 outline-none sm:max-h-full sm:w-full sm:px-4",
-        className
+        "absolute mx-10 my-8 flex max-h-[95vh] w-full max-w-modal flex-col overflow-auto rounded-3xl p-8 outline-none sm:max-h-full sm:w-full sm:px-4",
+        className,
+        {
+          "bg-osmoverse-800": !featureFlags.limitOrders,
+          "bg-osmoverse-850": featureFlags.limitOrders,
+        }
       )}
       closeTimeoutMS={150}
       onAfterClose={onAfterClose}
diff --git a/packages/web/modals/review-order.tsx b/packages/web/modals/review-order.tsx
index 467aaa3d32..f73b710e06 100644
--- a/packages/web/modals/review-order.tsx
+++ b/packages/web/modals/review-order.tsx
@@ -87,7 +87,6 @@ export function ReviewOrder({
   isBeyondOppositePrice = false,
 }: ReviewOrderProps) {
   const { t } = useTranslation();
-
   const { logEvent } = useAmplitudeAnalytics();
   const [manualSlippage, setManualSlippage] = useState("");
   const [isEditingSlippage, setIsEditingSlippage] = useState(false);
@@ -204,7 +203,7 @@ export function ReviewOrder({
       isOpen={isOpen}
       onRequestClose={onClose}
       hideCloseButton
-      className="w-[512px] rounded-2xl !p-0"
+      className="w-[512px] rounded-2xl !p-0 sm:h-full sm:max-h-[100vh] sm:!rounded-none"
     >
       <div className="flex h-auto w-full flex-col bg-osmoverse-850">
         <div className="relative flex h-20 items-center justify-center p-4">
@@ -222,7 +221,7 @@ export function ReviewOrder({
           })}
         >
           {orderType === "limit" && tab !== "swap" && (
-            <div className="sm:subtitle2 flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
+            <div className="sm:caption flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
               <div className="flex items-center gap-4">
                 <div className="flex h-10 min-w-10 items-center justify-center">
                   {(tab === "buy" && !isBeyondOppositePrice) ||
@@ -441,7 +440,7 @@ export function ReviewOrder({
                       <div className="flex items-center justify-end">
                         <div
                           className={classNames(
-                            "flex w-fit items-center justify-center overflow-hidden rounded-lg py-1.5 pl-2 text-center transition-all",
+                            "flex w-fit items-center justify-center overflow-hidden rounded-lg py-1.5 pl-2 text-center transition-all sm:-my-0.5 sm:h-7",
                             {
                               "border-2 border-solid border-wosmongton-300 bg-osmoverse-900 pr-2":
                                 isEditingSlippage,
diff --git a/packages/web/modals/token-select-modal-limit.tsx b/packages/web/modals/token-select-modal-limit.tsx
index 653ea02f6b..0bd82fa26b 100644
--- a/packages/web/modals/token-select-modal-limit.tsx
+++ b/packages/web/modals/token-select-modal-limit.tsx
@@ -26,7 +26,7 @@ import { SwapAsset, useRecommendedAssets } from "~/hooks/use-swap";
 import { ActivateUnverifiedTokenConfirmation, ModalBase } from "~/modals";
 import { useStore } from "~/stores";
 import { UnverifiedAssetsState } from "~/stores/user-settings";
-import { formatPretty } from "~/utils/formatter";
+import { formatFiatPrice, formatPretty } from "~/utils/formatter";
 
 interface TokenSelectModalLimitProps {
   isOpen: boolean;
@@ -202,9 +202,9 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
             isOpen={isOpen}
             onRequestClose={onClose}
             hideCloseButton
-            className="!max-h-[90vh] w-[512px] self-start rounded-5xl !p-0"
+            className="!max-h-[90vh] w-[512px] self-start rounded-5xl !p-0 sm:!m-0 sm:h-full sm:!max-h-[100vh] sm:!rounded-none"
           >
-            <div className="flex h-full w-full flex-col overflow-hidden rounded-3xl bg-osmoverse-850">
+            <div className="flex h-full w-full flex-col overflow-hidden bg-osmoverse-850">
               <div className="relative flex min-h-[80px] items-center justify-center p-4">
                 <h6>{headerTitle}</h6>
                 <button
@@ -333,16 +333,16 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
                           >
                             <div
                               className={classNames(
-                                "flex w-full items-center justify-between text-left",
+                                "flex w-full min-w-0 items-center justify-between text-left",
                                 {
                                   "opacity-40":
                                     !shouldShowUnverifiedAssets && !isVerified,
                                 }
                               )}
                             >
-                              <div className="flex items-center gap-4">
+                              <div className="flex min-w-0 items-center gap-4">
                                 {coinImageUrl && (
-                                  <div className="h-12 w-12 rounded-full">
+                                  <div className="h-12 w-12 shrink-0 rounded-full">
                                     <Image
                                       src={coinImageUrl}
                                       alt={`${coinDenom} icon`}
@@ -352,32 +352,41 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
                                     />
                                   </div>
                                 )}
-                                <div className="flex flex-col">
-                                  <span className="subtitle1">{coinName}</span>
-                                  <span className="subtitle2 text-osmoverse-400">
+                                <div className="flex flex-col gap-1 overflow-hidden">
+                                  <span className="subtitle1 truncate">
+                                    {coinName}
+                                  </span>
+                                  <span className="body2 text-osmoverse-400">
                                     {coinDenom}
                                   </span>
                                 </div>
                               </div>
 
                               {isWalletConnected && !hideBalances && (
-                                <div className="flex flex-col items-end gap-1">
-                                  <p
-                                    className={classNames(
-                                      "text-osmoverse-400",
-                                      {
-                                        "text-white-full": usdValue,
-                                      }
-                                    )}
-                                  >
-                                    {formatPretty(
-                                      usdValue ??
-                                        new PricePretty(DEFAULT_VS_CURRENCY, 0)
-                                    )}
-                                  </p>
+                                <div className="flex shrink-0 flex-col items-end gap-1">
+                                  {usdValue && (
+                                    <p
+                                      className={classNames(
+                                        "text-osmoverse-400",
+                                        {
+                                          "text-white-full": usdValue,
+                                        }
+                                      )}
+                                    >
+                                      {formatFiatPrice(
+                                        usdValue ??
+                                          new PricePretty(
+                                            DEFAULT_VS_CURRENCY,
+                                            0
+                                          )
+                                      )}
+                                    </p>
+                                  )}
                                   {amount && (
                                     <span className="body2 text-osmoverse-300">
-                                      {formatPretty(amount).split(" ")[0]}
+                                      {amount
+                                        ? formatPretty(amount).split(" ")[0]
+                                        : "0"}
                                     </span>
                                   )}
                                 </div>