diff --git a/src/components/Common/StatusBadgeMini/index.tsx b/src/components/Common/StatusBadgeMini/index.tsx
new file mode 100644
index 00000000..0653c7d8
--- /dev/null
+++ b/src/components/Common/StatusBadgeMini/index.tsx
@@ -0,0 +1,45 @@
+import {
+  BellIcon,
+  CheckIcon,
+  ClockIcon,
+  MinusSmIcon,
+} from '@heroicons/react/solid';
+import { MediaStatus } from '@server/constants/media';
+
+interface StatusBadgeMiniProps {
+  status: MediaStatus;
+  is4k?: boolean;
+}
+
+const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
+  const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1'];
+  let indicatorIcon: React.ReactNode;
+
+  switch (status) {
+    case MediaStatus.PROCESSING:
+      badgeStyle.push('bg-indigo-500 ring-indigo-400');
+      indicatorIcon = <ClockIcon />;
+      break;
+    case MediaStatus.AVAILABLE:
+      badgeStyle.push('bg-green-500 ring-green-400');
+      indicatorIcon = <CheckIcon />;
+      break;
+    case MediaStatus.PENDING:
+      badgeStyle.push('bg-yellow-500 ring-yellow-400');
+      indicatorIcon = <BellIcon />;
+      break;
+    case MediaStatus.PARTIALLY_AVAILABLE:
+      badgeStyle.push('bg-green-500 ring-green-400');
+      indicatorIcon = <MinusSmIcon />;
+      break;
+  }
+
+  return (
+    <div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700">
+      <div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
+      {is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
+    </div>
+  );
+};
+
+export default StatusBadgeMini;
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 0c95a752..50643aa1 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -10,6 +10,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import type { PlayButtonLink } from '@app/components/Common/PlayButton';
 import PlayButton from '@app/components/Common/PlayButton';
+import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
 import Tooltip from '@app/components/Common/Tooltip';
 import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import IssueModal from '@app/components/IssueModal';
