diff --git a/backend/src/main/resources/application.yaml b/backend/src/main/resources/application.yaml
index fc2e24d..2050114 100644
--- a/backend/src/main/resources/application.yaml
+++ b/backend/src/main/resources/application.yaml
@@ -1,5 +1,5 @@
 app:
-  version: "0.1.5-alpha"
+  version: "0.1.6-alpha"
 
 spring:
   application:
diff --git a/frontend/src/components/DashboardView.tsx b/frontend/src/components/DashboardView.tsx
index d9be4ac..e69a54c 100644
--- a/frontend/src/components/DashboardView.tsx
+++ b/frontend/src/components/DashboardView.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { Link } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { toast } from "sonner";
+
 import * as Icons from "lucide-react";
 import {
   useProjectsQuery,
@@ -13,15 +14,20 @@ import { ConfirmModal } from "./ConfirmModal";
 import { getIconComponent } from "../utils/icons";
 import styles from "../routes/index.module.css";
 
+type TabFilter = "ACTIVE" | "ARCHIVED" | "ALL";
+
 export const DashboardView: React.FC = () => {
-  const { data: projectsData } = useProjectsQuery();
+  const navigate = useNavigate();
+  const { data: projectsData, isLoading } = useProjectsQuery();
+
   const archiveMutation = useArchiveProjectMutation();
   const unarchiveMutation = useUnarchiveProjectMutation();
   const deleteMutation = useDeleteProjectMutation();
 
+  const [searchQuery, setSearchQuery] = useState("");
+  const [tabFilter, setTabFilter] = useState<TabFilter>("ACTIVE");
   const [editingProjectId, setEditingProjectId] = useState<string | undefined>(undefined);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [showArchived, setShowArchived] = useState(false);
   const [confirmModal, setConfirmModal] = useState<{
     isOpen: boolean;
     itemId: string;
@@ -30,10 +36,29 @@ export const DashboardView: React.FC = () => {
   }>({ isOpen: false, itemId: "", itemName: "", isLoading: false });
 
   const projects = projectsData?.content || [];
-  const activeProjects = projects.filter((p) => !p.archived);
-  const archivedProjects = projects.filter((p) => p.archived);
+  const activeProjectsCount = projects.filter((p) => !p.archived).length;
+  const archivedProjectsCount = projects.filter((p) => p.archived).length;
+
+  const effectiveTab: TabFilter =
+    tabFilter === "ARCHIVED" && archivedProjectsCount === 0 ? "ACTIVE" : tabFilter;
+
+  const isMutationPending =
+    archiveMutation.isPending || unarchiveMutation.isPending || deleteMutation.isPending;
+
+  const filteredProjects = projects.filter((project) => {
+    // Filter by effective tab
+    if (effectiveTab === "ACTIVE" && project.archived) return false;
+    if (effectiveTab === "ARCHIVED" && !project.archived) return false;
+
+    // Filter by search query
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      project.name.toLowerCase().includes(q) ||
+      (project.description && project.description.toLowerCase().includes(q))
+    );
+  });
 
-  const isMutationPending = archiveMutation.isPending || unarchiveMutation.isPending || deleteMutation.isPending;
 
   const handleArchive = async (id: string, name: string) => {
     try {
@@ -71,183 +96,315 @@ export const DashboardView: React.FC = () => {
 
   return (
     <div className={styles.container}>
+      {/* Header section */}
       <div className={styles.header}>
-        <h1 className={styles.title}>DASHBOARD</h1>
-        <p className={styles.subtitle}>Manage your projects, snippets, and credentials</p>
+        <div className={styles.headerTitleGroup}>
+          <div className={styles.headerBadge}>
+            <Icons.FolderGit2 size={14} />
+            <span>WORKSPACES</span>
+          </div>
+          <h1 className={styles.title}>PROJECTS</h1>
+          <p className={styles.subtitle}>
+            Select a project workspace to manage snippets, vault credentials, notes, and links.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          className={styles.createBtn}
+          onClick={() => setIsCreateOpen(true)}
+          disabled={isMutationPending}
+        >
+          <Icons.Plus size={16} />
+          <span>New Project</span>
+        </button>
       </div>
 
-      <div className={styles.statsGrid}>
-        <div className={styles.statCard}>
-          <span className={styles.statLabel}>Active Projects</span>
-          <span className={styles.statValue}>{activeProjects.length}</span>
+      {/* Control Bar: Search & Tab Filters */}
+      <div className={styles.controlBar}>
+        <div className={styles.searchBox}>
+          <Icons.Search size={14} className={styles.searchIcon} />
+          <input
+            type="text"
+            className={styles.searchInput}
+            placeholder="Filter projects by name or description..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              className={styles.clearSearchBtn}
+              onClick={() => setSearchQuery("")}
+            >
+              <Icons.X size={12} />
+            </button>
+          )}
         </div>
-        <div className={styles.statCard}>
-          <span className={styles.statLabel}>Archived Projects</span>
-          <span className={styles.statValue}>{archivedProjects.length}</span>
+
+        <div className={styles.filterTabs}>
+          <button
+            type="button"
+            className={`${styles.filterTab} ${effectiveTab === "ACTIVE" ? styles.filterTabActive : ""}`}
+            onClick={() => setTabFilter("ACTIVE")}
+          >
+            Active ({activeProjectsCount})
+          </button>
+          {archivedProjectsCount > 0 && (
+            <button
+              type="button"
+              className={`${styles.filterTab} ${effectiveTab === "ARCHIVED" ? styles.filterTabActive : ""}`}
+              onClick={() => setTabFilter("ARCHIVED")}
+            >
+              Archived ({archivedProjectsCount})
+            </button>
+          )}
+          <button
+            type="button"
+            className={`${styles.filterTab} ${effectiveTab === "ALL" ? styles.filterTabActive : ""}`}
+            onClick={() => setTabFilter("ALL")}
+          >
+            All ({projects.length})
+          </button>
         </div>
       </div>
 
-      <div>
-        <h2 className={styles.sectionTitle}>Active Projects</h2>
+      {/* Projects Grid */}
+      {isLoading ? (
+        <div className="flex flex-col items-center justify-center py-20 gap-3">
+          <Icons.Loader2 size={32} className="animate-spin text-primary" />
+          <span className="text-xs font-mono text-muted-foreground">LOADING WORKSPACES...</span>
+        </div>
+      ) : filteredProjects.length === 0 ? (
+        <div className={styles.emptyState}>
+          <Icons.FolderSearch size={44} className="text-muted-foreground animate-pulse" />
+          <h3 className={styles.emptyTitle}>
+            {searchQuery
+              ? `No projects matching "${searchQuery}"`
+              : effectiveTab === "ARCHIVED"
+              ? "No archived projects found"
+              : "No projects created yet"}
+          </h3>
+          <p className={styles.emptySubtitle}>
+            {searchQuery
+              ? "Try adjusting your search filter."
+              : "Get started by creating your first dev project workspace."}
+          </p>
+          {searchQuery ? (
+            <button
+              type="button"
+              className={styles.secondaryBtn}
+              onClick={() => setSearchQuery("")}
+            >
+              Clear Search
+            </button>
+          ) : (
+            <button
+              type="button"
+              className={styles.primaryBtn}
+              onClick={() => setIsCreateOpen(true)}
+            >
+              <Icons.Plus size={14} />
+              <span>Create Project</span>
+            </button>
+          )}
+        </div>
+      ) : (
         <div className={styles.projectsGrid}>
-          {activeProjects.map((project) => {
+          {filteredProjects.map((project) => {
             const ProjectIcon = getIconComponent(project.icon);
+            const cardColor = project.color || "var(--color-primary, #6366f1)";
+
             return (
-              <Link
+              <div
                 key={project.id}
-                to="/projects/$projectId"
-                params={{ projectId: project.id }}
-                className={styles.projectCard}
-                style={{ textDecoration: "none" }}
+                role="button"
+                tabIndex={0}
+                className={`${styles.projectCard} ${project.archived ? styles.projectCardArchived : ""}`}
+                onClick={() =>
+                  navigate({
+                    to: "/projects/$projectId",
+                    params: { projectId: project.id },
+                  })
+                }
+                onKeyDown={(e) => {
+                  if (e.target !== e.currentTarget) return;
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    navigate({
+                      to: "/projects/$projectId",
+                      params: { projectId: project.id },
+                    });
+                  }
+                }}
               >
+                {/* Top Accent Strip */}
                 <div
-                  className="h-1 w-full absolute top-0 left-0"
-                  style={{ backgroundColor: project.color || "var(--color-primary)" }}
+                  className={styles.cardAccentBar}
+                  style={{ backgroundColor: cardColor }}
                 />
+
+                {/* Card Header */}
                 <div className={styles.cardHeader}>
-                  <div className={styles.cardTitleSection}>
-                    <div className={styles.cardIcon}>
-                      <ProjectIcon
-                        size={18}
-                        style={{ color: project.color || "var(--color-primary)" }}
-                      />
-                    </div>
+                  <div
+                    className={styles.cardIconBox}
+                    style={{
+                      borderColor: `color-mix(in srgb, ${cardColor} 25%, transparent)`,
+                      backgroundColor: `color-mix(in srgb, ${cardColor} 10%, transparent)`,
+                    }}
+                  >
+                    <ProjectIcon size={20} style={{ color: cardColor }} />
+                  </div>
+
+                  <div className={styles.cardTitleBox}>
                     <h3 className={styles.cardTitle}>{project.name}</h3>
+                    {project.archived && (
+                      <span className={styles.archivedBadge}>ARCHIVED</span>
+                    )}
                   </div>
                 </div>
 
+                {/* Card Body */}
                 <p className={styles.cardDesc}>
                   {project.description || "No description provided."}
                 </p>
 
+                {/* Direct Shortcut Feature Badges */}
+                <div className={styles.shortcutRow} onClick={(e) => e.stopPropagation()}>
+                  <Link
+                    to="/projects/$projectId"
+                    params={{ projectId: project.id }}
+                    search={{ tab: "snippets" }}
+                    className={styles.shortcutTag}
+                    title="Code Snippets"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Icons.Code2 size={11} />
+                    <span>Snippets</span>
+                  </Link>
+                  <Link
+                    to="/projects/$projectId"
+                    params={{ projectId: project.id }}
+                    search={{ tab: "credentials" }}
+                    className={styles.shortcutTag}
+                    title="Vault Credentials"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Icons.KeyRound size={11} />
+                    <span>Vault</span>
+                  </Link>
+                  <Link
+                    to="/projects/$projectId"
+                    params={{ projectId: project.id }}
+                    search={{ tab: "problems" }}
+                    className={styles.shortcutTag}
+                    title="Problems & Solutions"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Icons.AlertCircle size={11} />
+                    <span>Problems</span>
+                  </Link>
+                  <Link
+                    to="/projects/$projectId"
+                    params={{ projectId: project.id }}
+                    search={{ tab: "notes" }}
+                    className={styles.shortcutTag}
+                    title="Notes"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Icons.FileText size={11} />
+                    <span>Notes</span>
+                  </Link>
+                  <Link
+                    to="/projects/$projectId"
+                    params={{ projectId: project.id }}
+                    search={{ tab: "links" }}
+                    className={styles.shortcutTag}
+                    title="Links"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Icons.Link2 size={11} />
+                    <span>Links</span>
+                  </Link>
+                </div>
+
+                {/* Card Footer */}
                 <div className={styles.cardFooter}>
-                  <div className={styles.cardActions}>
-                    <button
-                      className={styles.actionBtn}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        handleArchive(project.id, project.name);
-                      }}
-                      title="Archive Project"
-                      disabled={isMutationPending}
-                    >
-                      <Icons.Archive size={12} />
-                    </button>
+                  <div className={styles.cardActions} onClick={(e) => e.stopPropagation()}>
+                    {project.archived ? (
+                      <button
+                        type="button"
+                        className={styles.actionBtn}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleUnarchive(project.id, project.name);
+                        }}
+                        title="Restore Project"
+                        disabled={isMutationPending}
+                      >
+                        <Icons.ArchiveRestore size={13} />
+                      </button>
+                    ) : (
+                      <button
+                        type="button"
+                        className={styles.actionBtn}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleArchive(project.id, project.name);
+                        }}
+                        title="Archive Project"
+                        disabled={isMutationPending}
+                      >
+                        <Icons.Archive size={13} />
+                      </button>
+                    )}
                     <button
+                      type="button"
                       className={`${styles.actionBtn} ${styles.actionBtnDanger}`}
                       onClick={(e) => {
                         e.stopPropagation();
-                        e.preventDefault();
                         handleDelete(project.id, project.name);
                       }}
                       title="Delete Project"
                       disabled={isMutationPending}
                     >
-                      <Icons.Trash2 size={12} />
+                      <Icons.Trash2 size={13} />
                     </button>
                   </div>
 
                   <button
-                    className={styles.openLink}
+                    type="button"
+                    className={styles.enterLink}
                     onClick={(e) => {
                       e.stopPropagation();
-                      e.preventDefault();
                       setEditingProjectId(project.id);
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", padding: 0 }}
-                    title="Manage Project"
+                    title="View & Edit Project Details"
                   >
-                    <span>Manage</span>
-                    <Icons.Settings size={12} />
+                    <span>View Details</span>
+                    <Icons.Settings size={13} />
                   </button>
                 </div>
-              </Link>
+              </div>
             );
           })}
 
-          <button className={styles.emptyCard} onClick={() => setIsCreateOpen(true)} disabled={isMutationPending}>
-            <div className="w-10 h-10 rounded-full border border-dashed border-border flex items-center justify-center text-muted-foreground">
-              <Icons.Plus size={18} />
-            </div>
-            <div>
-              <div className={styles.emptyCardTitle}>Create Project</div>
-              <p className={styles.emptyCardText}>Add a new environment node</p>
-            </div>
-          </button>
-        </div>
-      </div>
 
-      {archivedProjects.length > 0 && (
-        <div className={styles.archiveSection}>
+          {/* Create Project Card in Grid */}
           <button
             type="button"
-            className={styles.archiveHeader}
-            style={{ background: "none", border: "none", width: "100%", padding: 0 }}
-            onClick={() => setShowArchived(!showArchived)}
-            aria-expanded={showArchived}
+            className={styles.createCard}
+            onClick={() => setIsCreateOpen(true)}
+            disabled={isMutationPending}
           >
-            <span className={styles.archiveToggleText}>
-              {showArchived ? "Hide Archived Projects" : `Show Archived Projects (${archivedProjects.length})`}
-            </span>
-            <span className={styles.actionBtn}>
-              {showArchived ? <Icons.EyeOff size={12} /> : <Icons.Eye size={12} />}
-            </span>
-          </button>
-
-          {showArchived && (
-            <div className={`${styles.projectsGrid} mt-4`}>
-              {archivedProjects.map((project) => {
-                const ProjectIcon = getIconComponent(project.icon);
-                return (
-                  <div key={project.id} className={styles.projectCard} style={{ opacity: 0.7 }}>
-                    <div className={styles.cardHeader}>
-                      <div className={styles.cardTitleSection}>
-                        <div className={styles.cardIcon}>
-                          <ProjectIcon size={18} className="text-muted-foreground" />
-                        </div>
-                        <h3 className={styles.cardTitle}>{project.name}</h3>
-                      </div>
-                    </div>
-
-                    <p className={styles.cardDesc}>
-                      {project.description || "No description provided."}
-                    </p>
-
-                    <div className={styles.cardFooter}>
-                      <div className={styles.cardActions}>
-                        <button
-                          className={styles.actionBtn}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            handleUnarchive(project.id, project.name);
-                          }}
-                          title="Restore Project"
-                          disabled={isMutationPending}
-                        >
-                          <Icons.ArchiveRestore size={12} />
-                        </button>
-                        <button
-                          className={`${styles.actionBtn} ${styles.actionBtnDanger}`}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            handleDelete(project.id, project.name);
-                          }}
-                          title="Delete Project"
-                          disabled={isMutationPending}
-                        >
-                          <Icons.Trash2 size={12} />
-                        </button>
-                      </div>
-                      <span className="text-xs text-muted-foreground font-mono">ARCHIVED</span>
-                    </div>
-                  </div>
-                );
-              })}
+            <div className={styles.createCardBadge}>
+              <Icons.Plus size={20} />
             </div>
-          )}
+            <div className={styles.createCardContent}>
+              <h4 className={styles.createCardTitle}>Create Project</h4>
+              <p className={styles.createCardSub}>Add a new environment workspace</p>
+            </div>
+          </button>
         </div>
       )}
 
