diff --git a/.changeset/config.json b/.changeset/config.json
index 1ccc4f52..df3d7727 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,6 +6,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [],
-  "linked": [["commonality", "@commonalityco/*"]]
+  "ignore": []
 }
diff --git a/.changeset/quick-parrots-rhyme.md b/.changeset/quick-parrots-rhyme.md
new file mode 100644
index 00000000..0a11d7fd
--- /dev/null
+++ b/.changeset/quick-parrots-rhyme.md
@@ -0,0 +1,8 @@
+---
+"@commonalityco/ui-constraints": patch
+"@commonalityco/ui-design-system": patch
+"@commonalityco/ui-core": patch
+"@commonalityco/studio": patch
+---
+
+Display dependency constraints in searchable modal
diff --git a/apps/workshop/src/stories/feature-graph/all-constraints-dialog.stories.tsx b/apps/workshop/src/stories/feature-graph/all-constraints-dialog.stories.tsx
new file mode 100644
index 00000000..64388e73
--- /dev/null
+++ b/apps/workshop/src/stories/feature-graph/all-constraints-dialog.stories.tsx
@@ -0,0 +1,211 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AllConstraintsDialog } from '@commonalityco/ui-constraints';
+import { DependencyType } from '@commonalityco/utils-core';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: 'Constraints/AllConstraintsDialog',
+  component: AllConstraintsDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    backgrounds: {
+      default: 'light/secondary',
+    },
+  },
+} satisfies Meta<typeof AllConstraintsDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Results: Story = {
+  args: {
+    open: true,
+    results: [
+      {
+        isValid: false,
+        constraint: {
+          allow: ['tag-one'],
+          disallow: '*',
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-one',
+            target: 'pkg-two',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-two',
+            target:
+              'pkg-threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source:
+              'pkg-threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+            target: 'pkg-four',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-four',
+            target: 'pkg-five',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-five',
+            target: 'pkg-six',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+        ],
+        filter: '*',
+      },
+      {
+        isValid: false,
+        constraint: {
+          allow: ['tag-one'],
+          disallow: ['tag-three', 'tag-four'],
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-one',
+            target: 'pkg-two',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-two',
+            target: 'pkg-three',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-three',
+            target: 'pkg-four',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+        ],
+        filter: 'tag-one',
+        foundTags: ['tag-three'],
+      },
+      {
+        isValid: false,
+        constraint: {
+          allow: ['tag-one'],
+          disallow: ['tag-three', 'tag-four'],
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-one',
+            target: 'pkg-two',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-two',
+            target: 'pkg-three',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+          {
+            source: 'pkg-three',
+            target: 'pkg-four',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+        ],
+        filter: 'tag-two',
+        foundTags: ['tag-three'],
+      },
+      {
+        isValid: true,
+        constraint: {
+          allow: '*',
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-one',
+            target: 'pkg-two',
+            type: DependencyType.PEER,
+            version: '1.0.0',
+          },
+        ],
+        foundTags: [
+          'tag-three',
+          'tag-looooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggggggggg',
+        ],
+        filter: 'tag-one',
+      },
+      {
+        isValid: true,
+        constraint: {
+          allow: ['tag-one', 'tag-three'],
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-five',
+            target: 'pkg-six',
+            type: DependencyType.PRODUCTION,
+            version: '1.0.0',
+          },
+        ],
+        foundTags: ['tag-three'],
+        filter: 'tag-one',
+      },
+      {
+        isValid: true,
+        constraint: {
+          allow: '*',
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-five',
+            target: 'pkg-seven',
+            type: DependencyType.DEVELOPMENT,
+            version: '1.0.0',
+          },
+        ],
+        foundTags: ['tag-three'],
+        filter: 'tag-one',
+      },
+    ],
+  },
+};
+
+export const Stress: Story = {
+  args: {
+    open: true,
+    results: [
+      {
+        isValid: true,
+        constraint: {
+          allow: ['tag-one'],
+          disallow: ['tag-two'],
+        },
+        dependencyPath: [
+          {
+            source:
+              'pkg-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonnnnnnng',
+            target: 'pkg-b',
+            type: DependencyType.DEVELOPMENT,
+            version: '1.0.0',
+          },
+        ],
+        filter: 'tag-one',
+        foundTags: ['tag-one'],
+      },
+    ],
+  },
+};
+
+export const NoResults: Story = {
+  args: {
+    open: true,
+    results: [],
+  },
+};
diff --git a/apps/workshop/src/stories/feature-graph/dependency-constraints-dialog.stories.tsx b/apps/workshop/src/stories/feature-graph/dependency-constraints-dialog.stories.tsx
new file mode 100644
index 00000000..bfdceb81
--- /dev/null
+++ b/apps/workshop/src/stories/feature-graph/dependency-constraints-dialog.stories.tsx
@@ -0,0 +1,107 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DependencyConstraintsDialog } from '@commonalityco/ui-constraints';
+import { DependencyType } from '@commonalityco/utils-core';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: 'Constraints/DependencyConstraintsDialog',
+  component: DependencyConstraintsDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    backgrounds: {
+      default: 'light/secondary',
+    },
+  },
+} satisfies Meta<typeof DependencyConstraintsDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithConstraints: Story = {
+  args: {
+    open: true,
+    dependencies: [
+      {
+        source: 'pkg-a',
+        target: 'pkg-b',
+        version: '1.0.0',
+        type: DependencyType.DEVELOPMENT,
+      },
+      {
+        source: 'pkg-a',
+        target: 'pkg-b',
+        version: '1.0.0',
+        type: DependencyType.PEER,
+      },
+    ],
+    results: [
+      {
+        isValid: true,
+        constraint: {
+          allow: ['tag-one'],
+          disallow: ['tag-two'],
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-a',
+            target: 'pkg-b',
+            type: DependencyType.DEVELOPMENT,
+            version: '1.0.0',
+          },
+        ],
+        filter: 'tag-one',
+        foundTags: ['tag-one'],
+      },
+      {
+        isValid: false,
+        constraint: {
+          allow: ['tag-two'],
+          disallow: '*',
+        },
+        dependencyPath: [
+          {
+            source: 'pkg-a',
+            target: 'pkg-b',
+            type: DependencyType.PEER,
+            version: '1.0.0',
+          },
+        ],
+        filter: 'tag-two',
+        foundTags: ['tag-two'],
+      },
+    ],
+  },
+};
+
+export const Stress: Story = {
+  args: {
+    open: true,
+    dependencies: [
+      {
+        source:
+          'pkg-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonnnnngg',
+        target:
+          'pkg-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonnnnnggg',
+        version: '1.0.0',
+        type: DependencyType.DEVELOPMENT,
+      },
+    ],
+    results: [],
+  },
+};
+
+export const NoConstraints: Story = {
+  args: {
+    open: true,
+    dependencies: [
+      {
+        source: 'pkg-a',
+        target: 'pkg-b',
+        version: '1.0.0',
+        type: DependencyType.DEVELOPMENT,
+      },
+    ],
+    results: [],
+  },
+};
diff --git a/packages/constraints/ui-constraints/src/all-constraints-dialog.test.tsx b/packages/constraints/ui-constraints/src/all-constraints-dialog.test.tsx
new file mode 100644
index 00000000..01f9b722
--- /dev/null
+++ b/packages/constraints/ui-constraints/src/all-constraints-dialog.test.tsx
@@ -0,0 +1,136 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { AllConstraintsDialog } from './all-constraints-dialog';
+import { ConstraintResult } from '@commonalityco/types';
+import { DependencyType } from '@commonalityco/utils-core';
+
+describe('AllConstraintsDialog', () => {
+  it('filters out package names that do not match the search term', async () => {
+    const results: ConstraintResult[] = [
+      {
+        dependencyPath: [
+          {
+            source: 'pkg-a',
+            target: 'pkg-b',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ],
+        constraint: { allow: ['tag-one'] },
+        isValid: true,
+        filter: 'tag-one',
+      },
+      {
+        dependencyPath: [
+          {
+            source: 'pkg-c',
+            target: 'pkg-d',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ],
+        constraint: { allow: ['tag-two'] },
+        isValid: true,
+        filter: 'tag-two',
+      },
+    ];
+    const onOpenChange = vi.fn();
+
+    render(
+      <AllConstraintsDialog results={results} onOpenChange={onOpenChange} />,
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'View all constraints' }),
+    );
+
+    await userEvent.type(screen.getByLabelText('Search packages'), 'pkg-a');
+
+    expect(screen.getByText('1 constraints')).toBeInTheDocument();
+    expect(screen.queryByText('pkg-c')).not.toBeInTheDocument();
+  });
+
+  it('shows no packages match your filters if the search does not match any packages', async () => {
+    const results: ConstraintResult[] = [
+      {
+        dependencyPath: [
+          {
+            source: 'test',
+            target: 'test',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ],
+        constraint: { allow: ['tag-one'] },
+        isValid: true,
+        filter: 'tag-one',
+      },
+    ];
+    const onOpenChange = vi.fn();
+
+    render(
+      <AllConstraintsDialog results={results} onOpenChange={onOpenChange} />,
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'View all constraints' }),
+    );
+
+    await userEvent.type(
+      screen.getByLabelText('Search packages'),
+      'nonexistent',
+    );
+
+    expect(
+      screen.getByText('No packages match your filters'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly with no results', async () => {
+    const results: ConstraintResult[] = [];
+    const onOpenChange = vi.fn();
+
+    render(
+      <AllConstraintsDialog results={results} onOpenChange={onOpenChange} />,
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'View all constraints' }),
+    );
+
+    expect(
+      screen.queryByPlaceholderText('Search packages'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders correctly with results', async () => {
+    const results: ConstraintResult[] = [
+      {
+        dependencyPath: [
+          {
+            source: 'test',
+            target: 'test',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ],
+        constraint: { allow: ['tag-one'] },
+        isValid: true,
+        filter: 'tag-one',
+      },
+    ];
+    const onOpenChange = vi.fn();
+
+    render(
+      <AllConstraintsDialog results={results} onOpenChange={onOpenChange} />,
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'View all constraints' }),
+    );
+
+    expect(screen.getByText('All constraints')).toBeInTheDocument();
+    expect(screen.getByText('1 constraints')).toBeInTheDocument();
+  });
+});
diff --git a/packages/constraints/ui-constraints/src/constraints-dialog-content.tsx b/packages/constraints/ui-constraints/src/all-constraints-dialog.tsx
similarity index 57%
rename from packages/constraints/ui-constraints/src/constraints-dialog-content.tsx
rename to packages/constraints/ui-constraints/src/all-constraints-dialog.tsx
index 1e969bc3..2b6b47aa 100644
--- a/packages/constraints/ui-constraints/src/constraints-dialog-content.tsx
+++ b/packages/constraints/ui-constraints/src/all-constraints-dialog.tsx
@@ -1,27 +1,26 @@
-// create a ConstraintsDialog component
+'use client';
 import { GradientFade } from '@commonalityco/ui-core';
 import {
   Button,
+  Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
   Input,
   ScrollArea,
-  Separator,
 } from '@commonalityco/ui-design-system';
