diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
index 3ce302e21d..58746cba7c 100644
--- a/apps/kyb-app/CHANGELOG.md
+++ b/apps/kyb-app/CHANGELOG.md
@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.111
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.64
+
 ## 0.3.110
 
 ### Patch Changes
diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
index 4e4d538006..9c6360da61 100644
--- a/apps/kyb-app/package.json
+++ b/apps/kyb-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.110",
+  "version": "0.3.111",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     "@ballerine/blocks": "0.2.32",
     "@ballerine/common": "^0.9.66",
     "@ballerine/workflow-browser-sdk": "0.6.85",
-    "@ballerine/ui": "0.5.63",
+    "@ballerine/ui": "0.5.64",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",
diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
index ee9f9a4456..b86f96d41e 100644
--- a/packages/react-pdf-toolkit/CHANGELOG.md
+++ b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.64
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.64
+
 ## 1.2.63
 
 ### Patch Changes
diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
index 39661eb59a..3450d9a987 100644
--- a/packages/react-pdf-toolkit/package.json
+++ b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.63",
+  "version": "1.2.64",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.30",
-    "@ballerine/ui": "0.5.63",
+    "@ballerine/ui": "0.5.64",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index e93634bd7e..3ae07fdfbb 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.64
+
+### Patch Changes
+
+- Fixed graph cut off issue
+
 ## 0.5.63
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ae8b3c0e27..5bf026f7a0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.63",
+  "version": "0.5.64",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx b/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
index 546d0f2628..1d296ffe6e 100644
--- a/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
+++ b/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
@@ -1,20 +1,5 @@
-import { ctw } from '@/common';
-import { Card, CardContent, CardHeader } from '@/components';
-import {
-  CardDescription,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/atoms';
-import { BallerineLink } from '@/components/atoms/BallerineLink/BallerineLink';
-import { ContentTooltip } from '@/components/molecules/ContentTooltip/ContentTooltip';
-import { RiskIndicators } from '@/components/molecules/RiskIndicators/RiskIndicators';
 import dayjs from 'dayjs';
-import { InfoIcon } from 'lucide-react';
+import { InfoIcon, TrendingDown, TrendingUp } from 'lucide-react';
 import { FunctionComponent, useMemo } from 'react';
 import {
   Area,
@@ -30,6 +15,23 @@ import {
 } from 'recharts';
 import { capitalize } from 'string-ts';
 
+import { ctw } from '@/common';
+import { Card, CardContent, CardHeader } from '@/components';
+import {
+  CardDescription,
+  CardFooter,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/atoms';
+import { BallerineLink } from '@/components/atoms/BallerineLink/BallerineLink';
+import { ContentTooltip } from '@/components/molecules/ContentTooltip/ContentTooltip';
+import { RiskIndicators } from '@/components/molecules/RiskIndicators/RiskIndicators';
+
 const engagementMetricsMapper = {
   'Time on site': {
     description: 'The average amount of time visitors spend on the website.',
@@ -77,17 +79,58 @@ export const WebsiteCredibility: FunctionComponent<{
   const trafficSources = useMemo(() => {
     if (!trafficAnalysis?.trafficSources?.length) return [];
 
-    return trafficAnalysis.trafficSources
-      .map(({ label, value }) => ({ label, value: parseFloat(value) }))
-      .concat({
-        label: 'Other',
-        value:
-          100 -
-          trafficAnalysis.trafficSources.reduce((acc, item) => acc + parseFloat(item.value), 0),
-      })
-      .map(({ label, value }) => ({ label, value: parseFloat(value.toFixed(2)) }));
+    const values = trafficAnalysis.trafficSources.map(({ label, value }) => ({
+      label,
+      value: parseFloat(value),
+    }));
+
+    const remainder = 100 - values.reduce((acc, item) => acc + item.value, 0);
+
+    const existingOtherIdx = values.findIndex(({ label }) => label === 'other');
+
+    if (existingOtherIdx > -1) {
+      values[existingOtherIdx]!.value = values[existingOtherIdx]!.value + remainder;
+    } else if (remainder > 0) {
+      values.push({ label: 'other', value: remainder });
+    }
+
+    return values;
   }, [trafficAnalysis.trafficSources]);
 
+  let minVisitors = 0;
+  let maxVisitors = 0;
+
+  trafficAnalysis.montlyVisitsIndicators.forEach(({ value }) => {
+    const num = parseInt(value);
+
+    if (num < minVisitors) {
+      minVisitors = num;
+    }
+
+    if (num > maxVisitors) {
+      maxVisitors = num;
+    }
+  });
+
+  const visitorsTotalArea = maxVisitors - minVisitors;
+
+  const calculateTrend = (data: Array<{ label: string; value: string }>) => {
+    if (data.length < 2) {
+      return { direction: 'No trend data', percentage: 0 };
+    }
+
+    const lastMonthValue = parseInt(data[data.length - 1]?.value ?? '0');
+    const previousMonthValue = parseInt(data[data.length - 2]?.value ?? '0');
+    const percentageChange = ((lastMonthValue - previousMonthValue) / previousMonthValue) * 100;
+    const direction = lastMonthValue > previousMonthValue ? 'up' : 'down';
+
+    return { direction, percentage: Math.abs(percentageChange) };
+  };
+
+  const trend = calculateTrend(
+    trafficAnalysis.montlyVisitsIndicators.map(({ label, value }) => ({ label, value })),
+  );
+
   return (
     <div className="space-y-8">
       <div>
@@ -216,7 +259,14 @@ export const WebsiteCredibility: FunctionComponent<{
                       tickFormatter={value => dayjs(value, 'MMMM YYYY').format('MMM YYYY')}
                     />
                     <YAxis
-                      domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.2)]}
+                      ticks={[
+                        minVisitors,
+                        Math.trunc(visitorsTotalArea / 4),
+                        Math.trunc(visitorsTotalArea / 2),
+                        Math.trunc((3 * visitorsTotalArea) / 4),
+                        maxVisitors,
+                      ]}
+                      domain={[minVisitors - (maxVisitors * 1.2 - maxVisitors), maxVisitors * 1.2]}
                       tickFormatter={value =>
                         Intl.NumberFormat('en', { notation: 'compact' }).format(value)
                       }
@@ -249,6 +299,26 @@ export const WebsiteCredibility: FunctionComponent<{
                 </div>
               )}
             </CardContent>
+            <CardFooter>
+              <div className="flex w-full items-start gap-2 text-sm">
+                <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                    {trend.direction !== 'No trend data' && (
+                      <>
+                        {trend.direction === 'up' ? (
+                          <TrendingUp className="h-4 w-4 text-green-500" />
+                        ) : (
+                          <TrendingDown className="h-4 w-4 text-red-500" />
+                        )}
+                        <span>{`Trending ${trend.direction} by ${trend.percentage.toFixed(
+                          1,
+                        )}% this month`}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </CardFooter>
           </Card>
 
           <div className="flex h-full w-2/5 flex-col gap-4">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86f7dda3fa..82cc83ff72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -536,7 +536,7 @@ importers:
         specifier: ^0.9.66
         version: link:../../packages/common
       '@ballerine/ui':
-        specifier: 0.5.63
+        specifier: 0.5.64
         version: link:../../packages/ui
       '@ballerine/workflow-browser-sdk':
         specifier: 0.6.85
@@ -1516,7 +1516,7 @@ importers:
         specifier: ^1.1.30
         version: link:../config
       '@ballerine/ui':
-        specifier: 0.5.63
+        specifier: 0.5.64
         version: link:../ui
       '@react-pdf/renderer':
         specifier: ^3.1.14
@@ -20306,7 +20306,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
       '@types/babel__core': 7.20.4
       react-refresh: 0.14.0
-      vite: 4.5.3(@types/node@20.9.2)
+      vite: 4.5.3(@types/node@18.17.19)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -38536,7 +38536,7 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.1.6
-      vite: 4.5.3(@types/node@20.9.2)
+      vite: 4.5.3(@types/node@18.17.19)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.11
@@ -38667,7 +38667,7 @@ packages:
       kolorist: 1.8.0
       sirv: 2.0.3
       ufo: 1.3.2
-      vite: 4.5.3(@types/node@20.9.2)
+      vite: 4.5.3(@types/node@18.17.19)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -38746,7 +38746,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       globrex: 0.1.2
       tsconfck: 2.1.2(typescript@5.1.6)
-      vite: 4.5.3(@types/node@20.9.2)
+      vite: 4.5.3(@types/node@18.17.19)
     transitivePeerDependencies:
       - supports-color
       - typescript