@@ -561,75 +562,149 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                           {((!mSeason &&
                             request?.status === MediaRequestStatus.APPROVED) ||
                             mSeason?.status === MediaStatus.PROCESSING) && (
-                            <Badge badgeType="primary">
-                              {intl.formatMessage(globalMessages.requested)}
-                            </Badge>
+                            <>
+                              <div className="hidden md:flex">
+                                <Badge badgeType="primary">
+                                  {intl.formatMessage(globalMessages.requested)}
+                                </Badge>
+                              </div>
+                              <div className="flex md:hidden">
+                                <StatusBadgeMini
+                                  status={MediaStatus.PROCESSING}
+                                />
+                              </div>
+                            </>
                           )}
                           {((!mSeason &&
                             request?.status === MediaRequestStatus.PENDING) ||
                             mSeason?.status === MediaStatus.PENDING) && (
-                            <Badge badgeType="warning">
-                              {intl.formatMessage(globalMessages.pending)}
-                            </Badge>
+                            <>
+                              <div className="hidden md:flex">
+                                <Badge badgeType="warning">
+                                  {intl.formatMessage(globalMessages.pending)}
+                                </Badge>
+                              </div>
+                              <div className="flex md:hidden">
+                                <StatusBadgeMini status={MediaStatus.PENDING} />
+                              </div>
+                            </>
                           )}
                           {mSeason?.status ===
                             MediaStatus.PARTIALLY_AVAILABLE && (
-                            <Badge badgeType="success">
-                              {intl.formatMessage(
-                                globalMessages.partiallyavailable
-                              )}
-                            </Badge>
+                            <>
+                              <div className="hidden md:flex">
+                                <Badge badgeType="success">
+                                  {intl.formatMessage(
+                                    globalMessages.partiallyavailable
+                                  )}
+                                </Badge>
+                              </div>
+                              <div className="flex md:hidden">
+                                <StatusBadgeMini
+                                  status={MediaStatus.PARTIALLY_AVAILABLE}
+                                />
+                              </div>
+                            </>
                           )}
                           {mSeason?.status === MediaStatus.AVAILABLE && (
-                            <Badge badgeType="success">
-                              {intl.formatMessage(globalMessages.available)}
-                            </Badge>
+                            <>
+                              <div className="hidden md:flex">
+                                <Badge badgeType="success">
+                                  {intl.formatMessage(globalMessages.available)}
+                                </Badge>
+                              </div>
+                              <div className="flex md:hidden">
+                                <StatusBadgeMini
+                                  status={MediaStatus.AVAILABLE}
+                                />
+                              </div>
+                            </>
                           )}
                           {((!mSeason4k &&
                             request4k?.status ===
                               MediaRequestStatus.APPROVED) ||
                             mSeason4k?.status4k === MediaStatus.PROCESSING) &&
                             show4k && (
-                              <Badge badgeType="primary">
-                                {intl.formatMessage(messages.status4k, {
-                                  status: intl.formatMessage(
-                                    globalMessages.requested
-                                  ),
-                                })}
-                              </Badge>
+                              <>
+                                <div className="hidden md:flex">
+                                  <Badge badgeType="primary">
+                                    {intl.formatMessage(messages.status4k, {
+                                      status: intl.formatMessage(
+                                        globalMessages.requested
+                                      ),
+                                    })}
+                                  </Badge>
+                                </div>
+                                <div className="flex md:hidden">
+                                  <StatusBadgeMini
+                                    status={MediaStatus.PROCESSING}
+                                    is4k={true}
+                                  />
+                                </div>
+                              </>
                             )}
                           {((!mSeason4k &&
                             request4k?.status === MediaRequestStatus.PENDING) ||
                             mSeason?.status4k === MediaStatus.PENDING) &&
                             show4k && (
-                              <Badge badgeType="warning">
-                                {intl.formatMessage(messages.status4k, {
-                                  status: intl.formatMessage(
-                                    globalMessages.pending
-                                  ),
-                                })}
-                              </Badge>
+                              <>
+                                <div className="hidden md:flex">
+                                  <Badge badgeType="warning">
+                                    {intl.formatMessage(messages.status4k, {
+                                      status: intl.formatMessage(
+                                        globalMessages.pending
+                                      ),
+                                    })}
+                                  </Badge>
+                                </div>
+                                <div className="flex md:hidden">
+                                  <StatusBadgeMini
+                                    status={MediaStatus.PENDING}
+                                    is4k={true}
+                                  />
+                                </div>
+                              </>
                             )}
                           {mSeason4k?.status4k ===
                             MediaStatus.PARTIALLY_AVAILABLE &&
                             show4k && (
-                              <Badge badgeType="success">
-                                {intl.formatMessage(messages.status4k, {
-                                  status: intl.formatMessage(
-                                    globalMessages.partiallyavailable
-                                  ),
-                                })}
-                              </Badge>
+                              <>
+                                <div className="hidden md:flex">
+                                  <Badge badgeType="success">
+                                    {intl.formatMessage(messages.status4k, {
+                                      status: intl.formatMessage(
+                                        globalMessages.partiallyavailable
+                                      ),
+                                    })}
+                                  </Badge>
+                                </div>
+                                <div className="flex md:hidden">
+                                  <StatusBadgeMini
+                                    status={MediaStatus.PARTIALLY_AVAILABLE}
+                                    is4k={true}
+                                  />
+                                </div>
+                              </>
                             )}
                           {mSeason4k?.status4k === MediaStatus.AVAILABLE &&
                             show4k && (
-                              <Badge badgeType="success">
-                                {intl.formatMessage(messages.status4k, {
-                                  status: intl.formatMessage(
-                                    globalMessages.available
-                                  ),
-                                })}
-                              </Badge>
+                              <>
+                                <div className="hidden md:flex">
+                                  <Badge badgeType="success">
+                                    {intl.formatMessage(messages.status4k, {
+                                      status: intl.formatMessage(
+                                        globalMessages.available
+                                      ),
+                                    })}
+                                  </Badge>
+                                </div>
+                                <div className="flex md:hidden">
+                                  <StatusBadgeMini
+                                    status={MediaStatus.AVAILABLE}
+                                    is4k={true}
+                                  />
+                                </div>
+                              </>
                             )}
                           <ChevronUpIcon
                             className={`${