diff --git a/fileglancer/alembic/versions/2d1f0e6b8c91_add_neuroglancer_states_table.py b/fileglancer/alembic/versions/2d1f0e6b8c91_add_neuroglancer_states_table.py
new file mode 100644
index 00000000..2b4bd558
--- /dev/null
+++ b/fileglancer/alembic/versions/2d1f0e6b8c91_add_neuroglancer_states_table.py
@@ -0,0 +1,42 @@
+"""add neuroglancer_states table
+
+Revision ID: 2d1f0e6b8c91
+Revises: 9812335c52b6
+Create Date: 2025-10-22 00:00:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '2d1f0e6b8c91'
+down_revision = '9812335c52b6'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        'neuroglancer_states',
+        sa.Column('id', sa.Integer(), primary_key=True, autoincrement=True),
+        sa.Column('short_key', sa.String(), nullable=False),
+        sa.Column('short_name', sa.String(), nullable=True),
+        sa.Column('username', sa.String(), nullable=False),
+        sa.Column('url_base', sa.String(), nullable=False),
+        sa.Column('state', sa.JSON(), nullable=False),
+        sa.Column('created_at', sa.DateTime(), nullable=False),
+        sa.Column('updated_at', sa.DateTime(), nullable=False),
+        sa.UniqueConstraint('short_key', name='uq_neuroglancer_states_short_key')
+    )
+    op.create_index(
+        'ix_neuroglancer_states_short_key',
+        'neuroglancer_states',
+        ['short_key'],
+        unique=True
+    )
+
+
+def downgrade() -> None:
+    op.drop_index('ix_neuroglancer_states_short_key', table_name='neuroglancer_states')
+    op.drop_table('neuroglancer_states')
diff --git a/fileglancer/app.py b/fileglancer/app.py
index 98321fa5..b346b005 100644
--- a/fileglancer/app.py
+++ b/fileglancer/app.py
@@ -149,6 +149,38 @@ def _validate_filename(name: str) -> None:
         raise HTTPException(status_code=400, detail="File or directory name cannot have leading or trailing whitespace")
 
 
+def _parse_neuroglancer_url(url: str) -> Tuple[str, Dict]:
+    """
+    Parse a Neuroglancer URL and return its base URL and decoded JSON state.
+    """
+    if not url or "#!" not in url:
+        raise HTTPException(status_code=400, detail="Neuroglancer URL must include a '#!' state fragment")
+
+    url_base, encoded_state = url.split("#!", 1)
+    if not url_base.startswith(("http://", "https://")):
+        raise HTTPException(status_code=400, detail="Neuroglancer URL must start with http or https")
+
+    decoded_state = unquote(encoded_state)
+    if decoded_state.startswith(("http://", "https://")):
+        raise HTTPException(status_code=400, detail="Shortened Neuroglancer URLs are not supported; provide a full state URL")
+
+    try:
+        state = json.loads(decoded_state)
+    except json.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Neuroglancer state must be valid JSON")
+
+    if not isinstance(state, dict):
+        raise HTTPException(status_code=400, detail="Neuroglancer state must be a JSON object")
+
+    return url_base, state
+
+
+def _validate_short_name(short_name: str) -> None:
+    """Validate short_name: only letters, numbers, hyphens, and underscores allowed."""
+    if not all(ch.isalnum() or ch in ("-", "_") for ch in short_name):
+        raise HTTPException(status_code=400, detail="short_name can only contain letters, numbers, hyphens, and underscores")
+
+
 def create_app(settings):
 
     # Initialize OAuth client for OKTA
@@ -664,6 +696,119 @@ async def delete_preference(key: str, username: str = Depends(get_current_user))
             return {"message": f"Preference {key} deleted for user {username}"}
 
 
+    @app.post("/api/neuroglancer/nglinks", response_model=NeuroglancerShortenResponse,
+              description="Store a Neuroglancer state and return a shortened link")
+    async def shorten_neuroglancer_state(request: Request,
+                                         payload: NeuroglancerShortenRequest,
+                                         username: str = Depends(get_current_user)):
+        short_name = payload.short_name.strip() if payload.short_name else None
+        if short_name:
+            _validate_short_name(short_name)
+        title = payload.title.strip() if payload.title else None
+
+        if payload.url and payload.state:
+            raise HTTPException(status_code=400, detail="Provide either url or state, not both")
+
+        if payload.url:
+            url_base, state = _parse_neuroglancer_url(payload.url.strip())
+        elif payload.state:
+            if not payload.url_base:
+                raise HTTPException(status_code=400, detail="url_base is required when providing state directly")
+            if not isinstance(payload.state, dict):
+                raise HTTPException(status_code=400, detail="state must be a JSON object")
+            url_base = payload.url_base.strip()
+            if not url_base.startswith(("http://", "https://")):
+                raise HTTPException(status_code=400, detail="url_base must start with http or https")
+            state = payload.state
+        else:
+            raise HTTPException(status_code=400, detail="Either url or state must be provided")
+
+        # Add title to state if provided
+        if title:
+            state = {**state, "title": title}
+
+        with db.get_db_session(settings.db_url) as session:
+            try:
+                entry = db.create_neuroglancer_state(
+                    session,
+                    username,
+                    url_base,
+                    state,
+                    short_name=short_name
+                )
+                created_short_key = entry.short_key
+                created_short_name = entry.short_name
+            except ValueError as exc:
+                raise HTTPException(status_code=409, detail=str(exc))
+
+        # Generate URL based on whether short_name is provided
+        if created_short_name:
+            state_url = str(request.url_for("get_neuroglancer_state", short_key=created_short_key, short_name=created_short_name))
+        else:
+            state_url = str(request.url_for("get_neuroglancer_state_simple", short_key=created_short_key))
+        neuroglancer_url = f"{url_base}#!{state_url}"
+        return NeuroglancerShortenResponse(
+            short_key=created_short_key,
+            short_name=created_short_name,
+            title=title,
+            state_url=state_url,
+            neuroglancer_url=neuroglancer_url
+        )
+
+
+    @app.put("/api/neuroglancer/nglinks/{short_key}", response_model=NeuroglancerShortenResponse,
+             description="Update a stored Neuroglancer state")
+    async def update_neuroglancer_short_link(request: Request,
+                                             short_key: str,
+                                             payload: NeuroglancerUpdateRequest,
+                                             username: str = Depends(get_current_user)):
+        title = payload.title.strip() if payload.title else None
+        url_base, state = _parse_neuroglancer_url(payload.url.strip())
+
+        # Add title to state if provided
+        if title:
+            state = {**state, "title": title}
+
+        with db.get_db_session(settings.db_url) as session:
+            entry = db.update_neuroglancer_state(
+                session,
+                username,
+                short_key,
+                url_base,
+                state
+            )
+            if not entry:
+                raise HTTPException(status_code=404, detail="Neuroglancer state not found")
+            # Extract values before session closes
+            updated_short_key = entry.short_key
+            updated_short_name = entry.short_name
+
+        # Generate URL based on whether short_name is present
+        if updated_short_name:
+            state_url = str(request.url_for("get_neuroglancer_state", short_key=updated_short_key, short_name=updated_short_name))
+        else:
+            state_url = str(request.url_for("get_neuroglancer_state_simple", short_key=updated_short_key))
+        neuroglancer_url = f"{url_base}#!{state_url}"
+        return NeuroglancerShortenResponse(
+            short_key=updated_short_key,
+            short_name=updated_short_name,
+            title=title,
+            state_url=state_url,
+            neuroglancer_url=neuroglancer_url
+        )
+
+
+    @app.delete("/api/neuroglancer/nglinks/{short_key}",
+                description="Delete a stored Neuroglancer state")
+    async def delete_neuroglancer_short_link(short_key: str = Path(..., description="The short key of the Neuroglancer state"),
+                                             username: str = Depends(get_current_user)):
+        with db.get_db_session(settings.db_url) as session:
+            deleted = db.delete_neuroglancer_state(session, username, short_key)
+            if deleted == 0:
+                raise HTTPException(status_code=404, detail="Neuroglancer link not found")
+            return {"message": f"Neuroglancer link {short_key} deleted"}
+
+
     @app.post("/api/proxied-path", response_model=ProxiedPath,
               description="Create a new proxied path")
     async def create_proxied_path(fsp_name: str = Query(..., description="The name of the file share path that this proxied path is associated with"),
@@ -734,6 +879,59 @@ async def delete_proxied_path(sharing_key: str = Path(..., description="The shar
             return {"message": f"Proxied path {sharing_key} deleted for user {username}"}
 
 
+    @app.get("/ng/{short_key}", name="get_neuroglancer_state_simple", include_in_schema=False)
+    async def get_neuroglancer_state_simple(short_key: str = Path(..., description="Short key for a stored Neuroglancer state")):
+        with db.get_db_session(settings.db_url) as session:
+            entry = db.get_neuroglancer_state(session, short_key)
+            if not entry:
+                raise HTTPException(status_code=404, detail="Neuroglancer state not found")
+            # If this entry has a short_name, require it in the URL
+            if entry.short_name:
+                raise HTTPException(status_code=404, detail="Neuroglancer state not found")
+            return JSONResponse(content=entry.state, headers={"Cache-Control": "no-store"})
+
+    @app.get("/ng/{short_key}/{short_name}", name="get_neuroglancer_state", include_in_schema=False)
+    async def get_neuroglancer_state(short_key: str = Path(..., description="Short key for a stored Neuroglancer state"),
+                                     short_name: str = Path(..., description="Short name for a stored Neuroglancer state")):
+        with db.get_db_session(settings.db_url) as session:
+            entry = db.get_neuroglancer_state(session, short_key)
+            if not entry:
+                raise HTTPException(status_code=404, detail="Neuroglancer state not found")
+            # Validate short_name matches
+            if entry.short_name != short_name:
+                raise HTTPException(status_code=404, detail="Neuroglancer state not found")
+            return JSONResponse(content=entry.state, headers={"Cache-Control": "no-store"})
+
+
+    @app.get("/api/neuroglancer/nglinks", response_model=NeuroglancerShortLinkResponse,
+             description="List stored Neuroglancer short links for the current user")
+    async def get_neuroglancer_short_links(request: Request,
+                                           username: str = Depends(get_current_user)):
+        links = []
+        with db.get_db_session(settings.db_url) as session:
+            entries = db.get_neuroglancer_states(session, username)
+            for entry in entries:
+                # Generate URL based on whether short_name is provided
+                if entry.short_name:
+                    state_url = str(request.url_for("get_neuroglancer_state", short_key=entry.short_key, short_name=entry.short_name))
+                else:
+                    state_url = str(request.url_for("get_neuroglancer_state_simple", short_key=entry.short_key))
+                neuroglancer_url = f"{entry.url_base}#!{state_url}"
+                # Read title from the stored state
+                title = entry.state.get("title") if isinstance(entry.state, dict) else None
+                links.append(NeuroglancerShortLink(
+                    short_key=entry.short_key,
+                    short_name=entry.short_name,
+                    title=title,
+                    created_at=entry.created_at,
+                    updated_at=entry.updated_at,
+                    state_url=state_url,
+                    neuroglancer_url=neuroglancer_url
+                ))
+
+        return NeuroglancerShortLinkResponse(links=links)
+
+
     @app.get("/files/{sharing_key}/{sharing_name}")
     @app.get("/files/{sharing_key}/{sharing_name}/{path:path}")
     async def target_dispatcher(request: Request,
diff --git a/fileglancer/database.py b/fileglancer/database.py
index 735b3bc0..21616aac 100644
--- a/fileglancer/database.py
+++ b/fileglancer/database.py
@@ -18,6 +18,7 @@
 
 # Constants
 SHARING_KEY_LENGTH = 12
+NEUROGLANCER_SHORT_KEY_LENGTH = 12
 
 # Global flag to track if migrations have been run
 _migrations_run = False
@@ -102,6 +103,20 @@ class ProxiedPathDB(Base):
     )
 
 
+class NeuroglancerStateDB(Base):
+    """Database model for storing Neuroglancer states"""
+    __tablename__ = 'neuroglancer_states'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    short_key = Column(String, nullable=False, unique=True, index=True)
+    short_name = Column(String, nullable=True)
+    username = Column(String, nullable=False)
+    url_base = Column(String, nullable=False)
+    state = Column(JSON, nullable=False)
+    created_at = Column(DateTime, nullable=False, default=lambda: datetime.now(UTC))
+    updated_at = Column(DateTime, nullable=False, default=lambda: datetime.now(UTC), onupdate=lambda: datetime.now(UTC))
+
+
 class TicketDB(Base):
     """Database model for storing proxied paths"""
     __tablename__ = 'tickets'
@@ -614,6 +629,86 @@ def delete_proxied_path(session: Session, username: str, sharing_key: str):
     _invalidate_sharing_key_cache(sharing_key)
 
 
+def _generate_unique_neuroglancer_key(session: Session) -> str:
+    """Generate a unique short key for Neuroglancer states."""
+    for _ in range(10):
+        candidate = secrets.token_urlsafe(NEUROGLANCER_SHORT_KEY_LENGTH)
+        exists = session.query(NeuroglancerStateDB).filter_by(short_key=candidate).first()
+        if not exists:
+            return candidate
+    raise RuntimeError("Failed to generate a unique Neuroglancer short key")
+
+
+def create_neuroglancer_state(
+    session: Session,
+    username: str,
+    url_base: str,
+    state: Dict,
+    short_name: Optional[str] = None
+) -> NeuroglancerStateDB:
+    """Create a new Neuroglancer state entry and return it."""
+    short_key = _generate_unique_neuroglancer_key(session)
+    now = datetime.now(UTC)
+    entry = NeuroglancerStateDB(
+        short_key=short_key,
+        short_name=short_name,
+        username=username,
+        url_base=url_base,
+        state=state,
+        created_at=now,
+        updated_at=now
+    )
+    session.add(entry)
+    session.commit()
+    return entry
+
+
+def get_neuroglancer_state(session: Session, short_key: str) -> Optional[NeuroglancerStateDB]:
+    """Get a Neuroglancer state by short key."""
+    return session.query(NeuroglancerStateDB).filter_by(short_key=short_key).first()
+
+
+def get_neuroglancer_states(session: Session, username: str) -> List[NeuroglancerStateDB]:
+    """Get all Neuroglancer states for a user, newest first."""
+    return (
+        session.query(NeuroglancerStateDB)
+        .filter_by(username=username)
+        .order_by(NeuroglancerStateDB.created_at.desc())
+        .all()
+    )
+
+
+def update_neuroglancer_state(
+    session: Session,
+    username: str,
+    short_key: str,
+    url_base: str,
+    state: Dict
+) -> Optional[NeuroglancerStateDB]:
+    """Update a Neuroglancer state entry. Returns the updated entry or None if not found."""
+    entry = session.query(NeuroglancerStateDB).filter_by(
+        short_key=short_key,
+        username=username
+    ).first()
+    if not entry:
+        return None
+    entry.url_base = url_base
+    entry.state = state
+    entry.updated_at = datetime.now(UTC)
+    session.commit()
+    return entry
+
+
+def delete_neuroglancer_state(session: Session, username: str, short_key: str) -> int:
+    """Delete a Neuroglancer state entry. Returns the number of deleted rows."""
+    deleted = session.query(NeuroglancerStateDB).filter_by(
+        short_key=short_key,
+        username=username
+    ).delete()
+    session.commit()
+    return deleted
+
+
 def get_tickets(session: Session, username: str, fsp_name: str = None, path: str = None) -> List[TicketDB]:
     """Get tickets for a user, optionally filtered by fsp_name and path"""
     logger.info(f"Getting tickets for {username} with fsp_name={fsp_name} and path={path}")
diff --git a/fileglancer/filestore.py b/fileglancer/filestore.py
index 90ca4a48..9618654a 100644
--- a/fileglancer/filestore.py
+++ b/fileglancer/filestore.py
@@ -195,8 +195,13 @@ def _get_file_info_from_path(self, full_path: str, current_user: str = None) ->
         Get the FileInfo for a file or directory at the given path.
         """
         stat_result = os.stat(full_path)