@@ -273,7 +430,7 @@ export const DashboardView: React.FC = () => {
         title="Delete Project"
         message="Are you sure you want to permanently delete the project"
         itemName={confirmModal.itemName}
-        warningText="This cannot be undone. All snippets and diagnostics in this project will be permanently deleted."
+        warningText="This cannot be undone. All snippets, credentials, problems, notes, and links in this project will be permanently deleted."
         isLoading={confirmModal.isLoading}
       />
     </div>
diff --git a/frontend/src/components/HackerLogo.module.css b/frontend/src/components/HackerLogo.module.css
index 401c272..c66a747 100644
--- a/frontend/src/components/HackerLogo.module.css
+++ b/frontend/src/components/HackerLogo.module.css
@@ -3,14 +3,18 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
 .organicAura {
   position: absolute;
-  width: 150%;
-  height: 150%;
-  left: -25%;
-  top: -25%;
+  width: 140%;
+  height: 140%;
+  left: -20%;
+  top: -20%;
   border-radius: 50%;
   background: radial-gradient(
     ellipse at center,
@@ -18,10 +22,13 @@
     rgba(16, 185, 129, 0.1) 50%,
     rgba(16, 185, 129, 0) 75%
   );
-  filter: blur(14px);
+  filter: blur(12px);
+  -webkit-filter: blur(12px);
   pointer-events: none;
   z-index: 0;
   animation: organic-pulse 3s ease-in-out infinite alternate;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 
 :global(:root[data-theme="light"]) .organicAura {
@@ -36,11 +43,11 @@
 @keyframes organic-pulse {
   0% {
     opacity: 0.5;
-    transform: scale(0.9) rotate(0deg);
+    transform: scale(0.9) rotate(0deg) translateZ(0);
   }
   100% {
     opacity: 0.95;
-    transform: scale(1.15) rotate(5deg);
+    transform: scale(1.1) rotate(4deg) translateZ(0);
   }
 }
 
@@ -50,12 +57,14 @@
   pointer-events: none;
   overflow: visible;
   z-index: 10;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 
 @keyframes float-particle {
   0% {
     opacity: 0;
-    transform: translateY(8px) scale(0.85);
+    transform: translateY(8px) scale(0.85) translateZ(0);
   }
   25% {
     opacity: 0.9;
@@ -65,7 +74,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateY(-32px) scale(1.1);
+    transform: translateY(-32px) scale(1.1) translateZ(0);
   }
 }
 
@@ -77,14 +86,17 @@
   pointer-events: none;
   user-select: none;
   animation: float-particle 3s ease-in-out infinite;
-  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.8));
+  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.7));
+  -webkit-filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.7));
   will-change: transform, opacity;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 
