diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index f79646a..664dccc 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -78,18 +78,27 @@ function Index() {
             </div>
             {/* main body */}
             <div className="w-full h-full flex items-start justify-between pt-2 gap-2">
-                {/* issues list (table) */}
-                <IssuesTable
-                    issues={issues}
-                    columns={{ description: false }}
-                    issueSelectAction={setSelectedIssue}
-                    className="border w-full flex-shrink"
-                />
-                {/* issue detail pane */}
-                {selectedIssue && (
-                    <div className="border w-2xl">
-                        <IssueDetailPane issue={selectedIssue} close={() => setSelectedIssue(null)} />
-                    </div>
+                {selectedProject && issues.length > 0 && (
+                    <>
+                        {/* issues list (table) */}
+                        <IssuesTable
+                            project={selectedProject}
+                            issues={issues}
+                            columns={{ description: false }}
+                            issueSelectAction={setSelectedIssue}
+                            className="border w-full flex-shrink"
+                        />
+                        {/* issue detail pane */}
+                        {selectedIssue && (
+                            <div className="border w-2xl">
+                                <IssueDetailPane
+                                    project={selectedProject}
+                                    issue={selectedIssue}
+                                    close={() => setSelectedIssue(null)}
+                                />
+                            </div>
+                        )}
+                    </>
                 )}
             </div>
         </main>
diff --git a/packages/frontend/src/components/issue-detail-pane.tsx b/packages/frontend/src/components/issue-detail-pane.tsx
index 363d505..ccdc147 100644
--- a/packages/frontend/src/components/issue-detail-pane.tsx
+++ b/packages/frontend/src/components/issue-detail-pane.tsx
@@ -1,13 +1,28 @@
-import type { IssueRecord } from "@issue/shared";
+import type { IssueRecord, ProjectRecord } from "@issue/shared";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { issueID } from "@/lib/utils";
 
-export function IssueDetailPane({ issue, close }: { issue: IssueRecord; close: () => void }) {
+export function IssueDetailPane({
+    project,
+    issue,
+    close,
+}: {
+    project: ProjectRecord;
+    issue: IssueRecord;
+    close: () => void;
+}) {
     return (
-        <div className="flex flex-col items-end">
-            <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
-                <X />
-            </Button>
+        <div className="flex flex-col">
+            <div className="flex flex-row items-center justify-end border-b">
+                <span className="w-full px-0.5">
+                    <p className="text-sm w-fit px-0.75">{issueID(project.blob, issue.number)}</p>
+                </span>
+
+                <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
+                    <X />
+                </Button>
+            </div>
 
             <div className="flex flex-col w-full p-2 gap-2">
                 <h1 className="text-md">{issue.title}</h1>
diff --git a/packages/frontend/src/components/issues-table.tsx b/packages/frontend/src/components/issues-table.tsx
index 738def6..3bef634 100644
--- a/packages/frontend/src/components/issues-table.tsx
+++ b/packages/frontend/src/components/issues-table.tsx
@@ -1,25 +1,26 @@
-import type { IssueRecord } from "@issue/shared";
+import type { IssueRecord, ProjectRecord } from "@issue/shared";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { cn } from "@/lib/utils";
+import { cn, issueID } from "@/lib/utils";
 
 export function IssuesTable({
+    project,
     issues,
     columns = {},
     issueSelectAction,
     className,
 }: {
+    project: ProjectRecord;
     issues: IssueRecord[];
     columns?: { id?: boolean; title?: boolean; description?: boolean; assignee?: boolean };
     issueSelectAction?: (issue: IssueRecord) => void;
     className: string;
 }) {
-    if (issues.length === 0) return;
     return (
         <Table className={cn(className)}>
             <TableHeader>
                 <TableRow hoverEffect={false}>
                     {(columns.id == null || columns.id === true) && (
-                        <TableHead className="w-[1px] border-r">ID</TableHead>
+                        <TableHead className="text-right w-[1px] border-r">ID</TableHead>
                     )}
                     {(columns.title == null || columns.title === true) && <TableHead>Title</TableHead>}
                     {(columns.description == null || columns.description === true) && (
@@ -39,8 +40,8 @@ export function IssuesTable({
                         }}
                     >
                         {(columns.id == null || columns.id === true) && (
-                            <TableCell className="font-medium border-r">
-                                {String(issue.id).padStart(3, "0")}
+                            <TableCell className="font-medium border-r text-right">
+                                {issue.number.toString().padStart(3, "0")}
                             </TableCell>
                         )}
                         {(columns.title == null || columns.title === true) && (