-        # Regenerate the relative path to ensure it is not empty (None and empty string are converted to '.' here)
-        rel_path = os.path.relpath(full_path, self.root_path)
+        # Use real paths to avoid /var vs /private/var mismatches on macOS.
+        root_real = os.path.realpath(self.root_path)
+        full_real = os.path.realpath(full_path)
+        if full_real == root_real:
+            rel_path = '.'
+        else:
+            rel_path = os.path.relpath(full_real, root_real)
         return FileInfo.from_stat(rel_path, full_path, stat_result, current_user)
 
 
diff --git a/fileglancer/model.py b/fileglancer/model.py
index 2156675a..ffe5330e 100644
--- a/fileglancer/model.py
+++ b/fileglancer/model.py
@@ -214,3 +214,92 @@ class NotificationResponse(BaseModel):
     notifications: List[Notification] = Field(
         description="A list of active notifications"
     )
+
+
+class NeuroglancerShortenRequest(BaseModel):
+    """Request payload for creating a shortened Neuroglancer state"""
+    short_name: Optional[str] = Field(
+        description="Optional human-friendly name for the short link",
+        default=None
+    )
+    title: Optional[str] = Field(
+        description="Optional title that appears in the Neuroglancer tab name",
+        default=None
+    )
+    url: Optional[str] = Field(
+        description="Neuroglancer URL containing the encoded JSON state after #!",
+        default=None
+    )
+    state: Optional[Dict] = Field(
+        description="Neuroglancer state as a JSON object",
+        default=None
+    )
+    url_base: Optional[str] = Field(
+        description="Base Neuroglancer URL, required when providing state directly",
+        default=None
+    )
+
+
+class NeuroglancerUpdateRequest(BaseModel):
+    """Request payload for updating a Neuroglancer state"""
+    url: str = Field(
+        description="Neuroglancer URL containing the encoded JSON state after #!"
+    )
+    title: Optional[str] = Field(
+        description="Optional title that appears in the Neuroglancer tab name",
+        default=None
+    )
+
+
+class NeuroglancerShortenResponse(BaseModel):
+    """Response payload for shortened Neuroglancer state"""
+    short_key: str = Field(
+        description="Short key for retrieving the stored state"
+    )
+    short_name: Optional[str] = Field(
+        description="Optional human-friendly name for the short link",
+        default=None
+    )
+    title: Optional[str] = Field(
+        description="Optional title that appears in the Neuroglancer tab name",
+        default=None
+    )
+    state_url: str = Field(
+        description="Absolute URL to the stored state JSON"
+    )
+    neuroglancer_url: str = Field(
+        description="Neuroglancer URL that references the stored state"
+    )
+
+
+class NeuroglancerShortLink(BaseModel):
+    """Stored Neuroglancer short link"""
+    short_key: str = Field(
+        description="Short key for retrieving the stored state"
+    )
+    short_name: Optional[str] = Field(
+        description="Optional human-friendly name for the short link",
+        default=None
+    )
+    title: Optional[str] = Field(
+        description="Optional title that appears in the Neuroglancer tab name",
+        default=None
+    )
+    created_at: datetime = Field(
+        description="When this short link was created"
+    )
+    updated_at: datetime = Field(
+        description="When this short link was last updated"
+    )
+    state_url: str = Field(
+        description="Absolute URL to the stored state JSON"
+    )
+    neuroglancer_url: str = Field(
+        description="Neuroglancer URL that references the stored state"
+    )
+
+
+class NeuroglancerShortLinkResponse(BaseModel):
+    links: List[NeuroglancerShortLink] = Field(
+        description="A list of stored Neuroglancer short links"
+    )
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e62dafa7..86a167a8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,8 +13,10 @@ import Help from '@/components/Help';
 import Jobs from '@/components/Jobs';
 import Preferences from '@/components/Preferences';
 import Links from '@/components/Links';
