diff --git a/packages/fern-docs/ui/src/mdx/components/card/index.scss b/packages/fern-docs/ui/src/mdx/components/card/index.scss
index f8d61ed8aa..509df1fa22 100644
--- a/packages/fern-docs/ui/src/mdx/components/card/index.scss
+++ b/packages/fern-docs/ui/src/mdx/components/card/index.scss
@@ -12,4 +12,8 @@
   .card-icon.fa-icon {
     @apply bg-accent;
   }
+
+  a.fern-card {
+    text-decoration: unset;
+  }
 }
diff --git a/packages/fern-docs/ui/src/mdx/components/json/JSON.tsx b/packages/fern-docs/ui/src/mdx/components/json/JSON.tsx
index aca8da61e2..432f661e18 100644
--- a/packages/fern-docs/ui/src/mdx/components/json/JSON.tsx
+++ b/packages/fern-docs/ui/src/mdx/components/json/JSON.tsx
@@ -1,6 +1,9 @@
+import { cn, CopyToClipboardButton } from "@fern-docs/components";
+import { useIsMobile } from "@fern-docs/search-ui";
 import dynamic from "next/dynamic";
 import React from "react";
 import { useTheme } from "../../../atoms";
+import "./index.scss";
 
 const JsonView = dynamic(() => import("@microlink/react-json-view"), {
   ssr: false,
@@ -8,33 +11,60 @@ const JsonView = dynamic(() => import("@microlink/react-json-view"), {
 
 export interface JSONProps {
   json: unknown;
+  enableFernClipboard?: boolean;
+  showStringsOnOneLine?: boolean; // Tied to CSS
+  jsonViewProps?: React.ComponentProps<typeof JsonView>;
 }
 
-export const Json: React.FC<JSONProps> = ({ json }) => {
+export const Json: React.FC<JSONProps> = ({
+  json,
+  enableFernClipboard = true,
+  showStringsOnOneLine = true,
+  jsonViewProps,
+}) => {
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   return (
-    <div className="mb-6 mt-4 flex w-full rounded-lg border border-[var(--grayscale-a5)] p-3 shadow-sm">
+    <div
+      className={cn(
+        "not-prose group/cb-container bg-card relative mb-6 mt-4 flex w-full rounded-lg border border-[var(--grayscale-a5)] p-3 shadow-sm",
+        showStringsOnOneLine && !isMobile && "show-strings-on-one-line"
+      )}
+    >
       <JsonView
         src={json as object}
         name={false}
         theme={theme === "dark" ? "ashes" : "rjv-default"}
         displayDataTypes={false}
-        displayObjectSize={false}
+        displayObjectSize={true}
         enableClipboard={false}
         collapsed={1}
         style={{
+          width: "100%",
           backgroundColor: "transparent",
           fontFamily: "var(--typography-code-font-family)",
           fontSize: "0.875rem",
           lineHeight: "1.25rem",
         }}
-        iconStyle="triangle"
+        iconStyle="square"
         indentWidth={4}
-        collapseStringsAfterLength={100}
+        collapseStringsAfterLength={60}
         groupArraysAfterLength={100}
         quotesOnKeys={true}
+        displayArrayKey={true}
+        {...jsonViewProps}
       />
+      {enableFernClipboard && (
+        <CopyToClipboardButton
+          className={cn(
+            "fern-copy-button absolute z-20",
+            "opacity-0 backdrop-blur transition group-hover/cb-container:opacity-100",
+            "right-3 top-2"
+          )}
+          content={() => JSON.stringify(json)}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/fern-docs/ui/src/mdx/components/json/index.scss b/packages/fern-docs/ui/src/mdx/components/json/index.scss
new file mode 100644
index 0000000000..826e8c1609
--- /dev/null
+++ b/packages/fern-docs/ui/src/mdx/components/json/index.scss
@@ -0,0 +1,49 @@
+.react-json-view {
+  .icon-container {
+    transform: translateY(2px); // Positions the +/- icon vertically middle
+  }
+
+  .object-size {
+    font-style: unset !important;
+  }
+}
+
+.show-strings-on-one-line {
+  .variable-row {
+    display: flex;
+
+    > span {
+      display: flex;
+
+      > .object-key {
+        display: flex !important;
+      }
+    }
+
+    > .variable-value {
+      flex: 1;
+      min-width: 0; // Allows flex item to shrink below content size
+
+      > div {
+        width: 100%;
+
+        .string-value {
+          display: flex !important;
+          min-width: 0; // Allows flex item to shrink below content size
+
+          > span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: 0; // Allows flex item to shrink below content size
+            flex: 1;
+
+            > span {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}