diff --git a/packages/oc-docs/src/assets/icons/SendIcon.tsx b/packages/oc-docs/src/assets/icons/SendIcon.tsx
index 19a6b4dd..739e5c5d 100644
--- a/packages/oc-docs/src/assets/icons/SendIcon.tsx
+++ b/packages/oc-docs/src/assets/icons/SendIcon.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import { baseIconProps } from './baseIconProps';
 
+interface SendIconProps {
+  width?: number;
+  height?: number;
+}
+
 /** Paper-plane "send" icon used by the Try action. */
-export const SendIcon: React.FC = () => (
-  <svg {...baseIconProps} width={11} height={11}>
+export const SendIcon: React.FC<SendIconProps> = ({ width = 11, height = 11 }) => (
+  <svg {...baseIconProps} width={width} height={height}>
     <line x1="22" y1="2" x2="11" y2="13" />
     <polygon points="22 2 15 22 11 13 2 9 22 2" />
   </svg>
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
index 7880842b..f552b664 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
@@ -59,7 +59,7 @@ const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({
       // indent step). Right margin keeps the highlight short of the edge: 8px at root,
       // 4px when nested.
       style={{
-        marginLeft: `${(level * 19 + 4) / 16}rem`,
+        marginLeft: `${(level * 19) / 16}rem`,
         paddingLeft: '0.5rem',
         marginRight: level === 0 ? '0.5rem' : '0.25rem'
       }}
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
index cfc625bf..69824b75 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
@@ -9,7 +9,7 @@ export const StyledWrapper = styled.div`
   color: var(--oc-sidebar-color);
 
   .sidebar-items::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem;
   }
   .sidebar-items::-webkit-scrollbar-track {
     background: transparent;
@@ -18,7 +18,7 @@ export const StyledWrapper = styled.div`
   .sidebar-items::-webkit-scrollbar-thumb {
     background-color: transparent;
     border: none;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     transition: background-color 0.4s ease;
   }
   .sidebar-items.scrolling::-webkit-scrollbar-thumb {
@@ -30,13 +30,13 @@ export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     gap: 1px;
-    padding: 10px 6px 0 6px;
+    padding: 0.625rem 0.75rem 0 0.75rem;
   }
 
   .sidebar-divider {
     flex-shrink: 0;
     height: 1px;
-    margin: 8px 0;
+    margin: 0.5rem 0;
     background-color: var(--oc-border-border0);
   }
 
@@ -48,6 +48,6 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 0 0 0 0.375rem;
+    padding: 0 0 0 0.75rem;
   }
 `;
diff --git a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
index 9983c7a1..3f25c5e0 100644
--- a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const StyledWrapper = styled.div`
   max-width: 100rem;
   margin-inline: auto;
-  padding: 2rem 3rem;
+  padding: 1rem 3rem;
 
   @container docs (max-width: 768px) {
     padding: 0.9375rem 1.25rem;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
index 2357b52f..d26defc5 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
@@ -93,7 +93,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <HeadersTab
           headers={headers}
           onHeadersChange={handleHeadersChange}
-          title=""
           description="Add request headers that will be sent with every request in this collection."
         />
       )
@@ -109,7 +108,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           postResponseVars={postResponseVars}
           onPostResponseVarsChange={handlePostResponseVarsChange}
           exprHelp="You can write any valid JS Template Literal here"
-          title=""
         />
       )
     },
@@ -122,7 +120,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           onAuthChange={handleAuthChange}
           onItemChange={handleCollectionChange}
           item={collection}
-          title=""
           description="Configures authentication for the entire collection. This applies to all requests using the Inherit option in the Auth tab."
           showInherit={false}
           showFullAuth={true}
@@ -137,7 +134,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <ScriptsTab
           scripts={scripts}
           onScriptChange={handleScriptChange}
-          title=""
           description="Write pre and post-request scripts that will run before and after any request in this collection is sent."
           showTests={false}
         />
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
index c6dd415d..d3ee459b 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
@@ -104,7 +104,7 @@ interface AssertsTabProps {
 export const AssertsTab: React.FC<AssertsTabProps> = ({
   assertions,
   onAssertionsChange,
-  title = 'Assertions',
+  title,
   description
 }) => {
   const assertionsData: KeyValueRow[] = (assertions || []).map((assertion, index) => ({
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
index 0fa07417..f878b687 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { parse } from 'node-html-parser';
 import { describe, it, expect } from 'vitest';
-import { query } from '../../../../../../test-utils/dom';
+import { getByTestId, query } from '../../../../../../test-utils/dom';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { AuthTab } from './AuthTab';
 
@@ -48,12 +48,12 @@ describe('AuthTab', () => {
     const { root, byTestId } = renderAuth(undefined);
     expect(root.querySelector('.auth-form')).toBeNull();
     expect(byTestId('auth-username')).toBeNull();
-    expect(query(root, '.auth-empty').text.trim()).toBe('No authentication configured.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('No authentication configured.');
   });
 
   it('shows an inherit note for inherited auth', () => {
     const { root } = renderAuth('inherit', { showInherit: true });
-    expect(query(root, '.auth-empty').text.trim()).toBe('Inherits auth from parent collection.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('Inherits auth from parent collection.');
   });
 
   it('renders basic auth with a plain username and a masked, revealable password', () => {
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
index f94abe52..d062097f 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
@@ -3,6 +3,7 @@ import { Field, type SelectOption } from '../../../../../../ui/Field';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { REQUEST_PROTOCOL_KEYS } from '../../../../../../utils/schemaHelpers';
 import { StyledWrapper } from './StyledWrapper';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
 interface AuthTabProps {
   auth: any;
@@ -20,7 +21,7 @@ export const AuthTab: React.FC<AuthTabProps> = ({
   onAuthChange,
   onItemChange,
   item,
-  title = 'Authentication',
+  title,
   description,
   showInherit = false,
   showFullAuth = false
@@ -135,22 +136,22 @@ export const AuthTab: React.FC<AuthTabProps> = ({
 
   const renderBody = () => {
     if (!auth) {
-      return <p className="auth-empty">No authentication configured.</p>;
+      return <NoContentText text='No authentication configured.' />
     }
     if (auth === 'inherit') {
-      return <p className="auth-empty">Inherits auth from parent collection.</p>;
+      return <NoContentText text='Inherits auth from parent collection.' />
     }
     if (showFullAuth) {
       return <div className="auth-form">{renderForm()}</div>;
     }
-    return <p className="auth-empty">{title} auth is configured elsewhere.</p>;
+    return <NoContentText text='{title} auth is configured elsewhere.' />
   };
 
   return (
     <StyledWrapper className="auth-tab">
       {(Boolean(title) || Boolean(description)) && (
         <div className="auth-header flex items-center justify-between">
-          {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+          {title && <span className="title text-sm font-semibold">{title}</span>}
           {description && <span className="description text-xs leading-tight">{description}</span>}
         </div>
       )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
index 48f7a6f8..b7364401 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
@@ -22,13 +22,6 @@ export const StyledWrapper = styled.div`
     gap: 1rem;
   }
 
-  .auth-empty {
-    margin: 0;
-    font-style: italic;
-    font-size: 0.8125rem;
-    color: var(--text-muted);
-  }
-
   .auth-form {
     display: flex;
     flex-direction: column;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
index c2d2c1db..244548d5 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
@@ -7,12 +7,13 @@ import styled from '@emotion/styled';
 export const TriggerButton = styled.button`
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0;
+  padding: 0 0 0.25rem;
   background: transparent;
   border: none;
   font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
   color: var(--oc-primary-text);
   cursor: pointer;
   user-select: none;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
index d4e3821e..c68b9edd 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
@@ -68,13 +68,15 @@ const HeadersDisplay: React.FC<Omit<HeadersTabProps, 'title' | 'description'>> =
   );
 };
 
-export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title = 'Headers', description }) => {
+export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title, description }) => {
   return (
     <StyledWrapper className="space-y-3">
-      <div className="flex items-center justify-between mb-4">
-        {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
-        {description && <span className="description text-xs leading-tight">{description}</span>}
-      </div>
+      {(Boolean(title) || Boolean(description)) && (
+        <div className="flex items-center justify-between mb-4">
+          {title && <span className="title text-sm font-semibold">{title}</span>}
+          {description && <span className="description text-xs leading-tight">{description}</span>}
+        </div>
+      )}
       <HeadersDisplay headers={headers} onHeadersChange={onHeadersChange} />
     </StyledWrapper>
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
index 5bcbbaf2..22c69229 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
@@ -3,10 +3,18 @@ import { useMemo } from 'react';
 import { StyledWrapper } from './StyledWrapper';
 import { EmptyState } from '../../../../../../ui/EmptyState/EmptyState';
 import { BookIcon } from '../../../../../../assets/icons';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
-const OverviewTab: React.FC<{ docs?: string; emptyStateSubheading: string }> = ({
+interface OverviewTabProps {
+  docs?: string;
+  emptyStateSubheading: string;
+  displayEmptyStateBox?: boolean;
+}
+
+const OverviewTab: React.FC<OverviewTabProps> = ({
   docs,
-  emptyStateSubheading
+  emptyStateSubheading,
+  displayEmptyStateBox = true
 }) => {
   const md = useMarkdownRenderer();
   const docsHtml = useMemo(() => {
@@ -14,13 +22,15 @@ const OverviewTab: React.FC<{ docs?: string; emptyStateSubheading: string }> = (
   }, [md, docs]);
 
   if (!docsHtml) {
-    return (
+    return displayEmptyStateBox ? (
       <EmptyState
         testId="overview-empty"
         icon={<BookIcon />}
         heading="No overview content yet"
         subheading={emptyStateSubheading}
       />
+    ) : (
+      <NoContentText text="No overview content yet" />
     );
   }
 
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
similarity index 92%
rename from packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
rename to packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
index d2e4b9db..ab64f4f7 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import KeyValueTable, { type KeyValueRow } from '../../../../../components/KeyValueTable/KeyValueTable';
+import KeyValueTable, { type KeyValueRow } from '../../../../../KeyValueTable/KeyValueTable';
+import { StyledWrapper } from './StyledWrapper';
 
 interface ParamsTabProps {
   params: Array<{ name?: string; value?: string; disabled?: boolean; type?: string }>;
@@ -38,11 +39,11 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
 }) => (
   <div className="space-y-3">
     <div className="flex items-center justify-between mb-2">
-      <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+      <span className="params-section-title">
         {title}
       </span>
       {description && (
-        <span className="text-xs leading-tight" style={{ color: 'var(--text-secondary)' }}>
+        <span className="text-xs leading-tight description">
           {description}
         </span>
       )}
@@ -51,7 +52,6 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
       data={data}
       onChange={onChange}
       keyPlaceholder={keyLabel}
-      valuePlaceholder="Value"
       showEnabled={showEnabled}
       showActions={showActions}
       disableNewRow={disableNewRow}
@@ -109,7 +109,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
   const hasPath = pathData.length > 0;
 
   return (
-    <div className="space-y-4">
+    <StyledWrapper className="space-y-4">
       {/* Query table: always shown so query params can be viewed/added
           regardless of whether the request currently has any. */}
       <ParamsSection
@@ -132,7 +132,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
           readOnlyKey={true}
         />
       )}
-    </div>
+    </StyledWrapper>
   );
 };
 
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts
new file mode 100644
index 00000000..c3836d38
--- /dev/null
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+
+  .description {
+    color: 'var(--text-secondary)'
+  }
+  
+  .params-section-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--oc-colors-text-subtext2);
+  }
+`;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
index 215f79a8..e3a2b995 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
@@ -1,51 +1,53 @@
 import React from 'react';
+import NoContentText from '../../../../../ui/NoContentText/NoContentText';
 
 interface ResponseHeadersTabProps {
   headers?: Record<string, any>;
 }
 
 const ResponseHeadersTab: React.FC<ResponseHeadersTabProps> = ({ headers }) => {
+
+  if(!headers) {
+    return (
+      <NoContentText text='No response headers' />
+    )
+  }
+
   return (
     <div className="h-full overflow-auto">
       <div className="py-3">
-        {headers ? (
-          <div className="space-y-0">
-            {Object.entries(headers).map(([key, value], index) => (
-              <div 
-                key={key} 
-                className="flex items-center gap-4 py-1.5 border-b"
+        <div className="space-y-0">
+          {Object.entries(headers).map(([key, value], index) => (
+            <div 
+              key={key} 
+              className="flex items-center gap-4 py-1.5 border-b"
+              style={{ 
+                borderColor: 'var(--border-color)',
+                borderBottomWidth: index === Object.entries(headers).length - 1 ? '0' : '1px'
+              }}
+            >
+              <span 
+                className="font-mono text-xs font-medium" 
+                style={{ 
+                  color: 'var(--text-primary)', 
+                  minWidth: '180px',
+                  letterSpacing: '0.01em'
+                }}
+              >
+                {key}
+              </span>
+              <span 
+                className="font-mono text-xs flex-1 break-all" 
                 style={{ 
-                  borderColor: 'var(--border-color)',
-                  borderBottomWidth: index === Object.entries(headers).length - 1 ? '0' : '1px'
+                  color: 'var(--text-secondary)',
+                  letterSpacing: '0.01em'
                 }}
               >
-                <span 
-                  className="font-mono text-xs font-medium" 
-                  style={{ 
-                    color: 'var(--text-primary)', 
-                    minWidth: '180px',
-                    letterSpacing: '0.01em'
-                  }}
-                >
-                  {key}
-                </span>
-                <span 
-                  className="font-mono text-xs flex-1 break-all" 
-                  style={{ 
-                    color: 'var(--text-secondary)',
-                    letterSpacing: '0.01em'
-                  }}
-                >
-                  {String(value)}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-12" style={{ color: 'var(--text-secondary)' }}>
-            <span className="text-xs">No response headers</span>
-          </div>
-        )}
+                {String(value)}
+              </span>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
index 2e891565..8cbfd435 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
@@ -20,7 +20,7 @@ interface ScriptsTabProps {
 export const ScriptsTab: React.FC<ScriptsTabProps> = ({
   scripts,
   onScriptChange,
-  title = 'Scripts',
+  title,
   description,
   showTests = true
 }) => {
@@ -65,10 +65,12 @@ export const ScriptsTab: React.FC<ScriptsTabProps> = ({
 
   return (
     <StyledWrapper className="space-y-4">
-      <div className="flex items-center justify-between mb-4">
-        {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
-        {description && <span className="description text-xs leading-tight">{description}</span>}
-      </div>
+      {(Boolean(title) || Boolean(description)) && (
+        <div className="flex items-center justify-between mb-4">
+          {title && <span className="title text-sm font-semibold">{title}</span>}
+          {description && <span className="description text-xs leading-tight">{description}</span>}
+        </div>
+      )}
 
       <div className="space-y-4">
         <Tabs
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
index 977b379e..d556f857 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import type { TestResultsResponse, AssertionResultsResponse } from '../../../../../runner';
+import NoContentText from '../../../../../ui/NoContentText/NoContentText';
 
 interface TestResultsTabProps {
   testResults?: TestResultsResponse;
@@ -15,16 +16,7 @@ const TestResultsTab: React.FC<TestResultsTabProps> = ({ testResults, assertionR
 
   if (!hasTests && !hasAssertions) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <div className="text-center py-12">
-          <div className="w-16 h-16 mx-auto mb-4 opacity-50">
-            <svg fill="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-          </div>
-          <p style={{ color: 'var(--text-secondary)' }}>No tests or assertions were run</p>
-        </div>
-      </div>
+      <NoContentText text='No tests or assertions were run' />
     );
   }
 
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
index 1bc4b7ac..16751f89 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
@@ -16,7 +16,7 @@ export const TestsTab: React.FC<TestsTabProps> = ({ scripts, onScriptChange, tit
     <StyledWrapper className="space-y-3">
       {(Boolean(title) || Boolean(description)) && (
         <div className="flex items-center justify-between mb-4">
-          {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+          {title && <span className="title text-sm font-semibold">{title}</span>}
           {description && <span className="description text-xs leading-tight">{description}</span>}
         </div>
       )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
index e8911159..c1be4a7b 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
@@ -70,7 +70,6 @@ export const StyledWrapper = styled.div`
   .env-card .value-input {
     flex: 0 1 auto;
     field-sizing: content;
-    min-width: 40px;
     max-width: 100%;
     border: none;
     outline: none;
@@ -94,7 +93,6 @@ export const StyledWrapper = styled.div`
 
   .env-card .value .var-type {
     flex-shrink: 0;
-    margin-left: auto;
   }
 
   .env-card .delete {
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
index 013a4dc1..2289cf90 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
@@ -9,13 +9,14 @@ export const StyledWrapper = styled.div`
   background-color: var(--oc-background-base);
 
   .env-header {
-    padding: 16px 24px 0;
+    padding: 1rem 1.5rem 0;
     flex-shrink: 0;
   }
 
   .env-title {
-    font-size: 18px;
+    font-size: 1.125rem;
     font-weight: 600;
+    font-size: 0.8125rem;
     color: var(--oc-text);
   }
 
@@ -32,14 +33,14 @@ export const StyledWrapper = styled.div`
   .env-pills {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    padding: 16px 24px;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
   }
 
   .env-pill {
     display: inline-flex;
     align-items: center;
-    padding: 6px 12px;
+    padding: 0.25rem 0.5rem;
     border: 1px solid var(--oc-border-border2);
     border-radius: var(--oc-border-radius-md);
     background: transparent;
@@ -58,8 +59,7 @@ export const StyledWrapper = styled.div`
 
   .env-pill.active {
     color: var(--oc-text);
-    border-color: var(--oc-text-link);
-    background: color-mix(in srgb, var(--oc-text-link) 8%, transparent);
+    border-color: var(--primary-color);
   }
 
   .env-tabs-area {
@@ -68,10 +68,10 @@ export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     min-height: 0;
-    padding: 0 24px 24px;
+    padding: 0 1.5rem 1.5rem;
   }
 
   .env-tabs-area .tab-content {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 `;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
index ff74cff8..274c4464 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
@@ -138,7 +138,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <HeadersTab
       headers={folder.request?.headers || []}
       onHeadersChange={handleHeadersChange}
-      title=""
       description="Request headers that will be sent with every request inside this folder."
     />
   );
@@ -147,7 +146,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <VariablesTab
       variables={folder.request?.variables || []}
       onVariablesChange={handleVariablesChange}
-      title=""
       description="Variables available to every request inside this folder."
     />
   );
@@ -158,7 +156,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
       onAuthChange={handleAuthChange}
       onItemChange={handleFolderAuthChange}
       item={folder}
-      title=""
       description="Configures authentication for this folder. This applies to all requests using the Inherit option in the Auth tab."
       showInherit={true}
       showFullAuth={true}
@@ -171,7 +168,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <ScriptsTab
       scripts={scripts}
       onScriptChange={handleScriptChange}
-      title=""
       description="Pre and post-request scripts that will run before and after any request inside this folder is sent."
       showTests={false}
     />
@@ -181,7 +177,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <TestsTab
       scripts={scripts}
       onScriptChange={handleScriptChange}
-      title=""
       description="These tests will run any time a request in this folder is sent."
     />
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index 4c937b00..41eba746 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -5,7 +5,7 @@ import Tabs from '../../../../../../ui/Tabs/Tabs';
 import { KeyValueRow } from '../../../../../../components/KeyValueTable/KeyValueTable';
 import { rowToVariable } from '../../../../../../utils/variableDataType';
 import HeadersTab from '../../Common/HeadersTab/HeadersTab';
-import ParamsTab from '../../Common/ParamsTab';
+import ParamsTab from '../../Common/ParamsTab/ParamsTab';
 import BodyTab from '../../Common/BodyTab';
 import BodyModeSelector from '../../Common/BodyModeSelector/BodyModeSelector';
 import AuthTab from '../../Common/AuthTab/AuthTab';
@@ -147,7 +147,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onVariablesChange={handleRequestVariablesChange}
       postResponseVars={postResponseVars}
       onPostResponseVarsChange={handlePostResponseVarsChange}
-      title=""
       description="These variables will be available to this request."
     />
   );
@@ -156,7 +155,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <HeadersTab
       headers={headers}
       onHeadersChange={handleHeadersChange}
-      title=""
       description="Headers sent with this request."
     />
   );
@@ -175,9 +173,8 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onAuthChange={() => {}} // Not used for full auth
       onItemChange={onItemChange}
       item={item}
-      title=""
-      description="Configures authentication for this request."
       showFullAuth={true}
+      description="Configures authentication for this request."
     />
   );
 
@@ -185,9 +182,8 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <ScriptsTab
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
-      title=""
-      description="Pre and post-request scripts that run before and after this request is sent."
       showTests={false}
+      description="Pre and post-request scripts that run before and after this request is sent."
     />
   );
 
@@ -196,7 +192,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       assertions={assertions}
       onAssertionsChange={handleAssertionsChange}
       title=""
-      description="Assertions that validate the response of this request."
     />
   );
 
@@ -204,7 +199,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <TestsTab
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
-      description="These tests run every time this request is sent."
     />
   );
 
@@ -227,6 +221,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
         <OverviewTab
           docs={getItemDocs(item)}
           emptyStateSubheading="This request has no docs. Add one in Bruno to introduce your API to readers: what it does, who it's for, and how to authenticate."
+          displayEmptyStateBox={false}
         />
       )
     },
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
index 7eaabd34..41e4f500 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
@@ -4,7 +4,8 @@ import ResponseBodyTab from '../../Common/ResponseBodyTab';
 import ResponseHeadersTab from '../../Common/ResponseHeadersTab';
 import TestResultsTab from '../../Common/TestResultsTab';
 import ErrorBanner from '../../../../../../ui/ErrorBanner/ErrorBanner';
-import { StyledWrapper } from './StyledWrapper';
+import { SendIconWrapper, StyledWrapper } from './StyledWrapper';
+import { SendIcon } from '../../../../../../assets/icons';
 
 interface ResponsePaneProps {
   response: any;
@@ -37,15 +38,11 @@ const ResponsePane: React.FC<ResponsePaneProps> = ({ response, isLoading }) => {
 
   if (!response) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 opacity-50">
-            <svg fill="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-            </svg>
-          </div>
-          <p style={{ color: 'var(--text-secondary)' }}>Click Send to make a request</p>
-        </div>
+      <div className="h-full flex flex-col items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
+        <SendIconWrapper className="mb-4 send-icon">
+          <SendIcon width={26} height={24} />
+        </SendIconWrapper>
+        <p style={{ color: 'var(--oc-tabs-secondary-inactive-color)' }}>Click Send to make a request</p>
       </div>
     );
   }
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
index 367a61f5..0acdcbc4 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
@@ -9,4 +9,20 @@ export const StyledWrapper = styled.div`
     min-height: 0;
     overflow-y: auto;
   }
+
+  & .send-icon {
+    padding: 0.5625rem;
+    border-radius: 50%;
+    background: var(--oc-background-mantle);
+  }
 `;
+
+export const SendIconWrapper = styled.div`
+  padding: 0.5625rem;
+  border-radius: 50%;
+  background: var(--oc-background-mantle);
+
+  svg {
+    color: var(--text-muted);
+  }
+`
diff --git a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
index 4af54756..bcae86de 100644
--- a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
@@ -10,9 +10,9 @@ export const StyledWrapper = styled.div`
   .controls {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     flex-shrink: 0;
-    padding: 12px;
+    padding: 0.75rem;
   }
 
   .controls > :first-child {
@@ -22,9 +22,9 @@ export const StyledWrapper = styled.div`
 
   .controls .env-switcher-trigger {
     width: 100%;
-    height: 28px;
+    height: 1.75rem;
     justify-content: space-between;
-    padding: 5px 8px;
+    padding: 0.3125rem 0.5rem;
     border-radius: var(--oc-radius);
   }
 
@@ -34,8 +34,8 @@ export const StyledWrapper = styled.div`
 
   .env-settings {
     flex: none;
-    width: 28px;
-    height: 28px;
+    width: 1.75rem;
+    height: 1.75rem;
     border: 1px solid var(--oc-border-border2);
     border-radius: var(--oc-radius);
     color: var(--text-secondary);
@@ -55,7 +55,7 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 4px 6px 12px;
+    padding: 0.25rem 0.75rem 0.75rem;
   }
 
   &.mobile .navlink-main {
diff --git a/packages/oc-docs/src/components/PrevNext/PrevNext.tsx b/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
index e13ceae4..a5b22a2b 100644
--- a/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
+++ b/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import type { SeqNeighbor } from '../../routing/types';
+import type { PageType, SeqNeighbor } from '../../routing/types';
 import { getMethodColorVar } from '../../theme/methodColors';
 import { getShortMethod } from '../../utils/request';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../assets/icons';
@@ -8,12 +8,14 @@ import { StyledWrapper } from './StyledWrapper';
 
 const toPath = (slug: string) => `/${slug}`;
 
-const MethodTag: React.FC<{ method?: string }> = ({ method }) =>
+const MethodTag: React.FC<{ method?: string, type: PageType }> = ({ method, type }) =>
   method ? (
     <span className="prevnext-method" style={{ color: getMethodColorVar(method) }}>
       {getShortMethod(method)}
     </span>
-  ) : null;
+  ) : type === 'script' ? (
+    <span className="prevnext-method" style={{ color: 'var(--oc-primary-text)' }}>JS</span>
+  ): null;
 
 const Card: React.FC<{ dir: 'prev' | 'next'; neighbor: SeqNeighbor; search: string }> = ({ dir, neighbor, search }) => (
   <Link
@@ -29,7 +31,7 @@ const Card: React.FC<{ dir: 'prev' | 'next'; neighbor: SeqNeighbor; search: stri
     <span className="prevnext-textcol">
       <span className="prevnext-label">{dir === 'prev' ? 'Previous' : 'Next'}</span>
       <span className="prevnext-name">
-        <MethodTag method={neighbor.method} />
+        <MethodTag method={neighbor.method} type={neighbor.type} />
         <span className="prevnext-name-text">{neighbor.name}</span>
       </span>
     </span>
diff --git a/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts b/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
index 1e63b993..f0b43daf 100644
--- a/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
@@ -74,7 +74,7 @@ export const StyledWrapper = styled.nav`
     max-width: 100%;
     min-width: 0;
     font-size: 0.8125rem;
-    line-height: 1;
+    line-height: 1.2;
     font-weight: 600;
     color: var(--oc-text);
   }
diff --git a/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts b/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
index 6d34c45b..7aea371d 100644
--- a/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
 export const StyledWrapper = styled.h2`
-  font-weight: 600;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1;
   font-size: var(--oc-font-size-base);
   letter-spacing: 0;
   color: var(--text-primary);
diff --git a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
index b078f674..cbdb8ce4 100644
--- a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
+++ b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
@@ -25,8 +25,8 @@ export const StyledWrapper = styled.div`
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
-    margin-top: 2rem;
-    padding-top: 2rem;
+    margin-top: 1.75rem;
+    padding-top: 1.625rem;
     border-top: 1px solid var(--border-color);
   }
 
diff --git a/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx b/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx
new file mode 100644
index 00000000..96f4d8b9
--- /dev/null
+++ b/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+interface NoContentTextProps {
+  className?: string;
+  text: string;
+  testId?: string
+}
+
+const NoContentText : React.FC<NoContentTextProps> = ({ 
+  className,
+  text,
+  testId = 'no-content-text' 
+}) => {
+  return (
+    <StyledWrapper className={className} data-testid={testId}>
+      {text}
+    </StyledWrapper>
+  )
+}
+
+export default NoContentText
\ No newline at end of file
diff --git a/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx b/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx
new file mode 100644
index 00000000..b642faaf
--- /dev/null
+++ b/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.p`
+  font-style: italic;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+`;