diff --git a/src/components/LearningResourcesWidget/LearningResourcesWidget.scss b/src/components/LearningResourcesWidget/LearningResourcesWidget.scss
index 354f29f..40cb513 100644
--- a/src/components/LearningResourcesWidget/LearningResourcesWidget.scss
+++ b/src/components/LearningResourcesWidget/LearningResourcesWidget.scss
@@ -1,7 +1,51 @@
 .learningResources-learningResources {
+  container-type: inline-size;
   overflow-y: auto;
 }
+.lrn-widg-l-flex-row {
+  border-bottom: 1px solid #d2d2d2;
+}
 
-.widget-learning-resources {
-  column-width: 300px;
+@container (width > 700px) {
+  .lrn-widg-l-flex-row {
+    flex-direction: row;
+    padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+    width: 100%;
+    .item-1 {
+      width: 50%;
+    }
+    .group {
+      width: 47%;
+      .item-2 {
+        flex-grow: 1;
+      }
+      .item-3 {
+        flex-shrink: 1;
+        min-width: 160px;
+      }
+    }
+  }
+}
+@container (width < 700px) { 
+  .lrn-widg-l-flex-row {
+    padding-left: var(--pf-v5-global--spacer--sm);
+    flex-direction: column;
+    gap: 4px;
+  }
+  .item-1 {
+    padding-left: var(--pf-v5-global--spacer--md);
+    padding-top: var(--pf-v5-global--spacer--sm);
+    width: 100%;
+  }
+  .group {
+    padding-bottom: var(--pf-v5-global--spacer--sm);
+    flex-direction: row;
+    .item-2 {
+      padding-left: var(--pf-v5-global--spacer--md);
+      margin-right: 0;
+    }
+    .item-3 {
+      padding-left: var(--pf-v5-global--spacer--md);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/LearningResourcesWidget/LearningResourcesWidget.tsx b/src/components/LearningResourcesWidget/LearningResourcesWidget.tsx
index 896745a..d488457 100644
--- a/src/components/LearningResourcesWidget/LearningResourcesWidget.tsx
+++ b/src/components/LearningResourcesWidget/LearningResourcesWidget.tsx
@@ -6,7 +6,6 @@ import {
 } from '@patternfly/react-core/dist/dynamic/components/Text';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { Link } from 'react-router-dom';
-import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
 import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
 import LearningResourcesEmptyState from './EmptyState';
 import useQuickStarts from '../../hooks/useQuickStarts';
@@ -58,31 +57,35 @@ const LearningResourcesWidget: React.FunctionComponent<{
       {bookmarks.length === 0 ? (
         <LearningResourcesEmptyState />
       ) : (
-        <Gallery className="widget-learning-resources pf-v5-u-p-md" hasGutter>
+        <Flex direction={{ default: 'column' }}>
           {bookmarks.map(({ spec, metadata }, index) => (
-            <div key={index}>
-              <TextContent>
-                {metadata.externalDocumentation ? (
-                  <a href={spec.link?.href} target="_blank" rel="noreferrer">
-                    {spec.displayName}
-                    <Icon className="pf-v5-u-ml-sm" isInline>
-                      <ExternalLinkAltIcon />
-                    </Icon>
-                  </a>
-                ) : (
-                  <LinkWrapper
-                    title={spec.displayName}
-                    pathname={spec.link?.href || ''}
-                  />
-                )}
-              </TextContent>
-              <Flex direction={{ default: 'row' }}>
-                <FlexItem className="pf-v5-u-mr-sm">
+            <Flex key={index} className="lrn-widg-l-flex-row">
+              <FlexItem className="item-1">
+                <TextContent>
+                  {metadata.externalDocumentation ? (
+                    <a href={spec.link?.href} target="_blank" rel="noreferrer">
+                      {spec.displayName}
+                      <Icon className="pf-v5-u-ml-sm" size="sm" isInline>
+                        <ExternalLinkAltIcon />
+                      </Icon>
+                    </a>
+                  ) : (
+                    <LinkWrapper
+                      title={spec.displayName}
+                      pathname={spec.link?.href || ''}
+                    />
+                  )}
+                </TextContent>
+              </FlexItem>
+              <Flex className="group">
+                <FlexItem className="item-2">
                   {spec.type && (
-                    <Label color={spec.type.color}>{spec.type.text}</Label>
+                    <Label color={spec.type.color} isCompact>
+                      {spec.type.text}
+                    </Label>
                   )}
                 </FlexItem>
-                <FlexItem>
+                <FlexItem className="item-3">
                   <TextContent>
                     <Text component={TextVariants.small}>
                       {spec.link?.href ? getPathName(spec.link?.href) : ''}
@@ -90,9 +93,9 @@ const LearningResourcesWidget: React.FunctionComponent<{
                   </TextContent>
                 </FlexItem>
               </Flex>
-            </div>
+            </Flex>
           ))}
-        </Gallery>
+        </Flex>
       )}
     </div>
   );