diff --git a/apps/webapp/app/components/templates/TemplateOverview.tsx b/apps/webapp/app/components/templates/TemplateOverview.tsx
index 935dde48f..ac2050099 100644
--- a/apps/webapp/app/components/templates/TemplateOverview.tsx
+++ b/apps/webapp/app/components/templates/TemplateOverview.tsx
@@ -32,24 +32,24 @@ export function TemplateOverview({ template }: { template: TemplateListItem }) {
           </div>
         </div>
         <div className="sticky top-[220px] ml-2 flex h-max w-[240px] min-w-[240px] flex-col rounded-r  px-4">
-          <div className="flex flex-row gap-x-1">
-            {template.services.map((service) => (
-              <div key={service.slug} className="">
-                <ApiLogoIcon
-                  integration={service}
-                  size="regular"
-                  className="flex h-8 w-8 mb-3 items-center justify-center rounded border-[1px] border-slate-700 bg-slate-900 transition group-hover:border-slate-600 group-hover:bg-slate-900/80"
-                />
-              </div>
-            ))}
-          </div>
-
           <div className="flex flex-col gap-y-3 ">
             <Header2 size="regular" className="font-semibold">
               {title}
             </Header2>
             <Body>{description}</Body>
 
+            <div className="flex flex-row gap-x-1">
+              {template.services.map((service) => (
+                <div key={service.slug} className="">
+                  <ApiLogoIcon
+                    integration={service}
+                    size="regular"
+                    className="flex h-8 w-8 items-center justify-center rounded border-[1px] border-slate-700 bg-slate-900 transition group-hover:border-slate-600 group-hover:bg-slate-900/80"
+                  />
+                </div>
+              ))}
+            </div>
+
             <TertiaryA href={repositoryUrl} target="_blank">
               <OctoKitty className="h-4 w-4" />
               <Body size="extra-small" className="truncate font-mono">
diff --git a/apps/webapp/app/components/templates/TemplatesGrid.tsx b/apps/webapp/app/components/templates/TemplatesGrid.tsx
index eb0313e8e..fd25ce13a 100644
--- a/apps/webapp/app/components/templates/TemplatesGrid.tsx
+++ b/apps/webapp/app/components/templates/TemplatesGrid.tsx
@@ -42,7 +42,7 @@ export function TemplatesGrid({
               key={template.title}
               type="button"
               onClick={(e) => setOpenedTemplate(template)}
-              className="group w-full flex flex-col h-full overflow-hidden rounded-md border border-slate-700 bg-slate-800 text-left text-sm text-slate-200 shadow-md transition hover:cursor-pointer hover:border-slate-500 hover:bg-slate-700/30 disabled:opacity-50"
+              className="group flex h-full w-full flex-col overflow-hidden rounded-md border border-slate-700 bg-slate-800 text-left text-sm text-slate-200 shadow-md transition hover:cursor-pointer hover:border-slate-500 hover:bg-slate-700/30 disabled:opacity-50"
             >
               <div className="h-24 w-full bg-slate-600 transition group-hover:opacity-90">
                 <img
@@ -52,26 +52,25 @@ export function TemplatesGrid({
                 />
               </div>
               <div className="flex flex-col p-4">
+                <div className="flex flex-col gap-y-2 ">
+                  <Header1 size="small" className="font-semibold">
+                    {template.title}
+                  </Header1>
+                  <Body size="small" className="text-slate-400">
+                    {template.description}
+                  </Body>
+                </div>
                 <div className="flex flex-row gap-x-1">
                   {template.services.map((service) => (
                     <div key={service.slug} className="">
                       <ApiLogoIcon
                         integration={service}
                         size="regular"
-                        className="flex mb-2 h-8 w-8 items-center justify-center rounded border-[1px] border-slate-700 bg-slate-900 transition group-hover:border-slate-600 group-hover:bg-slate-900/80"
+                        className="mt-2 flex h-8 w-8 items-center justify-center rounded border-[1px] border-slate-700 bg-slate-900 transition group-hover:border-slate-600 group-hover:bg-slate-900/80"
                       />
                     </div>
                   ))}
                 </div>
-                          <div className="flex flex-col gap-y-2 ">
-
-                <Header1 size="small" className="font-semibold">
-                  {template.title}
-                </Header1>
-                <Body size="small" className="text-slate-400">
-                  {template.description}
-                </Body>
-              </div>
               </div>
             </button>
           );
