How to Add repeat button in same line as Data content and scroll bar in beneath in WPF (XAML)

Question

I want to recreate this design from my web application to my WPF Desktop application.

Here in this design I have these << and >> repeat buttons on sides.

This is the image from my WPF application where I am trying to create the side buttons but did not get any success.

Here is the Style code i am using:

<Style TargetType="ScrollViewer" x:Key="SimpleScrollViewerStyle">
    <Setter Property="Template">
        <Setter.Value>
           
            <ControlTemplate TargetType="ScrollViewer">
                <Grid>
                    <!-- Content Presenter -->
                    <Grid>
                        <ScrollContentPresenter 
                            x:Name="PART_ScrollContentPresenter"
                            CanContentScroll="False" />
                    </Grid>
                    <Grid>
                        <!-- Horizontal ScrollBar -->
                        <ScrollBar x:Name="PART_HorizontalScrollBar"
                                   Orientation="Horizontal"
                                   Height="100"
                                   Background="#d2f7ef"
                                   Foreground="#b2b4c3"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                    </Grid>
                    

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="Thumb" x:Key="ScrollBarThumbStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Border Background="{TemplateBinding Background}" 
                    CornerRadius="4"  
                    BorderThickness="5"
                    OverridesDefaultStyle="True">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Height" Value="auto"/>
                            <Setter Property="Width" Value="auto"/>
                            
                        </Style>
                    </Border.Style>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="#d2f7ef" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#b2b4c3" />
        </Trigger>
        <Trigger Property="IsDragging" Value="True">
            <Setter Property="Background" Value="#b2b4c3" />
        </Trigger>
    </Style.Triggers>
</Style>

<!-- Style for the ScrollBar itself -->
<Style TargetType="ScrollBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid>
                    <Track x:Name="PART_Track" 
                       IsDirectionReversed="False">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.LineUpCommand"
                                      Background="Transparent"
                                      BorderBrush="Transparent"
                                      Height="10"
                                      OverridesDefaultStyle="True">
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="Background" Value="Transparent"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border Background="{TemplateBinding Background}" 
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="0">
                                                        <ContentPresenter />
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" Value="Transparent"/>
                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.DecreaseRepeatButton>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.LineDownCommand"
                                      Background="Transparent"
                                      BorderBrush="Transparent"
                                      Height="10"
                                      OverridesDefaultStyle="True">
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="Background" Value="Transparent"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border Background="{TemplateBinding Background}" 
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="0">
                                                        <ContentPresenter />
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" Value="Transparent"/>
                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.IncreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbStyle}" />
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

it would be helpful if someone help me implement this without disturbing the existing functionality