diff --git a/shared/common/branchGraph/branchGraph.module.scss b/shared/common/branchGraph/branchGraph.module.scss
index 0124de39..5b553d67 100644
--- a/shared/common/branchGraph/branchGraph.module.scss
+++ b/shared/common/branchGraph/branchGraph.module.scss
@@ -586,32 +586,40 @@
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.06);
   z-index: 2;
 
-  .closeButton {
-    display: none;
-  }
-
   @include isMobile {
     width: 100%;
+  }
+}
 
-    .closeButton {
-      display: flex;
-      align-self: flex-end;
-      margin: 12px;
-      margin-bottom: 6px;
+.panelHeader {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  padding: 8px;
+  padding-bottom: 0;
+
+  .closeButton {
+    grid-column: 3;
+    padding: 5px;
+    border: 0;
+    color: var(--tertiary_text_color);
+    justify-self: end;
+
+    span {
+      display: none;
     }
   }
 }
 
 .sdlToggle {
+  grid-column: 2;
   display: flex;
   background: var(--Grey97);
   border: 1px solid var(--Grey93);
   border-radius: 8px;
   font-family: "Roboto Flex Variable", sans-serif;
   line-height: 16px;
-  margin: 8px;
-  margin-bottom: 0;
-  align-self: end;
+  align-self: flex-start;
+  margin: 0 auto;
 
   @include darkTheme {
     background: var(--Grey16);
@@ -645,6 +653,11 @@
         box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
       }
     }
+
+    &.disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
   }
 }
 
@@ -881,6 +894,46 @@
     }
   }
 
+  .noSdlDiff {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    padding: 12px;
+    gap: 12px;
+    color: var(--secondary_text_color);
+
+    .message {
+      font-style: italic;
+      margin-top: 4px;
+    }
+    .note {
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      color: var(--tertiary_text_color);
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      code {
+        font-family: "Roboto Mono Variable", monospace;
+        font-size: 12px;
+        font-weight: 450;
+        background: var(--Grey93);
+        border-radius: 4px;
+        padding: 2px 4px;
+
+        @include darkTheme {
+          background: var(--Grey20);
+        }
+      }
+    }
+  }
+
   .childItem {
     position: relative;
     margin: 0 12px 6px 38px;
diff --git a/shared/common/branchGraph/index.tsx b/shared/common/branchGraph/index.tsx
index 67389e7f..9082c801 100644
--- a/shared/common/branchGraph/index.tsx
+++ b/shared/common/branchGraph/index.tsx
@@ -29,6 +29,7 @@ import {
   MigrationsListIcon,
   WarningIcon,
   Button,
+  InfoIcon,
 } from "@edgedb/common/newui";
 import {CopyButton} from "../newui/copyButton";
 import {PopupArrow} from "../newui/icons/other";
@@ -451,16 +452,6 @@ export function _BranchGraphRenderer({
                   setPanelOpen(false);
                 }}
               />
-              <button
-                className={cn(styles.floatingButton, styles.closePanelButton)}
-                onClick={() => {
-                  setHighlightedMigrationItem(null);
-                  setPanelOpen(false);
-                }}
-              >
-                <CrossIcon />
-                Close migrations
-              </button>
             </>
           ) : null}
         </div>
