diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx
index 21e89f73..afe3f29e 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx
@@ -6,7 +6,8 @@ export function Answers({
    answers,
    allAnswersUrl,
    allAnswersCount,
-}: TroubleshootingAnswersData) {
+   hasProblems,
+}: TroubleshootingAnswersData & { hasProblems: boolean }) {
    const answersData = answers.slice(0, 8); // design calls for 8
 
    return (
@@ -14,10 +15,11 @@ export function Answers({
          <Stack className="answers" spacing={4}>
             <Stack spacing={2} pt={6}>
                <Heading
-                  as="h3"
+                  as={hasProblems ? 'h4' : 'h3'}
+                  color="gray.800"
                   fontSize={{ base: '20px', mdPlus: '24px' }}
                   fontWeight="medium"
-                  lineHeight="normal"
+                  lineHeight="115%"
                >
                   Didn&apos;t see your problem? Try one of these answers.
                </Heading>
diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
index 6f98cd3e..3be958c5 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -6,22 +6,28 @@ import { NavBar } from './NavBar';
 import { Answers } from './Answers';
 import { ProblemCard } from './ProblemCard';
 
-import type { TroubleshootingProblemsApiData } from '../hooks/useTroubleshootingProblemsProps';
+import type {
+   TroubleshootingProblemsApiData,
+   Problems,
+} from '../hooks/useTroubleshootingProblemsProps';
+import groupBy from 'lodash/groupBy';
 
-export default function TroubleshootingProblems(
-   TroubleshootingProblems: TroubleshootingProblemsApiData
-) {
-   const {
-      title,
-      editUrl,
-      historyUrl,
-      deviceUrls,
-      breadcrumbs,
-      answers,
-      allAnswersUrl,
-      allAnswersCount,
-   } = TroubleshootingProblems;
-   const ProblemsData = TroubleshootingProblems.problems.slice(0, 10); // Design calls for 10
+export default function TroubleshootingProblems({
+   editUrl,
+   historyUrl,
+   deviceUrls,
+   breadcrumbs,
+   answers,
+   allAnswersUrl,
+   allAnswersCount,
+   problems,
+}: TroubleshootingProblemsApiData) {
+   const problemsData = problems.slice(0, 10); // Design calls for 10
+   const hasProblems = problemsData.length > 0;
+   const problemsDataGroups: Record<string, Problems[]> = groupBy(
+      problemsData,
+      'deviceTitle'
+   );
 
    return (
       <>
@@ -35,51 +41,76 @@ export default function TroubleshootingProblems(
             className="wrapper"
             maxWidth="1280px"
             mx="auto"
-            px={{ base: 4, md: 8 }}
-            pt={{ md: 8 }}
+            px={{ base: 4, sm: 8 }}
+            pt={{ sm: 8 }}
             pb={8}
          >
             <Stack as="main" spacing={6}>
-               <Box className="header">
-                  <Heading
-                     color="gray.800"
-                     fontSize={{ base: '24px', sm: '30px' }}
-                     fontWeight="medium"
-                     lineHeight="115%"
-                  >
-                     Most Common {title} Troubleshooting Problems
-                  </Heading>
-                  <Text mt={2}>
-                     When your {title} runs into issues, it can be a source of
-                     frustration and inconvenience. Never fear &mdash;
-                     we&apos;ve compiled a comprehensive guide to diagnose and
-                     fix the most common problems that can plague your {title}.
-                  </Text>
-               </Box>
-               <SimpleGrid
-                  className="problem-list"
-                  columns={{ base: 1, md: 2 }}
-                  spacing={{ base: 4, md: 6 }}
-               >
-                  {ProblemsData.map((problem: any, index: number) => (
-                     <ProblemCard
-                        key={index}
-                        imageSrcStandard={problem.imageSrcStandard}
-                        imageSrcThumbnail={problem.imageSrcThumbnail}
-                        problemTypeIcon={problem.problemTypeIcon}
-                        problemTitle={problem.problemTitle}
-                        problemUrl={problem.problemUrl}
-                        deviceTitle={problem.deviceTitle}
-                        description={problem.description}
-                        altText={problem.altText}
-                     />
-                  ))}
-               </SimpleGrid>
-               <Answers
-                  answers={answers}
-                  allAnswersUrl={allAnswersUrl}
-                  allAnswersCount={allAnswersCount}
-               />
+               {Object.entries(problemsDataGroups).map(
+                  ([deviceName, problems]) => {
+                     const title = deviceName;
+                     return (
+                        <>
+                           <Stack className="header" spacing={2}>
+                              <Heading
+                                 as="h2"
+                                 color="gray.800"
+                                 fontSize={{ base: '24px', sm: '30px' }}
+                                 fontWeight="medium"
+                                 lineHeight="115%"
+                              >
+                                 Most Common{' '}
+                                 <Box as="span" fontWeight="bold">
+                                    {title}
+                                 </Box>{' '}
+                                 Troubleshooting Problems
+                              </Heading>
+                              <Text>
+                                 When your {title} runs into issues, it can be a
+                                 source of frustration and inconvenience. Never
+                                 fear &mdash; we&apos;ve compiled a
+                                 comprehensive guide to diagnose and fix the
+                                 most common problems that can plague your{' '}
+                                 {title}
+                              </Text>
+                           </Stack>
+                           <SimpleGrid
+                              className="problem-ancestor-list"
+                              columns={{ base: 1, md: 2 }}
+                              spacing={{ base: 4, md: 6 }}
+                           >
+                              {problems.map(
+                                 (problem: Problems, index: number) => (
+                                    <ProblemCard
+                                       key={index}
+                                       imageSrcStandard={
+                                          problem.imageSrcStandard
+                                       }
+                                       imageSrcThumbnail={
+                                          problem.imageSrcThumbnail
+                                       }
+                                       problemTypeIcon={problem.problemTypeIcon}
+                                       problemTitle={problem.problemTitle}
+                                       problemUrl={problem.problemUrl}
+                                       deviceTitle={problem.deviceTitle}
+                                       description={problem.description}
+                                       altText={problem.altText}
+                                    />
+                                 )
+                              )}
+                           </SimpleGrid>
+                        </>
+                     );
+                  }
+               )}
+               {answers.length > 0 && (
+                  <Answers
+                     answers={answers}
+                     allAnswersUrl={allAnswersUrl}
+                     allAnswersCount={allAnswersCount}
+                     hasProblems={hasProblems}
+                  />
+               )}
             </Stack>
          </Box>
       </>
diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/hooks/useTroubleshootingProblemsProps.ts b/frontend/app/(defaultLayout)/Troubleshooting/[device]/hooks/useTroubleshootingProblemsProps.ts
index 5fe90bfc..d99bf8bc 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/hooks/useTroubleshootingProblemsProps.ts
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/hooks/useTroubleshootingProblemsProps.ts
@@ -15,11 +15,12 @@ export type TroubleshootingProblemsApiData = {
 
 export type Problems = {
    problemTitle: string;
+   problemUrl: string;
    deviceTitle: string;
    description: string;
    altText: string;
-   imageSrcLg?: string;
-   imageSrcThumb?: string;
+   imageSrcStandard?: string;
+   imageSrcThumbnail?: string;
    problemTypeIcon?: FaIconProps;
    badges?: string[];
 };