diff --git a/src/app/(app)/[repo]/page.tsx b/src/app/(app)/[repo]/page.tsx
deleted file mode 100644
index 0b474d9..0000000
--- a/src/app/(app)/[repo]/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import ClientPage from './client-page';
-
-interface Props {
-  params: Promise<{ repo: string }>;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { repo: rawRepo } = await params;
-  const repo = decodeURIComponent(rawRepo);
-
-  return {
-    title: repo,
-  };
-}
-
-export default async function Page({ params }: Props) {
-  const { repo: rawRepo } = await params;
-  const repo = decodeURIComponent(rawRepo);
-
-  // check if it has prefix '@'
-  // otherwise call notFount
-  if (!repo.startsWith('@')) {
-    notFound();
-  }
-
-  // render client-side page
-  return <ClientPage repo={repo.slice(1)} />; // without "@" prefix
-}
diff --git a/src/app/(app)/new/_components/repo-list.tsx b/src/app/(app)/new/_components/repo-list.tsx
index 3f7413c..2a65505 100644
--- a/src/app/(app)/new/_components/repo-list.tsx
+++ b/src/app/(app)/new/_components/repo-list.tsx
@@ -73,8 +73,8 @@ export default function RepoList() {
             <span className="text-muted-foreground text-sm">
               {datetime(repo.updated_at).fromNow()}
             </span>
-            <Button asChild className="ml-auto">
-              <Link href={`/@${repo.name}`}>Import</Link>
+            <Button className="ml-auto" asChild>
+              <Link href={`/~/${repo.name}`}>Import</Link>
             </Button>
           </div>
         ))}
diff --git a/src/app/(app)/[repo]/_components/content-item.tsx b/src/app/(app)/~/[repo]/_components/content-item.tsx
similarity index 100%
rename from src/app/(app)/[repo]/_components/content-item.tsx
rename to src/app/(app)/~/[repo]/_components/content-item.tsx
diff --git a/src/app/(app)/[repo]/_components/dialogs/create-config-alert-dialog.tsx b/src/app/(app)/~/[repo]/_components/dialogs/create-config-alert-dialog.tsx
similarity index 98%
rename from src/app/(app)/[repo]/_components/dialogs/create-config-alert-dialog.tsx
rename to src/app/(app)/~/[repo]/_components/dialogs/create-config-alert-dialog.tsx
index 52cd62d..075da7f 100644
--- a/src/app/(app)/[repo]/_components/dialogs/create-config-alert-dialog.tsx
+++ b/src/app/(app)/~/[repo]/_components/dialogs/create-config-alert-dialog.tsx
@@ -18,7 +18,7 @@ import { toast } from 'sonner';
 
 interface Props {
   open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setOpen: (val: boolean) => void;
   repo: string;
 }
 
diff --git a/src/app/(app)/[repo]/_components/recent-actions.tsx b/src/app/(app)/~/[repo]/_components/recent-actions.tsx
similarity index 100%
rename from src/app/(app)/[repo]/_components/recent-actions.tsx
rename to src/app/(app)/~/[repo]/_components/recent-actions.tsx
diff --git a/src/app/(app)/[repo]/_components/contents-skeleton.tsx b/src/app/(app)/~/[repo]/_components/repo-contents-skeleton.tsx
similarity index 87%
rename from src/app/(app)/[repo]/_components/contents-skeleton.tsx
rename to src/app/(app)/~/[repo]/_components/repo-contents-skeleton.tsx
index b22b8d8..c824c33 100644
--- a/src/app/(app)/[repo]/_components/contents-skeleton.tsx
+++ b/src/app/(app)/~/[repo]/_components/repo-contents-skeleton.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/skeleton';
 
-export default function ContentsSkeleton() {
+export default function RepoContentsSkeleton() {
   return Array.from({ length: 1 }).map((_, idx) => (
     <div key={idx} className="grid grid-cols-5 gap-2 p-3">
       <Skeleton className="col-span-2 h-5 w-20" />
diff --git a/src/app/(app)/[repo]/_components/repo-contents.tsx b/src/app/(app)/~/[repo]/_components/repo-contents.tsx
similarity index 95%
rename from src/app/(app)/[repo]/_components/repo-contents.tsx
rename to src/app/(app)/~/[repo]/_components/repo-contents.tsx
index 03e13e6..2565249 100644
--- a/src/app/(app)/[repo]/_components/repo-contents.tsx
+++ b/src/app/(app)/~/[repo]/_components/repo-contents.tsx
@@ -9,11 +9,11 @@ import { Folder, Plus, Search } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
 import ContentItem from './content-item';
-import ContentsSkeleton from './contents-skeleton';
+import RepoContentsSkeleton from './repo-contents-skeleton';
 
 interface Props {
   repo: string;
-  setIsConfigDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsConfigDialogOpen: (val: boolean) => void;
 }
 
 export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
@@ -65,7 +65,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
   return (
     <div className="col-span-2 flex flex-col gap-2">
       <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
+        <div className="flex items-end gap-2">
           <Avatar className="size-5">
             <AvatarImage src={session?.user?.image ?? undefined} />
             <AvatarFallback>{session?.user?.name?.[0]}</AvatarFallback>
@@ -75,7 +75,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
             className="text-sm font-bold hover:underline"
             onClick={() => navigateBackTo('<root>')}
           >
-            @{repo}
+            {repo}
           </button>
           {breadcrumbs.length > 0 && <span className="text-muted-foreground/50">/</span>}
           {breadcrumbs.map((crumb, idx) => (
@@ -118,7 +118,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
           </button>
         )}
         {isLoading || status === 'loading' || !contents ? (
-          <ContentsSkeleton />
+          <RepoContentsSkeleton />
         ) : (
           contents.map((content) => (
             <ContentItem
diff --git a/src/app/(app)/[repo]/client-page.tsx b/src/app/(app)/~/[repo]/client-page.tsx
similarity index 100%
rename from src/app/(app)/[repo]/client-page.tsx
rename to src/app/(app)/~/[repo]/client-page.tsx
diff --git a/src/app/(app)/~/[repo]/page.tsx b/src/app/(app)/~/[repo]/page.tsx
new file mode 100644
index 0000000..9a655af
--- /dev/null
+++ b/src/app/(app)/~/[repo]/page.tsx
@@ -0,0 +1,17 @@
+import { Metadata } from 'next';
+import ClientPage from './client-page';
+
+interface Props {
+  params: Promise<{ repo: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { repo } = await params;
+  return { title: `${repo}: GitLoom` };
+}
+
+export default async function Page({ params }: Props) {
+  const { repo } = await params;
+  // render client-side page
+  return <ClientPage repo={repo} />;
+}