diff --git a/docs/components/DeploymentCards.jsx b/docs/components/DeploymentCards.jsx
new file mode 100644
index 00000000..2c896476
--- /dev/null
+++ b/docs/components/DeploymentCards.jsx
@@ -0,0 +1,114 @@
+import Image from 'next/image';
+
+const iconMap = {
+    'Deploy on Civo Compute Cloud': '/civo.png',
+    'Deploy on DigitalOcean Droplet': '/digitalocean.png',
+    'Deploy on Kamatera Cloud': '/kamatera.png',
+};
+
+
+export function DeploymentCards({ items }) {
+    return (
+        <>
+            <div className="deployment-cards">
+                {items.map(({ title, link, description }) => {
+                    const isExternal = link.startsWith('https://');
+                    const iconSrc = iconMap[title] || '/default-icon.png'; // Default icon if not found
+
+                    return (
+                        <div
+                            key={title}
+                            className={`card${isExternal ? ' external' : ''}`}
+                        >
+                            <a href={link} target={isExternal ? '_blank' : undefined} rel="noopener noreferrer" className="card-link-wrapper">
+                                <div className="card-icon-container">
+                                    {iconSrc && <div className="card-icon"><Image src={iconSrc} alt={title} width={32} height={32} /></div>} {/* Reduced icon size */}
+                                </div>
+                                <h3 className="card-title">{title}</h3>
+                                {description && <p className="card-description">{description}</p>}
+                                <p className="card-url">{new URL(link).hostname.replace('www.', '')}</p>
+                            </a>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <style jsx>{`
+                .deployment-cards {
+                    margin-top: 24px;
+                    display: grid;
+                    grid-template-columns: 1fr;
+                    gap: 16px;
+                }
+                @media (min-width: 768px) {
+                    .deployment-cards {
+                        grid-template-columns: 1fr 1fr;
+                    }
+                }
+                .card {
+                    background-color: #222222;
+                    border-radius: 8px;
+                    padding: 16px;
+                    transition: background-color 0.3s;
+                    position: relative;
+                    color: #ffffff;
+                    /* Make the card a flex container */
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center; /* Center horizontally */
+                  
+                }
+                .card:hover {
+                    background-color: #333333;
+                }
+                .card.external::after {
+                    content: "↗";
+                    position: absolute;
+                    top: 12px; /* Adjusted position */
+                    right: 12px; /* Adjusted position */
+                    color: #ffffff;
+                    font-size: 0.7em; /* Reduced size */
+                    opacity: 0.8; /* Slightly faded */
+                }
+                .card-link-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    align-items:center;
+                    color: inherit;
+                    text-decoration: none;
+                    width:100%; /* Important: make link wrapper take full width */
+                }
+               .card-icon-container{
+                display:flex;
+                justify-content:center;
+                 width: 100%;
+                 margin-bottom: 8px;
+               }
+                .card-icon {
+                   
+                }
+                .card-title {
+                    font-weight: 600;
+                     margin-bottom: 4px;
+                    font-size: 16px;
+                    text-align: center;
+                    color: #f0f0f0; /* Lighter title color if needed */
+                }
+                .card-description {
+                    margin-bottom: 0;
+                    font-size: 13px;
+                    color: #aaaaaa;
+                    text-align: center;
+                    line-height: 1.4;
+                }
+                .card-url {
+                    margin-top: 8px; /*Keep space consistent */
+                    font-size: 11px;
+                    color: #777777;
+                    text-align: center;
+                    font-family: monospace;
+                }
+            `}</style>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/docs/pages/Deploying/Hosting-the-app.md b/docs/pages/Deploying/Hosting-the-app.mdx
similarity index 83%
rename from docs/pages/Deploying/Hosting-the-app.md
rename to docs/pages/Deploying/Hosting-the-app.mdx
index 5f527aa1..f06f0379 100644
--- a/docs/pages/Deploying/Hosting-the-app.md
+++ b/docs/pages/Deploying/Hosting-the-app.mdx
@@ -1,3 +1,7 @@
+import { DeploymentCards } from '../../components/DeploymentCards';
+
+
+
 # Self-hosting DocsGPT on Amazon Lightsail
 
 Here's a step-by-step guide on how to set up an Amazon Lightsail instance to host DocsGPT.
@@ -105,6 +109,22 @@ Your instance is now available at your Public IP Address on port 5173. Enjoy usi
 
 ## Other Deployment Options
 
-- [Deploy DocsGPT on Civo Compute Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-civo-compute-c)
-- [Deploy DocsGPT on DigitalOcean Droplet](https://dev.to/rutamhere/deploying-docsgpt-on-digitalocean-droplet-50ea)
-- [Deploy DocsGPT on Kamatera Performance Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-kamatera-performance-cloud-1bj)
+<DeploymentCards
+  items={[
+    {
+      title: 'Deploy on Civo Compute Cloud',
+      link: 'https://dev.to/rutamhere/deploying-docsgpt-on-civo-compute-c',
+      description: 'Step-by-step guide for Civo deployment'
+    },
+    {
+      title: 'Deploy on DigitalOcean Droplet', 
+      link: 'https://dev.to/rutamhere/deploying-docsgpt-on-digitalocean-droplet-50ea',
+      description: 'Guide for DigitalOcean deployment'
+    },
+    {
+      title: 'Deploy on Kamatera Cloud',
+      link: 'https://dev.to/rutamhere/deploying-docsgpt-on-kamatera-performance-cloud-1bj',
+      description: 'Kamatera deployment tutorial'
+    }
+  ]}
+/>
diff --git a/docs/public/digitalocean.png b/docs/public/digitalocean.png
new file mode 100644
index 00000000..2d90824a
Binary files /dev/null and b/docs/public/digitalocean.png differ