diff --git a/app/components/chat/StarterTemplates.tsx b/app/components/chat/StarterTemplates.tsx
index fa51961b..5ab844c4 100644
--- a/app/components/chat/StarterTemplates.tsx
+++ b/app/components/chat/StarterTemplates.tsx
@@ -14,7 +14,7 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
     className="items-center justify-center"
   >
     <div
-      className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
+      className={`inline-flex items-center justify-center ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
       title={template.label}
     />
   </a>
diff --git a/uno.config.ts b/uno.config.ts
index d6bbdb80..84300c15 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -2,7 +2,6 @@ import { globSync } from 'fast-glob';
 import fs from 'node:fs/promises';
 import { basename, join } from 'node:path';
 import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
-import type { IconifyJSON } from '@iconify/types';
 
 // Debug: Log the current working directory and icon paths
 console.log('CWD:', process.cwd());
@@ -16,12 +15,11 @@ const customIconCollection = {
   [collectionName]: iconPaths.reduce(
     (acc, iconPath) => {
       const [iconName] = basename(iconPath).split('.');
-      console.log(`Loading icon: ${iconName} from ${iconPath}`); // Debug log
+      console.log(`Loading icon: ${iconName} from ${iconPath}`);
 
       acc[iconName] = async () => {
         try {
           const content = await fs.readFile(iconPath, 'utf8');
-          // Simplified SVG processing
           return content
             .replace(/fill="[^"]*"/g, 'fill="currentColor"')
             .replace(/fill='[^']*'/g, "fill='currentColor'")
@@ -120,7 +118,7 @@ const COLOR_PRIMITIVES = {
 
 export default defineConfig({
   safelist: [
-    // Explicitly safelist all icon combinations with both formats
+    // Explicitly safelist all icon combinations
     ...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-${collectionName}-${x}`),
     ...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-${collectionName}-${x.toLowerCase()}`),
   ],
@@ -265,11 +263,7 @@ export default defineConfig({
     presetIcons({
       warn: true,
       collections: {
-        bolt: customIconCollection.bolt,
-        ph: async () => {
-          const icons = await import('@iconify-json/ph/icons.json');
-          return icons.default as IconifyJSON;
-        },
+        [collectionName]: customIconCollection[collectionName],
       },
       extraProperties: {
         display: 'inline-block',
@@ -278,7 +272,8 @@ export default defineConfig({
         height: '24px',
       },
       scale: 1,
-      cdn: 'https://esm.sh/',
+      unit: 'px',
+      cdn: '',
     }),
   ],
 });