+import NGLinks from '@/components/NGLinks';
 import Notifications from '@/components/Notifications';
 import ErrorFallback from '@/components/ErrorFallback';
+import { NGLinkProvider } from '@/contexts/NGLinkContext';
 
 function RequireAuth({ children }: { readonly children: ReactNode }) {
   const { loading, authStatus } = useAuthContext();
@@ -98,6 +100,16 @@ const AppComponent = () => {
               }
               path="links"
             />
+            <Route
+              element={
+                <RequireAuth>
+                  <NGLinkProvider>
+                    <NGLinks />
+                  </NGLinkProvider>
+                </RequireAuth>
+              }
+              path="nglinks"
+            />
             {tasksEnabled ? (
               <Route
                 element={
diff --git a/frontend/src/components/NGLinks.tsx b/frontend/src/components/NGLinks.tsx
new file mode 100644
index 00000000..8664d5f7
--- /dev/null
+++ b/frontend/src/components/NGLinks.tsx
@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { Button, Typography } from '@material-tailwind/react';
+import { HiOutlinePlus } from 'react-icons/hi';
+import toast from 'react-hot-toast';
+
+import { TableCard } from '@/components/ui/Table/TableCard';
+import { useNGLinksColumns } from '@/components/ui/Table/ngLinksColumns';
+import NGLinkDialog from '@/components/ui/Dialogs/NGLinkDialog';
+import FgDialog from '@/components/ui/Dialogs/FgDialog';
+import DeleteBtn from '@/components/ui/buttons/DeleteBtn';
+import { useNGLinkContext } from '@/contexts/NGLinkContext';
+import type { NGLink } from '@/queries/ngLinkQueries';
+
+export default function NGLinks() {
+  const {
+    allNGLinksQuery,
+    createNGLinkMutation,
+    updateNGLinkMutation,
+    deleteNGLinkMutation
+  } = useNGLinkContext();
+  const [showDialog, setShowDialog] = useState(false);
+  const [editItem, setEditItem] = useState<NGLink | undefined>(undefined);
+  const [deleteItem, setDeleteItem] = useState<NGLink | undefined>(undefined);
+
+  const handleOpenCreate = () => {
+    setEditItem(undefined);
+    setShowDialog(true);
+  };
+
+  const handleOpenEdit = (item: NGLink) => {
+    setEditItem(item);
+    setShowDialog(true);
+  };
+
+  const handleClose = () => {
+    setShowDialog(false);
+    setEditItem(undefined);
+  };
+
+  const handleCreate = async (payload: {
+    url: string;
+    short_name?: string;
+    title?: string;
+  }) => {
+    try {
+      await createNGLinkMutation.mutateAsync(payload);
+      toast.success('Link created');
+      handleClose();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to create link';
+      toast.error(message);
+    }
+  };
+
+  const handleUpdate = async (payload: {
+    short_key: string;
+    url: string;
+    title?: string;
+  }) => {
+    try {
+      await updateNGLinkMutation.mutateAsync(payload);
+      toast.success('Link updated');
+      handleClose();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to update link';
+      toast.error(message);
+    }
+  };
+
+  const handleOpenDelete = (item: NGLink) => {
+    setDeleteItem(item);
+  };
+
+  const handleCloseDelete = () => {
+    setDeleteItem(undefined);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!deleteItem) {
+      return;
+    }
+    try {
+      await deleteNGLinkMutation.mutateAsync(deleteItem.short_key);
+      toast.success('Link deleted');
+      handleCloseDelete();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to delete link';
+      toast.error(message);
+    }
+  };
+
+  const ngLinksColumns = useNGLinksColumns(handleOpenEdit, handleOpenDelete);
+
+  return (
+    <>
+      <Typography className="mb-6 text-foreground font-bold" type="h5">
+        Neuroglancer Links
+      </Typography>
+      <Typography className="mb-6 text-foreground">
+        Store your Neuroglancer states for easy sharing. Create a short link and
+        share it with internal collaborators. You can update the link later if
+        needed.
+      </Typography>
+      <div className="mb-4">
+        <Button
+          className="bg-primary text-white hover:bg-primary/90"
+          onClick={handleOpenCreate}
+        >
+          <HiOutlinePlus className="icon-default mr-2" />
+          New Link
+        </Button>
+      </div>
+      <TableCard
+        columns={ngLinksColumns}
+        data={allNGLinksQuery.data || []}
+        dataType="NG links"
+        errorState={allNGLinksQuery.error}
+        gridColsClass="grid-cols-[1.2fr_2.8fr_1.2fr_1fr_0.6fr]"
+        loadingState={allNGLinksQuery.isPending}
+      />
+      {showDialog ? (
+        <NGLinkDialog
+          editItem={editItem}
+          onClose={handleClose}
+          onCreate={handleCreate}
+          onUpdate={handleUpdate}
+          open={showDialog}
+          pending={
+            createNGLinkMutation.isPending || updateNGLinkMutation.isPending
+          }
+        />
+      ) : null}
+      {deleteItem ? (
+        <FgDialog
+          className="flex flex-col gap-4"
+          onClose={handleCloseDelete}
+          open={!!deleteItem}
+        >
+          <Typography className="text-foreground font-semibold">
+            Are you sure you want to delete "
+            {deleteItem.short_name || deleteItem.short_key}"?
+          </Typography>
+          <div className="flex gap-3">
+            <DeleteBtn
+              disabled={deleteNGLinkMutation.isPending}
+              onClick={handleConfirmDelete}
+              pending={deleteNGLinkMutation.isPending}
+            />
+            <Button
+              className="!rounded-md"
+              onClick={handleCloseDelete}
+              variant="outline"
+            >
+              Cancel
+            </Button>
+          </div>
+        </FgDialog>
+      ) : null}
+    </>
+  );
+}
diff --git a/frontend/src/components/ui/Dialogs/NGLinkDialog.tsx b/frontend/src/components/ui/Dialogs/NGLinkDialog.tsx
new file mode 100644
index 00000000..bfbb3804
--- /dev/null
+++ b/frontend/src/components/ui/Dialogs/NGLinkDialog.tsx
@@ -0,0 +1,456 @@
+import { useState, useEffect } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Typography } from '@material-tailwind/react';
+
+import FgDialog from '@/components/ui/Dialogs/FgDialog';
+import type {
+  NGLink,
+  CreateNGLinkPayload,
+  UpdateNGLinkPayload
+} from '@/queries/ngLinkQueries';
+import {
+  parseNeuroglancerUrl,
+  validateJsonState,
+  constructNeuroglancerUrl
+} from '@/utils';
+
+type NGLinkDialogProps = {
+  readonly open: boolean;
+  readonly pending: boolean;
+  readonly onClose: () => void;
+  readonly onCreate?: (payload: CreateNGLinkPayload) => Promise<void>;
+  readonly onUpdate?: (payload: UpdateNGLinkPayload) => Promise<void>;
+  readonly editItem?: NGLink;
+};
+
+const DEFAULT_BASE_URL = 'https://neuroglancer-demo.appspot.com/';
+
+export default function NGLinkDialog({
+  open,
+  pending,
+  onClose,
+  onCreate,
+  onUpdate,
+  editItem
+}: NGLinkDialogProps) {
+  const isEditMode = !!editItem;
+
+  const [inputMode, setInputMode] = useState<'url' | 'state'>('url');
+  const [neuroglancerUrl, setNeuroglancerUrl] = useState('');
+  const [stateJson, setStateJson] = useState('');
+  const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
+  const [shortName, setShortName] = useState('');
+  const [title, setTitle] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [shortNameError, setShortNameError] = useState<string | null>(null);
+  const [urlValidationError, setUrlValidationError] = useState<string | null>(
+    null
+  );
+  const [stateValidationError, setStateValidationError] = useState<
+    string | null
+  >(null);
+
+  // Initialize form values when editItem changes
+  useEffect(() => {
+    if (editItem) {
+      setInputMode('url');
+      setNeuroglancerUrl('');
+      setShortName(editItem.short_name || '');
+      setTitle(editItem.title || '');
+      setStateJson('');
+      setBaseUrl(DEFAULT_BASE_URL);
+      setUrlValidationError(null);
+      setStateValidationError(null);
+    } else {
+      setInputMode('url');
+      setNeuroglancerUrl('');
+      setShortName('');
+      setTitle('');
+      setStateJson('');
+      setBaseUrl(DEFAULT_BASE_URL);
+      setUrlValidationError(null);
+      setStateValidationError(null);
+    }
+  }, [editItem]);
+
+  const validateUrlInput = (value: string): string | null => {
+    if (!value.trim()) {
+      return 'Neuroglancer URL is required';
+    }
+    const result = parseNeuroglancerUrl(value);
+    if (!result.success) {
+      return result.error;
+    }
+    return null;
+  };
+
+  const validateStateInput = (value: string): string | null => {
+    if (!value.trim()) {
+      return 'JSON state is required';
+    }
+    const result = validateJsonState(value);
+    if (!result.success) {
+      return result.error;
+    }
+    return null;
+  };
+
+  const validateShortName = (value: string): string | null => {
+    if (!value.trim()) {
+      return null; // Empty is allowed (optional field)
+    }
+    // Only allow alphanumeric characters, hyphens, and underscores
+    const validPattern = /^[a-zA-Z0-9_-]+$/;
+    if (!validPattern.test(value.trim())) {
+      return 'Name can only contain letters, numbers, hyphens, and underscores';
+    }
+    return null;
+  };
+
+  const handleModeChange = (mode: 'url' | 'state') => {
+    setInputMode(mode);
+    setNeuroglancerUrl('');
+    setStateJson('');
+    setBaseUrl(DEFAULT_BASE_URL);
+    setUrlValidationError(null);
+    setStateValidationError(null);
+    setError(null);
+  };
+
+  const handleUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setNeuroglancerUrl(value);
+    if (value.trim()) {
+      setUrlValidationError(validateUrlInput(value));
+    } else {
+      setUrlValidationError(null);
+    }
+  };
+
+  const handleStateChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setStateJson(value);
+    if (value.trim()) {
+      setStateValidationError(validateStateInput(value));
+    } else {
+      setStateValidationError(null);
+    }
+  };
+
+  const handleShortNameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setShortName(value);
+    setShortNameError(validateShortName(value));
+  };
+
+  const resetAndClose = () => {
+    setError(null);
+    setShortNameError(null);
+    setUrlValidationError(null);
+    setStateValidationError(null);
+    setInputMode('url');
+    setNeuroglancerUrl('');
+    setStateJson('');
+    setBaseUrl(DEFAULT_BASE_URL);
+    setShortName('');
+    setTitle('');
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    setError(null);
+
+    // Check for short_name validation error
+    if (shortNameError) {
+      setError('Please fix the errors before submitting.');
+      return;
+    }
+
+    if (inputMode === 'url') {
+      // URL Mode validation
+      if (!neuroglancerUrl.trim()) {
+        setError('Please provide a Neuroglancer URL.');
+        return;
+      }
+
+      const urlError = validateUrlInput(neuroglancerUrl);
+      if (urlError) {
+        setUrlValidationError(urlError);
+        setError(urlError);
+        return;
+      }
+
+      if (isEditMode && onUpdate && editItem) {
+        await onUpdate({
+          short_key: editItem.short_key,
+          url: neuroglancerUrl.trim(),
+          title: title.trim() || undefined
+        });
+      } else if (onCreate) {
+        await onCreate({
+          url: neuroglancerUrl.trim(),
+          short_name: shortName.trim() || undefined,
+          title: title.trim() || undefined
+        });
+      }
+    } else {
+      // State Mode validation
+      if (!stateJson.trim()) {
+        setError('Please provide JSON state.');
+        return;
+      }
+
+      if (!baseUrl.trim()) {
+        setError('Please provide a base URL.');
+        return;
+      }
+
+      const stateError = validateStateInput(stateJson);
+      if (stateError) {
+        setStateValidationError(stateError);
+        setError(stateError);
+        return;
+      }
+
+      // Validate base URL
+      if (
+        !baseUrl.trim().startsWith('http://') &&
+        !baseUrl.trim().startsWith('https://')
+      ) {
+        setError('Base URL must start with http:// or https://');
+        return;
+      }
+
+      // Parse JSON state
+      const parsedState = JSON.parse(stateJson.trim());
+
+      if (isEditMode && onUpdate && editItem) {
+        // For edit mode, construct URL from state and base URL
+        const constructedUrl = constructNeuroglancerUrl(
+          parsedState,
+          baseUrl.trim()
+        );
+        await onUpdate({
+          short_key: editItem.short_key,
+          url: constructedUrl,
+          title: title.trim() || undefined
+        });
+      } else if (onCreate) {
+        await onCreate({
+          state: parsedState,
+          url_base: baseUrl.trim(),
+          short_name: shortName.trim() || undefined,
+          title: title.trim() || undefined
+        });
+      }
+    }
+  };
+
+  return (
+    <FgDialog onClose={resetAndClose} open={open}>
+      <div className="mt-8 flex flex-col gap-2">
+        <Typography className="text-foreground font-semibold" type="h6">
+          {isEditMode
+            ? 'Edit Neuroglancer Short Link'
+            : 'Create Neuroglancer Short Link'}
+        </Typography>
+
+        {/* Mode Selector */}
+        <div className="mb-4 flex gap-4">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              checked={inputMode === 'url'}
+              className="cursor-pointer"
+              name="input-mode"
+              onChange={() => handleModeChange('url')}
+              type="radio"
+              value="url"
+            />
+            <Typography className="text-foreground font-semibold">
+              URL Mode
+            </Typography>
+          </label>
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              checked={inputMode === 'state'}
+              className="cursor-pointer"
+              name="input-mode"
+              onChange={() => handleModeChange('state')}
+              type="radio"
+              value="state"
+            />
+            <Typography className="text-foreground font-semibold">
+              State Mode
+            </Typography>
+          </label>
+        </div>
+
+        {/* URL Mode Fields */}
+        {inputMode === 'url' ? (
+          <>
+            <Typography
+              as="label"
+              className="text-foreground font-semibold"
+              htmlFor="neuroglancer-url"
+            >
+              Neuroglancer URL
+            </Typography>
+            <input
+              autoFocus
+              className={`mb-1 p-2 text-foreground text-lg border rounded-sm focus:outline-none bg-background ${
+                urlValidationError
+                  ? 'border-error focus:border-error'
+                  : 'border-primary-light focus:border-primary'
+              }`}
+              id="neuroglancer-url"
+              onChange={handleUrlChange}
+              placeholder="https://neuroglancer-demo.appspot.com/#!{...}"
+              type="text"
+              value={neuroglancerUrl}
+            />
+            {urlValidationError ? (
+              <Typography className="text-error mb-4" type="small">
+                {urlValidationError}
+              </Typography>
+            ) : (
+              <div className="mb-4" />
+            )}
+          </>
+        ) : null}
+
+        {/* State Mode Fields */}
+        {inputMode === 'state' ? (
+          <>
+            <Typography
+              as="label"
+              className="text-foreground font-semibold"
+              htmlFor="state-json"
+            >
+              JSON State
+            </Typography>
+            <textarea
+              autoFocus
+              className={`mb-1 p-2 text-foreground text-lg border rounded-sm focus:outline-none bg-background font-mono ${
+                stateValidationError
+                  ? 'border-error focus:border-error'
+                  : 'border-primary-light focus:border-primary'
+              }`}
+              id="state-json"
+              onChange={handleStateChange}
+              placeholder='{"layers": [...], "position": [...]}'
+              rows={6}
+              value={stateJson}
+            />
+            {stateValidationError ? (
+              <Typography className="text-error mb-4" type="small">
+                {stateValidationError}
+              </Typography>
+            ) : (
+              <div className="mb-4" />
+            )}
+
+            <Typography
+              as="label"
+              className="text-foreground font-semibold"
+              htmlFor="base-url"
+            >
+              Neuroglancer Base URL
+            </Typography>
+            <input
+              className="mb-4 p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background"
+              id="base-url"
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                setBaseUrl(e.target.value)
+              }
+              placeholder="https://neuroglancer-demo.appspot.com/"
+              type="text"
+              value={baseUrl}
+            />
+          </>
+        ) : null}
+
+        {/* Title Field (shown in both modes) */}
+        <Typography
+          as="label"
+          className="text-foreground font-semibold"
+          htmlFor="title"
+        >
+          Title (optional, appears in tab name)
+        </Typography>
+        <input
+          className="mb-4 p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background"
+          id="title"
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setTitle(e.target.value)
+          }
+          placeholder="Example: Hemibrain EM"
+          type="text"
+          value={title}
+        />
+
+        {/* Short Name Field (only in create mode) */}
+        {!isEditMode ? (
+          <>
+            <Typography
+              as="label"
+              className="text-foreground font-semibold"
+              htmlFor="short-name"
+            >
+              Name (optional, used in shortened link)
+            </Typography>
+            <input
+              className={`mb-1 p-2 text-foreground text-lg border rounded-sm focus:outline-none bg-background ${
+                shortNameError
+                  ? 'border-error focus:border-error'
+                  : 'border-primary-light focus:border-primary'
+              }`}
+              id="short-name"
+              onChange={handleShortNameChange}
+              placeholder="Example: hemibrain-em-1"
+              type="text"
+              value={shortName}
+            />
+            {shortNameError ? (
+              <Typography className="text-error mb-4" type="small">
+                {shortNameError}
+              </Typography>
+            ) : (
+              <div className="mb-4" />
+            )}
+          </>
+        ) : null}
+
+        {/* General Error Display */}
+        {error ? (
+          <Typography className="text-error mb-4" type="small">
+            {error}
+          </Typography>
+        ) : null}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-3">
+        <Button
+          className="!rounded-md"
+          disabled={pending}
+          onClick={handleSubmit}
+        >
+          {pending
+            ? isEditMode
+              ? 'Saving...'
+              : 'Creating...'
+            : isEditMode
+              ? 'Save'
+              : 'Create'}
+        </Button>
+        <Button
+          className="!rounded-md"
+          onClick={resetAndClose}
+          variant="outline"
+        >
+          Cancel
+        </Button>
+      </div>
+    </FgDialog>
+  );
+}
diff --git a/frontend/src/components/ui/Navbar/Navbar.tsx b/frontend/src/components/ui/Navbar/Navbar.tsx
index 78db86d5..21da45fc 100644
--- a/frontend/src/components/ui/Navbar/Navbar.tsx
+++ b/frontend/src/components/ui/Navbar/Navbar.tsx
@@ -13,7 +13,8 @@ import {
   HiOutlineMenu,
   HiOutlineX,
   HiOutlineShare,
-  HiOutlineSun
+  HiOutlineSun,
+  HiOutlineEye
 } from 'react-icons/hi';
 import { HiOutlineFolder, HiOutlineBriefcase } from 'react-icons/hi2';
 import { TbBrandGithub } from 'react-icons/tb';
