diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx
index 56ca835..c51cefd 100644
--- a/src/app/[locale]/pages/dashboard/page.tsx
+++ b/src/app/[locale]/pages/dashboard/page.tsx
@@ -18,11 +18,11 @@ export default function Page() {
 			<Suspense fallback={<>...</>}>
 				<PageTitle title="statistics">
 				</PageTitle>
-				<div className="flex justify-between flex-wrap gap-8">
+				<div className="split-blocks">
 					<ProtectionOverview />
 					<StatsGrid />
 				</div>
-				<FilesTable fileType={'all'}/>
+				<FilesTable fileType={'all'} />
 			</Suspense>
 		</>
 	);
diff --git a/src/app/[locale]/pages/marking-audio/page.tsx b/src/app/[locale]/pages/marking-audio/page.tsx
index 1154fee..0450f29 100644
--- a/src/app/[locale]/pages/marking-audio/page.tsx
+++ b/src/app/[locale]/pages/marking-audio/page.tsx
@@ -8,38 +8,33 @@ import { StackedBarChart } from '@/app/components/StackedBarChart';
 const data = [
 	{
 		name: 'File A',
-		checks: 4000,
-		violations: 2000
+		checks: 4,
+		violations: 2
 	},
 	{
 		name: 'File B',
-		checks: 3000,
-		violations: 1400
+		checks: 8,
+		violations: 4
 	},
 	{
 		name: 'File C',
-		checks: 2000,
-		violations: 1000
+		checks: 2,
+		violations: 1
 	},
 	{
 		name: 'File D',
-		checks: 2780,
-		violations: 1000
+		checks: 7,
+		violations: 1
 	},
 	{
 		name: 'File E',
-		checks: 5090,
-		violations: 4800
+		checks: 5,
+		violations: 4
 	},
 	{
 		name: 'File F',
-		checks: 5390,
-		violations: 3800
-	},
-	{
-		name: 'File H',
-		checks: 4000,
-		violations: 1500
+		checks: 5,
+		violations: 3
 	}
 ];
 
@@ -50,9 +45,9 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="audio-protection" />
-			<div className="flex justify-between flex-wrap gap-8">
+			<div className="split-blocks">
 				<ProtectionSummary />
-				<div className="protection-overview grow">
+				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>
 			</div>
diff --git a/src/app/[locale]/pages/marking-photo/page.tsx b/src/app/[locale]/pages/marking-photo/page.tsx
index 2c2dad9..a8bf62d 100644
--- a/src/app/[locale]/pages/marking-photo/page.tsx
+++ b/src/app/[locale]/pages/marking-photo/page.tsx
@@ -8,38 +8,33 @@ import {StackedBarChart} from '@/app/components/StackedBarChart';
 const data = [
 	{
 		name: 'File A',
-		checks: 4000,
-		violations: 2000
+		checks: 4,
+		violations: 2
 	},
 	{
 		name: 'File B',
-		checks: 3000,
-		violations: 1400
+		checks: 8,
+		violations: 4
 	},
 	{
 		name: 'File C',
-		checks: 2000,
-		violations: 1000
+		checks: 2,
+		violations: 1
 	},
 	{
 		name: 'File D',
-		checks: 2780,
-		violations: 1000
+		checks: 7,
+		violations: 1
 	},
 	{
 		name: 'File E',
-		checks: 5090,
-		violations: 4800
+		checks: 5,
+		violations: 4
 	},
 	{
 		name: 'File F',
-		checks: 5390,
-		violations: 3800
-	},
-	{
-		name: 'File H',
-		checks: 4000,
-		violations: 1500
+		checks: 5,
+		violations: 3
 	}
 ];
 
@@ -50,9 +45,9 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="image-protection" />
-			<div className="flex justify-between flex-wrap gap-8">
+			<div className="split-blocks">
 				<ProtectionSummary />
-				<div className="protection-overview grow">
+				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>
 			</div>
diff --git a/src/app/[locale]/pages/marking-video/page.tsx b/src/app/[locale]/pages/marking-video/page.tsx
index c87382b..8063841 100644
--- a/src/app/[locale]/pages/marking-video/page.tsx
+++ b/src/app/[locale]/pages/marking-video/page.tsx
@@ -8,38 +8,33 @@ import { StackedBarChart } from '@/app/components/StackedBarChart';
 const data = [
 	{
 		name: 'File A',
-		checks: 4000,
-		violations: 2000
+		checks: 4,
+		violations: 2
 	},
 	{
 		name: 'File B',
-		checks: 3000,
-		violations: 1400
+		checks: 8,
+		violations: 4
 	},
 	{
 		name: 'File C',
-		checks: 2000,
-		violations: 1000
+		checks: 2,
+		violations: 1
 	},
 	{
 		name: 'File D',
-		checks: 2780,
-		violations: 1000
+		checks: 7,
+		violations: 1
 	},
 	{
 		name: 'File E',
-		checks: 5090,
-		violations: 4800
+		checks: 5,
+		violations: 4
 	},
 	{
 		name: 'File F',
-		checks: 5390,
-		violations: 3800
-	},
-	{
-		name: 'File H',
-		checks: 4000,
-		violations: 1500
+		checks: 5,
+		violations: 3
 	}
 ];
 