-
 :global(:root[data-theme="light"]) .cssParticle {
   color: #059669;
-  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.7));
+  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.6));
+  -webkit-filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.6));
 }
 
 .logoSvg {
@@ -92,16 +104,20 @@
   z-index: 1;
   filter: none !important;
   transition: color 0.3s ease;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
 .greenLogo {
   color: #10b981 !important;
-  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.8))
-          drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)) !important;
+  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6)) !important;
+  -webkit-filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6)) !important;
 }
 
 :global(:root[data-theme="light"]) .greenLogo {
   color: #059669 !important;
-  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.7))
-          drop-shadow(0 0 10px rgba(5, 150, 105, 0.4)) !important;
+  filter: drop-shadow(0 0 5px rgba(5, 150, 105, 0.6)) !important;
+  -webkit-filter: drop-shadow(0 0 5px rgba(5, 150, 105, 0.6)) !important;
 }
diff --git a/frontend/src/components/ProjectDetailView.tsx b/frontend/src/components/ProjectDetailView.tsx
index f173182..69d6a81 100644
--- a/frontend/src/components/ProjectDetailView.tsx
+++ b/frontend/src/components/ProjectDetailView.tsx
@@ -13,9 +13,17 @@ import { LinksWorkspace } from "~features/links/components/LinksWorkspace";
 import styles from "../routes/projects.$projectId.module.css";
 import { getIconComponent } from "../utils/icons";
 