@@ -34,6 +35,11 @@ const LINKS = [
     title: 'Data Links',
     href: '/links'
   },
+  {
+    icon: HiOutlineEye,
+    title: 'NG Links',
+    href: '/nglinks'
+  },
   {
     icon: HiOutlineBriefcase,
     title: 'Tasks',
diff --git a/frontend/src/components/ui/Table/TableCard.tsx b/frontend/src/components/ui/Table/TableCard.tsx
index d454a919..a367645a 100644
--- a/frontend/src/components/ui/Table/TableCard.tsx
+++ b/frontend/src/components/ui/Table/TableCard.tsx
@@ -53,7 +53,7 @@ type CellContextMenuData = {
   value: string;
 };
 
-// Extend TanStack Table's meta to include context menu handler
+// Extend TanStack Table's meta to include context menu handler and column-level search
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface TableMeta<TData> {
@@ -62,10 +62,15 @@ declare module '@tanstack/react-table' {
       data: CellContextMenuData
     ) => void;
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData, TValue> {
+    // Optional function to extract searchable values from a cell
+    // Used by globalFilterFn to allow columns to define custom search behavior
+    getSearchableValues?: (value: TValue, row: TData) => string[];
+  }
 }
-import type { PathCellValue } from './linksColumns';
 
-type DataType = 'data links' | 'tasks';
+type DataType = 'data links' | 'tasks' | 'NG links';
 
 type TableProps<TData> = {
   readonly columns: ColumnDef<TData>[];
@@ -74,6 +79,7 @@ type TableProps<TData> = {
   readonly errorState: Error | unknown;
   readonly gridColsClass: string;
   readonly loadingState: boolean;
+  readonly headerActions?: ReactNode;
 };
 
 function SortIcons<TData, TValue>({
@@ -150,6 +156,7 @@ const isISODate = (str: string): boolean => {
 };
 
 // Custom global filter function that searches all columns
+// Columns can define custom search behavior via meta.getSearchableValues
 const globalFilterFn: FilterFn<unknown> = (row, _columnId, filterValue) => {
   if (!filterValue) {
     return true;
@@ -157,22 +164,7 @@ const globalFilterFn: FilterFn<unknown> = (row, _columnId, filterValue) => {
 
   const query = String(filterValue).toLowerCase();
 
-  // Special handling for URLs: if query starts with "http", only check the key column
-  if (query.startsWith('http')) {
-    const keyCell = row
-      .getVisibleCells()
-      .find(cell => cell.column.id === 'sharing_key');
-    if (keyCell) {
-      const keyValue = keyCell.getValue();
-      if (keyValue !== null && keyValue !== undefined) {
-        const strKeyValue = String(keyValue).toLowerCase();
-        return query.includes(strKeyValue);
-      }
-    }
-    return false;
-  }
-
-  // For non-URL queries, search all columns except the name column
+  // Search all columns except the name column
   // NOTE: this needs to change if we allow custom sharing names
   // For now, the sharing name is always in the file path
   const rowValues = row.getVisibleCells().flatMap(cell => {
@@ -186,20 +178,12 @@ const globalFilterFn: FilterFn<unknown> = (row, _columnId, filterValue) => {
       return [''];
     }
 
-    // Special handling for path column with PathCellValue
-    if (
-      typeof value === 'object' &&
-      value !== null &&
-      'pathMap' in value &&
-      'displayPath' in value
-    ) {
-      const pathValue = value as PathCellValue;
-      // Return all three path types for searching
-      return [
-        pathValue.pathMap.mac_path.toLowerCase(),
-        pathValue.pathMap.linux_path.toLowerCase(),
-        pathValue.pathMap.windows_path.toLowerCase()
-      ];
+    // Use column meta if available for custom searchable values
+    const meta = cell.column.columnDef.meta;
+    if (meta?.getSearchableValues) {
+      return meta
+        .getSearchableValues(value, cell.row.original)
+        .map(v => v.toLowerCase());
     }
 
     const strValue = String(value);
@@ -218,13 +202,15 @@ function TableHeader({
   globalFilter,
   setGlobalFilter,
   clearSearch,
-  inputRef
+  inputRef,
+  headerActions
 }: {
   readonly table: ReturnType<typeof useReactTable>;
   readonly globalFilter: string;
   readonly setGlobalFilter: (value: string) => void;
   readonly clearSearch: () => void;
   readonly inputRef: React.RefObject<HTMLInputElement>;
+  readonly headerActions?: ReactNode;
 }) {
   return (
     <div className="shrink-0 flex flex-col md:flex-row md:items-center gap-2 py-4 px-4">
@@ -305,6 +291,9 @@ function TableHeader({
           ) : null}
         </div>
       </div>
+      {headerActions ? (
+        <div className="flex items-center justify-end">{headerActions}</div>
+      ) : null}
     </div>
   );
 }
@@ -331,7 +320,8 @@ function Table<TData>({
   gridColsClass,
   loadingState,
   errorState,
-  dataType
+  dataType,
+  headerActions
 }: TableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [globalFilter, setGlobalFilter] = useState<string>('');
@@ -420,6 +410,7 @@ function Table<TData>({
         <TableHeader
           clearSearch={clearSearch}
           globalFilter={inputValue}
+          headerActions={headerActions}
           inputRef={inputRef}
           setGlobalFilter={handleInputChange}
           table={table}
@@ -497,7 +488,8 @@ function TableCard<TData>({
   gridColsClass,
   loadingState,
   errorState,
-  dataType
+  dataType,
+  headerActions
 }: TableProps<TData>) {
   return (
     <Card className="min-h-48">
@@ -507,6 +499,7 @@ function TableCard<TData>({
         dataType={dataType}
         errorState={errorState}
         gridColsClass={gridColsClass}
+        headerActions={headerActions}
         loadingState={loadingState}
       />
     </Card>
diff --git a/frontend/src/components/ui/Table/linksColumns.tsx b/frontend/src/components/ui/Table/linksColumns.tsx
index c0ca1ab9..222848eb 100644
--- a/frontend/src/components/ui/Table/linksColumns.tsx
+++ b/frontend/src/components/ui/Table/linksColumns.tsx
@@ -238,7 +238,16 @@ export function useLinksColumns(): ColumnDef<ProxiedPath>[] {
           const b = rowB.getValue(columnId) as PathCellValue;
           return a.displayPath.localeCompare(b.displayPath);
         },
-        enableSorting: true
+        enableSorting: true,
+        meta: {
+          // Allow searching by URL and all path formats (linux, mac, windows)
+          getSearchableValues: (value: PathCellValue, row: ProxiedPath) => [
+            row.url,
+            value.pathMap.mac_path,
+            value.pathMap.linux_path,
+            value.pathMap.windows_path
+          ]
+        }
       },
       {
         accessorKey: 'created_at',
diff --git a/frontend/src/components/ui/Table/ngLinksColumns.tsx b/frontend/src/components/ui/Table/ngLinksColumns.tsx
new file mode 100644
index 00000000..82349ce3
--- /dev/null
+++ b/frontend/src/components/ui/Table/ngLinksColumns.tsx
@@ -0,0 +1,217 @@
+import { useMemo } from 'react';
+import type { MouseEvent } from 'react';
+import { Typography } from '@material-tailwind/react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import type { NGLink } from '@/queries/ngLinkQueries';
+import { formatDateString } from '@/utils';
+import FgTooltip from '../widgets/FgTooltip';
+import DataLinksActionsMenu from '@/components/ui/Menus/DataLinksActions';
+import type { MenuItem } from '@/components/ui/Menus/FgMenuItems';
+import toast from 'react-hot-toast';
+import { copyToClipboard } from '@/utils/copyText';
+
+const TRIGGER_CLASSES = 'h-min max-w-full';
+
+type NGLinkRowActionProps = {
+  item: NGLink;
+  onEdit: (item: NGLink) => void;
+  onDelete: (item: NGLink) => void;
+};
+
+function ActionsCell({
+  item,
+  onEdit,
+  onDelete
+}: {
+  readonly item: NGLink;
+  readonly onEdit: (item: NGLink) => void;
+  readonly onDelete: (item: NGLink) => void;
+}) {
+  const menuItems: MenuItem<NGLinkRowActionProps>[] = [
+    {
+      name: 'Edit',
+      action: ({ item, onEdit }) => {
+        onEdit(item);
+      }
+    },
+    {
+      name: 'Copy Neuroglancer Link',
+      action: async ({ item }) => {
+        const result = await copyToClipboard(item.neuroglancer_url);
+        if (result.success) {
+          toast.success('Neuroglancer link copied');
+        } else {
+          toast.error(`Failed to copy: ${result.error}`);
+        }
+      }
+    },
+    {
+      name: 'Copy JSON state link',
+      action: async ({ item }) => {
+        const result = await copyToClipboard(item.state_url);
+        if (result.success) {
+          toast.success('JSON state link copied');
+        } else {
+          toast.error(`Failed to copy: ${result.error}`);
+        }
+      }
+    },
+    {
+      name: 'Delete',
+      color: 'text-error',
+      action: ({ item, onDelete }) => {
+        onDelete(item);
+      }
+    }
+  ];
+
+  return (
+    <div className="min-w-0 flex items-center">
+      <div onClick={e => e.stopPropagation()}>
+        <DataLinksActionsMenu<NGLinkRowActionProps>
+          actionProps={{ item, onEdit, onDelete }}
+          menuItems={menuItems}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function useNGLinksColumns(
+  onEdit: (item: NGLink) => void,
+  onDelete: (item: NGLink) => void
+): ColumnDef<NGLink>[] {
+  return useMemo(
+    () => [
+      {
+        accessorKey: 'short_name',
+        header: 'Name',
+        cell: ({ row, table }) => {
+          const item = row.original;
+          const label = item.short_name || item.short_key;
+          const onContextMenu = table.options.meta?.onCellContextMenu;
+          return (
+            <div
+              className="flex items-center truncate w-full h-full"
+              onContextMenu={e => {
+                e.preventDefault();
+                onContextMenu?.(e, { value: label });
+              }}
+            >
+              <FgTooltip label={label} triggerClasses={TRIGGER_CLASSES}>
+                <Typography className="text-foreground truncate select-all">
+                  {label}
+                </Typography>
+              </FgTooltip>
+            </div>
+          );
+        },
+        sortingFn: (rowA, rowB) => {
+          const a = rowA.original.short_name || rowA.original.short_key;
+          const b = rowB.original.short_name || rowB.original.short_key;
+          return a.localeCompare(b);
+        },
+        enableSorting: true
+      },
+      {
+        accessorKey: 'neuroglancer_url',
+        header: 'Neuroglancer Short Link',
+        cell: ({ row, table }) => {
+          const item = row.original;
+          const onContextMenu = table.options.meta?.onCellContextMenu;
+          return (
+            <div
+              className="flex items-center truncate w-full h-full"
+              onContextMenu={(e: MouseEvent<HTMLElement>) => {
+                e.preventDefault();
+                onContextMenu?.(e, { value: item.neuroglancer_url });
+              }}
+            >
+              <FgTooltip
+                label={item.neuroglancer_url}
+                triggerClasses={TRIGGER_CLASSES}
+              >
+                <Typography
+                  as="a"
+                  className="text-left truncate block text-primary-light hover:underline focus:underline"
+                  href={item.neuroglancer_url}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  {item.neuroglancer_url}
+                </Typography>
+              </FgTooltip>
+            </div>
+          );
+        },
+        enableSorting: false
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Date Created',
+        cell: ({ cell, table }) => {
+          const formattedDate = formatDateString(cell.getValue() as string);
+          const onContextMenu = table.options.meta?.onCellContextMenu;
+          return (
+            <div
+              className="flex items-center truncate w-full h-full"
+              onContextMenu={e => {
+                e.preventDefault();
+                onContextMenu?.(e, { value: formattedDate });
+              }}
+            >
+              <FgTooltip label={formattedDate} triggerClasses={TRIGGER_CLASSES}>
+                <Typography
+                  className="text-left text-foreground truncate select-all"
+                  variant="small"
+                >
+                  {formattedDate}
+                </Typography>
+              </FgTooltip>
+            </div>
+          );
+        },
+        enableSorting: true
+      },
+      {
+        accessorKey: 'short_key',
+        header: 'Key',
+        cell: ({ cell, getValue, table }) => {
+          const key = getValue() as string;
+          const onContextMenu = table.options.meta?.onCellContextMenu;
+          return (
+            <div
+              className="flex items-center truncate w-full h-full"
+              key={cell.id}
+              onContextMenu={e => {
+                e.preventDefault();
+                onContextMenu?.(e, { value: key });
+              }}
+            >
+              <FgTooltip label={key} triggerClasses={TRIGGER_CLASSES}>
+                <Typography className="text-foreground truncate select-all">
+                  {key}
+                </Typography>
+              </FgTooltip>
+            </div>
+          );
+        },
+        enableSorting: true
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        cell: ({ row }) => (
+          <ActionsCell
+            item={row.original}
+            onDelete={onDelete}
+            onEdit={onEdit}
+          />
+        ),
+        enableSorting: false
+      }
+    ],
+    [onEdit, onDelete]
+  );
+}
diff --git a/frontend/src/contexts/NGLinkContext.tsx b/frontend/src/contexts/NGLinkContext.tsx
new file mode 100644
index 00000000..515a1335
--- /dev/null
+++ b/frontend/src/contexts/NGLinkContext.tsx
@@ -0,0 +1,50 @@
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+import {
+  useNGLinksQuery,
+  useCreateNGLinkMutation,
+  useUpdateNGLinkMutation,
+  useDeleteNGLinkMutation
+} from '@/queries/ngLinkQueries';
+
+type NGLinkContextType = {
+  allNGLinksQuery: ReturnType<typeof useNGLinksQuery>;
+  createNGLinkMutation: ReturnType<typeof useCreateNGLinkMutation>;
+  updateNGLinkMutation: ReturnType<typeof useUpdateNGLinkMutation>;
+  deleteNGLinkMutation: ReturnType<typeof useDeleteNGLinkMutation>;
+};
+
+const NGLinkContext = createContext<NGLinkContextType | null>(null);
+
+export const useNGLinkContext = () => {
+  const context = useContext(NGLinkContext);
+  if (!context) {
+    throw new Error('useNGLinkContext must be used within a NGLinkProvider');
+  }
+  return context;
+};
+
+export const NGLinkProvider = ({
+  children
+}: {
+  readonly children: ReactNode;
+}) => {
+  const allNGLinksQuery = useNGLinksQuery();
+  const createNGLinkMutation = useCreateNGLinkMutation();
+  const updateNGLinkMutation = useUpdateNGLinkMutation();
+  const deleteNGLinkMutation = useDeleteNGLinkMutation();
+
+  const value: NGLinkContextType = {
+    allNGLinksQuery,
+    createNGLinkMutation,
+    updateNGLinkMutation,
+    deleteNGLinkMutation
+  };
+
+  return (
+    <NGLinkContext.Provider value={value}>{children}</NGLinkContext.Provider>
+  );
+};
+
+export default NGLinkContext;
diff --git a/frontend/src/queries/ngLinkQueries.ts b/frontend/src/queries/ngLinkQueries.ts
new file mode 100644
index 00000000..276b3684
--- /dev/null
+++ b/frontend/src/queries/ngLinkQueries.ts
@@ -0,0 +1,212 @@
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  UseQueryResult,
+  UseMutationResult
+} from '@tanstack/react-query';
+
+import { sendFetchRequest, buildUrl } from '@/utils';
+import {
+  getResponseJsonOrError,
+  sendRequestAndThrowForNotOk,
+  throwResponseNotOkError
+} from './queryUtils';
+
+export type NGLink = {
+  short_key: string;
+  short_name: string | null;
+  title: string | null;
+  created_at: string;
+  updated_at: string;
+  state_url: string;
+  neuroglancer_url: string;
+};
+
+/**
+ * Raw API response structure from /api/neuroglancer/nglinks endpoints
+ */
+type NGLinksResponse = {
+  links?: NGLink[];
+};
+
+type NGLinkResponse = {
+  short_key: string;
+  short_name: string | null;
+  state_url: string;
+  neuroglancer_url: string;
+};
+
+/**
+ * Payload for creating a Neuroglancer link
+ */
+export type CreateNGLinkPayload = {
+  url?: string;
+  state?: Record<string, unknown>;
+  url_base?: string;
+  short_name?: string;
+  title?: string;
+};
+
+/**
+ * Payload for updating a Neuroglancer link
+ */
+export type UpdateNGLinkPayload = {
+  short_key: string;
+  url: string;
+  title?: string;
+};
+
+// Query key factory for Neuroglancer links
+export const ngLinkQueryKeys = {
+  all: ['ngLinks'] as const,
+  list: () => ['ngLinks', 'list'] as const
+};
+
+/**
+ * Sort Neuroglancer links by date (newest first)
+ */
+function sortNGLinksByDate(links: NGLink[]): NGLink[] {
+  return links.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  );
+}
+
+/**
+ * Fetches all Neuroglancer links from the backend
+ * Returns empty array if no links exist (404)
+ */
+const fetchNGLinks = async (signal?: AbortSignal): Promise<NGLink[]> => {
+  const response = await sendFetchRequest(
+    '/api/neuroglancer/nglinks',
+    'GET',
+    undefined,
+    { signal }
+  );
+  const data = (await getResponseJsonOrError(response)) as NGLinksResponse;
+
+  if (response.ok) {
+    if (data?.links) {
+      return sortNGLinksByDate(data.links);
+    } else {
+      return [];
+    }
+  }
+
+  // Handle error responses
+  if (response.status === 404) {
+    // Not an error, just no links available
+    return [];
+  } else {
+    throwResponseNotOkError(response, data);
+  }
+};
+
+/**
+ * Query hook for fetching all Neuroglancer links
+ *
+ * @returns Query result with all Neuroglancer links
+ */
+export function useNGLinksQuery(): UseQueryResult<NGLink[], Error> {
+  return useQuery<NGLink[], Error>({
+    queryKey: ngLinkQueryKeys.list(),
+    queryFn: ({ signal }) => fetchNGLinks(signal)
+  });
+}
+
+/**
+ * Mutation hook for creating a Neuroglancer link
+ *
+ * @returns Mutation result
+ * @example
+ * const mutation = useCreateNGLinkMutation();
+ * mutation.mutate({ url: 'https://neuroglancer-demo.appspot.com/#!{...}', short_name: 'my-link' });
+ */
+export function useCreateNGLinkMutation(): UseMutationResult<
+  NGLinkResponse,
+  Error,
+  CreateNGLinkPayload
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload: CreateNGLinkPayload) => {
+      const ngLink = await sendRequestAndThrowForNotOk(
+        '/api/neuroglancer/nglinks',
+        'POST',
+        payload
+      );
+      return ngLink as NGLinkResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ngLinkQueryKeys.all
+      });
+    }
+  });
+}
+
+/**
+ * Mutation hook for updating a Neuroglancer link
+ *
+ * @returns Mutation result
+ * @example
+ * const mutation = useUpdateNGLinkMutation();
+ * mutation.mutate({ short_key: 'abc123', url: 'https://...', title: 'New Title' });
+ */
+export function useUpdateNGLinkMutation(): UseMutationResult<
+  NGLinkResponse,
+  Error,
+  UpdateNGLinkPayload
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload: UpdateNGLinkPayload) => {
+      const url = buildUrl(
+        '/api/neuroglancer/nglinks/',
+        payload.short_key,
+        null
+      );
+      const ngLink = await sendRequestAndThrowForNotOk(url, 'PUT', {
+        url: payload.url,
+        title: payload.title
+      });
+      return ngLink as NGLinkResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ngLinkQueryKeys.all
+      });
+    }
+  });
+}
+
+/**
+ * Mutation hook for deleting a Neuroglancer link
+ *
+ * @returns Mutation result
+ * @example
+ * const mutation = useDeleteNGLinkMutation();
+ * mutation.mutate('abc123');
+ */
+export function useDeleteNGLinkMutation(): UseMutationResult<
+  void,
+  Error,
+  string
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (shortKey: string) => {
+      const url = buildUrl('/api/neuroglancer/nglinks/', shortKey, null);
+      await sendRequestAndThrowForNotOk(url, 'DELETE');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ngLinkQueryKeys.all
+      });
+    }
+  });
+}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 8a7b1583..bd7154ad 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -346,3 +346,16 @@ export type {
   RetryCallbacks,
   RetryState
 } from './retryWithBackoff';
