diff --git a/src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx b/src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx
index 6621cde7..9db9ce7c 100644
--- a/src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx
+++ b/src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx
@@ -83,7 +83,7 @@ export default function ColumnConfigModal({
     <Modal
       maxWidth="md"
       onClose={handleClose}
-      title={`${column.name}: Settings`}
+      title={`${column.name}: Config`}
       disableBackdropClick
       disableEscapeKeyDown
       children={
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 1c06b73e..1749213e 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,5 +1,4 @@
-import React, { useRef, useMemo, useState } from "react";
-import { find, difference } from "lodash-es";
+import React, { useMemo, useState } from "react";
 import { useAtom, useSetAtom } from "jotai";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { DndProvider } from "react-dnd";
@@ -27,6 +26,7 @@ import {
   globalScope,
   userRolesAtom,
   userSettingsAtom,
+  navPinnedAtom,
 } from "@src/atoms/globalScope";
 import {
   tableScope,
@@ -56,6 +56,7 @@ const rowClass = (row: any) => (row._rowy_outOfOrder ? "out-of-order" : "");
 export default function Table() {
   const [userRoles] = useAtom(userRolesAtom, globalScope);
   const [userSettings] = useAtom(userSettingsAtom, globalScope);
+  const [navPinned] = useAtom(navPinnedAtom, globalScope);
 
   const [tableId] = useAtom(tableIdAtom, tableScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
@@ -157,15 +158,18 @@ export default function Table() {
       // );
     }, [tableRows]) ?? [];
 
-  const rowsContainerRef = useRef<HTMLDivElement>(null);
-  const [selectedRowsSet, setSelectedRowsSet] = useState<Set<React.Key>>();
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  // const [selectedRowsSet, setSelectedRowsSet] = useState<Set<React.Key>>();
+  // const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
   // Gets more rows when scrolled down.
   // https://github.com/adazzle/react-data-grid/blob/ead05032da79d7e2b86e37cdb9af27f2a4d80b90/stories/demos/AllFeatures.tsx#L60
   const handleScroll = useThrottledCallback(
     (event: React.UIEvent<HTMLDivElement>) => {
       const target = event.target as HTMLDivElement;
+
+      if (navPinned && !columns[0].fixed)
+        setShowLeftScrollDivider(target.scrollLeft > 16);
+
       const offset = 800;
       const isAtBottom =
         target.clientHeight + target.scrollTop >= target.scrollHeight - offset;
@@ -176,6 +180,8 @@ export default function Table() {
     250
   );
 
+  const [showLeftScrollDivider, setShowLeftScrollDivider] = useState(false);
+
   const rowHeight = tableSchema.rowHeight ?? DEFAULT_ROW_HEIGHT;
   const handleResize = useDebouncedCallback(
     (colIndex: number, width: number) => {
@@ -191,12 +197,13 @@ export default function Table() {
       {/* <Suspense fallback={<Loading message="Loading header" />}>
         <Hotkeys selectedCell={selectedCell} />
       </Suspense> */}
-      <TableContainer ref={rowsContainerRef} rowHeight={rowHeight}>
+      <TableContainer rowHeight={rowHeight}>
         <DndProvider backend={HTML5Backend}>
+          {showLeftScrollDivider && <div className="left-scroll-divider" />}
+
           <DataGrid
             onColumnResize={handleResize}
             onScroll={handleScroll}
-            // ref={dataGridRef}
             rows={rows}
             columns={columns}
             // Increase row height of out of order rows to add margins
@@ -212,31 +219,31 @@ export default function Table() {
             rowRenderer={TableRow}
             rowKeyGetter={rowKeyGetter}
             rowClass={rowClass}
-            selectedRows={selectedRowsSet}
-            onSelectedRowsChange={(newSelectedSet) => {
-              const newSelectedArray = newSelectedSet
-                ? [...newSelectedSet]
-                : [];
-              const prevSelectedRowsArray = selectedRowsSet
-                ? [...selectedRowsSet]
-                : [];
-              const addedSelections = difference(
-                newSelectedArray,
-                prevSelectedRowsArray
-              );
-              const removedSelections = difference(
-                prevSelectedRowsArray,
-                newSelectedArray
-              );
-              addedSelections.forEach((id) => {
-                const newRow = find(rows, { id });
-                setSelectedRows([...selectedRows, newRow]);
-              });
-              removedSelections.forEach((rowId) => {
-                setSelectedRows(selectedRows.filter((row) => row.id !== rowId));
-              });
-              setSelectedRowsSet(newSelectedSet);
-            }}
+            // selectedRows={selectedRowsSet}
+            // onSelectedRowsChange={(newSelectedSet) => {
+            //   const newSelectedArray = newSelectedSet
+            //     ? [...newSelectedSet]
+            //     : [];
+            //   const prevSelectedRowsArray = selectedRowsSet
+            //     ? [...selectedRowsSet]
+            //     : [];
+            //   const addedSelections = difference(
+            //     newSelectedArray,
+            //     prevSelectedRowsArray
+            //   );
+            //   const removedSelections = difference(
+            //     prevSelectedRowsArray,
+            //     newSelectedArray
+            //   );
+            //   addedSelections.forEach((id) => {
+            //     const newRow = find(rows, { id });
+            //     setSelectedRows([...selectedRows, newRow]);
+            //   });
+            //   removedSelections.forEach((rowId) => {
+            //     setSelectedRows(selectedRows.filter((row) => row.id !== rowId));
+            //   });
+            //   setSelectedRowsSet(newSelectedSet);
+            // }}
             // onRowsChange={() => {
             //console.log('onRowsChange',rows)
             // }}
diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx
index 7b939a0c..d7ee23d8 100644
--- a/src/components/Table/TableContainer.tsx
+++ b/src/components/Table/TableContainer.tsx
@@ -17,6 +17,20 @@ export const TableContainer = styled("div", {
   flexDirection: "column",
   height: `calc(100vh - ${APP_BAR_HEIGHT}px - ${TABLE_TOOLBAR_HEIGHT}px)`,
 
+  "& .left-scroll-divider": {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 1,
+    zIndex: 1,
+
+    backgroundColor: colord(theme.palette.background.paper)
+      .mix(theme.palette.divider, 0.12)
+      .alpha(1)
+      .toHslString(),
+  },
+
   "& > .rdg": {
     // FIXME:
     // width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,
diff --git a/src/layouts/Navigation/NavDrawer.tsx b/src/layouts/Navigation/NavDrawer.tsx
index 88ddc78a..c88006df 100644
--- a/src/layouts/Navigation/NavDrawer.tsx
+++ b/src/layouts/Navigation/NavDrawer.tsx
@@ -43,6 +43,7 @@ export interface INavDrawerProps extends DrawerProps {
   pinned: boolean;
   setPinned: React.Dispatch<React.SetStateAction<boolean>>;
   canPin: boolean;
+  scrollTrigger: boolean;
 }
 
 export default function NavDrawer({
@@ -50,6 +51,7 @@ export default function NavDrawer({
   pinned,
   setPinned,
   canPin,
+  scrollTrigger,
   ...props
 }: INavDrawerProps) {
   const [tables] = useAtom(tablesAtom, globalScope);
@@ -96,6 +98,7 @@ export default function NavDrawer({
 
         "& .MuiDrawer-paper": {
           minWidth: NAV_DRAWER_WIDTH,
+          borderRight: "none",
           bgcolor: pinned ? "background.default" : "background.paper",
         },
       }}
@@ -111,8 +114,44 @@ export default function NavDrawer({
           position: "sticky",
           top: 0,
           zIndex: "appBar",
-          backgroundColor: "inherit",
-          backgroundImage: "inherit",
+          backgroundColor:
+            pinned && scrollTrigger ? "background.paper" : "inherit",
+          backgroundImage: pinned
+            ? "linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))" // Elevation 8
+            : "inherit",
+
+          "&::before": {
+            content: "''",
+            display: "block",
+            position: "absolute",
+            inset: 0,
+
+            bgcolor: "background.default",
+            opacity: pinned ? (scrollTrigger ? 0 : 1) : 0,
+            transition: (theme) =>
+              theme.transitions.create("opacity", {
+                easing:
+                  canPin && pinned
+                    ? theme.transitions.easing.easeOut
+                    : theme.transitions.easing.sharp,
+                duration:
+                  canPin && pinned
+                    ? theme.transitions.duration.enteringScreen
+                    : theme.transitions.duration.leavingScreen,
+              }),
+          },
+          boxShadow: pinned && scrollTrigger ? 1 : 0,
+          transition: (theme) =>
+            theme.transitions.create(["background-color", "box-shadow"], {
+              easing:
+                canPin && pinned
+                  ? theme.transitions.easing.easeOut
+                  : theme.transitions.easing.sharp,
+              duration:
+                canPin && pinned
+                  ? theme.transitions.duration.enteringScreen
+                  : theme.transitions.duration.leavingScreen,
+            }),
         }}
       >
         <IconButton
@@ -123,7 +162,7 @@ export default function NavDrawer({
           <CloseIcon />
         </IconButton>
 
-        <Logo style={{ marginLeft: 1 }} />
+        <Logo style={{ marginLeft: 1, position: "relative", zIndex: 1 }} />
 
         {canPin && (
           <IconButton
@@ -139,7 +178,7 @@ export default function NavDrawer({
       </Stack>
 
       <nav>
-        <List disablePadding>
+        <List>
           <li>
             <NavItem to={ROUTES.tables} onClick={closeDrawer}>
               <ListItemIcon>
diff --git a/src/layouts/Navigation/Navigation.tsx b/src/layouts/Navigation/Navigation.tsx
index 2e648072..689bf60e 100644
--- a/src/layouts/Navigation/Navigation.tsx
+++ b/src/layouts/Navigation/Navigation.tsx
@@ -64,9 +64,9 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
         color="inherit"
         elevation={trigger ? 1 : 0}
         sx={{
-          height: APP_BAR_HEIGHT, // Elevation 8
+          height: APP_BAR_HEIGHT,
           backgroundImage:
-            "linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))",
+            "linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))", // Elevation 8
 
           "&::before": {
             content: "''",
@@ -79,12 +79,26 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
 
             bgcolor: "background.default",
             opacity: trigger ? 0 : 1,
-            transition: (theme) => theme.transitions.create("opacity"),
+            transition: (theme) =>
+              theme.transitions.create("opacity", {
+                easing:
+                  canPin && pinned
+                    ? theme.transitions.easing.easeOut
+                    : theme.transitions.easing.sharp,
+                duration:
+                  canPin && pinned
+                    ? theme.transitions.duration.enteringScreen
+                    : theme.transitions.duration.leavingScreen,
+              }),
           },
 
-          pl: canPin && pinned && open ? `${NAV_DRAWER_WIDTH}px` : 0,
+          ml: canPin && pinned && open ? `${NAV_DRAWER_WIDTH}px` : 0,
+          width:
+            canPin && pinned && open
+              ? `calc(100% - ${NAV_DRAWER_WIDTH}px)`
+              : "100%",
           transition: (theme) =>
-            theme.transitions.create("padding-left", {
+            theme.transitions.create(["margin-left", "width", "box-shadow"], {
               easing:
                 canPin && pinned
                   ? theme.transitions.easing.easeOut
@@ -171,6 +185,7 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
           setPinned={setPinned}
           canPin={canPin}
           onClose={() => setOpen(false)}
+          scrollTrigger={trigger}
         />
 
         <ErrorBoundary FallbackComponent={StyledErrorFallback}>