@@ -50,9 +45,9 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="video-protection" />
-			<div className="flex justify-between flex-wrap gap-8">
+			<div className="split-blocks">
 				<ProtectionSummary />
-				<div className="protection-overview grow">
+				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>
 			</div>
diff --git a/src/app/[locale]/pages/my-content/page.tsx b/src/app/[locale]/pages/my-content/page.tsx
index df62bf9..88616b8 100644
--- a/src/app/[locale]/pages/my-content/page.tsx
+++ b/src/app/[locale]/pages/my-content/page.tsx
@@ -12,9 +12,9 @@ const data = [
 export default function Page() {
 	return (
 		<>
-			<div className="flex justify-between flex-wrap gap-x-8">
+			<div className="split-blocks">
 				<MyContentInfoBlock />
-				<div className="protection-overview grow">
+				<div className="protection-overview">
 					<PieChartComponent data={data} />
 				</div>
 			</div>
diff --git a/src/app/components/PieChartComponent.tsx b/src/app/components/PieChartComponent.tsx
index 49de2b9..c1b926b 100644
--- a/src/app/components/PieChartComponent.tsx
+++ b/src/app/components/PieChartComponent.tsx
@@ -31,20 +31,21 @@ export const PieChartComponent = ({ data }: {
 						data={data}
 						cx="50%"
 						cy="50%"
-						innerRadius={70}
-						outerRadius={90}
+						innerRadius={75}
+						outerRadius={100}
 						paddingAngle={0}
 						dataKey="value"
+						stroke="none"
 					>
 						{data.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
+							<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
 						))}
 					</Pie>
 				</PieChart>
 			</ResponsiveContainer>
 			<div className="flex gap-6">
 				{data.map((entry, index) => (
-					<div key={`cell-${index}`} className="text-white">
+					<div key={`cell-${index}`} className="">
 						<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
 						<span>{t(entry.name)}</span>
 					</div>
diff --git a/src/app/components/StackedBarChart.tsx b/src/app/components/StackedBarChart.tsx
index 8ef1159..a15ab05 100644
--- a/src/app/components/StackedBarChart.tsx
+++ b/src/app/components/StackedBarChart.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
 
 type Files = {
@@ -23,12 +24,19 @@ interface BarShapeProps {
 export const StackedBarChart = ({ data }: Files) => {
 	const t = useTranslations('Global');
 
-	const strokeColor = "#dfdede24";
-	const strokeWidth = 1;
+	const CHECKS_COLOR = '#6366f1';
+	const VIOLATIONS_COLOR = '#f08c00'
+	const BORDER_RADIUS = 5;
+	const STROKE_COLOR = "#dfdede24";
+	const STROKE_WIDTH = 1;
+
+	const { totalChecks, totalViolations } = useMemo(() => ({
+		totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
+		totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
+	}), [data]);
 
 	const renderBarWithPartialBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
-		const borderRadius = 10;
 
 		return (
 			<>
@@ -39,39 +47,39 @@ export const StackedBarChart = ({ data }: Files) => {
 					width={width}
 					height={height}
 					fill={fill}
-					rx={borderRadius}
-					ry={borderRadius}
+					rx={BORDER_RADIUS}
+					ry={BORDER_RADIUS}
 				/>
 
 				{/* Левая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x}
-					y2={y + height - borderRadius}
+					y2={y + height - BORDER_RADIUS}
 				/>
 
 				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x + width}
-					y2={y + height - borderRadius}
+					y2={y + height - BORDER_RADIUS}
 				/>
 
 				{/* Нижняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y + height}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y + height}
 				/>
 
 				{/* Верхняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y}
 				/>
 			</>
@@ -80,7 +88,6 @@ export const StackedBarChart = ({ data }: Files) => {
 
 	const renderBarWithTopBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
-		const borderRadius = 10;
 
 		if (height <= 0 || width <= 0) return null;
 
@@ -93,48 +100,48 @@ export const StackedBarChart = ({ data }: Files) => {
 					width={width}
 					height={height}
 					fill={fill}
-					rx={borderRadius}
-					ry={borderRadius}
+					rx={BORDER_RADIUS}
+					ry={BORDER_RADIUS}
 				/>
 
 				{/* Левая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x}
-					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					y2={y + height - BORDER_RADIUS}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x + width}
-					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					y2={y + height - BORDER_RADIUS}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Нижняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y + height}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y + height}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Верхняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 			</>
 		);
@@ -159,44 +166,44 @@ export const StackedBarChart = ({ data }: Files) => {
 						{/* <Tooltip /> */}
 						<XAxis
 							dataKey="name"
-							stroke="#fff"
+							stroke={CHECKS_COLOR}
 							fontSize={12}
 							axisLine={false}
 						/>
 						<Bar
 							dataKey="checks"
 							stackId="a"
-							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
 							radius={5}
 							shape={renderBarWithPartialBorder as any}
 						>
 							{data.map((_entry, index) => (
-								<Cell key={`cell-${index}`} fill={'#fff'} />
+								<Cell key={`cell-${index}`} fill={CHECKS_COLOR} />
 							))}
 						</Bar>
 						<Bar
 							dataKey="violations"
 							stackId="b"
-							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
 							radius={5}
 							shape={renderBarWithTopBorder as any}
 						>
 							{data.map((_entry, index) => (
-								<Cell key={`cell-${index}`} fill={'#f08c00'}/>
+								<Cell key={`cell-${index}`} fill={VIOLATIONS_COLOR} />
 							))}
 						</Bar>
 					</BarChart>
 				</div>
 				<div className="protection-stat-total-info">
 					<div
-						className="font-bold"
+						className={`font-bold text-[${CHECKS_COLOR}]`}
 					>
-						{t('check')}: 777
+						{t('check')}: {totalChecks}
 					</div>
 					<div
-						className="font-bold text-[#f08c00]"
+						className={`font-bold text-[${VIOLATIONS_COLOR}]`}
 					>
-						{t('violations')}: 777
+						{t('violations')}: {totalViolations}
 					</div>
 				</div>
 			</div>
diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss
index 739765a..0aa271b 100644
--- a/src/app/styles/global-styles.scss
+++ b/src/app/styles/global-styles.scss
@@ -322,4 +322,14 @@
 	&-video {
 		color: v.$color-video;
 	}
+}
+
+.split-blocks {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 30px;
+
+	@media (max-width: 1624px) {
+		grid-template-columns: 1fr;
+	}
 }
\ No newline at end of file
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index d37001f..f145f56 100644
--- a/src/app/styles/pages-styles.scss
+++ b/src/app/styles/pages-styles.scss
@@ -18,12 +18,16 @@
 }
 
 .protection-overview {
-	background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
-	color: v.$white;
+	--text-color: v.$text-p;
+/* 	background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
+	color: v.$white; */
+	color: var(--text-color);
 	border-radius: 20px;
 	padding: 25px;
 	margin-bottom: 30px;
 	position: relative;
+	background: v.$white;
+	box-shadow: 0 4px 20px v.$shadow-1;
 
 	h3 {
 		margin: 0 0 10px 0;
@@ -37,7 +41,7 @@
 	}
 
 	.pie-char-text {
-		fill: v.$white;
+		fill: var(--text-color);
 		font-size: 20px;
 		text-anchor: middle;
 		dominant-baseline: middle;
@@ -71,7 +75,10 @@
 
 	.protection-stat {
 		padding: 15px;
-		background: rgba(255, 255, 255, 0.1);
+		/* background: rgba(255, 255, 255, 0.1); */
+		/* background-color: v.$b-color-1; */
+		/* background-color: v.$bg-light; */
+		box-shadow: 0 4px 20px v.$shadow-1;
 		border-radius: 12px;
 		display: flex;
 		flex-direction: column;
@@ -139,7 +146,8 @@
 			position: absolute;
 			top: 10;
 			left: 10;
-			background-color: #1f293718;
+			/* background-color: #1f293718; */
+			box-shadow: 0 4px 20px v.$shadow-1;
 			padding: 10px;
 			border-radius: 10;
 			font-size: 15px;
@@ -227,7 +235,7 @@
 		background: #ffffff1a;
 
 		&.stats-header {
-			background: #f9fafb;
+			background-color: v.$bg-light;
 			border-left: none;
 			font-size: 16px;
 			font-weight: 500;
@@ -562,7 +570,7 @@
 
 
 		&-head {
-			background-color: v.$b-color-1;
+			background-color: v.$bg-light;
 
 			th {
 				padding-left: 1rem;
@@ -611,6 +619,7 @@
 
 				&:hover {
 					background-color: v.$bg-light;
+					/* background-color: v.$b-color-1; */
 				}
 			}
 
diff --git a/src/app/ui/dashboard/protection-overview.tsx b/src/app/ui/dashboard/protection-overview.tsx
index 1e428b6..d566a7e 100644
--- a/src/app/ui/dashboard/protection-overview.tsx
+++ b/src/app/ui/dashboard/protection-overview.tsx
@@ -58,7 +58,7 @@ export default function ProtectionOverview() {
 	});
 
 	return (
-		<div className="protection-overview grow">
+		<div className="protection-overview">
 			<h3>{t('protecting-your-content')}</h3>
 			<p>{t('current-status-of')}</p>
 			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
diff --git a/src/app/ui/dashboard/stats-grid.tsx b/src/app/ui/dashboard/stats-grid.tsx
index abc3e8c..18bbd7c 100644
--- a/src/app/ui/dashboard/stats-grid.tsx
+++ b/src/app/ui/dashboard/stats-grid.tsx
@@ -4,7 +4,7 @@ export default function StatsGrid() {
 	const t = useTranslations("Global");
 
 	return (
-		<div className="block-wrapper stats-wrapper grow auto">
+		<div className="block-wrapper stats-wrapper">
 			<h3>
 				{t('your-content')}
 			</h3>