+
+// Re-export Neuroglancer URL utilities
+export {
+  parseNeuroglancerUrl,
+  validateJsonState,
+  normalizeJsonString,
+  constructNeuroglancerUrl
+} from './neuroglancerUrl';
+export type {
+  ParsedNeuroglancerUrl,
+  NeuroglancerParseError,
+  JsonValidationResult
+} from './neuroglancerUrl';
diff --git a/frontend/src/utils/neuroglancerUrl.ts b/frontend/src/utils/neuroglancerUrl.ts
new file mode 100644
index 00000000..1418bbbe
--- /dev/null
+++ b/frontend/src/utils/neuroglancerUrl.ts
@@ -0,0 +1,149 @@
+/**
+ * Neuroglancer URL parsing and validation utilities
+ * Mirrors backend validation logic for client-side validation
+ */
+
+export type ParsedNeuroglancerUrl = {
+  success: true;
+  urlBase: string;
+  state: Record<string, unknown>;
+};
+
+export type NeuroglancerParseError = {
+  success: false;
+  error: string;
+};
+
+export type JsonValidationResult =
+  | { success: true; state: Record<string, unknown> }
+  | { success: false; error: string };
+
+/**
+ * Parse a Neuroglancer URL and extract the base URL and state
+ * Validates that the URL is properly formatted and contains valid JSON state
+ */
+export function parseNeuroglancerUrl(
+  url: string
+): ParsedNeuroglancerUrl | NeuroglancerParseError {
+  const trimmedUrl = url.trim();
+
+  // Check for #! separator
+  if (!trimmedUrl.includes('#!')) {
+    return {
+      success: false,
+      error: 'URL must contain "#!" separator'
+    };
+  }
+
+  // Split URL into base and encoded state
+  const [urlBase, encodedState] = trimmedUrl.split('#!');
+
+  // Validate base URL starts with http:// or https://
+  if (!urlBase.startsWith('http://') && !urlBase.startsWith('https://')) {
+    return {
+      success: false,
+      error: 'Base URL must start with http:// or https://'
+    };
+  }
+
+  if (!encodedState) {
+    return {
+      success: false,
+      error: 'URL must contain state after "#!"'
+    };
+  }
+
+  // Decode the state
+  let decodedState: string;
+  try {
+    decodedState = decodeURIComponent(encodedState);
+  } catch {
+    return {
+      success: false,
+      error: 'Failed to decode URL state'
+    };
+  }
+
+  // Parse JSON
+  let state: unknown;
+  try {
+    state = JSON.parse(decodedState);
+  } catch {
+    return {
+      success: false,
+      error:
+        'Invalid Neuroglancer state (likely truncated). Please copy the state JSON directly instead of the URL.'
+    };
+  }
+
+  // Validate state is an object
+  if (typeof state !== 'object' || state === null || Array.isArray(state)) {
+    return {
+      success: false,
+      error: 'Neuroglancer state must be a JSON object'
+    };
+  }
+
+  return {
+    success: true,
+    urlBase,
+    state: state as Record<string, unknown>
+  };
+}
+
+/**
+ * Validate a JSON string represents a valid Neuroglancer state
+ * State must be a JSON object (not array or primitive)
+ */
+export function validateJsonState(jsonString: string): JsonValidationResult {
+  const trimmed = jsonString.trim();
+
+  if (!trimmed) {
+    return {
+      success: false,
+      error: 'JSON state is required'
+    };
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed);
+  } catch {
+    return {
+      success: false,
+      error: 'Invalid JSON syntax'
+    };
+  }
+
+  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+    return {
+      success: false,
+      error: 'State must be a JSON object (not array or primitive)'
+    };
+  }
+
+  return {
+    success: true,
+    state: parsed as Record<string, unknown>
+  };
+}
+
+/**
+ * Normalize a JSON string to compact format
+ * Parses and re-stringifies to ensure consistent formatting
+ */
+export function normalizeJsonString(jsonString: string): string {
+  const parsed = JSON.parse(jsonString);
+  return JSON.stringify(parsed);
+}
+
+/**
+ * Construct a Neuroglancer URL from state and base URL
+ */
+export function constructNeuroglancerUrl(
+  state: Record<string, unknown>,
+  baseUrl: string
+): string {
+  const encodedState = encodeURIComponent(JSON.stringify(state));
+  return `${baseUrl}#!${encodedState}`;
+}
diff --git a/tests/test_endpoints.py b/tests/test_endpoints.py
index 0375d403..09acd294 100644
--- a/tests/test_endpoints.py
+++ b/tests/test_endpoints.py
@@ -1,8 +1,10 @@
+import json
 import os
 import tempfile
 import shutil
 from datetime import datetime, timezone
 from unittest.mock import patch, MagicMock
