diff --git a/src/components/select/SelectWithDeco.tsx b/src/components/select/SelectWithDeco.tsx
index bef19cf5..4ebb779f 100644
--- a/src/components/select/SelectWithDeco.tsx
+++ b/src/components/select/SelectWithDeco.tsx
@@ -36,6 +36,7 @@ type InputWithDecoProps = {
   isMulti?: boolean;
   noInput?: boolean;
   loading?: boolean;
+  maxWidth?: string;
   callback: (value: ValueProp[]) => void;
 };
 
@@ -46,6 +47,7 @@ export const SelectWithDeco: React.FC<InputWithDecoProps> = ({
   options,
   isMulti,
   loading,
+  maxWidth,
   callback,
 }) => {
   const renderContent = () => {
@@ -56,7 +58,7 @@ export const SelectWithDeco: React.FC<InputWithDecoProps> = ({
         return (
           <Select
             isMulti={isMulti}
-            maxWidth={'500px'}
+            maxWidth={maxWidth || '500px'}
             options={options}
             callback={callback}
           />
diff --git a/src/components/select/specific/ChannelSelect.tsx b/src/components/select/specific/ChannelSelect.tsx
index c32fb8df..084b3af2 100644
--- a/src/components/select/specific/ChannelSelect.tsx
+++ b/src/components/select/specific/ChannelSelect.tsx
@@ -8,12 +8,14 @@ import { ValueProp } from '..';
 type ChannelSelectProps = {
   title: string;
   isMulti?: boolean;
+  maxWidth?: string;
   callback: (peer: ChannelType[]) => void;
 };
 
 export const ChannelSelect = ({
   title,
   isMulti,
+  maxWidth,
   callback,
 }: ChannelSelectProps) => {
   const { data, loading } = useGetChannelsQuery();
@@ -64,6 +66,7 @@ export const ChannelSelect = ({
       title={title}
       options={options}
       callback={handleChange}
+      maxWidth={maxWidth}
     />
   );
 };
diff --git a/src/views/home/account/pay/Pay.tsx b/src/views/home/account/pay/Pay.tsx
index 9218a5ef..42d2ce20 100644
--- a/src/views/home/account/pay/Pay.tsx
+++ b/src/views/home/account/pay/Pay.tsx
@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
-import { InputWithDeco } from 'src/components/input/InputWithDeco';
-import { useBosPayMutation } from 'src/graphql/mutations/__generated__/bosPay.generated';
-import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
-import { Separation, SingleLine } from 'src/components/generic/Styled';
 import { toast } from 'react-toastify';
-import { ChannelSelect } from 'src/components/select/specific/ChannelSelect';
 import { getErrorContent } from 'src/utils/error';
+import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
+import { SingleLine, Separation } from '../../../../components/generic/Styled';
+import { useEffect, useState } from 'react';
+import { useBosPayMutation } from 'src/graphql/mutations/__generated__/bosPay.generated';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
+import { ChannelSelect } from 'src/components/select/specific/ChannelSelect';
+import { useDecodeRequestLazyQuery } from 'src/graphql/queries/__generated__/decodeRequest.generated';
+import { renderLine } from 'src/components/generic/helpers';
+import { Price } from 'src/components/price/Price';
+import { Camera } from 'react-feather';
 import Modal from 'src/components/modal/ReactModal';
 import dynamic from 'next/dynamic';
 import { LoadingCard } from 'src/components/loading/LoadingCard';
-import { Camera } from 'react-feather';
 
 const QRCodeReader = dynamic(() => import('src/components/qrReader'), {
   ssr: false,
@@ -18,19 +21,24 @@ const QRCodeReader = dynamic(() => import('src/components/qrReader'), {
   },
 });
 
-type PayProps = {
+interface PayProps {
   predefinedRequest?: string;
   payCallback?: () => void;
-};
+}
 
-export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
+export const Pay: React.FC<PayProps> = ({ predefinedRequest, payCallback }) => {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
   const [request, setRequest] = useState<string>(predefinedRequest || '');
   const [peers, setPeers] = useState<string[]>([]);
-  const [fee, setFee] = useState<number>(1);
+  const [fee, setFee] = useState<number>(10);
   const [paths, setPaths] = useState<number>(1);
 
+  const [decode, { data, loading: decodeLoading }] = useDecodeRequestLazyQuery({
+    fetchPolicy: 'network-only',
+    onError: () => toast.error('Error decoding invoice'),
+  });
+
   const [pay, { loading }] = useBosPayMutation({
     onCompleted: () => {
       payCallback && payCallback();
@@ -40,6 +48,12 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
     onError: error => toast.error(getErrorContent(error)),
   });
 
+  useEffect(() => {
+    if (predefinedRequest) {
+      decode({ variables: { request: predefinedRequest } });
+    }
+  }, []);
+
   const handleEnter = () => {
     if (loading || !request) return;
     pay({
@@ -52,6 +66,27 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
     });
   };
 
+  const renderDecoded = () => {
+    if (decodeLoading) {
+      return <>Decoding invoice...</>;
+    }
+
+    if (!data?.decodeRequest) return null;
+
+    const { description, tokens, destination_node } = data.decodeRequest;
+
+    const { alias } = destination_node.node;
+
+    return (
+      <>
+        {renderLine('Description', description)}
+        {renderLine('Value', <Price amount={tokens} />)}
+        {renderLine('Destination', alias)}
+        <Separation />
+      </>
+    );
+  };
+
   return (
     <>
       {!predefinedRequest && (
@@ -63,7 +98,11 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
               placeholder={'Invoice'}
               inputCallback={value => setRequest(value)}
               onEnter={() => handleEnter()}
-              inputMaxWidth={'440px'}
+              inputMaxWidth={'240px'}
+              blurCallback={() => {
+                if (!request) return;
+                decode({ variables: { request } });
+              }}
             />
             <ColorButton
               withMargin={'0 0 0 8px'}
@@ -75,12 +114,14 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
           <Separation />
         </>
       )}
+      {renderDecoded()}
       <InputWithDeco
         title={'Max Fee'}
         value={fee}
         amount={fee}
         placeholder={'sats'}
         inputType={'number'}
+        inputMaxWidth={'300px'}
         inputCallback={value => setFee(Math.max(1, Number(value)))}
         onEnter={() => handleEnter()}
       />
@@ -89,6 +130,7 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
         value={paths}
         placeholder={'paths'}
         inputType={'number'}
+        inputMaxWidth={'300px'}
         inputCallback={value => setPaths(Math.max(1, Number(value)))}
         onEnter={() => handleEnter()}
       />
@@ -96,6 +138,7 @@ export const Pay = ({ predefinedRequest, payCallback }: PayProps) => {
       <ChannelSelect
         title={'Out Channels'}
         isMulti={true}
+        maxWidth={'300px'}
         callback={p => setPeers(p.map(peer => peer.partner_public_key))}
       />
       <Separation />
diff --git a/src/views/home/account/pay/RequestModal.tsx b/src/views/home/account/pay/RequestModal.tsx
deleted file mode 100644
index fa36959f..00000000
--- a/src/views/home/account/pay/RequestModal.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import { useDecodeRequestQuery } from 'src/graphql/queries/__generated__/decodeRequest.generated';
-import { XCircle, ChevronDown, ChevronUp } from 'react-feather';
-import { useConfigState } from 'src/context/ConfigContext';
-import { usePriceState } from 'src/context/PriceContext';
-import { Clickable } from 'src/views/stats/styles';
-import { usePayViaRouteMutation } from 'src/graphql/mutations/__generated__/payViaRoute.generated';
-import { toast } from 'react-toastify';
-import { getErrorContent } from 'src/utils/error';
-import { ProbedRouteHop } from 'src/graphql/types';
-import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
-import {
-  SingleLine,
-  SubTitle,
-  Separation,
-  DarkSubTitle,
-  Sub4Title,
-} from '../../../../components/generic/Styled';
-import { Price, getPrice } from '../../../../components/price/Price';
-import {
-  renderLine,
-  getNodeLink,
-  getDateDif,
-  getFormatDate,
-} from '../../../../components/generic/helpers';
-import { LoadingCard } from '../../../../components/loading/LoadingCard';
-
-export const WithMargin = styled.div`
-  margin-right: 4px;
-`;
-
-export const Centered = styled.div`
-  text-align: center;
-`;
-
-type FormatProps = {
-  amount: number;
-  override?: string;
-};
-
-type HopProps = {
-  hop: ProbedRouteHop;
-  index: number;
-  format: (props: FormatProps) => JSX.Element | string;
-};
-
-const HopCard = ({ hop, index, format }: HopProps) => {
-  const [openHop, openHopSet] = React.useState<boolean>(false);
-  const renderInfo = () => (
-    <>
-      {renderLine('Fee', hop.fee)}
-      {renderLine(
-        'Forwarded Tokens',
-        format({ amount: hop.forward, override: 'sat' })
-      )}
-      {renderLine(
-        `Destination `,
-        getNodeLink(hop.public_key, hop.node.node.alias)
-      )}
-      {renderLine('Channel', hop.channel)}
-      {renderLine('Channel Capacity', format({ amount: hop.channel_capacity }))}
-    </>
-  );
-  return (
-    <>
-      <Separation />
-      <Clickable onClick={() => openHopSet(o => !o)}>
-        <SingleLine>
-          <Sub4Title>{`Hop ${index + 1}`}</Sub4Title>
-          {openHop ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
-        </SingleLine>
-      </Clickable>
-      {openHop && renderInfo()}
-    </>
-  );
-};
-
-interface DecodeProps {
-  request: string;
-  handleReset: () => void;
-}
-
-export const RequestModal: React.FC<DecodeProps> = ({
-  request,
-  handleReset,
-}) => {
-  const { data, loading, error } = useDecodeRequestQuery({
-    skip: !request,
-    fetchPolicy: 'network-only',
-    variables: { request },
-  });
-
-  const [makePayment, { loading: payLoading }] = usePayViaRouteMutation({
-    onError: error => toast.error(getErrorContent(error)),
-    onCompleted: () => {
-      toast.success('Payment Sent');
-      handleReset();
-    },
-    refetchQueries: ['GetInOut', 'GetNodeInfo', 'GetBalances'],
-  });
-
-  const { currency, displayValues } = useConfigState();
-  const priceContext = usePriceState();
-  const format = getPrice(currency, displayValues, priceContext);
-
-  if (error) {
-    return (
-      <Centered>
-        <SubTitle>Error decoding the Invoice</SubTitle>
-        <DarkSubTitle>
-          Please verify you have correctly copied the Invoice.
-        </DarkSubTitle>
-      </Centered>
-    );
-  }
-
-  if (loading || !data?.decodeRequest) {
-    return <LoadingCard noCard={true} />;
-  }
-
-  const {
-    description,
-    destination,
-    expires_at,
-    tokens,
-    probe_route,
-    destination_node,
-    id,
-  } = data.decodeRequest;
-
-  const alias = destination_node?.node?.alias;
-  const foundRoute = probe_route?.route;
-
-  if (!foundRoute) {
-    return (
-      <>
-        <SingleLine>
-          <SubTitle>No route found to pay this invoice</SubTitle>
-          <XCircle color={'red'} />
-        </SingleLine>
-        <Separation />
-        {renderLine('Description:', description)}
-        {renderLine('Destination:', getNodeLink(destination, alias))}
-      </>
-    );
-  }
-
-  const renderRoute = () => (
-    <>
-      {renderLine('Hops:', foundRoute.hops.length)}
-      {foundRoute.hops.map((hop, index: number) => (
-        <React.Fragment key={index}>
-          <HopCard hop={hop} index={index} format={format} />
-        </React.Fragment>
-      ))}
-    </>
-  );
-
-  return (
-    <>
-      <SingleLine>
-        <SubTitle>Pay Invoice</SubTitle>
-        <Price amount={tokens} />
-      </SingleLine>
-      {renderLine('Fee:', format({ amount: foundRoute.fee, override: 'sat' }))}
-      <Separation />
-      {renderLine('Description:', description)}
-      {renderLine('Destination:', getNodeLink(destination, alias))}
-      {renderLine(
-        'Expires in:',
-        `${getDateDif(expires_at)} (${getFormatDate(expires_at)})`
-      )}
-      {renderLine(
-        'Safe Fee:',
-        format({ amount: foundRoute.safe_fee, override: 'sat' })
-      )}
-      {renderRoute()}
-      <ColorButton
-        onClick={() =>
-          makePayment({ variables: { route: JSON.stringify(foundRoute), id } })
-        }
-        disabled={payLoading || loading}
-        withMargin={'16px 0 0'}
-        loading={payLoading}
-        fullWidth={true}
-      >
-        Pay
-      </ColorButton>
-    </>
-  );
-};
diff --git a/src/views/home/quickActions/donate/DonateContent.tsx b/src/views/home/quickActions/donate/DonateContent.tsx
index 6e0c5410..b26be5a9 100644
--- a/src/views/home/quickActions/donate/DonateContent.tsx
+++ b/src/views/home/quickActions/donate/DonateContent.tsx
@@ -20,7 +20,7 @@ import { useGetCanConnectInfoQuery } from 'src/graphql/queries/__generated__/get
 import { useCreateThunderPointsMutation } from 'src/graphql/mutations/__generated__/createThunderPoints.generated';
 import { toast } from 'react-toastify';
 import { useBaseConnect } from 'src/hooks/UseBaseConnect';
-import { RequestModal } from '../../account/pay/RequestModal';
+import { Pay } from '../../account/pay/Pay';
 
 const StyledText = styled.div`
   text-align: center;
@@ -153,7 +153,7 @@ export const SupportBar = () => {
         </ColorButton>
       </Card>
       <Modal isOpen={modalOpen} closeCallback={handleReset}>
-        <RequestModal request={invoice} handleReset={handlePaidReset} />
+        <Pay predefinedRequest={invoice} payCallback={handlePaidReset} />
       </Modal>
     </>
   );
diff --git a/src/views/token/BuyButton.tsx b/src/views/token/BuyButton.tsx
index 9f1ae0cd..6feb517f 100644
--- a/src/views/token/BuyButton.tsx
+++ b/src/views/token/BuyButton.tsx
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 import Modal from 'src/components/modal/ReactModal';
 import { useCreateBaseTokenInvoiceMutation } from 'src/graphql/mutations/__generated__/createBaseTokenInvoice.generated';
 import { getErrorContent } from 'src/utils/error';
-import { RequestModal } from 'src/views/home/account/pay/RequestModal';
+import { Pay } from 'src/views/home/account/pay/Pay';
 import { chartColors } from 'src/styles/Themes';
 import { FC, useEffect, useState } from 'react';
 
@@ -48,7 +48,7 @@ export const BuyButton: FC<{ paidCallback: (id: string) => void }> = ({
         {children}
       </ColorButton>
       <Modal isOpen={modalOpen} closeCallback={handleReset}>
-        <RequestModal request={invoice} handleReset={handlePaidReset} />
+        <Pay predefinedRequest={invoice} payCallback={handlePaidReset} />
       </Modal>
     </>
   );