+import { getRouteApi } from "@tanstack/react-router";
+import type { ProjectTabType } from "../routes/projects.$projectId";
+
+const routeApi = getRouteApi("/projects/$projectId");
+
 export const ProjectDetailView: React.FC = () => {
   const { projectId } = useParamsHelper();
   const { close: closeSidebar } = useSidebar();
+  const search = routeApi.useSearch();
+  const navigate = routeApi.useNavigate();
+
 
   // Auto-close sidebar when entering a project
   useEffect(() => {
@@ -32,21 +40,17 @@ export const ProjectDetailView: React.FC = () => {
     (p) => p.status === "OPEN" || p.status === "WORKING_ON"
   ).length;
 
-
-
-  // Workspace sub-navigation state
-  const [activeTab, setActiveTab] = useState<
-    "snippets" | "problems" | "credentials" | "notes" | "links"
-  >("snippets");
+  // Workspace sub-navigation state derived directly from URL search params
+  const activeTab = search.tab || "snippets";
 
   const [isTagsManagerOpen, setIsTagsManagerOpen] = useState(false);
 
-  const handleTabChange = (
-    tab: "snippets" | "problems" | "credentials" | "notes" | "links"
-  ) => {
-    setActiveTab(tab);
+  const handleTabChange = (tab: ProjectTabType) => {
+    navigate({ search: { tab }, replace: true });
   };
 
+
+
   const projectIcon = getIconComponent(project?.icon);
 
   return (
@@ -158,11 +162,12 @@ export const ProjectDetailView: React.FC = () => {
           <CredentialsWorkspace
             projectId={projectId}
             isActive={activeTab === "credentials"}
-            onNavigateTab={setActiveTab}
+            onNavigateTab={handleTabChange}
             onOpenManageTagsModal={() => setIsTagsManagerOpen(true)}
           />
         )}
 
+
         {activeTab === "notes" && (
           <NotesWorkspace
             projectId={projectId}
diff --git a/frontend/src/components/TagManagerSection.tsx b/frontend/src/components/TagManagerSection.tsx
index 2a9644d..303a5a5 100644
--- a/frontend/src/components/TagManagerSection.tsx
+++ b/frontend/src/components/TagManagerSection.tsx
@@ -17,6 +17,7 @@ interface TagManagerSectionProps {
   projectId: string;
   onOpenManageTagsModal: () => void;
   title?: string;
+  noBorder?: boolean;
 }
 
 export const TagManagerSection: React.FC<TagManagerSectionProps> = ({
@@ -26,6 +27,7 @@ export const TagManagerSection: React.FC<TagManagerSectionProps> = ({
   projectId,
   onOpenManageTagsModal,
   title = "Associated Tags",
+  noBorder = false,
 }) => {
   const { data: tagsData = [] } = useTagsQuery(projectId);
   const createTagMutation = useCreateTagMutation(projectId);
@@ -108,11 +110,14 @@ export const TagManagerSection: React.FC<TagManagerSectionProps> = ({
   );
 
   return (
-    <div className={styles.tagSection}>
-      <div className={styles.tagHeader}>
-        <Icons.Tag size={12} className="text-muted-foreground" />
-        <span className={styles.tagSectionTitle}>{title}</span>
-      </div>
+    <div className={`${styles.tagSection} ${noBorder ? styles.tagSectionNoBorder : ""}`}>
+      {title && title.trim() !== "" && (
+        <div className={styles.tagHeader}>
+          <Icons.Tag size={12} className="text-muted-foreground" />
+          <span className={styles.tagSectionTitle}>{title}</span>
+        </div>
+      )}
+
       <div className={styles.tagList}>
         {itemTags.map((tag) => (
           <span key={tag.id} className={styles.tagPill}>
@@ -143,7 +148,11 @@ export const TagManagerSection: React.FC<TagManagerSectionProps> = ({
           </button>
 
           {isPopoverOpen && (
-            <div className={styles.tagPopover}>
+            <div
+              className={styles.tagPopover}
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
               <div className={styles.popoverHeader}>
                 <input
                   type="text"
@@ -151,9 +160,11 @@ export const TagManagerSection: React.FC<TagManagerSectionProps> = ({
                   className={styles.tagSearchInput}
                   value={tagSearchQuery}
                   onChange={(e) => setTagSearchQuery(e.target.value)}
+                  onKeyDown={(e) => e.stopPropagation()}
                   autoFocus
                 />
               </div>
+
               <div className={styles.popoverList}>
                 {unassociatedTags.map((t) => (
                   <button
diff --git a/frontend/src/features/credentials/components/CredentialDetailModal.tsx b/frontend/src/features/credentials/components/CredentialDetailModal.tsx
index b23578f..107e500 100644
--- a/frontend/src/features/credentials/components/CredentialDetailModal.tsx
+++ b/frontend/src/features/credentials/components/CredentialDetailModal.tsx
@@ -323,8 +323,50 @@ export const CredentialDetailModal: React.FC<CredentialDetailModalProps> = ({
                       </div>
                     );
                   })()}
+
+
+                {/* Generic fallback for any unlisted or custom keys in payload */}
+                {Object.entries(payload)
+                  .filter(
+                    ([key]) =>
+                      ![
+                        "username",
+                        "user",
+                        "email",
+                        "password",
+                        "pass",
+                        "secret",
+                        "apiKey",
+                        "api_key",
+                        "token",
+                        "key",
+                        "rawTextContent",
+                        "rawText",
+                        "content",
+                        "text",
+                      ].includes(key)
+                  )
+                  .map(([key, val]) => (
+                    <div key={key} className={styles.secretField}>
+                      <div className={styles.labelRow}>
+                        <span className={styles.label}>{key}</span>
+                      </div>
+                      <div className={styles.valueRow}>
+                        <span className={styles.valueText}>{val}</span>
+                        <button
+                          type="button"
+                          className={styles.actionBtn}
+                          onClick={() => copyToClipboard(val, key)}
+                          title={`Copy ${key}`}
+                        >
+                          <Copy size={14} />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
               </div>
 
+
               {/* Metadata Section */}
               <div className={styles.metaGroup}>
                 {cred.relatedUrl && (
diff --git a/frontend/src/features/credentials/components/CredentialsWorkspace.tsx b/frontend/src/features/credentials/components/CredentialsWorkspace.tsx
index d5d8df6..898cd52 100644
--- a/frontend/src/features/credentials/components/CredentialsWorkspace.tsx
+++ b/frontend/src/features/credentials/components/CredentialsWorkspace.tsx
@@ -207,11 +207,13 @@ export const CredentialsWorkspace: React.FC<CredentialsWorkspaceProps> = ({
                     className={styles.credentialCard}
                     onClick={() => setViewingCredentialId(cred.id)}
                     onKeyDown={(e) => {
+                      if (e.target !== e.currentTarget) return;
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         setViewingCredentialId(cred.id);
                       }
                     }}
+
                   >
 
                     <div className={styles.credentialCardHeader}>
@@ -236,9 +238,22 @@ export const CredentialsWorkspace: React.FC<CredentialsWorkspaceProps> = ({
                           </a>
                         )}
                       </div>
+                      <div
+                        className={styles.credentialUnlockHint}
+                        title="Click card to unlock vault payload"
+                      >
+                        <Icons.Lock size={13} />
+                      </div>
                     </div>
 
+                    {cred.notes && (
+                      <p className={styles.credentialNotes}>{cred.notes}</p>
+                    )}
+
+
+
                     <div className={styles.credentialCardFooter}>
+
                       <div onClick={(e) => e.stopPropagation()}>
                         <TagManagerSection
                           itemId={cred.id}
@@ -247,6 +262,7 @@ export const CredentialsWorkspace: React.FC<CredentialsWorkspaceProps> = ({
                           projectId={projectId}
                           onOpenManageTagsModal={onOpenManageTagsModal}
                           title=""
+                          noBorder={true}
                         />
                       </div>
 
diff --git a/frontend/src/features/links/components/LinksWorkspace.tsx b/frontend/src/features/links/components/LinksWorkspace.tsx
index 0e1293a..ccda979 100644
--- a/frontend/src/features/links/components/LinksWorkspace.tsx
+++ b/frontend/src/features/links/components/LinksWorkspace.tsx
@@ -125,8 +125,15 @@ export const LinksWorkspace: React.FC<LinksWorkspaceProps> = ({
               >
                 <div className={styles.snippetItemHeader}>
                   <span className={styles.snippetItemTitle}>{l.title}</span>
-                  <Icons.ExternalLink size={12} className="text-muted-foreground shrink-0" />
+                  <div className="flex items-center gap-1.5 shrink-0 ml-auto pt-0.5">
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {new Date(l.createdAt).toLocaleDateString()}
+                    </span>
+                    <Icons.ExternalLink size={12} className="text-muted-foreground" />
+                  </div>
                 </div>
+
+
                 <span className="text-[10px] text-muted-foreground font-mono truncate max-w-[220px] block">
                   {l.url}
                 </span>
diff --git a/frontend/src/features/notes/components/NotesWorkspace.tsx b/frontend/src/features/notes/components/NotesWorkspace.tsx
index d0b4a41..87755f7 100644
--- a/frontend/src/features/notes/components/NotesWorkspace.tsx
+++ b/frontend/src/features/notes/components/NotesWorkspace.tsx
@@ -6,6 +6,9 @@ import DOMPurify from "dompurify";
 import { ConfirmModal } from "../../../components/ConfirmModal";
 import { TagManagerSection } from "../../../components/TagManagerSection";
 import { formatUpdatedDate } from "../../../utils/dateUtils";
+import { copyToClipboard } from "../../../utils/clipboardUtils";
+
+
 import { NoteForm } from "../components/NoteForm";
 import {
   useNotesQuery,
@@ -282,8 +285,15 @@ export const NotesWorkspace: React.FC<NotesWorkspaceProps> = ({
               >
                 <div className={styles.snippetItemHeader}>
                   <span className={styles.snippetItemTitle}>{n.title}</span>
-                  {n.archived && <span className="text-[10px] text-amber-500 font-mono">ARCHIVED</span>}
+                  <div className="flex items-center gap-1.5 shrink-0 ml-auto pt-0.5">
+                    {n.archived && <span className="text-[10px] text-amber-500 font-mono">ARCHIVED</span>}
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {new Date(n.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
                 </div>
+
+
                 {n.tags && n.tags.length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-1">
                     {n.tags.map((tag) => (
@@ -323,6 +333,29 @@ export const NotesWorkspace: React.FC<NotesWorkspaceProps> = ({
                 </div>
 
                 <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const contentToCopy =
+                        editingNoteContentId === noteDetail.id
+                          ? inlineContent
+                          : noteDetail.content;
+                      if (!contentToCopy) return;
+                      const ok = await copyToClipboard(contentToCopy);
+                      if (ok) {
+                        toast.success("Note content copied to clipboard");
+                      } else {
+                        toast.error("Failed to copy note content");
+                      }
+                    }}
+                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground border border-border px-2.5 py-1.5 rounded bg-card transition-colors cursor-pointer"
+                    title="Copy Note Content"
+                  >
+                    <Icons.Copy size={12} />
+                    <span>Copy</span>
+                  </button>
+
+
                   <button
                     type="button"
                     onClick={() => {
@@ -352,6 +385,7 @@ export const NotesWorkspace: React.FC<NotesWorkspaceProps> = ({
                     <span>Delete</span>
                   </button>
                 </div>
+
               </div>
 
               <div className="p-6 flex flex-col gap-6">
diff --git a/frontend/src/features/snippets/components/SnippetsWorkspace.tsx b/frontend/src/features/snippets/components/SnippetsWorkspace.tsx
index 2178f86..f7b2b2c 100644
--- a/frontend/src/features/snippets/components/SnippetsWorkspace.tsx
+++ b/frontend/src/features/snippets/components/SnippetsWorkspace.tsx
@@ -5,8 +5,10 @@ import Editor from "@monaco-editor/react";
 import { useTheme } from "../../../hooks/useTheme";
 import { ConfirmModal } from "../../../components/ConfirmModal";
 import { TagManagerSection } from "../../../components/TagManagerSection";
-import { formatUpdatedDate } from "../../../utils/dateUtils";
 import { copyToClipboard } from "../../../utils/clipboardUtils";
+import { formatUpdatedDate } from "../../../utils/dateUtils";
+
+
 import { SnippetForm } from "./SnippetForm";
 
 import {
@@ -177,12 +179,12 @@ export const SnippetsWorkspace: React.FC<SnippetsWorkspaceProps> = ({
               >
                 <div className={styles.snippetItemHeader}>
                   <span className={styles.snippetItemTitle}>{s.title}</span>
-                  <span className="text-[10px] text-muted-foreground font-mono">
-                    {formatUpdatedDate(s.updatedAt, s.createdAt)
-                      ? `Upd: ${formatUpdatedDate(s.updatedAt, s.createdAt)}`
-                      : new Date(s.createdAt).toLocaleDateString()}
+                  <span className="text-[10px] text-muted-foreground font-mono shrink-0 ml-auto pt-0.5">
+                    {new Date(s.createdAt).toLocaleDateString()}
                   </span>
                 </div>
+
+
                 {s.description && <p className={styles.snippetItemDesc}>{s.description}</p>}
                 <div className={styles.snippetItemFooter}>
                   <span className={styles.badgeType}>{s.snippetType}</span>
@@ -211,8 +213,17 @@ export const SnippetsWorkspace: React.FC<SnippetsWorkspaceProps> = ({
                   {selectedSnippet.description && (
                     <p className={styles.detailDesc}>{selectedSnippet.description}</p>
                   )}
+                  <div className={styles.problemMetadataRow}>
+                    <span>Created: {new Date(selectedSnippet.createdAt).toLocaleDateString()}</span>
+                    {formatUpdatedDate(selectedSnippet.updatedAt, selectedSnippet.createdAt) && (
+                      <span>
+                        Updated: {formatUpdatedDate(selectedSnippet.updatedAt, selectedSnippet.createdAt)}
+                      </span>
+                    )}
+                  </div>
                 </div>
 
+
                 <div className={styles.detailActions}>
                   <button
                     className={styles.btnIcon}
diff --git a/frontend/src/routes/__root.module.css b/frontend/src/routes/__root.module.css
index 7de7d8c..e935779 100644
--- a/frontend/src/routes/__root.module.css
+++ b/frontend/src/routes/__root.module.css
@@ -102,14 +102,20 @@
   align-items: center;
   color: var(--color-foreground);
   text-decoration: none;
-  transition: opacity 0.15s ease;
+  transition: transform 0.15s ease, filter 0.15s ease;
   pointer-events: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
 .appLogo:hover {
-  opacity: 0.8;
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
 }
 
+
 .themeBtn {
   background: transparent;
   border: 1px solid var(--color-border);
diff --git a/frontend/src/routes/index.module.css b/frontend/src/routes/index.module.css
index efb0bad..78e0711 100644
--- a/frontend/src/routes/index.module.css
+++ b/frontend/src/routes/index.module.css
@@ -1,243 +1,531 @@
 .container {
-  max-width: 1200px;
+  max-width: 1280px;
   margin: 0 auto;
-  padding: 1rem 0;
+  padding: 1.5rem 1rem 3.5rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem;
 }
 
+/* Header Section */
 .header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.headerTitleGroup {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.4rem;
 }
 
-.title {
-  font-size: 1.75rem;
+.headerBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: var(--radius-sm, 6px);
+  background-color: var(--color-secondary);
+  border: 1px solid var(--color-border);
+  color: var(--color-primary);
+  font-size: 0.68rem;
+  font-family: var(--font-mono, monospace);
   font-weight: 700;
-  letter-spacing: -0.03em;
+  letter-spacing: 0.08em;
+  width: fit-content;
+}
+
+.title {
+  font-size: 1.85rem;
+  font-weight: 800;
+  letter-spacing: -0.025em;
   color: var(--color-foreground);
-  font-family: var(--font-mono);
+  font-family: var(--font-mono, monospace);
+  margin: 0;
 }
 
 .subtitle {
   font-size: 0.875rem;
   color: var(--color-muted-foreground);
+  margin: 0;
 }
 
-.statsGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
+.createBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.25rem;
+  border-radius: var(--radius-md, 8px);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: 0.825rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
+  border: 1px solid var(--color-primary);
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.statCard {
+.createBtn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.12);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+/* Control Bar (Search & Filters) - Theme Adaptive & Fully Responsive */
+.controlBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 1rem;
   background-color: var(--color-card);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 1.25rem;
+  border-radius: var(--radius-md, 8px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.searchBox {
+  position: relative;
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  min-width: 260px;
+  flex: 1;
+  max-width: 440px;
 }
 
-.statLabel {
-  font-size: 0.675rem;
-  font-weight: 600;
-  text-transform: uppercase;
+.searchIcon {
+  position: absolute;
+  left: 0.75rem;
   color: var(--color-muted-foreground);
-  letter-spacing: 0.05em;
+  pointer-events: none;
 }
 
-.statValue {
-  font-size: 2rem;
-  font-weight: 700;
-  font-family: var(--font-mono);
+.searchInput {
+  width: 100%;
+  padding: 0.5rem 2rem 0.5rem 2.25rem;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm, 6px);
   color: var(--color-foreground);
+  font-size: 0.8rem;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: all 0.15s ease;
 }
 
-.sectionTitle {
-  font-size: 0.85rem;
-  font-weight: 600;
-  text-transform: uppercase;
+.searchInput::placeholder {
   color: var(--color-muted-foreground);
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0.5rem;
-  margin-bottom: 1rem;
-  font-family: var(--font-mono);
+  opacity: 0.8;
+}
+
+.searchInput:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(195, 100, 50, 0.15);
+}
+
+.clearSearchBtn {
+  position: absolute;
+  right: 0.5rem;
+  background: transparent;
+  border: none;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 4px);
+  transition: color 0.15s ease;
 }
 
+.clearSearchBtn:hover {
+  color: var(--color-foreground);
+}
+
+.filterTabs {
+  display: flex;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm, 6px);
+  overflow: hidden;
+  background-color: var(--color-background);
+}
+
+.filterTab {
+  padding: 0.45rem 0.9rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-muted-foreground);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.filterTab:not(:last-child) {
+  border-right: 1px solid var(--color-border);
+}
+
+.filterTab:hover:not(.filterTabActive) {
+  background-color: var(--color-secondary);
+  color: var(--color-foreground);
+}
+
+.filterTabActive {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+/* Projects Grid */
 .projectsGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1.25rem;
 }
 
 .projectCard {
   background-color: var(--color-card);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md, 10px);
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 180px;
+  padding: 1.25rem;
+  gap: 1rem;
+  cursor: pointer;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+
 .projectCard:hover {
-  transform: translateY(-2px);
-  border-color: var(--color-muted-foreground);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-3px);
+  border-color: var(--color-primary);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }
 
-.cardHeader {
-  padding: 1.25rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+.projectCardArchived {
+  opacity: 0.7;
+}
+
+.cardAccentBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
 }
 
-.cardTitleSection {
+.cardHeader {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
-.cardIcon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius);
+.cardIconBox {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm, 8px);
+  border: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   background-color: var(--color-secondary);
 }
 
+.cardTitleBox {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1;
+  overflow: hidden;
+}
+
 .cardTitle {
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 1.05rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
   color: var(--color-foreground);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.archivedBadge {
+  font-size: 0.62rem;
+  font-family: var(--font-mono, monospace);
+  font-weight: 700;
+  color: var(--color-muted-foreground);
+  letter-spacing: 0.05em;
+}
+
+.cardManageBtn {
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-sm, 6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cardManageBtn:hover {
+  background-color: var(--color-secondary);
+  color: var(--color-foreground);
+  border-color: var(--color-muted-foreground);
 }
 
 .cardDesc {
-  padding: 0 1.25rem;
   font-size: 0.8rem;
   color: var(--color-muted-foreground);
-  flex: 1;
+  line-height: 1.45;
+  margin: 0;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  line-height: 1.4;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+
+.shortcutRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.shortcutTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.55rem;
+  border-radius: var(--radius-sm, 6px);
+  background-color: var(--color-secondary);
+  border: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  font-size: 0.7rem;
+  font-family: var(--font-mono, monospace);
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.shortcutTag:hover {
+  background-color: var(--color-accent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .cardFooter {
-  padding: 0.875rem 1.25rem;
-  border-top: 1px solid var(--color-border);
-  margin-top: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: rgba(0, 0, 0, 0.05);
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+  margin-top: auto;
 }
 
 .cardActions {
   display: flex;
-  gap: 0.375rem;
+  align-items: center;
+  gap: 0.35rem;
 }
 
 .actionBtn {
-  background: transparent;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm, 6px);
+  background-color: transparent;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  width: 26px;
-  height: 26px;
+  color: var(--color-muted-foreground);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: var(--color-muted-foreground);
   transition: all 0.15s ease;
 }
 
-.actionBtn:hover {
+.actionBtn:hover:not(:disabled) {
   background-color: var(--color-secondary);
   color: var(--color-foreground);
   border-color: var(--color-muted-foreground);
 }
 
-.actionBtnDanger:hover {
+.actionBtnDanger:hover:not(:disabled) {
   background-color: var(--color-destructive);
   color: var(--color-destructive-foreground);
   border-color: var(--color-destructive);
 }
 
-.openLink {
-  display: flex;
+.enterLink {
+  display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8rem;
-  font-weight: 500;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
   color: var(--color-primary);
   text-decoration: none;
-  transition: color 0.15s ease;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.15s ease;
 }
 
-.openLink:hover {
+
+.enterLink:hover {
   filter: brightness(1.2);
 }
 
-.emptyCard {
+.enterLink:hover .enterArrow {
+  transform: translateX(4px);
+}
+
+.enterArrow {
+  transition: transform 0.15s ease;
+}
+
+.createCard {
+  background-color: var(--color-card);
   border: 1px dashed var(--color-border);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md, 10px);
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  padding: 2.5rem;
+  gap: 1rem;
   text-align: center;
   cursor: pointer;
-  min-height: 180px;
+  min-height: 200px;
   transition: all 0.2s ease;
 }
 
-.emptyCard:hover {
+.createCard:hover:not(:disabled) {
   border-color: var(--color-primary);
   background-color: var(--color-secondary);
+  transform: translateY(-2px);
+}
+
+.createCardBadge {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px dashed var(--color-border);
+  background-color: var(--color-secondary);
+  color: var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
 }
 
-.emptyCardText {
-  font-size: 0.85rem;
-  color: var(--color-muted-foreground);
+.createCard:hover .createCardBadge {
+  transform: scale(1.1);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
 }
 
-.emptyCardTitle {
-  font-weight: 600;
+.createCardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.createCardTitle {
+  font-size: 0.95rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
   color: var(--color-foreground);
+  margin: 0;
 }
 
-.archiveHeader {
+.createCardSub {
+  font-size: 0.75rem;
+  color: var(--color-muted-foreground);
+  margin: 0;
+}
+
+.emptyState {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  user-select: none;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 4rem 1rem;
+  text-align: center;
+  background-color: var(--color-card);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md, 10px);
 }
 
-.archiveHeader:hover .archiveToggleText {
+.emptyTitle {
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
   color: var(--color-foreground);
+  margin: 0;
 }
 
-.archiveToggleText {
-  font-size: 0.85rem;
-  font-weight: 600;
-  text-transform: uppercase;
+.emptySubtitle {
+  font-size: 0.8rem;
   color: var(--color-muted-foreground);
-  letter-spacing: 0.05em;
-  font-family: var(--font-mono);
-  transition: color 0.15s ease;
+  margin: 0;
+  max-width: 360px;
+}
+
+.primaryBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 1.1rem;
+  border-radius: var(--radius-md, 6px);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: 0.8rem;
+  font-weight: 700;
+  font-family: var(--font-mono, monospace);
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-top: 0.5rem;
+}
+
+.primaryBtn:hover {
+  filter: brightness(1.1);
+}
+
+.secondaryBtn {
+  padding: 0.55rem 1.1rem;
+  border-radius: var(--radius-md, 6px);
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-foreground);
+  font-size: 0.8rem;
+  font-weight: 600;
+  font-family: var(--font-mono, monospace);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-top: 0.5rem;
+}
+
+.secondaryBtn:hover {
+  background-color: var(--color-secondary);
 }
diff --git a/frontend/src/routes/projects.$projectId.module.css b/frontend/src/routes/projects.$projectId.module.css
index e73b9e5..2bf65c5 100644
--- a/frontend/src/routes/projects.$projectId.module.css
+++ b/frontend/src/routes/projects.$projectId.module.css
@@ -115,11 +115,23 @@
   border-right: 1px solid var(--color-border);
 }
 
+.filterTab:hover:not(.filterTabActive) {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: var(--color-foreground);
+}
+
+
 .filterTabActive {
   background-color: var(--color-secondary);
   color: var(--color-foreground);
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+}
+
+.filterTabActive:hover {
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
+
 .snippetList {
   flex: 1;
   overflow-y: auto;
@@ -155,14 +167,16 @@
 
 .snippetItemHeader {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 0.5rem;
 }
 
 .snippetItemTitle {
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--color-foreground);
+  word-break: break-word;
 }
 
 .snippetItemDesc {
@@ -878,7 +892,14 @@
   border-top: 1px solid var(--color-border);
 }
 
+.tagSectionNoBorder {
+  margin-top: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
 .tagHeader {
+
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -1073,11 +1094,10 @@
   background-color: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
-  padding: 1.25rem;
+  padding: 1.15rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 1rem;
+  gap: 0.75rem;
   position: relative;
   z-index: 1;
   cursor: pointer;
@@ -1085,9 +1105,9 @@
 }
 
 .credentialCard:hover {
-  border-color: var(--color-muted-foreground);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  transform: translateY(-3px);
+  border-color: var(--color-primary);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(99, 102, 241, 0.12);
+  transform: translateY(-2px);
   z-index: 10;
 }
 
@@ -1143,15 +1163,53 @@
   text-decoration: underline;
 }
 
+.credentialUnlockHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.credentialCard:hover .credentialUnlockHint {
+  color: var(--color-primary);
+  border-color: rgba(99, 102, 241, 0.4);
+  background: rgba(99, 102, 241, 0.12);
+  box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
+}
+
+.credentialNotes {
+  font-size: 0.8rem;
+  color: var(--color-muted-foreground);
+  line-height: 1.45;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+
 .credentialCardFooter {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  margin-top: auto;
   padding-top: 0.75rem;
   border-top: 1px solid var(--color-border);
 }
 
+
+
 .credentialActions {
   display: flex;
   align-items: center;
diff --git a/frontend/src/routes/projects.$projectId.tsx b/frontend/src/routes/projects.$projectId.tsx
index 344e361..96f73bf 100644
--- a/frontend/src/routes/projects.$projectId.tsx
+++ b/frontend/src/routes/projects.$projectId.tsx
@@ -1,6 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { ProjectDetailRouteComponent } from "../components/ProjectDetailView";
 
+export type ProjectTabType = "snippets" | "problems" | "credentials" | "notes" | "links";
+
+interface ProjectSearch {
+  tab?: ProjectTabType;
+}
+
 export const Route = createFileRoute("/projects/$projectId")({
+  validateSearch: (search: Record<string, unknown>): ProjectSearch => {
+    const validTabs: ProjectTabType[] = ["snippets", "problems", "credentials", "notes", "links"];
+    const tab = search.tab as ProjectTabType;
+    return {
+      tab: validTabs.includes(tab) ? tab : "snippets",
+    };
+  },
   component: ProjectDetailRouteComponent,
 });
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index 61d780b..68d6dff 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -333,12 +333,14 @@ export interface CredentialSummaryResponse {
   projectId: string;
   title: string;
   secretType: CredentialSecretType;
+  notes?: string;
   relatedUrl?: string;
   tags: TagSummaryResponse[];
   createdAt: string;
   updatedAt: string;
 }
 
+
 export interface CredentialViewResponse {
   id: string;
   projectId: string;