+from urllib.parse import quote
 
 import pytest
 from fastapi.testclient import TestClient
@@ -190,6 +192,69 @@ def test_delete_preference(test_client):
     assert response.status_code == 404
 
 
+def test_neuroglancer_shortener(test_client):
+    """Test creating and retrieving a shortened Neuroglancer state"""
+    state = {"layers": [], "title": "Example"}
+    encoded_state = quote(json.dumps(state))
+    url = f"https://neuroglancer-demo.appspot.com/#!{encoded_state}"
+
+    # Test with short_name - URL should include both short_key and short_name
+    response = test_client.post(
+        "/api/neuroglancer/nglinks",
+        json={"url": url, "short_name": "example-view"}
+    )
+    assert response.status_code == 200
+    data = response.json()
+    assert "short_key" in data
+    assert data["short_name"] == "example-view"
+    assert "state_url" in data
+    assert "neuroglancer_url" in data
+
+    short_key = data["short_key"]
+    short_name = data["short_name"]
+    assert data["state_url"].endswith(f"/ng/{short_key}/{short_name}")
+    assert data["neuroglancer_url"].startswith("https://neuroglancer-demo.appspot.com/#!")
+
+    # Retrieving with both short_key and short_name should work
+    state_response = test_client.get(f"/ng/{short_key}/{short_name}")
+    assert state_response.status_code == 200
+    assert state_response.json() == state
+
+    # Retrieving with only short_key should fail (404)
+    state_response_simple = test_client.get(f"/ng/{short_key}")
+    assert state_response_simple.status_code == 404
+
+    list_response = test_client.get("/api/neuroglancer/nglinks")
+    assert list_response.status_code == 200
+    list_data = list_response.json()
+    assert "links" in list_data
+    assert any(link["short_key"] == short_key for link in list_data["links"])
+
+
+def test_neuroglancer_shortener_no_name(test_client):
+    """Test creating a shortened Neuroglancer state without short_name"""
+    state = {"layers": []}
+    encoded_state = quote(json.dumps(state))
+    url = f"https://neuroglancer-demo.appspot.com/#!{encoded_state}"
+
+    response = test_client.post(
+        "/api/neuroglancer/nglinks",
+        json={"url": url}
+    )
+    assert response.status_code == 200
+    data = response.json()
+    assert "short_key" in data
+    assert data["short_name"] is None
+
+    short_key = data["short_key"]
+    assert data["state_url"].endswith(f"/ng/{short_key}")
+
+    # Retrieving with only short_key should work when no short_name was set
+    state_response = test_client.get(f"/ng/{short_key}")
+    assert state_response.status_code == 200
+    assert state_response.json() == state
+
+
 def test_create_proxied_path(test_client, temp_dir):
     """Test creating a new proxied path"""
     path = "test_proxied_path"
@@ -1040,4 +1105,3 @@ def test_head_content_with_symlink(test_client, temp_dir):
     assert response.headers["Accept-Ranges"] == "bytes"
     assert "Content-Length" in response.headers
     assert int(response.headers["Content-Length"]) == len(target_content)
-