diff --git a/server/schema/widgets/resolvers/getInOut.ts b/server/schema/widgets/resolvers/getInOut.ts
index da52da83..4eeeeb71 100644
--- a/server/schema/widgets/resolvers/getInOut.ts
+++ b/server/schema/widgets/resolvers/getInOut.ts
@@ -29,7 +29,7 @@ export const getInOut = async (
   } else if (params.time === 'quarter_year') {
     periods = 90;
   } else if (params.time === 'month') {
-    periods = 150;
+    periods = 30;
   } else if (params.time === 'day') {
     periods = 24;
     difference = (date: string) => differenceInHours(endDate, new Date(date));
diff --git a/src/components/buttons/multiButton/MultiButton.tsx b/src/components/buttons/multiButton/MultiButton.tsx
index f4660991..d70cf1e4 100644
--- a/src/components/buttons/multiButton/MultiButton.tsx
+++ b/src/components/buttons/multiButton/MultiButton.tsx
@@ -9,6 +9,7 @@ import {
 interface StyledSingleProps {
   selected?: boolean;
   buttonColor?: string;
+  withPadding?: string;
 }
 
 const StyledSingleButton = styled.button<StyledSingleProps>`
@@ -17,7 +18,7 @@ const StyledSingleButton = styled.button<StyledSingleProps>`
   outline: none;
   border: none;
   text-decoration: none;
-  padding: 8px 16px;
+  padding: ${({ withPadding }) => (withPadding ? withPadding : '8px 16px')};
   background-color: transparent;
   color: ${multiSelectColor};
   flex-grow: 1;
@@ -35,6 +36,7 @@ const StyledSingleButton = styled.button<StyledSingleProps>`
 interface SingleButtonProps {
   selected?: boolean;
   color?: string;
+  withPadding?: string;
   onClick?: () => void;
 }
 
@@ -42,12 +44,14 @@ export const SingleButton: React.FC<SingleButtonProps> = ({
   children,
   selected,
   color,
+  withPadding,
   onClick,
 }) => {
   return (
     <StyledSingleButton
       selected={selected}
       buttonColor={color}
+      withPadding={withPadding}
       onClick={() => {
         onClick && onClick();
       }}
diff --git a/src/views/home/reports/flow/FlowReport.tsx b/src/views/home/reports/flow/FlowReport.tsx
index 792902fd..23d775e8 100644
--- a/src/views/home/reports/flow/FlowReport.tsx
+++ b/src/views/home/reports/flow/FlowReport.tsx
@@ -28,7 +28,7 @@ export const FlowReport = ({
   const format = getPrice(currency, displayValues, priceContext);
 
   let domain = 24;
-  let barWidth = 3;
+  let barWidth = 1;
   if (isTime === 'week') {
     domain = 7;
     barWidth = 15;
@@ -38,10 +38,8 @@ export const FlowReport = ({
     domain = 90;
   } else if (isTime === 'half_year') {
     domain = 180;
-    barWidth = 1;
   } else if (isTime === 'year') {
     domain = 360;
-    barWidth = 1;
   }
 
   return (
diff --git a/src/views/home/reports/forwardReport/Buttons.tsx b/src/views/home/reports/forwardReport/Buttons.tsx
index 98abca3d..705e569e 100644
--- a/src/views/home/reports/forwardReport/Buttons.tsx
+++ b/src/views/home/reports/forwardReport/Buttons.tsx
@@ -8,24 +8,34 @@ import { ResponsiveSingle } from 'src/components/generic/Styled';
 interface ButtonProps {
   isTime: string;
   isType: string;
+  withFee?: boolean;
   setIsTime: (text: string) => void;
   setIsType: (text: string) => void;
 }
 
 export const ButtonRow = ({
+  withFee,
   isTime,
   setIsTime,
   isType,
   setIsType,
 }: ButtonProps) => {
   const timeButton = (time: string, title: string) => (
-    <SingleButton onClick={() => setIsTime(time)} selected={isTime === time}>
+    <SingleButton
+      withPadding={'4px 8px'}
+      onClick={() => setIsTime(time)}
+      selected={isTime === time}
+    >
       {title}
     </SingleButton>
   );
 
   const typeButton = (type: string, title: string) => (
-    <SingleButton onClick={() => setIsType(type)} selected={isType === type}>
+    <SingleButton
+      withPadding={'4px 8px'}
+      onClick={() => setIsType(type)}
+      selected={isType === type}
+    >
       {title}
     </SingleButton>
   );
@@ -43,6 +53,7 @@ export const ButtonRow = ({
       <MultiButton>
         {typeButton('amount', 'Amount')}
         {typeButton('tokens', 'Tokens')}
+        {withFee && typeButton('fee', 'Fees')}
       </MultiButton>
     </ResponsiveSingle>
   );
diff --git a/src/views/home/reports/forwardReport/ForwardChannelReport.tsx b/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
index 7f1482ac..f5dd2ffa 100644
--- a/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
+++ b/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 import { GitCommit, ArrowDown, ArrowUp } from 'react-feather';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { useAccountState } from 'src/context/AccountContext';
 import { useGetForwardChannelsReportQuery } from 'src/graphql/queries/__generated__/getForwardChannelsReport.generated';
+import {
+  MultiButton,
+  SingleButton,
+} from 'src/components/buttons/multiButton/MultiButton';
 import { getErrorContent } from '../../../../utils/error';
 import {
   DarkSubTitle,
-  SmallButton,
   SingleLine,
 } from '../../../../components/generic/Styled';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
@@ -23,36 +26,6 @@ const ChannelRow = styled.div`
   align-items: center;
 `;
 
-const ButtonRow = styled.div`
-  display: flex;
-  margin-bottom: 5px;
-`;
-
-type TriButtonProps = {
-  selected: boolean;
-};
-
-const TriButton = styled(SmallButton)<TriButtonProps>`
-  margin: 0;
-  border-radius: 0;
-
-  ${({ selected }) =>
-    selected &&
-    css`
-      color: white;
-    `}
-`;
-
-const LeftButton = styled(TriButton)`
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-`;
-
-const RightButton = styled(TriButton)`
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
-`;
-
 const TableLine = styled.div`
   width: 35%;
   white-space: nowrap;
@@ -68,10 +41,9 @@ const LastTableLine = styled(TableLine)`
 interface Props {
   isTime: string;
   isType: string;
-  color: string;
 }
 
-export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
+export const ForwardChannelsReport = ({ isTime, isType }: Props) => {
   const [type, setType] = useState('route');
 
   const { currency, displayValues } = useConfigState();
@@ -92,28 +64,7 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
 
   const report = data.getForwardChannelsReport;
 
-  const fillArray = (array: {}[]) => {
-    const lengthMissing = 10 - array.length;
-    if (lengthMissing === 10) {
-      return [];
-    }
-    if (lengthMissing > 0) {
-      for (let i = 0; i < lengthMissing; i += 1) {
-        array.push({
-          aliasIn: '-',
-          aliasOut: '-',
-          alias: '-',
-          name: '-',
-          amount: '',
-          fee: '',
-          tokens: '',
-        });
-      }
-    }
-    return array;
-  };
-
-  const parsed = fillArray(JSON.parse(report));
+  const parsed = JSON.parse(report);
 
   const getFormatString = (amount: number | string) => {
     if (typeof amount === 'string') return amount;
@@ -179,29 +130,29 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
   };
 
   const renderButtons = () => (
-    <ButtonRow>
-      <LeftButton
-        color={color}
+    <MultiButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'incoming'}
         onClick={() => setType('incoming')}
       >
-        <ArrowDown size={18} />
-      </LeftButton>
-      <TriButton
+        <ArrowDown size={14} />
+      </SingleButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'route'}
         onClick={() => setType('route')}
-        color={color}
       >
-        <GitCommit size={18} />
-      </TriButton>
-      <RightButton
+        <GitCommit size={14} />
+      </SingleButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'outgoing'}
-        color={color}
         onClick={() => setType('outgoing')}
       >
-        <ArrowUp size={18} />
-      </RightButton>
-    </ButtonRow>
+        <ArrowUp size={14} />
+      </SingleButton>
+    </MultiButton>
   );
 
   const renderTop = (title: string) => (
diff --git a/src/views/home/reports/forwardReport/ForwardReport.tsx b/src/views/home/reports/forwardReport/ForwardReport.tsx
index aefe415b..9e0e6cb2 100644
--- a/src/views/home/reports/forwardReport/ForwardReport.tsx
+++ b/src/views/home/reports/forwardReport/ForwardReport.tsx
@@ -5,17 +5,18 @@ import {
   VictoryChart,
   VictoryAxis,
   VictoryVoronoiContainer,
+  VictoryTooltip,
 } from 'victory';
 import { toast } from 'react-toastify';
 import { useAccountState } from 'src/context/AccountContext';
 import { useGetForwardReportQuery } from 'src/graphql/queries/__generated__/getForwardReport.generated';
+import { renderLine } from 'src/components/generic/helpers';
 import {
   chartAxisColor,
   chartBarColor,
   chartGridColor,
 } from '../../../../styles/Themes';
 import { useConfigState } from '../../../../context/ConfigContext';
-import { Sub4Title } from '../../../../components/generic/Styled';
 import { getErrorContent } from '../../../../utils/error';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
 import { getPrice } from '../../../../components/price/Price';
@@ -54,22 +55,20 @@ export const ForwardReport = ({ isTime, isType }: Props) => {
   }
 
   let domain = 24;
-  let barWidth = 10;
+  let barWidth = 3;
   if (isTime === 'week') {
     domain = 7;
     barWidth = 15;
   } else if (isTime === 'month') {
     domain = 30;
-    barWidth = 5;
   } else if (isTime === 'quarter_year') {
     domain = 90;
-    barWidth = 5;
   } else if (isTime === 'half_year') {
     domain = 180;
-    barWidth = 5;
+    barWidth = 1;
   } else if (isTime === 'year') {
     domain = 360;
-    barWidth = 5;
+    barWidth = 1;
   }
 
   const parsedData: {}[] = JSON.parse(data.getForwardReport);
@@ -93,58 +92,59 @@ export const ForwardReport = ({ isTime, isType }: Props) => {
     }
     return (
       <>
-        <div>
-          <VictoryChart
-            padding={{
-              top: 30,
-              left: isType === 'tokens' ? 100 : 50,
-              right: 50,
-              bottom: 20,
+        <VictoryChart
+          height={110}
+          padding={{
+            top: 20,
+            left: isType === 'tokens' ? 80 : 50,
+            right: 50,
+            bottom: 10,
+          }}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              labels={({ datum }) => `${getLabelString(datum[isType])}`}
+              labelComponent={<VictoryTooltip orientation={'bottom'} />}
+            />
+          }
+        >
+          <VictoryAxis
+            domain={[0, domain]}
+            tickFormat={() => ''}
+            style={{
+              axis: { stroke: chartGridColor[theme] },
+            }}
+          />
+          <VictoryAxis
+            dependentAxis
+            style={{
+              tickLabels: {
+                fill: chartAxisColor[theme],
+                fontSize: 8,
+              },
+              grid: { stroke: chartGridColor[theme] },
+              axis: { stroke: 'transparent' },
             }}
-            containerComponent={
-              <VictoryVoronoiContainer
-                voronoiDimension="x"
-                labels={({ datum }) => `${getLabelString(datum[isType])}`}
-              />
+            tickFormat={a =>
+              isType === 'tokens' ? format({ amount: a, breakNumber: true }) : a
             }
-          >
-            <VictoryAxis
-              domain={[0, domain]}
-              tickFormat={() => ''}
-              style={{
-                axis: { stroke: chartGridColor[theme] },
-              }}
-            />
-            <VictoryAxis
-              dependentAxis
-              style={{
-                tickLabels: {
-                  fill: chartAxisColor[theme],
-                  fontSize: 18,
-                },
-                grid: { stroke: chartGridColor[theme] },
-                axis: { stroke: 'transparent' },
-              }}
-              tickFormat={a =>
-                isType === 'tokens'
-                  ? format({ amount: a, breakNumber: true })
-                  : a
-              }
-            />
-            <VictoryBar
-              data={parsedData}
-              x="period"
-              y={isType}
-              style={{
-                data: {
-                  fill: chartBarColor[theme],
-                  width: barWidth,
-                },
-              }}
-            />
-          </VictoryChart>
-        </div>
-        <Sub4Title>{`Total: ${total}`}</Sub4Title>
+          />
+          <VictoryBar
+            data={parsedData}
+            x="period"
+            y={isType}
+            style={{
+              data: {
+                fill: chartBarColor[theme],
+                width: barWidth,
+              },
+              labels: {
+                fontSize: 8,
+              },
+            }}
+          />
+        </VictoryChart>
+        {renderLine('Total', total)}
       </>
     );
   };
diff --git a/src/views/home/reports/forwardReport/index.tsx b/src/views/home/reports/forwardReport/index.tsx
index 8390f514..b119f399 100644
--- a/src/views/home/reports/forwardReport/index.tsx
+++ b/src/views/home/reports/forwardReport/index.tsx
@@ -5,6 +5,7 @@ import {
   SubTitle,
   Card,
   CardTitle,
+  Separation,
 } from '../../../../components/generic/Styled';
 import { mediaWidths } from '../../../../styles/Themes';
 import { ForwardReport } from './ForwardReport';
@@ -15,58 +16,33 @@ export const CardContent = styled.div`
   height: 100%;
   display: flex;
   flex-flow: column;
-  width: 50%;
   padding: 0 16px;
 
   @media (${mediaWidths.mobile}) {
-    width: 100%;
     padding: 0 8px;
   }
 `;
 
-const Row = styled.div`
-  display: flex;
-
-  @media (${mediaWidths.mobile}) {
-    flex-wrap: wrap;
-  }
-`;
-
-const availableTimes = ['day', 'week', 'month'];
-const mappedTimes = ['Day', 'Week', 'Month'];
-const availableTypes = ['amount', 'fee', 'tokens'];
-const mappedTypes = ['Amount', 'Fees', 'Value'];
-const buttonBorder = '#6938f1';
-
 export const ForwardBox = () => {
   const [isTime, setIsTime] = useState<string>('month');
   const [isType, setIsType] = useState<string>('amount');
 
-  const props = { isTime, isType, color: buttonBorder };
-
-  const buttonProps = {
-    isTime,
-    isType,
-    setIsTime,
-    setIsType,
-    availableTimes,
-    availableTypes,
-    mappedTimes,
-    mappedTypes,
-    buttonBorder,
-  };
-
   return (
     <CardWithTitle>
       <CardTitle>
         <SubTitle>Forward Report</SubTitle>
       </CardTitle>
       <Card mobileCardPadding={'8px'}>
-        <Row>
-          <ForwardReport {...props} />
-          <ForwardChannelsReport {...props} />
-        </Row>
-        <ButtonRow {...buttonProps} />
+        <ButtonRow
+          isTime={isTime}
+          isType={isType}
+          setIsTime={setIsTime}
+          setIsType={setIsType}
+          withFee={true}
+        />
+        <ForwardReport isTime={isTime} isType={isType} />
+        <Separation />
+        <ForwardChannelsReport isTime={isTime} isType={isType} />
       </Card>
     </CardWithTitle>
   );