diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ba8e231..a48fb100 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- **Changed:** Rebranded "Templates" to "App Store" across the UI.
+- **Added:** Advanced deployment configuration panel (Editable Ports and Environment Variables) with smart defaults.
+- **Fixed:** Implemented smart image fallbacks for broken registry logos and added expandable descriptions.
 ### Added
 - **Added:** Official LinuxServer.io API integration as the default Template Registry.
 - **Added:** Rich metadata display in the App Store (Architectures, Documentation links, GitHub repository links).
diff --git a/backend/src/services/DockerController.ts b/backend/src/services/DockerController.ts
index 6164d646..41c8a283 100644
--- a/backend/src/services/DockerController.ts
+++ b/backend/src/services/DockerController.ts
@@ -14,7 +14,8 @@ class DockerController {
   private docker: Docker;
 
   private constructor() {
-    this.docker = new Docker({ socketPath: '/var/run/docker.sock' });
+    // Use default constructor to support both Windows named pipes and Linux sockets
+    this.docker = new Docker();
   }
 
   public static getInstance(): DockerController {
diff --git a/frontend/src/components/TemplatesView.tsx b/frontend/src/components/AppStoreView.tsx
similarity index 64%
rename from frontend/src/components/TemplatesView.tsx
rename to frontend/src/components/AppStoreView.tsx
index 1f26f43f..4ab9ac4a 100644
--- a/frontend/src/components/TemplatesView.tsx
+++ b/frontend/src/components/AppStoreView.tsx
@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
 import { Search, Rocket, Loader2, Info, ExternalLink, Github, Star } from "lucide-react";
 import { toast } from "sonner";
@@ -30,11 +31,11 @@ export interface Template {
     stars?: number;
 }
 
-interface TemplatesViewProps {
+interface AppStoreViewProps {
     onDeploySuccess: (stackName: string) => void;
 }
 
-export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
+export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
     const [templates, setTemplates] = useState<Template[]>([]);
     const [searchQuery, setSearchQuery] = useState('');
     const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
@@ -44,6 +45,10 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
     const [isDeploying, setIsDeploying] = useState(false);
     const [loading, setLoading] = useState(true);
 
+    const [imgErrors, setImgErrors] = useState<Record<string, boolean>>({});
+    const [portVars, setPortVars] = useState<Record<string, string>>({});
+    const [isDescExpanded, setIsDescExpanded] = useState(false);
+
     useEffect(() => {
         fetchTemplates();
     }, []);
@@ -65,13 +70,26 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
         setSelectedTemplate(t);
         // Init env vars with defaults
         const initEnvs: Record<string, string> = {};
-        if (t.env && t.env.length > 0) {
-            t.env.forEach(e => {
-                initEnvs[e.name] = e.default || '';
-            });
-        }
+        t.env?.forEach(e => {
+            let defaultVal = e.default || '';
+            // Smart Defaults
+            if (e.name === 'PUID' && !defaultVal) defaultVal = '1000';
+            if (e.name === 'PGID' && !defaultVal) defaultVal = '1000';
+            if (e.name === 'TZ' && !defaultVal) defaultVal = 'America/Toronto';
+            initEnvs[e.name] = defaultVal;
+        });
         setEnvVars(initEnvs);
 
+        const initPorts: Record<string, string> = {};
+        t.ports?.forEach(p => {
+            const parts = p.split(':');
+            if (parts.length > 1) {
+                initPorts[p] = parts[0]; // Store just the host port for editing
+            }
+        });
+        setPortVars(initPorts);
+        setIsDescExpanded(false); // Reset description toggle
+
         // Auto-generate stack name from title
         const defaultName = t.title
             .toLowerCase()
@@ -89,13 +107,25 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
             return;
         }
         setIsDeploying(true);
+
+        const modifiedTemplate = { ...selectedTemplate };
+        if (modifiedTemplate.ports) {
+            modifiedTemplate.ports = modifiedTemplate.ports.map(p => {
+                const parts = p.split(':');
+                if (parts.length > 1 && portVars[p]) {
+                    return `${portVars[p]}:${parts[1]}`; // Stitch the edited host port back
+                }
+                return p;
+            });
+        }
+
         try {
             const res = await fetch('/api/templates/deploy', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     stackName: stackName.trim(),
-                    template: selectedTemplate,
+                    template: modifiedTemplate,
                     envVars
                 })
             });
@@ -125,7 +155,7 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
                     <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                     <Input
                         type="search"