@@ -816,8 +807,6 @@ const MigrationsPanel = observer(function MigrationsPanel({
   const {fetchMigrations} = useContext(BranchGraphContext);
   const [fetching, setFetching] = useState(false);
 
-  const [sdlMode, setSdlMode] = useState(true);
-
   const scrollRef = useRef<HTMLDivElement>(null);
   const migrationRefs = useRef({
     items: new Map<GraphItem, HTMLDivElement>(),
@@ -830,6 +819,23 @@ const MigrationsPanel = observer(function MigrationsPanel({
   const [panelHeight, _setPanelHeight] = useState(0);
   useResize(scrollRef, ({height}) => _setPanelHeight(height));
 
+  const noSDLDiffs = useMemo(
+    () =>
+      history.items.every((item) => {
+        const data = migrationScripts.get(item.name);
+        return data != null && !(item.parent ? data.sdlDiff : data.sdl);
+      }),
+    [history, fetching]
+  );
+
+  const [sdlMode, setSdlMode] = useState(showSDLToggle);
+
+  useEffect(() => {
+    if (noSDLDiffs) {
+      setSdlMode(false);
+    }
+  }, [noSDLDiffs]);
+
   useEffect(() => {
     if (fetching) return;
 
@@ -844,7 +850,7 @@ const MigrationsPanel = observer(function MigrationsPanel({
             const {script, sdl} = scripts[i];
             const parentName = missingItems[i].parent?.name;
             const parentSdl = parentName
-              ? missingItems[i + 1].name === parentName
+              ? missingItems[i + 1]?.name === parentName
                 ? scripts[i + 1].sdl
                 : migrationScripts.get(parentName)?.sdl ?? null
               : null;
@@ -939,31 +945,35 @@ const MigrationsPanel = observer(function MigrationsPanel({
 
   return (
     <div className={styles.migrationsPanel}>
-      {showSDLToggle ? (
-        <div className={styles.sdlToggle}>
-          <div
-            className={cn(styles.option, {[styles.selected]: !sdlMode})}
-            onClick={() => setSdlMode(false)}
-          >
-            DDL
-          </div>
-          <div
-            className={cn(styles.option, {[styles.selected]: sdlMode})}
-            onClick={() => setSdlMode(true)}
-          >
-            SDL
+      <div className={styles.panelHeader}>
+        {showSDLToggle ? (
+          <div className={styles.sdlToggle}>
+            <div
+              className={cn(styles.option, {[styles.selected]: !sdlMode})}
+              onClick={() => setSdlMode(false)}
+            >
+              DDL
+            </div>
+            <div
+              className={cn(styles.option, {
+                [styles.selected]: sdlMode,
+                [styles.disabled]: noSDLDiffs,
+              })}
+              onClick={() => setSdlMode(true)}
+            >
+              SDL
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
+
+        <Button
+          className={styles.closeButton}
+          leftIcon={<CrossIcon />}
+          kind="outline"
+          onClick={closePanel}
+        />
+      </div>
 
-      <Button
-        className={styles.closeButton}
-        leftIcon={<CrossIcon />}
-        kind="outline"
-        onClick={closePanel}
-      >
-        Close migrations
-      </Button>
       <div ref={scrollRef} className={styles.migrationsPanelInner}>
         <div className={styles.panelScrollWrapper}>
           {history.children.length
@@ -995,10 +1005,9 @@ const MigrationsPanel = observer(function MigrationsPanel({
                 </div>
               ))
             : null}
-          {history.items.map((item) => {
-            const code = sdlMode
-              ? migrationScripts.get(item.name)?.sdl
-              : migrationScripts.get(item.name)?.script;
+          {history.items.map((item, i) => {
+            const itemData = migrationScripts.get(item.name);
+            const code = sdlMode ? itemData?.sdl! : itemData?.script;
 
             const body = (
               <div
@@ -1033,7 +1042,7 @@ const MigrationsPanel = observer(function MigrationsPanel({
                 )}
 
                 <div className={styles.header}>
-                  {item.parent == null ? line : null}
+                  {item.parent == null && i !== 0 ? line : null}
                   <svg
                     className={styles.dot}
                     xmlns="http://www.w3.org/2000/svg"
@@ -1045,28 +1054,26 @@ const MigrationsPanel = observer(function MigrationsPanel({
                 </div>
 
                 <div className={styles.script}>
-                  {migrationScripts.has(item.name) ? (
-                    sdlMode && item.parent ? (
+                  {itemData ? (
+                    sdlMode && (item.parent || !itemData.sdl) ? (
                       <SDLCodeDiff
-                        sdl={code ?? null}
-                        diff={migrationScripts.get(item.name)!.sdlDiff}
+                        sdl={itemData.sdl}
+                        diff={itemData.sdlDiff}
                       />
                     ) : (
                       <>
                         <div className={styles.codeWrapper}>
-                          <CodeBlock code={code ?? "# no sdl"} />
+                          <CodeBlock code={code!} />
                         </div>
-                        {code ? (
-                          <div className={styles.copyButtonWrapper}>
-                            <div className={styles.copyButtonClip}>
-                              <CopyButton
-                                className={styles.copyButton}
-                                content={code}
-                                mini
-                              />
-                            </div>
+                        <div className={styles.copyButtonWrapper}>
+                          <div className={styles.copyButtonClip}>
+                            <CopyButton
+                              className={styles.copyButton}
+                              content={code!}
+                              mini
+                            />
                           </div>
-                        ) : null}
+                        </div>
                       </>
                     )
                   ) : (
@@ -1111,7 +1118,18 @@ function SDLCodeDiff({
   sdl: string | null;
 }) {
   if (!diff) {
-    return null;
+    return (
+      <div className={styles.noSdlDiff}>
+        <div className={styles.message}>No SDL diff available</div>
+        <div className={styles.note}>
+          <InfoIcon />
+          <span>
+            Update the <code>store_migration_sdl</code> config to enable SDL
+            diffs
+          </span>
+        </div>
+      </div>
+    );
   }
 
   const {code, diffMarkers, ranges} = useMemo(() => {