diff --git a/docs/sphinx_setup/_static/css/homepage_style.css b/docs/sphinx_setup/_static/css/homepage_style.css
index 773833257ab..395bbd27ddd 100644
--- a/docs/sphinx_setup/_static/css/homepage_style.css
+++ b/docs/sphinx_setup/_static/css/homepage_style.css
@@ -6,10 +6,6 @@ h1 {
     font-size: 60px !important;
 }
 
-.homepage-begin-container {
-    padding: 0px;
-}
-
 #ov-homepage-banner {
     border-bottom: 0px;
 }
@@ -21,7 +17,7 @@ h1 {
 
 .ov-homepage-slide-title {
     color: white !important;
-    font-size: 22px !important;
+    font-size: 27px !important;
     font-weight: lighter !important;
 }
 
@@ -36,31 +32,26 @@ h1 {
 }
 
 #ov-homepage-banner #splide01-slide01 {
-    background-color: #070862;
     background-image: linear-gradient(350deg, #004CA9 0%, #381965 50%, #070862 100%);
     padding: 32px 48px !important;
 }
 
 #ov-homepage-banner #splide01-slide02 {
-    background-color: #034CAA;
     background-image: linear-gradient(270deg, #034CAA 00%, #4B9D77 50%, #034CAA 100%);
     padding: 32px 48px !important;
 }
 
 #ov-homepage-banner #splide01-slide03 {
-    background-color: #030B5E;
     background-image: linear-gradient(230deg, #030B5E 0%, #285455 40%, #030B5E 100%);
     padding: 32px 48px !important;
 }
 
 #ov-homepage-banner #splide01-slide04 {
-    background-color: #214DA4;
     background-image: linear-gradient(110deg, #214DA4 0%, #03aadd 100%);
     padding: 32px 48px !important;
 }
 
 #ov-homepage-banner #splide01-slide05 {
-    background-color: #034CAA;
     background-image: linear-gradient(350deg, #034CAA 20%, #034CAA 30%, #4B9D77 100%);
     padding: 32px 48px !important;
 }
@@ -70,6 +61,15 @@ h1 {
         margin: 0.4rem 0 1.2rem 0;
     }
 }
+.splide__pagination>li {
+    padding-right: 6px;
+}
+.is-active{
+    color: white !important;
+}
+.homepage-begin-container {
+    padding: 0px;
+}
 
 #ov-homepage-banner p:first-of-type {
     margin-top: 0;
@@ -89,12 +89,8 @@ h1 {
     color: white;
 }
 
-#splide01-track {
-    height: calc(180px) !important;
-}
-
 .ov-homepage-banner-btn {
-    font-size: 14px !important;
+    font-size: 12px !important;
     font-weight: bold !important;
     color: #ffffff !important;
     border: 1px solid white;
@@ -172,7 +168,6 @@ h1 {
 
 .homepage-begin-tile {
     border-radius: 0;
-    /* margin: 20px !important; */
     margin-bottom: 5px;
     position: relative;
     border-width: 0.2cqb;
diff --git a/docs/sphinx_setup/_static/js/custom.js b/docs/sphinx_setup/_static/js/custom.js
index e9368ebda71..404332dce91 100644
--- a/docs/sphinx_setup/_static/js/custom.js
+++ b/docs/sphinx_setup/_static/js/custom.js
@@ -259,14 +259,15 @@ function addFooter() {
 function initSplide() {
 
   var splide = new Splide('.splide', {
-    type              : 'loop',
-    height            : `230px`,
+    type              : 'fade',
+    autoHeight        : true,
     perPage           : 1,
     autoplay          : true,
     arrows            : false,
     waitForTransition : true,
     wheel             : true,
     wheelSleep        : 250,
+    interval          : 3000,
   });
   splide.mount();
 }
diff --git a/docs/sphinx_setup/_static/js/graphs_ov_tf.js b/docs/sphinx_setup/_static/js/graphs_ov_tf.js
deleted file mode 100644
index bf16e9dacc5..00000000000
--- a/docs/sphinx_setup/_static/js/graphs_ov_tf.js
+++ /dev/null
@@ -1,109 +0,0 @@
-$(document).ready(function () {
-    var chartBlock = $('.chart-block-tf-ov');
-    chartBlock.each(function () {
-        var url = $(this).data('loadcsv');
-        Papa.parse(url, {
-            download: true,
-            complete: renderData($(this))
-        })
-    });
-
-    function getLabels(data) {
-        return data
-            .map((item) => item[1]);
-    }
-
-    function getChartOptions(title, displayLabels) {
-        return {
-            responsive: false,
-            maintainAspectRatio: false,
-            legend: { display: true, position: 'bottom' },
-            title: {
-                display: true,
-                text: title
-            },
-            scales: {
-                xAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }],
-                yAxes: [{
-                    ticks: {
-                        display: displayLabels, //this will remove only the label
-                        beginAtZero: true
-                    }
-                }]
-            },
-            plugins: {
-                datalabels: {
-                    color: "#4A4A4A",
-                    anchor: "end",
-                    align: "end",
-                    clamp: false,
-                    offset: 0,
-                    display: true,
-                    font: {
-                        size: 8,
-                        family: 'Roboto'
-                    }
-                }
-            }
-        }
-    }
-
-    function getChartData(data) {
-        function getDataset(data, col, label, color) {
-            return {
-                label: label,
-                data: data.map(function (item) {
-                    return item[col]
-                }),
-                backgroundColor: color,
-                borderColor: 'rgba(170,170,170,0)',
-                barThickness: 12
-            }
-        }
-        return {
-            labels: getLabels(data),
-            datasets: [getDataset(data, 2, 'openvino', '#00C7FD'), getDataset(data, 3, 'TF', '#8F5DA2')]
-        };
-    }
-
-    function renderData(currentChart) {
-        return function (result) {
-            var data = result.data;
-            // remove col names
-            data.shift(0);
-            var chartName = data[1][0];
-            var chartSlug = chartName.replace(')', '').replace(' (', '-');
-            var graphContainer = $('<div>');
-            var chartContainer = $('<div>');
-            graphContainer.attr('id', 'ov-graph-container-' + chartSlug);
-            chartContainer.addClass('chart-container');
-            chartContainer.addClass('container');
-            var chartWrap = $('<div>');
-            chartWrap.addClass('chart-wrap');
-            chartWrap.addClass('container');
-            chartContainer.append(chartWrap);
-            var chart = $('<div>');
-            chart.addClass('chart');
-            chart.addClass('col-md-12');
-            var canvas = $('<canvas>');
-            chart.append(canvas);
-            var container = $('<div>');
-            container.addClass('row');
-            container.append(chart);
-            var context = canvas.get(0).getContext('2d');
-            context.canvas.width = context.canvas.width * 2.5;
-            var chartTitle = chartName + ', Throughput (FPS) Precision: FP32 (Higher is better)';
-            new Chart(context, {
-                type: 'horizontalBar',
-                data: getChartData(data),
-                options: getChartOptions(chartTitle, true)
-            });
-            chartContainer.append(container);
-            currentChart.append(chartContainer);
-        }
-    }
-});