diff --git a/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.kt b/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.kt
index ae0ba77bc..8699f8bc3 100644
--- a/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.kt
+++ b/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.kt
@@ -84,6 +84,7 @@ import org.schabi.newpipe.fragments.BackPressable
 import org.schabi.newpipe.fragments.BaseStateFragment
 import org.schabi.newpipe.fragments.EmptyFragment
 import org.schabi.newpipe.fragments.MainFragment
+import org.schabi.newpipe.fragments.detail.ViewAndThumbsFragment
 import org.schabi.newpipe.fragments.list.comments.CommentsFragment.Companion.getInstance
 import org.schabi.newpipe.fragments.list.videos.RelatedItemsFragment.Companion.getInstance
 import org.schabi.newpipe.ktx.AnimationType
@@ -1424,48 +1425,9 @@ class VideoDetailFragment :
             displayBothUploaderAndSubChannel(info)
         }
 
-        if (info.viewCount >= 0) {
-            binding.detailViewCountView.text =
-                if (info.streamType == StreamType.AUDIO_LIVE_STREAM) {
-                    Localization.listeningCount(activity, info.viewCount)
-                } else if (info.streamType == StreamType.LIVE_STREAM) {
-                    Localization.localizeWatchingCount(activity, info.viewCount)
-                } else {
-                    Localization.localizeViewCount(activity, info.viewCount)
-                }
-            binding.detailViewCountView.visibility = View.VISIBLE
-        } else {
-            binding.detailViewCountView.visibility = View.GONE
-        }
-
-        if (info.dislikeCount == -1L && info.likeCount == -1L) {
-            binding.detailThumbsDownImgView.visibility = View.VISIBLE
-            binding.detailThumbsUpImgView.visibility = View.VISIBLE
-            binding.detailThumbsUpCountView.visibility = View.GONE
-            binding.detailThumbsDownCountView.visibility = View.GONE
-            binding.detailThumbsDisabledView.visibility = View.VISIBLE
-        } else {
-            if (info.dislikeCount >= 0) {
-                binding.detailThumbsDownCountView.text =
-                    Localization.shortCount(activity, info.dislikeCount)
-                binding.detailThumbsDownCountView.visibility = View.VISIBLE
-                binding.detailThumbsDownImgView.visibility = View.VISIBLE
-            } else {
-                binding.detailThumbsDownCountView.visibility = View.GONE
-                binding.detailThumbsDownImgView.visibility = View.GONE
-            }
-
-            if (info.likeCount >= 0) {
-                binding.detailThumbsUpCountView.text =
-                    Localization.shortCount(activity, info.likeCount)
-                binding.detailThumbsUpCountView.visibility = View.VISIBLE
-                binding.detailThumbsUpImgView.visibility = View.VISIBLE
-            } else {
-                binding.detailThumbsUpCountView.visibility = View.GONE
-                binding.detailThumbsUpImgView.visibility = View.GONE
-            }
-            binding.detailThumbsDisabledView.visibility = View.GONE
-        }
+        getChildFragmentManager().beginTransaction()
+            .replace(R.id.details_panel, ViewAndThumbsFragment.getInstance(info))
+            .commitAllowingStateLoss()
 
         if (info.duration > 0) {
             binding.detailDurationView.text = Localization.getDurationString(info.duration)
diff --git a/app/src/main/java/org/schabi/newpipe/fragments/detail/ViewAndThumbsFragment.kt b/app/src/main/java/org/schabi/newpipe/fragments/detail/ViewAndThumbsFragment.kt
new file mode 100644
index 000000000..aabea6d2d
--- /dev/null
+++ b/app/src/main/java/org/schabi/newpipe/fragments/detail/ViewAndThumbsFragment.kt
@@ -0,0 +1,35 @@
+package org.schabi.newpipe.fragments.detail
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.material3.Surface
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import androidx.fragment.compose.content
+import org.schabi.newpipe.extractor.stream.StreamInfo
+import org.schabi.newpipe.ktx.serializable
+import org.schabi.newpipe.ui.components.video.ViewAndThumbs
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.util.KEY_INFO
+
+class ViewAndThumbsFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = content {
+        AppTheme {
+            Surface {
+                ViewAndThumbs(requireArguments().serializable<StreamInfo>(KEY_INFO)!!)
+            }
+        }
+    }
+
+    companion object {
+        fun getInstance(info: StreamInfo) = ViewAndThumbsFragment().apply {
+            arguments = bundleOf(KEY_INFO to info)
+        }
+    }
+}
diff --git a/app/src/main/java/org/schabi/newpipe/ui/components/video/ViewsAndThumbs.kt b/app/src/main/java/org/schabi/newpipe/ui/components/video/ViewsAndThumbs.kt
new file mode 100644
index 000000000..762e5acc0
--- /dev/null
+++ b/app/src/main/java/org/schabi/newpipe/ui/components/video/ViewsAndThumbs.kt
@@ -0,0 +1,198 @@
+package org.schabi.newpipe.ui.components.video
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.LineHeightStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.schabi.newpipe.R
+import org.schabi.newpipe.extractor.stream.StreamInfo
+import org.schabi.newpipe.extractor.stream.StreamType
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.util.Localization
+import org.schabi.newpipe.util.NO_SERVICE_ID
+
+@Composable
+fun ViewAndThumbs(info: StreamInfo) {
+    Column(
+        modifier = Modifier.padding(start = 6.dp)
+    ) {
+        if (info.viewCount >= 0) {
+            val viewCount = when (info.streamType) {
+                StreamType.AUDIO_LIVE_STREAM -> {
+                    Localization.listeningCount(LocalContext.current, info.viewCount)
+                }
+
+                StreamType.LIVE_STREAM -> {
+                    Localization.localizeWatchingCount(LocalContext.current, info.viewCount)
+                }
+
+                else -> {
+                    Localization.localizeViewCount(LocalContext.current, info.viewCount)
+                }
+            }
+            // View count
+            Text(
+                text = viewCount,
+                style = MaterialTheme.typography.labelLarge,
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(top = 5.dp, bottom = 4.dp)
+                    .align(Alignment.CenterHorizontally)
+
+            )
+        }
+
+        Row {
+            val showLikes = info.likeCount >= 0
+            val showDislikes = info.dislikeCount >= 0
+            val showDisabled = !showLikes && !showDislikes
+
+            // Like icon
+            if (showLikes || showDisabled) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_thumb_up),
+                    contentDescription = stringResource(R.string.detail_likes_img_view_description),
+                    modifier = Modifier
+                        .align(Alignment.CenterVertically)
+                        .size(16.dp)
+
+                )
+            }
+            if (showLikes) {
+                Text(
+                    text = Localization.shortCount(LocalContext.current, info.likeCount),
+                    style = MaterialTheme.typography.bodyMedium.merge(
+                        TextStyle(
+                            lineHeightStyle = LineHeightStyle(
+                                alignment = LineHeightStyle.Alignment.Proportional,
+                                trim = LineHeightStyle.Trim.LastLineBottom
+                            )
+                        )
+                    ),
+                    fontWeight = FontWeight.Light,
+                    maxLines = 1,
+                    modifier = Modifier.padding(start = 6.dp)
+                )
+            }
+
+            if ((showLikes && showDislikes) || showDisabled) {
+                Spacer(Modifier.size(8.dp))
+            }
+
+            // Dislike icon
+            if (showDislikes || showDisabled) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_thumb_down),
+                    contentDescription = stringResource(R.string.detail_dislikes_img_view_description),
+                    modifier = Modifier
+                        .align(Alignment.CenterVertically)
+                        .size(16.dp)
+                )
+            }
+
+            if (showDislikes) {
+                Text(
+                    text = Localization.shortCount(LocalContext.current, info.dislikeCount),
+                    style = MaterialTheme.typography.bodyMedium.merge(
+                        TextStyle(
+                            lineHeightStyle = LineHeightStyle(
+                                alignment = LineHeightStyle.Alignment.Proportional,
+                                trim = LineHeightStyle.Trim.LastLineBottom
+                            )
+                        )
+                    ),
+                    fontWeight = FontWeight.Light,
+                    maxLines = 1,
+                    modifier = Modifier.padding(start = 6.dp)
+                )
+            }
+
+            if (showDisabled) {
+                Text(
+                    text = "Disabled",
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.padding(start = 8.dp)
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun Preview(info: StreamInfo) {
+    AppTheme {
+        Surface {
+            ViewAndThumbs(info)
+        }
+    }
+}
+
+@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewNormal() {
+    Preview(
+        StreamInfo(NO_SERVICE_ID, "", "", StreamType.VIDEO_STREAM, "", "", 0).apply {
+            viewCount = 1247
+            likeCount = 1290
+            dislikeCount = 327
+        }
+    )
+}
+
+@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewLikes() {
+    Preview(
+        StreamInfo(NO_SERVICE_ID, "", "", StreamType.VIDEO_STREAM, "", "", 0).apply {
+            viewCount = 1247
+            likeCount = 1290
+            dislikeCount = -1
+        }
+    )
+}
+
+@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewDislikes() {
+    Preview(
+        StreamInfo(NO_SERVICE_ID, "", "", StreamType.VIDEO_STREAM, "", "", 0).apply {
+            viewCount = 1247
+            likeCount = -1
+            dislikeCount = 327
+        }
+    )
+}
+
+@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewDisabled() {
+    Preview(
+        StreamInfo(NO_SERVICE_ID, "", "", StreamType.VIDEO_STREAM, "", "", 0).apply {
+            viewCount = -1
+            likeCount = -1
+            dislikeCount = -1
+        }
+    )
+}
diff --git a/app/src/main/res/layout-large-land/fragment_video_detail.xml b/app/src/main/res/layout-large-land/fragment_video_detail.xml
index d18681056..22c41dd1a 100644
--- a/app/src/main/res/layout-large-land/fragment_video_detail.xml
+++ b/app/src/main/res/layout-large-land/fragment_video_detail.xml
@@ -8,8 +8,8 @@
     android:background="?attr/windowBackground">
 
     <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:baselineAligned="false"
         android:focusableInTouchMode="true"
         android:orientation="horizontal"
@@ -325,91 +325,11 @@
                             </LinearLayout>
 
                             <!-- VIEW & THUMBS -->
-                            <RelativeLayout
+                            <androidx.fragment.app.FragmentContainerView
                                 android:id="@+id/details_panel"
                                 android:layout_width="wrap_content"
                                 android:layout_height="match_parent"
-                                android:layout_alignParentEnd="true"
-                                android:layout_alignParentRight="true"
-                                android:paddingLeft="6dp"
-                                android:paddingRight="6dp">
-
-                                <org.schabi.newpipe.views.NewPipeTextView
-                                    android:id="@+id/detail_view_count_view"
-                                    android:layout_width="wrap_content"
-                                    android:layout_height="wrap_content"
-                                    android:layout_centerHorizontal="true"
-                                    android:layout_marginTop="6dp"
-                                    android:layout_marginBottom="6dp"
-                                    android:lines="1"
-                                    android:textAppearance="?android:attr/textAppearanceLarge"
-                                    android:textSize="@dimen/video_item_detail_views_text_size"
-                                    tools:ignore="RtlHardcoded"
-                                    tools:text="2,816,821,505 views" />
-
-                                <ImageView
-                                    android:id="@+id/detail_thumbs_up_img_view"
-                                    android:layout_width="@dimen/video_item_detail_like_image_width"
-                                    android:layout_height="@dimen/video_item_detail_like_image_height"
-                                    android:layout_below="@id/detail_view_count_view"
-                                    android:contentDescription="@string/detail_likes_img_view_description"
-                                    android:src="@drawable/ic_thumb_up" />
-
-                                <org.schabi.newpipe.views.NewPipeTextView
-                                    android:id="@+id/detail_thumbs_up_count_view"
-                                    android:layout_width="wrap_content"
-                                    android:layout_height="@dimen/video_item_detail_like_image_height"
-                                    android:layout_below="@id/detail_view_count_view"
-                                    android:layout_marginLeft="@dimen/video_item_detail_like_margin"
-                                    android:layout_toRightOf="@id/detail_thumbs_up_img_view"
-                                    android:gravity="center_vertical"
-                                    android:lines="1"
-                                    android:textAppearance="?android:attr/textAppearanceMedium"
-                                    android:textSize="@dimen/video_item_detail_likes_text_size"
-                                    tools:ignore="RtlHardcoded"
-                                    tools:text="12M" />
-
-                                <ImageView
-                                    android:id="@+id/detail_thumbs_down_img_view"
-                                    android:layout_width="@dimen/video_item_detail_like_image_width"
-                                    android:layout_height="@dimen/video_item_detail_like_image_height"
-                                    android:layout_below="@id/detail_view_count_view"
-                                    android:layout_marginLeft="12dp"
-                                    android:layout_toRightOf="@id/detail_thumbs_up_count_view"
-                                    android:contentDescription="@string/detail_dislikes_img_view_description"
-                                    android:src="@drawable/ic_thumb_down"
-                                    tools:ignore="RtlHardcoded" />
-
-                                <org.schabi.newpipe.views.NewPipeTextView
-                                    android:id="@+id/detail_thumbs_down_count_view"
-                                    android:layout_width="wrap_content"
-                                    android:layout_height="@dimen/video_item_detail_like_image_height"
-                                    android:layout_below="@id/detail_view_count_view"
-                                    android:layout_marginLeft="@dimen/video_item_detail_like_margin"
-                                    android:layout_toRightOf="@id/detail_thumbs_down_img_view"
-                                    android:gravity="center_vertical"
-                                    android:lines="1"
-                                    android:textAppearance="?android:attr/textAppearanceMedium"
-                                    android:textSize="@dimen/video_item_detail_likes_text_size"
-                                    tools:ignore="RtlHardcoded"
-                                    tools:text="10K" />
-
-                                <org.schabi.newpipe.views.NewPipeTextView
-                                    android:id="@+id/detail_thumbs_disabled_view"
-                                    android:layout_width="wrap_content"
-                                    android:layout_height="@dimen/video_item_detail_like_image_height"
-                                    android:layout_below="@id/detail_view_count_view"
-                                    android:layout_marginLeft="12dp"
-                                    android:layout_toRightOf="@id/detail_thumbs_down_img_view"
-                                    android:gravity="center_vertical"
-                                    android:text="@string/disabled"
-                                    android:textAppearance="?android:attr/textAppearanceLarge"
-                                    android:textSize="@dimen/video_item_detail_likes_text_size"
-                                    android:textStyle="bold"
-                                    android:visibility="gone"
-                                    tools:ignore="RtlHardcoded"
-                                    tools:visibility="visible" />
-                            </RelativeLayout>
+                                android:layout_alignParentEnd="true"/>
                         </RelativeLayout>
 
                         <!-- CONTROLS -->
@@ -590,7 +510,6 @@
                             android:layout_marginLeft="8dp"
                             android:layout_marginRight="8dp"
                             android:background="?attr/separator_color" />
-
                     </LinearLayout>
                 </RelativeLayout>
             </com.google.android.material.appbar.AppBarLayout>
diff --git a/app/src/main/res/layout/fragment_video_detail.xml b/app/src/main/res/layout/fragment_video_detail.xml
index abf1509b1..5272d08e1 100644
--- a/app/src/main/res/layout/fragment_video_detail.xml
+++ b/app/src/main/res/layout/fragment_video_detail.xml
@@ -311,91 +311,11 @@
                         </LinearLayout>
 
                         <!-- VIEW & THUMBS -->
-                        <RelativeLayout
+                        <androidx.fragment.app.FragmentContainerView
                             android:id="@+id/details_panel"
                             android:layout_width="wrap_content"
                             android:layout_height="match_parent"
-                            android:layout_alignParentEnd="true"
-                            android:layout_alignParentRight="true"
-                            android:paddingLeft="6dp"
-                            android:paddingRight="6dp">
-
-                            <org.schabi.newpipe.views.NewPipeTextView
-                                android:id="@+id/detail_view_count_view"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                android:layout_centerHorizontal="true"
-                                android:layout_marginTop="6dp"
-                                android:layout_marginBottom="6dp"
-                                android:lines="1"
-                                android:textAppearance="?android:attr/textAppearanceLarge"
-                                android:textSize="@dimen/video_item_detail_views_text_size"
-                                tools:ignore="RtlHardcoded"
-                                tools:text="2,816,821,505 views" />
-
-                            <ImageView
-                                android:id="@+id/detail_thumbs_up_img_view"
-                                android:layout_width="@dimen/video_item_detail_like_image_width"
-                                android:layout_height="@dimen/video_item_detail_like_image_height"
-                                android:layout_below="@id/detail_view_count_view"
-                                android:contentDescription="@string/detail_likes_img_view_description"
-                                android:src="@drawable/ic_thumb_up" />
-
-                            <org.schabi.newpipe.views.NewPipeTextView
-                                android:id="@+id/detail_thumbs_up_count_view"
-                                android:layout_width="wrap_content"
-                                android:layout_height="@dimen/video_item_detail_like_image_height"
-                                android:layout_below="@id/detail_view_count_view"
-                                android:layout_marginLeft="@dimen/video_item_detail_like_margin"
-                                android:layout_toRightOf="@id/detail_thumbs_up_img_view"
-                                android:gravity="center_vertical"
-                                android:lines="1"
-                                android:textAppearance="?android:attr/textAppearanceMedium"
-                                android:textSize="@dimen/video_item_detail_likes_text_size"
-                                tools:ignore="RtlHardcoded"
-                                tools:text="12M" />
-
-                            <ImageView
-                                android:id="@+id/detail_thumbs_down_img_view"
-                                android:layout_width="@dimen/video_item_detail_like_image_width"
-                                android:layout_height="@dimen/video_item_detail_like_image_height"
-                                android:layout_below="@id/detail_view_count_view"
-                                android:layout_marginLeft="12dp"
-                                android:layout_toRightOf="@id/detail_thumbs_up_count_view"
-                                android:contentDescription="@string/detail_dislikes_img_view_description"
-                                android:src="@drawable/ic_thumb_down"
-                                tools:ignore="RtlHardcoded" />
-
-                            <org.schabi.newpipe.views.NewPipeTextView
-                                android:id="@+id/detail_thumbs_down_count_view"
-                                android:layout_width="wrap_content"
-                                android:layout_height="@dimen/video_item_detail_like_image_height"
-                                android:layout_below="@id/detail_view_count_view"
-                                android:layout_marginLeft="@dimen/video_item_detail_like_margin"
-                                android:layout_toRightOf="@id/detail_thumbs_down_img_view"
-                                android:gravity="center_vertical"
-                                android:lines="1"
-                                android:textAppearance="?android:attr/textAppearanceMedium"
-                                android:textSize="@dimen/video_item_detail_likes_text_size"
-                                tools:ignore="RtlHardcoded"
-                                tools:text="10K" />
-
-                            <org.schabi.newpipe.views.NewPipeTextView
-                                android:id="@+id/detail_thumbs_disabled_view"
-                                android:layout_width="wrap_content"
-                                android:layout_height="@dimen/video_item_detail_like_image_height"
-                                android:layout_below="@id/detail_view_count_view"
-                                android:layout_marginLeft="12dp"
-                                android:layout_toRightOf="@id/detail_thumbs_down_img_view"
-                                android:gravity="center_vertical"
-                                android:text="@string/disabled"
-                                android:textAppearance="?android:attr/textAppearanceLarge"
-                                android:textSize="@dimen/video_item_detail_likes_text_size"
-                                android:textStyle="bold"
-                                android:visibility="gone"
-                                tools:ignore="RtlHardcoded"
-                                tools:visibility="visible" />
-                        </RelativeLayout>
+                            android:layout_alignParentEnd="true"/>
                     </RelativeLayout>
 
                     <!-- CONTROLS -->