diff --git a/app/package.json b/app/package.json
index 8a911f0..a1e76f2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -38,7 +38,8 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.12",
     "tailwindcss-animate": "^1.0.7",
-    "vite-plugin-static-copy": "2.3.0"
+    "vite-plugin-static-copy": "2.3.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/node": "^20.8.2",
diff --git a/app/src/App.tsx b/app/src/App.tsx
index edac97c..9f7195f 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,14 +1,17 @@
 import TemplateGrid from "./components/TemplateGrid";
 import Navigation from "./components/Navigation";
 import Search from "./components/Search";
+import { useStore } from "./store";
 import "./App.css";
 
 function App() {
+  const view = useStore((state) => state.view);
+
   return (
     <div className="min-h-screen">
       <Navigation />
       <Search />
-      <TemplateGrid />
+      <TemplateGrid view={view} />
     </div>
   );
 }
diff --git a/app/src/components/Search.tsx b/app/src/components/Search.tsx
index 5c8b64a..8b37f0f 100644
--- a/app/src/components/Search.tsx
+++ b/app/src/components/Search.tsx
@@ -1,7 +1,6 @@
 import { Input } from "./ui/input";
 import { useStore } from "../store";
-import { SearchIcon, XIcon } from "lucide-react";
-import { Badge } from "./ui/badge";
+import { Grid, List, SearchIcon, XIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import {
@@ -15,14 +14,16 @@ import {
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown } from "lucide-react";
 import React from "react";
-
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import SelectedTags from "./SelectedTags";
 const Search = () => {
-  const { templates, searchQuery, setSearchQuery } = useStore();
+  const { templates, searchQuery, setSearchQuery, setView } = useStore();
   const selectedTags = useStore((state) => state.selectedTags);
   const addSelectedTag = useStore((state) => state.addSelectedTag);
   const removeSelectedTag = useStore((state) => state.removeSelectedTag);
   const [open, setOpen] = React.useState(false);
   const [tagSearch, setTagSearch] = React.useState("");
+  const view = useStore((state) => state.view);
 
   // Get all unique tags, safely handle empty templates
   const uniqueTags = React.useMemo(() => {
@@ -41,31 +42,44 @@ const Search = () => {
   }, [uniqueTags, tagSearch]);
 
   return (
-    <div className="max-w-xl mx-auto p-12">
+    <div className=" mx-auto p-12  border-b w-full">
       <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
         Available Templates ({templates?.length || 0})
       </h1>
-      <div className="max-w-xl mx-auto">
-        <div className="flex flex-row gap-2">
-          <div className="relative w-full">
-            <Input
-              type="text"
-              placeholder="Search templates..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full"
-            />
-            {searchQuery.length > 0 ? (
-              <div
-                className="cursor-pointer"
-                onClick={() => setSearchQuery("")}
-              >
-                <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
-              </div>
-            ) : (
-              <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
-            )}
-          </div>
+      <div className="max-w-xl mx-auto flex flex-col gap-2">
+        <div className="relative w-full">
+          <Input
+            type="text"
+            placeholder="Search templates..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full p-6"
+          />
+          {searchQuery.length > 0 ? (
+            <div className="cursor-pointer" onClick={() => setSearchQuery("")}>
+              <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+            </div>
+          ) : (
+            <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+          )}
+        </div>
+
+        <div className="flex flex-row gap-2 justify-between">
+          <Tabs
+            defaultValue={view}
+            onValueChange={(value) => {
+              setView(value as "grid" | "rows");
+            }}
+          >
+            <TabsList>
+              <TabsTrigger value="grid">
+                <Grid /> <span className="text-xs p-1">Grid</span>
+              </TabsTrigger>
+              <TabsTrigger value="rows">
+                <List /> <span className="text-xs p-1">List</span>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
 
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
@@ -118,25 +132,7 @@ const Search = () => {
             </PopoverContent>
           </Popover>
         </div>
-        {selectedTags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-4">
-            {selectedTags.map((tag) => (
-              <Badge
-                key={tag}
-                variant="default"
-                className="cursor-pointer pr-1 flex items-center gap-1"
-              >
-                {tag}
-                <div
-                  className="hover:bg-primary-foreground/20 rounded-full p-1"
-                  onClick={() => removeSelectedTag(tag)}
-                >
-                  <XIcon className="h-3 w-3" />
-                </div>
-              </Badge>
-            ))}
-          </div>
-        )}
+        {selectedTags.length > 0 && <SelectedTags />}
       </div>
     </div>
   );
diff --git a/app/src/components/SelectedTags.tsx b/app/src/components/SelectedTags.tsx
new file mode 100644
index 0000000..feaa888
--- /dev/null
+++ b/app/src/components/SelectedTags.tsx
@@ -0,0 +1,30 @@
+import { XIcon } from "lucide-react";
+import { useStore } from "../store";
+import { Badge } from "./ui/badge";
+
+const SelectedTags = () => {
+  const selectedTags = useStore((state) => state.selectedTags);
+  const removeSelectedTag = useStore((state) => state.removeSelectedTag);
+
+  return (
+    <div className="flex flex-wrap gap-2 mt-4 border-t pt-4">
+      {selectedTags.map((tag) => (
+        <Badge
+          key={tag}
+          variant="default"
+          className="cursor-pointer pr-1 flex items-center gap-1"
+        >
+          {tag}
+          <div
+            className="hover:bg-primary-foreground/20 rounded-full p-1"
+            onClick={() => removeSelectedTag(tag)}
+          >
+            <XIcon className="h-3 w-3" />
+          </div>
+        </Badge>
+      ))}
+    </div>
+  );
+};
+
+export default SelectedTags;
diff --git a/app/src/components/TemplateGrid.tsx b/app/src/components/TemplateGrid.tsx
index 658c450..9f56eaa 100644
--- a/app/src/components/TemplateGrid.tsx
+++ b/app/src/components/TemplateGrid.tsx
@@ -22,6 +22,8 @@ import { useStore } from "../store";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { Label } from "./ui/label";
 import { Clipboard } from "lucide-react";
+import { Skeleton } from "./ui/skeleton";
+import { cn } from "@/lib/utils";
 
 interface Template {
   id: string;
@@ -42,11 +44,17 @@ interface TemplateFiles {
   config: string | null;
 }
 
-const TemplateGrid: React.FC = () => {
+interface TemplateGridProps {
+  view: "grid" | "rows";
+}
+
+const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
   const { templates, setTemplates } = useStore();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const { addSelectedTag, searchQuery, selectedTags } = useStore();
+  const searchQuery = useStore((state) => state.searchQuery);
+  const selectedTags = useStore((state) => state.selectedTags);
+  const { addSelectedTag } = useStore();
 
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
     null
@@ -133,9 +141,23 @@ const TemplateGrid: React.FC = () => {
   if (loading) {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <h1 className="text-4xl font-bold text-center text-gray-900 mb-8">
-          Loading templates...
-        </h1>
+        <div
+          className={cn("", {
+            "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
+              view === "grid",
+            "grid grid-cols-1 gap-4": view === "rows",
+          })}
+        >
+          {[1, 2, 3].map((item) => (
+            <Skeleton
+              key={item}
+              className={cn({
+                "h-[300px]": view === "grid",
+                "h-[135px]": view === "rows",
+              })}
+            ></Skeleton>
+          ))}
+        </div>
       </div>
     );
   }
@@ -154,14 +176,27 @@ const TemplateGrid: React.FC = () => {
   return (
     <>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div
+          className={cn("", {
+            "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
+              view === "grid",
+            "grid grid-cols-1 gap-4": view === "rows",
+          })}
+        >
           {filteredTemplates.length > 0 ? (
             filteredTemplates.map((template) => (
               <Card
                 key={template.id}
-                className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]"
+                onClick={() => handleTemplateClick(template)}
+                className={cn(
+                  " cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
+                  {
+                    "flex-col": view === "grid",
+                    "flex-row": view === "rows",
+                  }
+                )}
               >
-                <CardHeader onClick={() => handleTemplateClick(template)}>
+                <CardHeader>
                   <CardTitle className="text-xl ">
                     <img
                       src={`/blueprints/${template.id}/${template.logo}`}
@@ -175,10 +210,13 @@ const TemplateGrid: React.FC = () => {
                   <p className="text-sm text-muted-foreground line-clamp-2">
                     {template.description}
                   </p>
-                  <div className="mt-2 flex flex-wrap gap-1">
+                  <div className="mt-2 flex flex-wrap gap-1 w-fit">
                     {template.tags.slice(0, 3).map((tag) => (
                       <span
-                        onClick={() => addSelectedTag(tag)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          addSelectedTag(tag);
+                        }}
                         key={tag}
                         className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
                       >
@@ -187,10 +225,7 @@ const TemplateGrid: React.FC = () => {
                     ))}
                   </div>
                 </CardContent>
-                <CardFooter
-                  className="flex justify-between items-center"
-                  onClick={() => handleTemplateClick(template)}
-                >
+                <CardFooter className="flex justify-between items-center">
                   <span className="text-sm text-gray-500">
                     {template.version}
                   </span>
@@ -224,7 +259,7 @@ const TemplateGrid: React.FC = () => {
         open={!!selectedTemplate}
         onOpenChange={() => setSelectedTemplate(null)}
       >
-        <DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
+        <DialogContent className="!max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
           <DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
             <div className="flex items-center gap-4">
               {selectedTemplate?.logo && (
@@ -278,7 +313,7 @@ const TemplateGrid: React.FC = () => {
             </div>
           </DialogHeader>
 
-          <div className="p-6 pt-3  flex flex-col gap-2">
+          <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
             <DialogDescription className="text-base">
               {selectedTemplate?.description}
             </DialogDescription>
@@ -339,7 +374,7 @@ const TemplateGrid: React.FC = () => {
                   </TabsList>
                   <TabsContent value="docker-compose">
                     {templateFiles?.dockerCompose && (
-                      <div className="max-w-6xl w-full relative">
+                      <div className=" flex flex-col relative">
                         <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
                           <span className="leading-tight text-xl font-semibold">
                             Docker Compose
diff --git a/app/src/components/ui/code-editor.tsx b/app/src/components/ui/code-editor.tsx
index 68ced18..1696002 100644
--- a/app/src/components/ui/code-editor.tsx
+++ b/app/src/components/ui/code-editor.tsx
@@ -9,168 +9,168 @@ import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import {
-	autocompletion,
-	type CompletionContext,
-	type CompletionResult,
-	type Completion,
+  autocompletion,
+  type CompletionContext,
+  type CompletionResult,
+  type Completion,
 } from "@codemirror/autocomplete";
 import { useTheme } from "@/theme-provider";
 // Docker Compose completion options
 const dockerComposeServices = [
-	{ label: "services", type: "keyword", info: "Define services" },
-	{ label: "version", type: "keyword", info: "Specify compose file version" },
-	{ label: "volumes", type: "keyword", info: "Define volumes" },
-	{ label: "networks", type: "keyword", info: "Define networks" },
-	{ label: "configs", type: "keyword", info: "Define configuration files" },
-	{ label: "secrets", type: "keyword", info: "Define secrets" },
+  { label: "services", type: "keyword", info: "Define services" },
+  { label: "version", type: "keyword", info: "Specify compose file version" },
+  { label: "volumes", type: "keyword", info: "Define volumes" },
+  { label: "networks", type: "keyword", info: "Define networks" },
+  { label: "configs", type: "keyword", info: "Define configuration files" },
+  { label: "secrets", type: "keyword", info: "Define secrets" },
 ].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}:`;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
+  ...opt,
+  apply: (view: EditorView, completion: Completion) => {
+    const insert = `${completion.label}:`;
+    view.dispatch({
+      changes: {
+        from: view.state.selection.main.from,
+        to: view.state.selection.main.to,
+        insert,
+      },
+      selection: { anchor: view.state.selection.main.from + insert.length },
+    });
+  },
 }));
 
 const dockerComposeServiceOptions = [
-	{
-		label: "image",
-		type: "keyword",
-		info: "Specify the image to start the container from",
-	},
-	{ label: "build", type: "keyword", info: "Build configuration" },
-	{ label: "command", type: "keyword", info: "Override the default command" },
-	{ label: "container_name", type: "keyword", info: "Custom container name" },
-	{
-		label: "depends_on",
-		type: "keyword",
-		info: "Express dependency between services",
-	},
-	{ label: "environment", type: "keyword", info: "Add environment variables" },
-	{
-		label: "env_file",
-		type: "keyword",
-		info: "Add environment variables from a file",
-	},
-	{
-		label: "expose",
-		type: "keyword",
-		info: "Expose ports without publishing them",
-	},
-	{ label: "ports", type: "keyword", info: "Expose ports" },
-	{
-		label: "volumes",
-		type: "keyword",
-		info: "Mount host paths or named volumes",
-	},
-	{ label: "restart", type: "keyword", info: "Restart policy" },
-	{ label: "networks", type: "keyword", info: "Networks to join" },
+  {
+    label: "image",
+    type: "keyword",
+    info: "Specify the image to start the container from",
+  },
+  { label: "build", type: "keyword", info: "Build configuration" },
+  { label: "command", type: "keyword", info: "Override the default command" },
+  { label: "container_name", type: "keyword", info: "Custom container name" },
+  {
+    label: "depends_on",
+    type: "keyword",
+    info: "Express dependency between services",
+  },
+  { label: "environment", type: "keyword", info: "Add environment variables" },
+  {
+    label: "env_file",
+    type: "keyword",
+    info: "Add environment variables from a file",
+  },
+  {
+    label: "expose",
+    type: "keyword",
+    info: "Expose ports without publishing them",
+  },
+  { label: "ports", type: "keyword", info: "Expose ports" },
+  {
+    label: "volumes",
+    type: "keyword",
+    info: "Mount host paths or named volumes",
+  },
+  { label: "restart", type: "keyword", info: "Restart policy" },
+  { label: "networks", type: "keyword", info: "Networks to join" },
 ].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}: `;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
+  ...opt,
+  apply: (view: EditorView, completion: Completion) => {
+    const insert = `${completion.label}: `;
+    view.dispatch({
+      changes: {
+        from: view.state.selection.main.from,
+        to: view.state.selection.main.to,
+        insert,
+      },
+      selection: { anchor: view.state.selection.main.from + insert.length },
+    });
+  },
 }));
 
 function dockerComposeComplete(
-	context: CompletionContext,
+  context: CompletionContext
 ): CompletionResult | null {
-	const word = context.matchBefore(/\w*/);
-	if (!word) return null;
+  const word = context.matchBefore(/\w*/);
+  if (!word) return null;
 
-	if (!word.text && !context.explicit) return null;
+  if (!word.text && !context.explicit) return null;
 
-	// Check if we're at the root level
-	const line = context.state.doc.lineAt(context.pos);
-	const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
+  // Check if we're at the root level
+  const line = context.state.doc.lineAt(context.pos);
+  const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
 
-	if (indentation === 0) {
-		return {
-			from: word.from,
-			options: dockerComposeServices,
-			validFor: /^\w*$/,
-		};
-	}
+  if (indentation === 0) {
+    return {
+      from: word.from,
+      options: dockerComposeServices,
+      validFor: /^\w*$/,
+    };
+  }
 
-	// If we're inside a service definition
-	if (indentation === 4) {
-		return {
-			from: word.from,
-			options: dockerComposeServiceOptions,
-			validFor: /^\w*$/,
-		};
-	}
+  // If we're inside a service definition
+  if (indentation === 4) {
+    return {
+      from: word.from,
+      options: dockerComposeServiceOptions,
+      validFor: /^\w*$/,
+    };
+  }
 
-	return null;
+  return null;
 }
 
 interface Props extends ReactCodeMirrorProps {
-	wrapperClassName?: string;
-	disabled?: boolean;
-	language?: "yaml" | "json" | "properties" | "shell";
-	lineWrapping?: boolean;
-	lineNumbers?: boolean;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  language?: "yaml" | "json" | "properties" | "shell";
+  lineWrapping?: boolean;
+  lineNumbers?: boolean;
 }
 
 export const CodeEditor = ({
-	className,
-	wrapperClassName,
-	language = "yaml",
-	lineNumbers = true,
-	...props
+  className,
+  wrapperClassName,
+  language = "yaml",
+  lineNumbers = true,
+  ...props
 }: Props) => {
-	const { theme } = useTheme();
-	return (
-		<div className={cn("relative overflow-auto", wrapperClassName)}>
-			<CodeMirror
-				basicSetup={{
-					lineNumbers,
-					foldGutter: true,
-					highlightSelectionMatches: true,
-					highlightActiveLine: !props.disabled,
-					allowMultipleSelections: true,
-				}}
-				theme={theme === "dark" ? githubDark : githubLight}
-				extensions={[
-					language === "yaml"
-						? yaml()
-						: language === "json"
-							? json()
-							: language === "shell"
-								? StreamLanguage.define(shell)
-								: StreamLanguage.define(properties),
-					props.lineWrapping ? EditorView.lineWrapping : [],
-					language === "yaml"
-						? autocompletion({
-								override: [dockerComposeComplete],
-							})
-						: [],
-				]}
-				{...props}
-				editable={!props.disabled}
-				className={cn(
-					"w-full h-full text-sm leading-relaxed",
-					`cm-theme-${theme}`,
-					className,
-				)}
-			/>
-			{props.disabled && (
-				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
-			)}
-		</div>
-	);
+  const { theme } = useTheme();
+  return (
+    <div className={cn("relative overflow-auto", wrapperClassName)}>
+      <CodeMirror
+        basicSetup={{
+          lineNumbers,
+          foldGutter: true,
+          highlightSelectionMatches: true,
+          highlightActiveLine: !props.disabled,
+          allowMultipleSelections: true,
+        }}
+        theme={theme === "dark" ? githubDark : githubLight}
+        extensions={[
+          language === "yaml"
+            ? yaml()
+            : language === "json"
+            ? json()
+            : language === "shell"
+            ? StreamLanguage.define(shell)
+            : StreamLanguage.define(properties),
+          props.lineWrapping ? EditorView.lineWrapping : [],
+          language === "yaml"
+            ? autocompletion({
+                override: [dockerComposeComplete],
+              })
+            : [],
+        ]}
+        {...props}
+        editable={!props.disabled}
+        className={cn(
+          "w-full h-full text-sm leading-relaxed",
+          `cm-theme-${theme}`,
+          className
+        )}
+      />
+      {props.disabled && (
+        <div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
+      )}
+    </div>
+  );
 };
diff --git a/app/src/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx
index e7508fd..835b2ef 100644
--- a/app/src/components/ui/dialog.tsx
+++ b/app/src/components/ui/dialog.tsx
@@ -1,31 +1,31 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -41,7 +41,7 @@ function DialogOverlay({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -62,12 +62,12 @@ function DialogContent({
       >
         {children}
         <DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
-          <XIcon className="size-5"/>
+          <XIcon className="size-5" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -103,7 +103,7 @@ function DialogTitle({
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -116,7 +116,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -130,4 +130,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/app/src/store.ts b/app/src/store.ts
index 09fcba4..2220c82 100644
--- a/app/src/store.ts
+++ b/app/src/store.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 interface Template {
   id: string;
@@ -22,22 +23,34 @@ interface TemplateStore {
   selectedTags: string[];
   addSelectedTag: (tag: string) => void;
   removeSelectedTag: (tag: string) => void;
+  view: "grid" | "rows";
+  setView: (view: "grid" | "rows") => void;
 }
 
-export const useStore = create<TemplateStore>((set) => ({
-  templates: [],
-  setTemplates: (templates) => set({ templates }),
-  searchQuery: "",
-  setSearchQuery: (searchQuery) => set({ searchQuery }),
-  selectedTags: [],
-  addSelectedTag: (tag) =>
-    set((state) => ({
-      selectedTags: state.selectedTags.includes(tag)
-        ? state.selectedTags
-        : [...state.selectedTags, tag],
-    })),
-  removeSelectedTag: (tag) =>
-    set((state) => ({
-      selectedTags: state.selectedTags.filter((t) => t !== tag),
-    })),
-}));
+export const useStore = create<TemplateStore>()(
+  persist(
+    (set) => ({
+      templates: [],
+      setTemplates: (templates) => set({ templates }),
+      searchQuery: "",
+      setSearchQuery: (searchQuery) => set({ searchQuery }),
+      selectedTags: [],
+      addSelectedTag: (tag) =>
+        set((state) => ({
+          selectedTags: state.selectedTags.includes(tag)
+            ? state.selectedTags
+            : [...state.selectedTags, tag],
+        })),
+      removeSelectedTag: (tag) =>
+        set((state) => ({
+          selectedTags: state.selectedTags.filter((t) => t !== tag),
+        })),
+      view: "grid",
+      setView: (view) => set({ view }),
+    }),
+    {
+      name: "template-store",
+      partialize: (state) => ({ view: state.view }), // Only persist the view preference
+    }
+  )
+);