diff --git a/src/components/content/CodeExampleSection/data.ts b/src/components/content/CodeExampleSection/data.ts
index 9e46eeb91d..693828ff85 100644
--- a/src/components/content/CodeExampleSection/data.ts
+++ b/src/components/content/CodeExampleSection/data.ts
@@ -1,55 +1,52 @@
 const searchExample = {
   command: `$ podman search httpd`,
   // prettier-ignore
-  code: ` 
+  code: `
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
   docker.io   docker.io/library/httpd               The Apache HTTP Server Project  3762             [OK]
   docker.io   docker.io/centos/httpd-24-centos7     Platform for running Apache h... 40
   quay.io     quay.io/centos7/httpd-24-centos-7     Platform for running Apache h... 0               [OK]
   docker.io   docker.io/centos/httpd                                                 34              [OK]
   redhat.com  registry.access.redhat.com/ubi8/httpd                                  0
-  quay.io     quay.io/redhattraining/httpd-parent                                    0               [OK]
-  
-
-
-`,
+  quay.io     quay.io/redhattraining/httpd-parent                                    0               [OK]`,
   label: `Podman can search for images on remote registries with some simple keywords.`,
+  note: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
 };
+
 const searchFilterExample = {
   command: `$ podman search httpd --filter=is-official`,
   // prettier-ignore
-  code:`
+  code: `
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
-  docker.io   docker.io/library/httpd               The Apache HTTP Server Project  3762    [OK]
-  $ podman pull docker.io/library/httpd
+  docker.io   docker.io/library/httpd               The Apache HTTP Server Project  3762    [OK]`,
+  label: `You can also enhance your search with filters.`,
+};
+
+const pullExample = {
+  command: `$ podman pull docker.io/library/httpd`,
+  // prettier-ignore
+  code: `
   Trying to pull docker.io/library/httpd:latest...
   Getting image source signatures
-  Copying blob ab86dc02235d done  
-  Copying blob ba1caf8ba86c done  
-  Copying blob eff15d958d66 done  
-  Copying blob 635a49ba2501 done  
-  Copying blob 600feb748d3c done  
-  Copying config d294bb32c2 done  
+  Copying blob ab86dc02235d done
+  Copying blob ba1caf8ba86c done
+  Copying blob eff15d958d66 done
+  Copying blob 635a49ba2501 done
+  Copying blob 600feb748d3c done
+  Copying config d294bb32c2 done
   Writing manifest to image destination
   Storing signatures
-  d294bb32c2073ecb5fb27e7802a1e5bec334af69cac361c27e6cb8546fdd14e7
-
-
-
-`,
-  label: `You can also enhance your search with filters.`,
-  extra: `Downloading (pulling) an image is easy, too.`,
+  d294bb32c2073ecb5fb27e7802a1e5bec334af69cac361c27e6cb8546fdd14e7`,
+  label: `Downloading (pulling) an image is easy, too.`,
 };
+
 const imagesExample = {
   command: `$ podman images`,
   // prettier-ignore
-  code:`
+  code: `
   REPOSITORY               TAG         IMAGE ID      CREATED       SIZE
-  docker.io/library/httpd  latest      d294bb32c207  12 hours ago  148 MB
-  
-`,
-  label: `Podman can search for images on remote registries with some simple keywords.`,
-  extra: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
+  docker.io/library/httpd  latest      d294bb32c207  12 hours ago  148 MB`,
+  label: `Listing the images you've already pulled is just as simple.`,
 };
 
-export { searchExample, searchFilterExample, imagesExample };
+export { searchExample, searchFilterExample, pullExample, imagesExample };
diff --git a/src/components/content/CodeExampleSection/index.tsx b/src/components/content/CodeExampleSection/index.tsx
index 9012323161..2eeeb78d43 100644
--- a/src/components/content/CodeExampleSection/index.tsx
+++ b/src/components/content/CodeExampleSection/index.tsx
@@ -1,70 +1,42 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import Markdown from '@site/src/components/utilities/Markdown';
-import { searchExample, searchFilterExample, imagesExample } from './data';
+import { searchExample, searchFilterExample, pullExample, imagesExample } from './data';
 
 interface CodeProps {
   command: string;
   code: string;
   label: string;
-  extra?: string;
-  className?: string;
+  note?: string;
 }
 const RenderLabelledCode = (props: CodeProps) => {
-  const { command, code, label, extra, className } = props;
+  const { command, code, label, note } = props;
 
   return (
-    <div className={`w-96 md:max-w-md ${className}`}>
-      <div className="m-4 max-w-md rounded-md bg-blue-700 p-4 text-center shadow-md dark:bg-blue-900 md:max-w-sm md:text-start lg:mx-0">
+    <div className="mx-auto my-10 max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl xl:max-w-6xl">
+      <div className="rounded-md bg-blue-700 p-4 text-center shadow-md dark:bg-blue-900">
         <Markdown text={label} styles="text-white dark:text-white" />
       </div>
-      {extra && (
-        <div className="mx-4 mb-2 mt-4 hidden max-w-md rounded-md bg-blue-700 p-4 shadow-md dark:bg-blue-900 md:mx-0 md:block md:max-w-sm">
-          <Markdown text={extra} styles="text-white dark:text-white" />
-        </div>
-      )}
-      <CodeBlock language="bash" showLineNumbers className="mx-4 my-2 max-w-md md:hidden">
+      <CodeBlock language="bash" showLineNumbers className="mt-4 overflow-auto text-left">
         {command}
         {code}
       </CodeBlock>
-    </div>
-  );
-};
-
-interface DeskProps {
-  className: string;
-}
-const DesktopCodeBlock = (props: DeskProps) => {
-  return (
-    <div className={`container hidden md:block ${props.className}`}>
-      <CodeBlock language="bash" showLineNumbers>
-        {searchExample.command}
-        {searchExample.code}
-        {searchFilterExample.command}
-        {searchFilterExample.code}
-        {imagesExample.command}
-        {imagesExample.code}
-      </CodeBlock>
+      {note && (
+        <div className="mt-3 border-l-2 border-gray-300 pl-4 dark:border-gray-500">
+          <Markdown text={note} styles="[&_p]:mb-0 [&_p]:text-sm [&_p]:text-gray-700 dark:[&_p]:text-gray-100" />
+        </div>
+      )}
     </div>
   );
 };
 
 function CodeExampleSection() {
   return (
-    <div className="container my-12 grid place-items-center gap-4 md:grid-cols-12 md:place-items-end">
-      <DesktopCodeBlock className="-z-50 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
-      <RenderLabelledCode
-        {...searchExample}
-        className="row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
-      />
-      <RenderLabelledCode
-        {...searchFilterExample}
-        className="row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
-      />
-      <RenderLabelledCode
-        {...imagesExample}
-        className="row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
-      />
+    <div className="container my-12">
+      <RenderLabelledCode {...searchExample} />
+      <RenderLabelledCode {...searchFilterExample} />
+      <RenderLabelledCode {...pullExample} />
+      <RenderLabelledCode {...imagesExample} />
     </div>
   );
 }