-                        placeholder="Search templates..."
+                        placeholder="Search App Store..."
                         className="pl-8"
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
@@ -148,8 +178,8 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
                             >
                                 <CardHeader className="flex flex-row items-start gap-4 space-y-0">
                                     <div className="w-12 h-12 rounded bg-muted/50 p-1 flex-shrink-0 flex items-center justify-center bg-white overflow-hidden">
-                                        {t.logo ? (
-                                            <img src={t.logo} alt={t.title} className="w-full h-full object-contain" />
+                                        {!imgErrors[t.title] && t.logo ? (
+                                            <img src={t.logo} alt={t.title} className="w-full h-full object-contain" onError={() => setImgErrors(prev => ({ ...prev, [t.title]: true }))} />
                                         ) : (
                                             <Rocket className="w-6 h-6 text-muted-foreground" />
                                         )}
@@ -177,7 +207,7 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
                         {filtered.length === 0 && (
                             <div className="col-span-full py-12 text-center text-muted-foreground">
                                 <Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                                <p>No templates found matching "{searchQuery}"</p>
+                                <p>No apps found matching "{searchQuery}"</p>
                             </div>
                         )}
                     </div>
@@ -191,17 +221,22 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
                             <SheetHeader className="mb-6 text-left">
                                 <div className="flex items-center gap-4 mb-4">
                                     <div className="w-16 h-16 rounded bg-white p-1 flex-shrink-0 flex items-center justify-center overflow-hidden border">
-                                        {selectedTemplate.logo ? (
-                                            <img src={selectedTemplate.logo} alt={selectedTemplate.title} className="w-full h-full object-contain" />
+                                        {!imgErrors[selectedTemplate.title] && selectedTemplate.logo ? (
+                                            <img src={selectedTemplate.logo} alt={selectedTemplate.title} className="w-full h-full object-contain" onError={() => setImgErrors(prev => ({ ...prev, [selectedTemplate.title]: true }))} />
                                         ) : (
                                             <Rocket className="w-8 h-8 text-muted-foreground" />
                                         )}
                                     </div>
                                     <div>
                                         <SheetTitle className="text-xl">{selectedTemplate.title}</SheetTitle>
-                                        <SheetDescription className="line-clamp-2 mt-1">
-                                            {selectedTemplate.description}
-                                        </SheetDescription>
+                                        <div className="mt-1">
+                                            <SheetDescription className={isDescExpanded ? "" : "line-clamp-3 text-sm text-muted-foreground"}>
+                                                {selectedTemplate.description}
+                                            </SheetDescription>
+                                            <span className="text-xs text-primary cursor-pointer hover:underline mt-1 inline-block" onClick={() => setIsDescExpanded(!isDescExpanded)}>
+                                                {isDescExpanded ? 'Read less' : 'Read more'}
+                                            </span>
+                                        </div>
 
                                         {(selectedTemplate.architectures || selectedTemplate.stars !== undefined || selectedTemplate.github_url || selectedTemplate.docs_url) && (
                                             <div className="mt-3 space-y-2">
@@ -241,44 +276,66 @@ export function TemplatesView({ onDeploySuccess }: TemplatesViewProps) {
                                 </div>
                             </SheetHeader>
 
-                            <div className="space-y-6 flex-1 pr-2 pb-8">
-                                <div className="space-y-2">
-                                    <Label htmlFor="stackName" className="font-semibold">
-                                        Stack Name <span className="text-red-500">*</span>
-                                    </Label>
-                                    <Input
-                                        id="stackName"
-                                        value={stackName}
-                                        onChange={(e) => setStackName(e.target.value)}
-                                        placeholder="e.g. my-app"
-                                    />
-                                    <p className="text-xs text-muted-foreground">
-                                        This determines the directory name and docker project name.
-                                    </p>
-                                </div>
-
-                                {selectedTemplate.env && selectedTemplate.env.length > 0 && (
-                                    <div className="space-y-4 pt-4 border-t">
-                                        <h4 className="font-semibold">Environment Variables</h4>
-                                        {selectedTemplate.env.map((e, idx) => (
-                                            <div key={idx} className="space-y-1.5">
-                                                <Label htmlFor={`env-${e.name}`} className="text-sm">
-                                                    {e.label || e.name}
-                                                </Label>
-                                                <Input
-                                                    id={`env-${e.name}`}
-                                                    value={envVars[e.name] !== undefined ? envVars[e.name] : ''}
-                                                    onChange={(ev) => setEnvVars(prev => ({ ...prev, [e.name]: ev.target.value }))}
-                                                    placeholder={e.default || `Enter value for ${e.name}`}
-                                                />
-                                                <p className="text-[10px] text-muted-foreground font-mono">
-                                                    {e.name}
-                                                </p>
-                                            </div>
-                                        ))}
+                            <ScrollArea className="flex-1 pr-4 mt-4 h-[calc(100vh-16rem)]">
+                                <div className="space-y-6 pb-8">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="stackName" className="font-semibold">
+                                            Stack Name <span className="text-red-500">*</span>
+                                        </Label>
+                                        <Input
+                                            id="stackName"
+                                            value={stackName}
+                                            onChange={(e) => setStackName(e.target.value)}
+                                            placeholder="e.g. my-app"
+                                        />
+                                        <p className="text-xs text-muted-foreground">
+                                            This determines the directory name and docker project name.
+                                        </p>
                                     </div>
-                                )}
-                            </div>
+
+                                    {selectedTemplate.ports && selectedTemplate.ports.length > 0 && (
+                                        <div className="space-y-4 pt-4 border-t">
+                                            <h4 className="font-semibold">Ports (Host : Container)</h4>
+                                            {selectedTemplate.ports.map((p, idx) => {
+                                                const parts = p.split(':');
+                                                if (parts.length < 2) return null;
+                                                return (
+                                                    <div key={idx} className="flex items-center space-x-2">
+                                                        <Input
+                                                            value={portVars[p] || ''}
+                                                            onChange={(e) => setPortVars(prev => ({ ...prev, [p]: e.target.value }))}
+                                                            className="w-24 text-center"
+                                                        />
+                                                        <span className="text-muted-foreground font-mono">: {parts[1]}</span>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    )}
+
+                                    {selectedTemplate.env && selectedTemplate.env.length > 0 && (
+                                        <div className="space-y-4 pt-4 border-t">
+                                            <h4 className="font-semibold">Environment Variables</h4>
+                                            {selectedTemplate.env.map((e, idx) => (
+                                                <div key={idx} className="space-y-1.5">
+                                                    <Label htmlFor={`env-${e.name}`} className="text-sm">
+                                                        {e.label || e.name}
+                                                    </Label>
+                                                    <Input
+                                                        id={`env-${e.name}`}
+                                                        value={envVars[e.name] !== undefined ? envVars[e.name] : ''}
+                                                        onChange={(ev) => setEnvVars(prev => ({ ...prev, [e.name]: ev.target.value }))}
+                                                        placeholder={e.default || `Enter value for ${e.name}`}
+                                                    />
+                                                    <p className="text-[10px] text-muted-foreground font-mono">
+                                                        {e.name}
+                                                    </p>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            </ScrollArea>
 
                             <SheetFooter className="pt-4 mt-auto border-t sm:justify-start">
                                 <Button
diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index b7ac23c7..388163a2 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -28,7 +28,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { SettingsModal } from './SettingsModal';
 import { StackAlertSheet } from './StackAlertSheet';
-import { TemplatesView } from './TemplatesView';
+import { AppStoreView } from './AppStoreView';
 
 interface ContainerInfo {
   Id: string;
@@ -767,16 +767,16 @@ export default function EditorLayout() {
             <HardDrive className="w-4 h-4 mr-2" />
             Resources
           </Button>
-          {/* Templates Toggle */}
+          {/* App Store Toggle */}
           <Button
             variant="outline"
             size="sm"
             className="rounded-lg"
             onClick={() => setActiveView('templates')}
-            title="App Templates"
+            title="App Store"
           >
             <CloudDownload className="w-4 h-4 mr-2" />
-            Templates
+            App Store
           </Button>
 
           {/* Settings Modal Toggle */}
@@ -862,7 +862,7 @@ export default function EditorLayout() {
         {/* Main Workspace */}
         <div className="flex-1 overflow-y-auto p-6">
           {activeView === 'templates' ? (
-            <TemplatesView onDeploySuccess={(stackName) => { refreshStacks(); loadFile(stackName); }} />
+            <AppStoreView onDeploySuccess={(stackName) => { refreshStacks(); loadFile(stackName); }} />
           ) : activeView === 'resources' ? (
             <ResourcesView />
           ) : activeView === 'host-console' ? (
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 4acc3a1c..0ad8d303 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,4 +11,12 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
 })