diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorDetailTabs.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorDetailTabs.tsx
index 93f3d5c71..07b33859f 100644
--- a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorDetailTabs.tsx
+++ b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorDetailTabs.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import { Comments } from '@/components/comments/Comments';
 import { VendorRiskAssessmentView } from '@/components/vendor-risk-assessment/VendorRiskAssessmentView';
+import { CommentEntityType } from '@db';
 import type { Member, User, Vendor } from '@db';
 import type { Prisma } from '@prisma/client';
 import {
@@ -16,6 +18,7 @@ import {
 import { useState } from 'react';
 import { VendorActions } from './VendorActions';
 import { VendorPageClient } from './VendorPageClient';
+import { TaskItems } from '@/components/task-items/TaskItems';
 
 // Vendor with risk assessment data merged from GlobalVendors
 type VendorWithRiskAssessment = Vendor & {
@@ -73,6 +76,8 @@ export function VendorDetailTabs({
                 <TabsList variant="underline">
                   <TabsTrigger value="overview">Overview</TabsTrigger>
                   <TabsTrigger value="risk-assessment">Risk Assessment</TabsTrigger>
+                  <TabsTrigger value="tasks">Tasks</TabsTrigger>
+                  <TabsTrigger value="comments">Comments</TabsTrigger>
                 </TabsList>
               )
             }
@@ -90,7 +95,6 @@ export function VendorDetailTabs({
             onEditSheetOpenChange={setIsEditSheetOpen}
           />
         </TabsContent>
-
         <TabsContent value="risk-assessment">
           <Stack gap="md">
             {riskAssessmentData ? (
@@ -115,6 +119,16 @@ export function VendorDetailTabs({
             )}
           </Stack>
         </TabsContent>
+        {!isViewingTask && (
+          <TabsContent value="tasks">
+            <TaskItems entityId={vendorId} entityType="vendor" organizationId={orgId} />
+          </TabsContent>
+        )}
+        {!isViewingTask && (
+          <TabsContent value="comments">
+            <Comments entityId={vendorId} entityType={CommentEntityType.vendor} organizationId={orgId} />
+          </TabsContent>
+        )}
       </PageLayout>
     </Tabs>
   );
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorHeader.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorHeader.tsx
index 63e112456..87b3d1b66 100644
--- a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorHeader.tsx
+++ b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorHeader.tsx
@@ -93,55 +93,51 @@ export function VendorHeader({ vendor, isEditSheetOpen, onEditSheetOpenChange }:
 
   return (
     <>
-      <div className="mb-4 space-y-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <h1 className="text-lg font-semibold text-foreground">{vendor.name}</h1>
-          {certifications.filter((cert) => cert.status === 'verified').length > 0 && (
-            <div className="flex flex-wrap items-center gap-2">
-              {certifications
-                .filter((cert) => {
-                  // Only show verified certifications
-                  return cert.status === 'verified';
-                })
-                .map((cert, index) => {
-                  const IconComponent = getCertificationIcon(cert);
-
-                  if (!IconComponent) return null;
-
-                  const iconContent = (
-                    <div
-                      className={cn(
-                        'inline-flex items-center justify-center',
-                        'transition-all duration-300 ease-out',
-                        'w-[24px] h-[28px] shrink-0 overflow-hidden', // Proportionally smaller
-                        cert.url && ['cursor-pointer', 'hover:scale-[1.02]', 'active:scale-[0.99]'],
-                      )}
-                      title={cert.type} // Show full text on hover
+      <div className="mb-4 space-y-2">
+        {certifications.filter((cert) => cert.status === 'verified').length > 0 && (
+          <div className="flex flex-wrap items-center gap-2">
+            {certifications
+              .filter((cert) => {
+                // Only show verified certifications
+                return cert.status === 'verified';
+              })
+              .map((cert, index) => {
+                const IconComponent = getCertificationIcon(cert);
+
+                if (!IconComponent) return null;
+
+                const iconContent = (
+                  <div
+                    className={cn(
+                      'inline-flex items-center justify-center',
+                      'transition-all duration-300 ease-out',
+                      'w-[24px] h-[28px] shrink-0 overflow-hidden', // Proportionally smaller
+                      cert.url && ['cursor-pointer', 'hover:scale-[1.02]', 'active:scale-[0.99]'],
+                    )}
+                    title={cert.type} // Show full text on hover
+                  >
+                    <IconComponent className="h-[24px] w-[24px] max-h-[24px] max-w-[24px]" />
+                  </div>
+                );
+
+                if (cert.url) {
+                  return (
+                    <Link
+                      key={`${cert.type}-${index}`}
+                      href={cert.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-block"
                     >
-                      <IconComponent className="h-[24px] w-[24px] max-h-[24px] max-w-[24px]" />
-                    </div>
+                      {iconContent}
+                    </Link>
                   );
+                }
 
-                  if (cert.url) {
-                    return (
-                      <Link
-                        key={`${cert.type}-${index}`}
-                        href={cert.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-block"
-                      >
-                        {iconContent}
-                      </Link>
-                    );
-                  }
-
-                  return <div key={`${cert.type}-${index}`}>{iconContent}</div>;
-                })}
-            </div>
-          )}
-        </div>
-        {vendor.description && <p className="text-sm text-muted-foreground">{vendor.description}</p>}
+                return <div key={`${cert.type}-${index}`}>{iconContent}</div>;
+              })}
+          </div>
+        )}
         {links.length > 0 && (
           <div className="flex flex-wrap items-center gap-2 pt-2">
             {links.map((link, index) => {
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx
index 41cfae33d..1b8879647 100644
--- a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx
+++ b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx
@@ -1,9 +1,6 @@
 'use client';
 
-import { Comments } from '@/components/comments/Comments';
-import { TaskItems } from '@/components/task-items/TaskItems';
 import { useVendor, type VendorResponse } from '@/hooks/use-vendors';
-import { CommentEntityType } from '@db';
 import type { Member, User, Vendor } from '@db';
 import type { Prisma } from '@prisma/client';
 import { useMemo } from 'react';
@@ -102,10 +99,6 @@ export function VendorPageClient({
             </div>
           </>
         )}
-        <TaskItems entityId={vendorId} entityType="vendor" organizationId={orgId} />
-        {!isViewingTask && (
-          <Comments entityId={vendorId} entityType={CommentEntityType.vendor} organizationId={orgId} />
-        )}
       </div>
     </>
   );
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/secondary-fields/secondary-fields.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/secondary-fields/secondary-fields.tsx
index f098df2b9..313960633 100644
--- a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/secondary-fields/secondary-fields.tsx
+++ b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/secondary-fields/secondary-fields.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Card, CardContent } from '@comp/ui/card';
 import type { Member, User, Vendor } from '@db';
+import { Section } from '@trycompai/design-system';
 import { UpdateSecondaryFieldsForm } from './update-secondary-fields-form';
 
 export function SecondaryFields({
@@ -12,10 +12,8 @@ export function SecondaryFields({
   assignees: (Member & { user: User })[];
 }) {
   return (
-      <Card>
-      <CardContent className="space-y-4 pt-6">
-          <UpdateSecondaryFieldsForm vendor={vendor} assignees={assignees} />
-        </CardContent>
-      </Card>
+    <Section>
+      <UpdateSecondaryFieldsForm vendor={vendor} assignees={assignees} />
+    </Section>
   );
 }
diff --git a/apps/app/src/components/comments/CommentRichTextField.tsx b/apps/app/src/components/comments/CommentRichTextField.tsx
index d08fd646f..c9198e423 100644
--- a/apps/app/src/components/comments/CommentRichTextField.tsx
+++ b/apps/app/src/components/comments/CommentRichTextField.tsx
@@ -1,17 +1,17 @@
 'use client';
 
+import { createMentionExtension, type MentionUser } from '@comp/ui/editor';
+import { defaultExtensions } from '@comp/ui/editor/extensions';
 import type { JSONContent } from '@tiptap/react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import { useMemo, useEffect, useCallback } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
 import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 
 type EditorSizeStyle = CSSProperties & {
   '--editor-min-height': string;
   '--editor-height': string;
 };
-import { createMentionExtension, type MentionUser } from '@comp/ui/editor';
-import { useDebouncedCallback } from 'use-debounce';
-import { defaultExtensions } from '@comp/ui/editor/extensions';
 
 interface CommentRichTextFieldProps {
   value: JSONContent | null;
@@ -30,19 +30,16 @@ export function CommentRichTextField({
   placeholder = 'Leave a comment... Mention users with @',
   onMentionSelect,
 }: CommentRichTextFieldProps) {
-  const editorSizeStyles: EditorSizeStyle = useMemo(
-    () => ({
-      '--editor-min-height': '120px',
-      '--editor-height': 'auto',
-    }),
-    [],
-  );
+  const editorSizeStyles: EditorSizeStyle = {
+    '--editor-min-height': '80px',
+    '--editor-height': 'auto',
+  };
 
   // Search members for mention suggestions - use the members prop directly
   const searchMembers = useCallback(
     (query: string): MentionUser[] => {
       if (!members || members.length === 0) return [];
-      
+
       // Show first 20 members immediately when query is empty
       if (!query || query.trim() === '') {
         return members.slice(0, 20);
@@ -108,7 +105,8 @@ export function CommentRichTextField({
       editorProps: {
         attributes: {
           class:
-            'comment-editor prose-sm max-w-none focus:outline-none px-3 py-2 text-sm [&_p]:m-0 [&_p]:p-0 [&_p]:text-sm [&_p]:leading-normal',
+            'comment-editor prose-sm max-w-none focus:outline-none p-6 text-sm [&_p]:m-0 [&_p]:p-0 [&_p]:text-sm [&_p]:leading-normal',
+          style: 'min-height: var(--editor-min-height, 240px);',
         },
       },
     },
@@ -131,9 +129,11 @@ export function CommentRichTextField({
   }, [value, editor]);
 
   return (
-    <div className="rounded-md bg-background [&_.ProseMirror_p.is-empty::before]:text-muted-foreground/50" style={editorSizeStyles}>
+    <div
+      className="rounded-md bg-background [&_.ProseMirror_p.is-empty::before]:text-muted-foreground/50"
+      style={editorSizeStyles}
+    >
       <EditorContent editor={editor} />
     </div>
   );
 }
-
diff --git a/apps/app/src/components/risks/charts/RiskMatrixChart.tsx b/apps/app/src/components/risks/charts/RiskMatrixChart.tsx
index 1a0caf1b0..eed49630e 100644
--- a/apps/app/src/components/risks/charts/RiskMatrixChart.tsx
+++ b/apps/app/src/components/risks/charts/RiskMatrixChart.tsx
@@ -63,7 +63,6 @@ const getRiskColor = (level: string) => {
 };
 
 const probabilityLevels = ['Very Likely', 'Likely', 'Possible', 'Unlikely', 'Very Unlikely'];
-const probabilityNumbers = ['5', '4', '3', '2', '1'];
 const probabilityLabels = [
   'Very Likely (5)',
   'Likely (4)',
@@ -183,7 +182,10 @@ export function RiskMatrixChart({
         </div>
       </CardHeader>
       <CardContent>
-        <div className="relative">
+        <div className="relative pl-10">
+          <div className="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 -rotate-90 text-xs text-muted-foreground">
+            Likelihood
+          </div>
           <div>
             <div className="grid grid-cols-6 rounded-lg">
               <div className="h-12" />
@@ -194,11 +196,8 @@ export function RiskMatrixChart({
               ))}
               {probabilityLevels.map((probability, rowIdx) => (
                 <div key={probability} className="contents">
-                  <div
-                    className="mr-4 flex flex-col items-center justify-center"
-                    title={probabilityLabels[rowIdx]}
-                  >
-                    <span className="text-xs">{probabilityNumbers[rowIdx]}</span>
+                  <div className="mr-4 flex flex-col items-end justify-center text-right">
+                    <span className="text-xs">{probabilityLevels[rowIdx]}</span>
                   </div>
                   {impactLevels.map((impact, colIdx) => {
                     const cell = riskData.find(
@@ -230,8 +229,11 @@ export function RiskMatrixChart({
                 </div>
               ))}
             </div>
-            <div className="mt-2 flex justify-center">
-              <span className="text-xs">{'Impact'}</span>
+            <div className="mt-2 grid grid-cols-6">
+              <div />
+              <div className="col-span-5 flex justify-center">
+                <span className="text-xs">Impact</span>
+              </div>
             </div>
           </div>
         </div>