-import { useMemo, useState } from 'react';
+import { useMemo, useState, ComponentProps } from 'react';
 import { ConstraintResults } from './constraint-results';
 import { ConstraintResult } from '@commonalityco/types';
 
-export function ConstraintsDialogContent({
+export function AllConstraintsDialog({
   results,
-  onClose = () => {},
+  ...props
 }: {
   results: ConstraintResult[];
-  onClose?: () => void;
-}) {
+} & ComponentProps<typeof Dialog>) {
   const [search, setSearch] = useState('');
 
   const filteredResults = useMemo(() => {
@@ -37,39 +36,48 @@ export function ConstraintsDialogContent({
   const hasResults = filteredResults.length > 0;
 
   return (
-    <>
+    <Dialog {...props}>
+      <DialogTrigger asChild>
+        <Button variant="secondary">View all constraints</Button>
+      </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>All constraints</DialogTitle>
-          <DialogDescription></DialogDescription>
         </DialogHeader>
-        <div>
-          <Input
-            className="mb-3"
-            placeholder="Search packages"
-            onChange={(event) => setSearch(event.target.value)}
-          />
-          {hasResults ? (
+        {results.length > 0 ? (
+          <div>
+            <Input
+              aria-label="Search packages"
+              className="mb-3"
+              placeholder="Search packages"
+              onChange={(event) => setSearch(event.target.value)}
+            />
+
             <p className="text-xs text-muted-foreground leading-none">{`${filteredResults.length} constraints`}</p>
-          ) : undefined}
-        </div>
+          </div>
+        ) : undefined}
         {hasResults || (!hasResults && !search) ? (
-          <ScrollArea className="max-h-[450px]">
+          <ScrollArea className="max-h-[400px] py-2 relative">
             <ConstraintResults results={filteredResults} />
-            {hasResults ? <GradientFade placement="bottom" /> : undefined}
+            {hasResults ? (
+              <GradientFade placement="bottom" className="z-auto" />
+            ) : undefined}
           </ScrollArea>
         ) : undefined}
         {!hasResults && search ? (
           <p className="text-center py-16">No packages match your filters</p>
         ) : undefined}
 
-        <Separator className="my-2" />
         <DialogFooter>
-          <Button variant="outline" className="w-full" onClick={onClose}>
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => props?.onOpenChange?.(false)}
+          >
             Close
           </Button>
         </DialogFooter>
       </DialogContent>
-    </>
+    </Dialog>
   );
 }
diff --git a/packages/constraints/ui-constraints/src/constraint-results.tsx b/packages/constraints/ui-constraints/src/constraint-results.tsx
index 82e0844b..03e17514 100644
--- a/packages/constraints/ui-constraints/src/constraint-results.tsx
+++ b/packages/constraints/ui-constraints/src/constraint-results.tsx
@@ -5,20 +5,15 @@ import {
   AccordionItem,
   AccordionTrigger,
   Badge,
-  Button,
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
   cn,
 } from '@commonalityco/ui-design-system';
 import { DependencyType, formatTagName } from '@commonalityco/utils-core';
-import { ArrowRight, Check, ExternalLink, Network, X } from 'lucide-react';
+import { ArrowRight, Check, X } from 'lucide-react';
 import { ComponentProps, useMemo } from 'react';
 import uniqBy from 'lodash/uniqBy';
 import isEqual from 'lodash/isEqual';
 import { GradientFade } from '@commonalityco/ui-core';
+import { ConstraintsOnboardingCard } from './constraints-onboarding-card';
 
 const dependencyTextByType = {
   [DependencyType.PRODUCTION]: 'prod',
@@ -37,38 +32,6 @@ function TagsContainer({
   );
 }
 
-export function ConstraintOnboardingCard() {
-  return (
-    <Card variant="secondary">
-      <CardHeader>
-        <div className="bg-background mb-3 flex h-10 w-10 items-center justify-center rounded-full border">
-          <div className="bg-secondary rounded-full p-1.5">
-            <Network className="h-5 w-5" />
-          </div>
-        </div>
-
-        <CardTitle>Organize your dependency graph</CardTitle>
-        <CardDescription>
-          Prevent endless dependency debugging by limiting the which packages
-          can depend on each other.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter>
-        <Button asChild variant="outline" size="sm">
-          <a
-            href="https://commonality.co/docs/checks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn more
-            <ExternalLink className="ml-1 h-3 w-3 -translate-y-px" />
-          </a>
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
-
 export function ConstraintTitle({ result }: { result: ConstraintResult }) {
   return (
     <div className="flex items-center overflow-hidden w-full relative">
@@ -222,7 +185,7 @@ export function ConstraintContent({ result }: { result: ConstraintResult }) {
                   variant="outline"
                   key={tag}
                   className={cn('inline-block min-w-0', {
-                    '!border-destructive !text-destructive':
+                    'border-destructive text-destructive':
                       isDisallowAll || isDisallowed,
                     'border-success text-success': isAllowAll || isAllowed,
                   })}
@@ -267,7 +230,7 @@ export function ConstraintResults({
   results: ConstraintResult[];
 }) {
   if (!results || results.length === 0) {
-    return <ConstraintOnboardingCard />;
+    return <ConstraintsOnboardingCard />;
   }
 
   const resultsByPackageName = useMemo(() => {
@@ -302,8 +265,8 @@ export function ConstraintResults({
 
           return (
             <div key={packageName} className="grid relative">
-              <div className="sticky top-0 z-10">
-                <p className="font-medium text-base bg-background">
+              <div className="sticky top-0 z-10 overflow-hidden">
+                <p className="font-medium text-base bg-background truncate">
                   {packageName}
                 </p>
                 <GradientFade placement="top" className="h-2" />
diff --git a/packages/constraints/ui-constraints/src/constraints-onboarding-card.tsx b/packages/constraints/ui-constraints/src/constraints-onboarding-card.tsx
new file mode 100644
index 00000000..27683e7b
--- /dev/null
+++ b/packages/constraints/ui-constraints/src/constraints-onboarding-card.tsx
@@ -0,0 +1,45 @@
+import {
+  Button,
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@commonalityco/ui-design-system';
+import { ExternalLink, Network } from 'lucide-react';
+
+export function ConstraintsOnboardingCard({
+  title = 'Organize your dependency graph',
+}: {
+  title?: string;
+}) {
+  return (
+    <Card variant="secondary">
+      <CardHeader>
+        <div className="bg-background mb-3 flex h-10 w-10 items-center justify-center rounded-full border">
+          <div className="bg-secondary rounded-full p-1.5">
+            <Network className="h-5 w-5" />
+          </div>
+        </div>
+
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>
+          Prevent endless dependency debugging by limiting the which packages
+          can depend on each other.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button asChild variant="outline" size="sm">
+          <a
+            href="https://commonality.co/docs/checks"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more
+            <ExternalLink className="ml-1 h-3 w-3 -translate-y-px" />
+          </a>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/packages/constraints/ui-constraints/src/dependency-constraints-dialog.test.tsx b/packages/constraints/ui-constraints/src/dependency-constraints-dialog.test.tsx
new file mode 100644
index 00000000..e04a63b3
--- /dev/null
+++ b/packages/constraints/ui-constraints/src/dependency-constraints-dialog.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { DependencyConstraintsDialog } from './dependency-constraints-dialog';
+import { Dependency, ConstraintResult } from '@commonalityco/types';
+import { DependencyType } from '@commonalityco/utils-core';
+
+describe('DependencyConstraintsDialog', () => {
+  it('should render without crashing', () => {
+    render(<DependencyConstraintsDialog dependencies={[]} results={[]} open />);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('should display dependencies and results', () => {
+    const dependencies: Dependency[] = [
+      {
+        source: 'pkg-a',
+        target: 'pkg-b',
+        version: '1.0.0',
+        type: DependencyType.DEVELOPMENT,
+      },
+    ];
+    const results: ConstraintResult[] = [
+      {
+        dependencyPath: [
+          {
+            source: 'pkg-a',
+            target: 'pkg-b',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ],
+        constraint: { allow: ['tag-one'] },
+        isValid: true,
+        filter: 'tag-one',
+      },
+    ];
+    render(
+      <DependencyConstraintsDialog
+        open
+        dependencies={dependencies}
+        results={results}
+      />,
+    );
+
+    expect(screen.getByText('pkg-a')).toBeInTheDocument();
+    expect(screen.getByText('pkg-b')).toBeInTheDocument();
+    expect(screen.getByText('1.0.0')).toBeInTheDocument();
+    expect(screen.getByText('development')).toBeInTheDocument();
+    expect(screen.getByText('pass')).toBeInTheDocument();
+  });
+
+  it('should show onboarding when results and dependencies are empty', () => {
+    render(
+      <DependencyConstraintsDialog
+        open
+        dependencies={[
+          {
+            source: 'pkg-a',
+            target: 'pkg-b',
+            version: '1.0.0',
+            type: DependencyType.DEVELOPMENT,
+          },
+        ]}
+        results={[]}
+      />,
+    );
+
+    expect(
+      screen.getByText('Organize your dependency graph'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/constraints/ui-constraints/src/dependency-constraints-dialog.tsx b/packages/constraints/ui-constraints/src/dependency-constraints-dialog.tsx
new file mode 100644
index 00000000..bdb247c7
--- /dev/null
+++ b/packages/constraints/ui-constraints/src/dependency-constraints-dialog.tsx
@@ -0,0 +1,120 @@
+'use client';
+import { ConstraintResult, Dependency } from '@commonalityco/types';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  ScrollArea,
+} from '@commonalityco/ui-design-system';
+import { ConstraintContent } from './constraint-results';
+import { DependencyType } from '@commonalityco/utils-core';
+import { CornerDownRight } from 'lucide-react';
+import { ComponentProps } from 'react';
+import { ConstraintsOnboardingCard } from './constraints-onboarding-card';
+
+const TextByType = {
+  [DependencyType.PRODUCTION]: 'production',
+  [DependencyType.DEVELOPMENT]: 'development',
+  [DependencyType.PEER]: 'peer',
+};
+
+export function DependencyConstraintsDialog({
+  dependencies,
+  results,
+  ...props
+}: ComponentProps<typeof Dialog> & {
+  dependencies: Dependency[];
+  results: ConstraintResult[];
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <div className="grid gap-1">
+              <p className="truncate leading-6">{dependencies[0]?.source}</p>
+              <div className="flex flex-nowrap items-center space-x-2 overflow-hidden">
+                <CornerDownRight className="h-4 w-4 min-w-0 shrink-0" />
+                <p className="truncate min-w-0 leading-6">
+                  {dependencies[0]?.target}
+                </p>
+              </div>
+            </div>
+          </DialogTitle>
+        </DialogHeader>
+        <ScrollArea className="max-h-[450px]">
+          <div className="flex flex-col gap-4 py-2">
+            {dependencies.map((dependency) => {
+              const resultsForDependency = results.filter((result) =>
+                result.dependencyPath.some(
+                  (dep) =>
+                    dep.source === dependency.source &&
+                    dep.target === dependency.target &&
+                    dep.type === dependency.type,
+                ),
+              );
+
+              const key = `${dependency.source}-${dependency.target}-${dependency.type}`;
+              const isValid = resultsForDependency.every(
+                (result) => result.isValid,
+              );
+
+              if (resultsForDependency.length === 0) {
+                return <ConstraintsOnboardingCard key={key} />;
+              }
+
+              return (
+                <div key={key}>
+                  <div className="flex gap-4 items-center mb-3">
+                    {isValid ? (
+                      <span className="text-success font-medium font-mono">
+                        pass
+                      </span>
+                    ) : (
+                      <span className="text-destructive font-medium font-mono">
+                        fail
+                      </span>
+                    )}
+                    <p className="font-medium font-mono">
+                      {`${TextByType[dependency.type]} `}
+                      <span className="text-muted-foreground">
+                        {dependency.version}
+                      </span>
+                    </p>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    {resultsForDependency.length > 0 ? (
+                      resultsForDependency.map((result) => (
+                        <ConstraintContent
+                          result={result}
+                          key={JSON.stringify(result.dependencyPath)}
+                        />
+                      ))
+                    ) : (
+                      <p className="text-muted-foreground text-xs mt-2">
+                        No constraints for dependency
+                      </p>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => props.onOpenChange?.(false)}
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/constraints/ui-constraints/src/feature-graph-dependency-tooltip.tsx b/packages/constraints/ui-constraints/src/feature-graph-dependency-tooltip.tsx
index 4bf32e02..b152abe5 100644
--- a/packages/constraints/ui-constraints/src/feature-graph-dependency-tooltip.tsx
+++ b/packages/constraints/ui-constraints/src/feature-graph-dependency-tooltip.tsx
@@ -1,10 +1,10 @@
 'use client';
-import { TooltipDependency } from './tooltip-dependency';
 import { GraphContext } from './graph-provider';
 import { Dependency } from '@commonalityco/types';
-import { GraphTooltip } from './graph-tooltip';
+import { DependencyConstraintsDialog } from './dependency-constraints-dialog';
 
 export function FeatureGraphDependencyTooltip() {
+  const { send } = GraphContext.useActorRef();
   const selectedEdge = GraphContext.useSelector(
     (state) => state.context.selectedEdge,
   );
@@ -23,22 +23,16 @@ export function FeatureGraphDependencyTooltip() {
   });
 
   return (
-    <>
-      {selectedEdge && data && (
-        <GraphTooltip
-          key={data.id}
-          content={
-            <TooltipDependency
-              dependencies={data.dependencies}
-              results={resultsForEdge}
-            />
-          }
-          open={true}
-          reference={selectedEdge.popperRef()}
-          placement="top"
-        ></GraphTooltip>
-      )}
-    </>
+    <DependencyConstraintsDialog
+      open={Boolean(selectedEdge && data)}
+      results={resultsForEdge || []}
+      dependencies={data?.dependencies || []}
+      onOpenChange={(open) => {
+        if (!open) {
+          send({ type: 'UNSELECT' });
+        }
+      }}
+    />
   );
 }
 
diff --git a/packages/constraints/ui-constraints/src/graph-header.tsx b/packages/constraints/ui-constraints/src/graph-header.tsx
index 4231446a..a0ba2cb6 100644
--- a/packages/constraints/ui-constraints/src/graph-header.tsx
+++ b/packages/constraints/ui-constraints/src/graph-header.tsx
@@ -2,22 +2,13 @@ import { ConstraintResult } from '@commonalityco/types';
 import {
   Badge,
   Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
   Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
   DialogTrigger,
   cn,
-  ScrollArea,
 } from '@commonalityco/ui-design-system';
-import { Check, ChevronDown, X } from 'lucide-react';
-import { ConstraintResults } from '.';
-import { GradientFade } from '@commonalityco/ui-core';
+import { Check, X } from 'lucide-react';
 import { useState } from 'react';
-import { ConstraintsDialogContent } from './constraints-dialog-content';
+import { AllConstraintsDialog } from './all-constraints-dialog';
 
 function GraphHeader({
   totalCount,
@@ -73,15 +64,11 @@ function GraphHeader({
           </p>
         </div>
 
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild>
-            <Button variant="secondary">View all constraints</Button>
-          </DialogTrigger>
-          <ConstraintsDialogContent
-            results={results}
-            onClose={() => setOpen(false)}
-          />
-        </Dialog>
+        <AllConstraintsDialog
+          results={results}
+          onOpenChange={() => setOpen(false)}
+        />
+
         {children}
       </div>
     </div>
diff --git a/packages/constraints/ui-constraints/src/index.ts b/packages/constraints/ui-constraints/src/index.ts
index 755e8b60..0565ce53 100644
--- a/packages/constraints/ui-constraints/src/index.ts
+++ b/packages/constraints/ui-constraints/src/index.ts
@@ -18,3 +18,5 @@ export { TooltipPackage } from './tooltip-package';
 export { GraphToolbar } from './graph-toolbar';
 export { GraphTooltip } from './graph-tooltip';
 export { GraphChartLoading } from './graph-chart-loading';
+export { DependencyConstraintsDialog } from './dependency-constraints-dialog';
+export { AllConstraintsDialog } from './all-constraints-dialog';
diff --git a/packages/constraints/ui-constraints/src/tooltip-dependency.tsx b/packages/constraints/ui-constraints/src/tooltip-dependency.tsx
index 0462e5d4..68338999 100644
--- a/packages/constraints/ui-constraints/src/tooltip-dependency.tsx
+++ b/packages/constraints/ui-constraints/src/tooltip-dependency.tsx
@@ -66,12 +66,7 @@ export function TooltipDependency({
                           key={result.filter}
                           className="space-y-2"
                         >
-                          <AccordionTrigger>
-                            <FilterTitle
-                              isValid={result.isValid}
-                              filter={result.filter}
-                            />
-                          </AccordionTrigger>
+                          <AccordionTrigger></AccordionTrigger>
                           <AccordionContent>
                             <ConstraintContent result={result} />
                           </AccordionContent>
diff --git a/packages/shared/ui-core/src/gradient-fade.tsx b/packages/shared/ui-core/src/gradient-fade.tsx
index 86778227..f1abce32 100644
--- a/packages/shared/ui-core/src/gradient-fade.tsx
+++ b/packages/shared/ui-core/src/gradient-fade.tsx
@@ -3,7 +3,7 @@ import { cva, VariantProps } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 
 const gradientFadeStyles = cva(
-  'pointer-events-none sticky z-10 from-background',
+  'pointer-events-none sticky z-5 from-background',
   {
     variants: {
       placement: {
diff --git a/packages/shared/ui-design-system/package.json b/packages/shared/ui-design-system/package.json
index 6326d06c..61d81ae6 100644
--- a/packages/shared/ui-design-system/package.json
+++ b/packages/shared/ui-design-system/package.json
@@ -66,6 +66,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "build": "tsc --build",
+    "dev": "tsc --watch",
     "type-check": "tsc --noEmit"
   },
   "repository": "https://github.com/commonalityco/commonality/packages/shared/ui-design-system"
diff --git a/packages/shared/ui-design-system/src/scroll-area.tsx b/packages/shared/ui-design-system/src/scroll-area.tsx
index ff97d670..c33187e7 100644
--- a/packages/shared/ui-design-system/src/scroll-area.tsx
+++ b/packages/shared/ui-design-system/src/scroll-area.tsx
@@ -30,7 +30,7 @@ const ScrollBar = React.forwardRef<
     ref={reference}
     orientation={orientation}
     className={cn(
-      'flex touch-none select-none transition-colors',
+      'flex touch-none select-none transition-colors z-10',
       orientation === 'vertical' &&
         'h-full w-2.5 border-l border-l-transparent p-[1px]',
       orientation === 'horizontal' &&