diff --git a/mathesar_ui/src/App.svelte b/mathesar_ui/src/App.svelte
index 5b59698d6d..6e90c228be 100644
--- a/mathesar_ui/src/App.svelte
+++ b/mathesar_ui/src/App.svelte
@@ -35,6 +35,7 @@
 -->
 <style global lang="scss">
   @import 'component-library/styles.scss';
+  @import 'packages/new-item-highlighter/highlightNewItems.scss';
 
   :root {
     /** BASE COLORS **/
@@ -137,7 +138,8 @@
     --modal-z-index: 1;
     --dropdown-z-index: 1;
     --cell-errors-z-index: 1;
-    --toast-z-index: 2;
+    --new-item-highlighter-z-index: 1;
+    --toast-z-index: 3;
     --app-header-z-index: 1;
 
     overflow: hidden;
diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
index d95eb37936..4b9ad4e757 100644
--- a/mathesar_ui/src/i18n/languages/en/dict.json
+++ b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -55,6 +55,7 @@
   "cell": "Cell",
   "change_password": "Change Password",
   "check_for_updates": "Check for Updates",
+  "child_role_new_items_scroll_hint": "Scroll or click here to see the child role.",
   "child_roles": "Child Roles",
   "child_roles_count": "{count, plural, one {{count} child role} other {{count} child roles}}",
   "child_roles_saved_successfully": "The Child Roles have been successfully saved.",
@@ -135,6 +136,7 @@
   "create_new_database": "Create a New Database",
   "create_new_pg_user": "Create a new PostgreSQL user",
   "create_new_schema": "Create New Schema",
+  "create_new_table": "Create New Table",
   "create_record_from_search": "Create Record From Search Criteria",
   "create_role": "Create Role",
   "create_schema": "Create Schema",
@@ -161,6 +163,7 @@
   "database_disconnect_failed": "Unable to disconnect database",
   "database_disconnect_success": "The database has been disconnected successfully",
   "database_name": "Database Name",
+  "database_new_items_scroll_hint": "Scroll or click here to see the database.",
   "database_not_found": "Database with id [connectionId] is not found.",
   "database_ownership_updated_successfully": "Database ownership has been updated successfully.",
   "database_permissions": "Database Permissions",
@@ -447,6 +450,7 @@
   "primary_key_column_cannot_be_moved": "The primary key column cannot be moved.",
   "primary_key_help": "A primary key constraint uniquely identifies each record in a table.",
   "primary_keys": "Primary Keys",
+  "privileges_new_items_scroll_hint": "Scroll or click here to see the role.",
   "processing_data": "Processing Data",
   "prompt_new_password_next_login": "Resetting the password will prompt the user to change their password on their next login.",
   "properties": "Properties",
@@ -522,6 +526,7 @@
   "schema_name_already_exists": "A schema with that name already exists.",
   "schema_name_cannot_be_empty": "Schema name cannot be empty",
   "schema_name_placeholder": "Eg. Personal Finances, Movies",
+  "schema_new_items_scroll_hint": "Scroll or click here to see the schema.",
   "schema_not_found": "Schema not found.",
   "schema_ownership_updated_successfully": "Schema ownership has been updated successfully.",
   "schema_permissions": "Schema Permissions",
@@ -595,6 +600,7 @@
   "table_name": "Table Name",
   "table_name_already_exists": "A table with that name already exists.",
   "table_name_cannot_be_empty": "The table name cannot be empty.",
+  "table_new_items_scroll_hint": "Scroll or click here to see the table.",
   "table_not_found": "Table not found.",
   "table_not_shared": "This table is currently not shared.",
   "table_ownership_updated_successfully": "Table ownership has been updated successfully.",
diff --git a/mathesar_ui/src/packages/new-item-highlighter/LICENSE b/mathesar_ui/src/packages/new-item-highlighter/LICENSE
new file mode 100644
index 0000000000..ddf685f590
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mathesar Foundation Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mathesar_ui/src/packages/new-item-highlighter/README.md b/mathesar_ui/src/packages/new-item-highlighter/README.md
new file mode 100644
index 0000000000..f7a578014c
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/README.md
@@ -0,0 +1,3 @@
+# New Item Highlighter
+
+This is a Svelte action that highlights new items in a list.
diff --git a/mathesar_ui/src/packages/new-item-highlighter/constants.ts b/mathesar_ui/src/packages/new-item-highlighter/constants.ts
new file mode 100644
index 0000000000..6a48d1bd92
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/constants.ts
@@ -0,0 +1,12 @@
+/** The transition time for the highlight effect, in milliseconds */
+export const HIGHLIGHT_TRANSITION_MS = 2 * 1000; // 2 seconds
+
+/** The amount of time in milliseconds before we begin fading out the hint. */
+export const HINT_EXPIRATION_START_MS = 10 * 1000; // 10 seconds
+
+/** The time it will take to fade out the hint. */
+export const HINT_EXPIRATION_TRANSITION_MS = 3 * 1000; // 3 seconds
+
+/** The time at which we can remove the hint DOM nodes. */
+export const HINT_EXPIRATION_END_MS =
+  HINT_EXPIRATION_START_MS + HINT_EXPIRATION_TRANSITION_MS;
diff --git a/mathesar_ui/src/packages/new-item-highlighter/highlight.ts b/mathesar_ui/src/packages/new-item-highlighter/highlight.ts
new file mode 100644
index 0000000000..caa1772116
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/highlight.ts
@@ -0,0 +1,79 @@
+import { HIGHLIGHT_TRANSITION_MS, HINT_EXPIRATION_END_MS } from './constants';
+import { displayHint } from './hint';
+import { getRectCssGeometry, onElementRemoved } from './utils';
+
+function makeHighlighterElement(): HTMLElement {
+  const effect = document.createElement('div');
+  effect.className = 'effect';
+
+  const highlight = document.createElement('div');
+  highlight.className = 'new-item-highlighter';
+  highlight.appendChild(effect);
+
+  return highlight;
+}
+
+function displayHighlight(target: HTMLElement): void {
+  const highlight = makeHighlighterElement();
+  highlight.style.setProperty('--duration', `${HIGHLIGHT_TRANSITION_MS}ms`);
+  document.body.appendChild(highlight);
+
+  // While the highlight is in effect, we use a requestAnimationFrame loop to
+  // track the target's position and update the highlight's position
+  // accordingly.
+  function trackPosition() {
+    if (!target.isConnected) return;
+    const rect = target.getBoundingClientRect();
+    Object.assign(highlight.style, getRectCssGeometry(rect));
+    requestAnimationFrame(trackPosition);
+  }
+  trackPosition();
+
+  function cleanup() {
+    highlight.remove();
+  }
+
+  onElementRemoved(target, cleanup);
+  setTimeout(cleanup, HIGHLIGHT_TRANSITION_MS);
+}
+
+export function setupHighlighter(
+  target: HTMLElement,
+  options: {
+    scrollHint?: string;
+  },
+): () => void {
+  let cleanupHint: (() => void) | undefined;
+
+  // Use an IntersectionObserver to detect when the target is in view. When it
+  // is, display the highlight. If it's not, then display the scroll hint.
+  const intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+        displayHighlight(target);
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        cleanup();
+      } else if (options.scrollHint && !cleanupHint) {
+        cleanupHint = displayHint(target, options.scrollHint);
+      }
+    },
+    { threshold: [0.5] },
+  );
+
+  function cleanup() {
+    intersectionObserver.disconnect();
+    cleanupHint?.();
+  }
+
+  intersectionObserver.observe(target);
+
+  onElementRemoved(target, cleanup);
+
+  // If the user still hasn't seen the hint or the highlight (i.e. if it's
+  // scrolled out of view), then we give up and remove them. This means
+  // `displayHighlight` will never be called.
+  setTimeout(cleanup, HINT_EXPIRATION_END_MS);
+
+  return cleanup;
+}
diff --git a/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.scss b/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.scss
new file mode 100644
index 0000000000..010df65b9e
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.scss
@@ -0,0 +1,77 @@
+body > .new-item-highlighter {
+  position: absolute;
+  z-index: var(--new-item-highlighter-z-index, 1000);
+  pointer-events: none;
+  --easing: cubic-bezier(0.5, 0, 1, 0.5);
+
+  .effect {
+    position: absolute;
+    inset: -3rem;
+    border-radius: 3rem;
+    background: transparent;
+    mix-blend-mode: darken;
+    transition:
+      background var(--duration) var(--easing),
+      border-radius var(--duration) var(--easing),
+      inset var(--duration) var(--easing);
+    pointer-events: none;
+    filter: blur(0.2rem);
+  }
+
+  @starting-style {
+    .effect {
+      background: rgba(254, 221, 72, 0.3);
+      border-radius: 0.5rem;
+      inset: 0;
+    }
+  }
+}
+
+body > .new-item-highlighter__hint {
+  position: absolute;
+  z-index: var(--new-item-highlighter-z-index, 1000);
+  --background: rgba(0, 0, 0, 0.7);
+  inset: 0px auto auto 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+
+  @starting-style {
+    opacity: 1;
+  }
+
+  .message {
+    background-color: var(--background);
+    color: white;
+    padding: 0.5rem;
+    border-radius: 0.3rem;
+    max-width: 15rem;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  &:hover {
+    --background: black;
+  }
+
+  svg {
+    height: 1.5rem;
+    width: 1.5rem;
+    margin-bottom: -1px;
+    cursor: pointer;
+
+    path {
+      fill: var(--background);
+    }
+  }
+
+  &.down {
+    flex-direction: column-reverse;
+    svg {
+      transform: rotate(180deg);
+      margin-bottom: 0;
+      margin-top: -1px;
+    }
+  }
+}
diff --git a/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.ts b/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.ts
new file mode 100644
index 0000000000..3b1c213059
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/highlightNewItems.ts
@@ -0,0 +1,59 @@
+import type { ActionReturn } from 'svelte/action';
+
+import { setupHighlighter } from './highlight';
+import { getNewlyAddedItemsFromMutations } from './utils';
+
+export function highlightNewItems(
+  container: HTMLElement,
+  options: {
+    /**
+     * The number of milliseconds to wait before setting up highlighting.
+     *
+     * This defaults to 2000 (i.e. 2 seconds) to give children time for the
+     * initial load if necessary, and because in most of the contexts where we
+     * want to use this, we don't expect the user to be able to perform data
+     * entry in under 2 seconds.
+     *
+     * Set this to 0 to start highlighting immediately. If the children are
+     * rendered synchronously, then highlighting will still be deferred to new
+     * items.
+     */
+    wait?: number;
+    /**
+     * Pass a string to display a hint to the user when the new item is
+     * scrolled out of view.
+     */
+    scrollHint?: string;
+  } = {},
+): ActionReturn {
+  const wait = options.wait ?? 2000;
+
+  const cleanupFns: (() => void)[] = [];
+
+  function init() {
+    // Use a MutationObserver to watch for new items added to the container
+    const mutationObserver = new MutationObserver((mutations) => {
+      // Don't highlight the first item added to the container since it will
+      // already be easy for the user to identify.
+      if (container.children.length < 2) return;
+
+      for (const item of getNewlyAddedItemsFromMutations(mutations)) {
+        cleanupFns.push(setupHighlighter(item, options));
+      }
+    });
+    cleanupFns.push(() => mutationObserver.disconnect());
+    mutationObserver.observe(container, { childList: true });
+  }
+
+  if (wait) {
+    setTimeout(init, wait);
+  } else {
+    init();
+  }
+
+  return {
+    destroy() {
+      cleanupFns.forEach((fn) => fn());
+    },
+  };
+}
diff --git a/mathesar_ui/src/packages/new-item-highlighter/hint.ts b/mathesar_ui/src/packages/new-item-highlighter/hint.ts
new file mode 100644
index 0000000000..99a2c24fd9
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/hint.ts
@@ -0,0 +1,102 @@
+import {
+  HINT_EXPIRATION_START_MS,
+  HINT_EXPIRATION_TRANSITION_MS,
+} from './constants';
+import {
+  getNearestVerticallyScrollableAncestor,
+  onElementRemoved,
+} from './utils';
+
+function makeArrowElement(): SVGSVGElement {
+  const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  arrow.setAttribute('viewBox', '0 0 400 400');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute(
+    'd',
+    'm 358,179.5 c 3.8,-8.8 2,-19 -4.6,-26 L 217.4,9.5 C 212.9,4.7 206.6,2 200,2 193.4,2 187.1,4.7 182.6,9.5 l -136,144 c -6.6,7 -8.4,17.2 -4.6,26 3.8,8.8 12.4,14.5 22,14.5 h 72 V 400 H 264 V 194 h 72 c 9.6,0 18.2,-5.7 22,-14.5 z',
+  );
+  arrow.appendChild(path);
+  return arrow;
+}
+
+function makeHintElement(
+  message: string,
+  direction: 'up' | 'down',
+): HTMLElement {
+  const hintElement = document.createElement('div');
+  hintElement.classList.add('new-item-highlighter__hint', direction);
+  hintElement.style.setProperty(
+    'transition',
+    `opacity ${HINT_EXPIRATION_TRANSITION_MS}ms ${HINT_EXPIRATION_START_MS}ms`,
+  );
+  const messageElement = document.createElement('div');
+  messageElement.textContent = message;
+  messageElement.className = 'message';
+  hintElement.appendChild(makeArrowElement());
+  hintElement.appendChild(messageElement);
+  return hintElement;
+}
+
+export function displayHint(target: HTMLElement, message: string): () => void {
+  const container = getNearestVerticallyScrollableAncestor(target);
+  if (!container) return () => {};
+
+  const containerTop = container.getBoundingClientRect().top;
+  const targetTop = target.getBoundingClientRect().top;
+  const direction = targetTop > containerTop ? 'down' : 'up';
+
+  const hintElement = makeHintElement(message, direction);
+  document.body.appendChild(hintElement);
+  const hintRect = hintElement.getBoundingClientRect();
+
+  function positionHint() {
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const top =
+      direction === 'up'
+        ? containerRect.top
+        : containerRect.bottom - hintRect.height;
+    const left =
+      containerRect.left + (containerRect.width - hintRect.width) / 2;
+    hintElement.style.top = `${top}px`;
+    hintElement.style.left = `${left}px`;
+  }
+
+  // Use a ResizeObserver to reposition the hint when the container or the body
+  // resizes. In theory, there could be other user interactions that would cause
+  // the container to move around. For example the container could be inside
+  // another element that is scrolling. But we're guessing that's unlikely since
+  // in that case there would be double scrollbars. So we're guessing that
+  // ResizeObserver is sufficient here.
+  const resizeObserver = new ResizeObserver(positionHint);
+  resizeObserver.observe(container);
+  resizeObserver.observe(document.body);
+
+  function scrollContainerToTarget() {
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const top =
+      direction === 'up'
+        ? targetRect.top - containerRect.top
+        : targetRect.bottom - containerRect.bottom;
+    container.scrollTo({
+      top,
+      behavior: 'smooth',
+    });
+  }
+
+  hintElement.addEventListener('click', scrollContainerToTarget);
+
+  function cleanup() {
+    hintElement.remove();
+    resizeObserver.disconnect();
+    document.body.removeEventListener('click', cleanup);
+  }
+
+  onElementRemoved(target, cleanup);
+  onElementRemoved(container, cleanup);
+  setTimeout(() => document.body.addEventListener('click', cleanup), 50);
+
+  return cleanup;
+}
diff --git a/mathesar_ui/src/packages/new-item-highlighter/index.ts b/mathesar_ui/src/packages/new-item-highlighter/index.ts
new file mode 100644
index 0000000000..2c35b28ac5
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/index.ts
@@ -0,0 +1 @@
+export { highlightNewItems } from './highlightNewItems';
diff --git a/mathesar_ui/src/packages/new-item-highlighter/utils.ts b/mathesar_ui/src/packages/new-item-highlighter/utils.ts
new file mode 100644
index 0000000000..3923b1ddaa
--- /dev/null
+++ b/mathesar_ui/src/packages/new-item-highlighter/utils.ts
@@ -0,0 +1,55 @@
+export function getRectCssGeometry(
+  rect: DOMRect,
+): Partial<CSSStyleDeclaration> {
+  return {
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+  };
+}
+
+export function onElementRemoved(element: HTMLElement, fn: () => void): void {
+  const mutationObserver = new MutationObserver(() => {
+    if (element.isConnected) return;
+    fn();
+    mutationObserver.disconnect();
+  });
+  mutationObserver.observe(document.body, { childList: true, subtree: true });
+}
+
+export function isVerticallyScrollable(element: HTMLElement): boolean {
+  const style = window.getComputedStyle(element);
+  const { overflowY } = style;
+  return (
+    (overflowY === 'auto' || overflowY === 'scroll') &&
+    element.scrollHeight > element.clientHeight
+  );
+}
+
+export function getNearestVerticallyScrollableAncestor(
+  element: HTMLElement,
+): HTMLElement | undefined {
+  const parent = element.parentElement;
+  if (!parent) return undefined;
+  return isVerticallyScrollable(parent)
+    ? parent
+    : getNearestVerticallyScrollableAncestor(parent);
+}
+
+export function* getNewlyAddedItemsFromMutations(
+  mutations: Iterable<MutationRecord>,
+): Generator<HTMLElement> {
+  for (const mutation of mutations) {
+    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+      for (const node of mutation.addedNodes) {
+        if (
+          node.nodeType === Node.ELEMENT_NODE &&
+          node instanceof HTMLElement
+        ) {
+          yield node;
+        }
+      }
+    }
+  }
+}
diff --git a/mathesar_ui/src/pages/database/schemas/SchemasSection.svelte b/mathesar_ui/src/pages/database/schemas/SchemasSection.svelte
index fb061b9c9b..363166c571 100644
--- a/mathesar_ui/src/pages/database/schemas/SchemasSection.svelte
+++ b/mathesar_ui/src/pages/database/schemas/SchemasSection.svelte
@@ -8,6 +8,7 @@
   import { DatabaseRouteContext } from '@mathesar/contexts/DatabaseRouteContext';
   import { iconAddNew } from '@mathesar/icons';
   import type { Schema } from '@mathesar/models/Schema';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { confirmDelete } from '@mathesar/stores/confirmation';
   import { modal } from '@mathesar/stores/modal';
   import {
@@ -116,30 +117,42 @@
         {/if}
       </RichText>
     </p>
-    <ul class="schema-list" slot="content">
-      {#if schemasRequestStatus.state === 'success'}
-        {#each displayList as schema (schema.oid)}
-          <li class="schema-list-item">
-            <SchemaRow
-              {database}
-              {schema}
-              on:edit={() => editSchema(schema)}
-              on:delete={() => deleteSchema(schema)}
+    <div slot="content">
+      <!--
+      Re-render when changing databases to prevent re-highlighting schemas
+      -->
+      {#key database.id}
+        <ul
+          class="schema-list"
+          use:highlightNewItems={{
+            scrollHint: $_('schema_new_items_scroll_hint'),
+          }}
+        >
+          {#if schemasRequestStatus.state === 'success'}
+            {#each displayList as schema (schema.oid)}
+              <li class="schema-list-item">
+                <SchemaRow
+                  {database}
+                  {schema}
+                  on:edit={() => editSchema(schema)}
+                  on:delete={() => deleteSchema(schema)}
+                />
+              </li>
+            {/each}
+          {:else if schemasRequestStatus.state === 'processing' || isLoading}
+            <SchemaListSkeleton />
+          {:else if schemasRequestStatus.state === 'failure' || $underlyingDatabase.error}
+            <Errors
+              fullWidth
+              errors={[
+                ...schemasRequestStatus.errors,
+                $underlyingDatabase.error,
+              ].filter(isDefinedNonNullable)}
             />
-          </li>
-        {/each}
-      {:else if schemasRequestStatus.state === 'processing' || isLoading}
-        <SchemaListSkeleton />
-      {:else if schemasRequestStatus.state === 'failure' || $underlyingDatabase.error}
-        <Errors
-          fullWidth
-          errors={[
-            ...schemasRequestStatus.errors,
-            $underlyingDatabase.error,
-          ].filter(isDefinedNonNullable)}
-        />
-      {/if}
-    </ul>
+          {/if}
+        </ul>
+      {/key}
+    </div>
   </EntityContainerWithFilterBar>
 </div>
 
@@ -173,7 +186,6 @@
       padding: 0;
       display: flex;
       flex-direction: column;
-      margin-top: var(--size-x-large);
 
       .schema-list-item + .schema-list-item {
         margin-top: var(--size-base);
diff --git a/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte b/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte
index 1b02217d59..baa7f4f699 100644
--- a/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte
+++ b/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte
@@ -10,6 +10,7 @@
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import { iconDeleteMajor } from '@mathesar/icons';
   import type { Role } from '@mathesar/models/Role';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { toast } from '@mathesar/stores/toast';
   import {
     Button,
@@ -87,7 +88,12 @@
         </div>
       {/if}
     </div>
-    <div class="member-list">
+    <div
+      class="member-list"
+      use:highlightNewItems={{
+        scrollHint: $_('child_role_new_items_scroll_hint'),
+      }}
+    >
       {#if $memberOids.size > 0}
         {#each [...$memberOids] as memberOid (memberOid)}
           <div class="member">
diff --git a/mathesar_ui/src/pages/home/HomePage.svelte b/mathesar_ui/src/pages/home/HomePage.svelte
index 699bec21a0..9262b54ff0 100644
--- a/mathesar_ui/src/pages/home/HomePage.svelte
+++ b/mathesar_ui/src/pages/home/HomePage.svelte
@@ -6,6 +6,7 @@
   import { iconConnection } from '@mathesar/icons';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import type { Database } from '@mathesar/models/Database';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
   import { databasesStore } from '@mathesar/stores/databases';
   import { modal } from '@mathesar/stores/modal';
@@ -98,7 +99,12 @@
 
         <svelte:fragment slot="content">
           {#if filteredDatabases.length}
-            <div data-identifier="databases-list-grid">
+            <div
+              data-identifier="databases-list-grid"
+              use:highlightNewItems={{
+                scrollHint: $_('database_new_items_scroll_hint'),
+              }}
+            >
               {#each filteredDatabases as database (database.id)}
                 <DatabaseRow {database} />
               {/each}
diff --git a/mathesar_ui/src/pages/schema/AddTableModal.svelte b/mathesar_ui/src/pages/schema/AddTableModal.svelte
new file mode 100644
index 0000000000..9ebcf7e3f8
--- /dev/null
+++ b/mathesar_ui/src/pages/schema/AddTableModal.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { map, some } from 'iter-tools';
+  import { _ } from 'svelte-i18n';
+
+  import NameAndDescInputModalForm from '@mathesar/components/NameAndDescInputModalForm.svelte';
+  import type { Schema } from '@mathesar/models/Schema';
+  import type { Table } from '@mathesar/models/Table';
+  import { createTable } from '@mathesar/stores/tables';
+  import type { ModalController } from '@mathesar-component-library';
+
+  export let controller: ModalController;
+  export let schema: Schema;
+  export let tablesMap: Map<Table['oid'], Table>;
+
+  function getInitialName() {
+    const names = new Set(map((table) => table.name, tablesMap.values()));
+    function makeName(i: number): string {
+      const name = `${$_('table')} ${i}`;
+      return names.has(name) ? makeName(i + 1) : name;
+    }
+    return makeName(1);
+  }
+
+  function getNameValidationErrors(name: string) {
+    if (some((table) => table.name === name, tablesMap.values())) {
+      return [$_('table_name_already_exists')];
+    }
+    return [];
+  }
+
+  async function handleSave(name: string, description: string) {
+    await createTable({ schema, name, description });
+    controller.close();
+  }
+</script>
+
+<NameAndDescInputModalForm
+  {controller}
+  save={handleSave}
+  {getNameValidationErrors}
+  {getInitialName}
+>
+  <span slot="title">{$_('create_new_table')}</span>
+</NameAndDescInputModalForm>
diff --git a/mathesar_ui/src/pages/schema/CreateEmptyTableButton.svelte b/mathesar_ui/src/pages/schema/CreateEmptyTableButton.svelte
deleted file mode 100644
index 835686e5ff..0000000000
--- a/mathesar_ui/src/pages/schema/CreateEmptyTableButton.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { router } from 'tinro';
-
-  import type { Database } from '@mathesar/models/Database';
-  import type { Schema } from '@mathesar/models/Schema';
-  import { getTablePageUrl } from '@mathesar/routes/urls';
-  import { createTable } from '@mathesar/stores/tables';
-  import { Button, Spinner } from '@mathesar-component-library';
-
-  export let database: Database;
-  export let schema: Schema;
-
-  let classes = '';
-  export { classes as class };
-
-  let isCreatingNewTable = false;
-
-  async function handleCreateEmptyTable() {
-    isCreatingNewTable = true;
-    const table = await createTable({ schema });
-    isCreatingNewTable = false;
-    router.goto(getTablePageUrl(database.id, schema.oid, table.oid), false);
-  }
-</script>
-
-<Button
-  on:click={handleCreateEmptyTable}
-  disabled={isCreatingNewTable}
-  appearance="plain-primary"
-  class={classes}
->
-  {#if isCreatingNewTable}
-    <Spinner />
-  {/if}
-  <slot />
-</Button>
diff --git a/mathesar_ui/src/pages/schema/CreateNewTableButton.svelte b/mathesar_ui/src/pages/schema/CreateNewTableButton.svelte
index 287ce81674..9232320001 100644
--- a/mathesar_ui/src/pages/schema/CreateNewTableButton.svelte
+++ b/mathesar_ui/src/pages/schema/CreateNewTableButton.svelte
@@ -1,33 +1,19 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import { router } from 'tinro';
 
   import Icon from '@mathesar/component-library/icon/Icon.svelte';
   import LinkMenuItem from '@mathesar/component-library/menu/LinkMenuItem.svelte';
   import { iconAddNew } from '@mathesar/icons';
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
-  import { getImportPageUrl, getTablePageUrl } from '@mathesar/routes/urls';
-  import { createTable } from '@mathesar/stores/tables';
-  import {
-    ButtonMenuItem,
-    DropdownMenu,
-    Spinner,
-  } from '@mathesar-component-library';
+  import { getImportPageUrl } from '@mathesar/routes/urls';
+  import { ButtonMenuItem, DropdownMenu } from '@mathesar-component-library';
 
   export let database: Database;
   export let schema: Schema;
+  export let onCreateEmptyTable: () => void;
 
   $: ({ currentRolePrivileges } = schema.currentAccess);
-
-  let isCreatingNewTable = false;
-
-  async function handleCreateEmptyTable() {
-    isCreatingNewTable = true;
-    const table = await createTable({ schema });
-    isCreatingNewTable = false;
-    router.goto(getTablePageUrl(database.id, schema.oid, table.oid), false);
-  }
 </script>
 
 <DropdownMenu
@@ -38,14 +24,10 @@
   disabled={!$currentRolePrivileges.has('CREATE')}
 >
   <div slot="trigger">
-    {#if isCreatingNewTable}
-      <Spinner />
-    {:else}
-      <Icon {...iconAddNew} />
-    {/if}
-    <span>{$_('new_table')}</span>
+    <Icon {...iconAddNew} />
+    {$_('new_table')}
   </div>
-  <ButtonMenuItem on:click={handleCreateEmptyTable}>
+  <ButtonMenuItem on:click={onCreateEmptyTable}>
     {$_('from_scratch')}
   </ButtonMenuItem>
   <LinkMenuItem href={getImportPageUrl(database.id, schema.oid)}>
diff --git a/mathesar_ui/src/pages/schema/CreateNewTableTutorial.svelte b/mathesar_ui/src/pages/schema/CreateNewTableTutorial.svelte
index 1d90d56aeb..15c0a2dbdb 100644
--- a/mathesar_ui/src/pages/schema/CreateNewTableTutorial.svelte
+++ b/mathesar_ui/src/pages/schema/CreateNewTableTutorial.svelte
@@ -4,12 +4,11 @@
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
   import { getImportPageUrl } from '@mathesar/routes/urls';
-  import { AnchorButton, Tutorial } from '@mathesar-component-library';
-
-  import CreateEmptyTableButton from './CreateEmptyTableButton.svelte';
+  import { AnchorButton, Button, Tutorial } from '@mathesar-component-library';
 
   export let database: Database;
   export let schema: Schema;
+  export let onCreateEmptyTable: () => void;
 </script>
 
 <Tutorial>
@@ -20,9 +19,9 @@
   <div class="new-table-tutorial-footer" slot="footer">
     <span>{$_('how_do_you_want_to_create_table')}</span>
     <div class="new-table-tutorial-actions">
-      <CreateEmptyTableButton class="padding-zero" {database} {schema}>
-        <span>{$_('from_scratch')}</span>
-      </CreateEmptyTableButton>
+      <Button on:click={onCreateEmptyTable}>
+        {$_('from_scratch')}
+      </Button>
       <AnchorButton href={getImportPageUrl(database.id, schema.oid)}>
         {$_('import_from_file')}
       </AnchorButton>
diff --git a/mathesar_ui/src/pages/schema/EditTable.svelte b/mathesar_ui/src/pages/schema/EditTableModal.svelte
similarity index 94%
rename from mathesar_ui/src/pages/schema/EditTable.svelte
rename to mathesar_ui/src/pages/schema/EditTableModal.svelte
index 2c29a1295c..9e2f895b8a 100644
--- a/mathesar_ui/src/pages/schema/EditTable.svelte
+++ b/mathesar_ui/src/pages/schema/EditTableModal.svelte
@@ -12,7 +12,7 @@
   import type { ModalController } from '@mathesar-component-library';
 
   export let table: Table;
-  export let modalController: ModalController;
+  export let controller: ModalController;
 
   $: getNameValidationErrors = factoryToGetTableNameValidationErrors(table);
 
@@ -29,7 +29,7 @@
 </script>
 
 <NameAndDescInputModalForm
-  controller={modalController}
+  {controller}
   save={handleSave}
   getNameValidationErrors={$getNameValidationErrors}
   getInitialName={() => table.name}
diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte
index f38ef5e373..5b5144c35f 100644
--- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte
+++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte
@@ -27,9 +27,9 @@
   export let explorationsMap: Map<number, SavedExploration>;
   export let tablesRequestStatus: RequestStatus;
   export let explorationsRequestStatus: RequestStatus;
-
   export let database: Database;
   export let schema: Schema;
+  export let onCreateEmptyTable: () => void;
 
   $: hasTables = tablesMap.size > 0;
   $: hasExplorations = explorationsMap.size > 0;
@@ -48,7 +48,7 @@
   <div class="vertical-container tables">
     <OverviewHeader title={$_('tables')}>
       <svelte:fragment slot="action">
-        <CreateNewTableButton {database} {schema} />
+        <CreateNewTableButton {database} {schema} {onCreateEmptyTable} />
       </svelte:fragment>
     </OverviewHeader>
     {#if tablesRequestStatus.state === 'processing'}
@@ -72,7 +72,7 @@
         </div>
       </ErrorBox>
     {:else if showTableCreationTutorial}
-      <CreateNewTableTutorial {database} {schema} />
+      <CreateNewTableTutorial {database} {schema} {onCreateEmptyTable} />
     {:else}
       <TablesList tables={[...tablesMap.values()]} {database} {schema} />
     {/if}
diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte
index c02d5024b0..ace6ed1f43 100644
--- a/mathesar_ui/src/pages/schema/SchemaPage.svelte
+++ b/mathesar_ui/src/pages/schema/SchemaPage.svelte
@@ -19,6 +19,7 @@
   import { logEvent } from '@mathesar/utils/telemetry';
   import { Button, Icon, TabContainer } from '@mathesar-component-library';
 
+  import AddTableModal from './AddTableModal.svelte';
   import ExplorationSkeleton from './ExplorationSkeleton.svelte';
   import SchemaExplorations from './SchemaExplorations.svelte';
   import SchemaOverview from './SchemaOverview.svelte';
@@ -30,7 +31,8 @@
   export let schema: Schema;
   export let section: string;
 
-  const addEditModal = modal.spawnModalController();
+  const editSchemaModal = modal.spawnModalController();
+  const addTableModal = modal.spawnModalController();
   const permissionsModal = modal.spawnModalController();
 
   // NOTE: This has to be same as the name key in the paths prop of Route component
@@ -72,7 +74,7 @@
   $: activeTab = tabs.find((tab) => tab.id === section) || tabs[0];
 
   function handleEditSchema() {
-    addEditModal.open();
+    editSchemaModal.open();
   }
 
   $: ({ name, description, tableCount, currentAccess } = schema);
@@ -141,6 +143,7 @@
           {database}
           {schema}
           {explorationsRequestStatus}
+          onCreateEmptyTable={() => addTableModal.open()}
         />
       </div>
     {:else if activeTab?.id === 'tables'}
@@ -148,7 +151,12 @@
         {#if tablesRequestStatus.state === 'processing'}
           <TableSkeleton numTables={$tableCount} />
         {:else}
-          <SchemaTables {tablesMap} {database} {schema} />
+          <SchemaTables
+            {tablesMap}
+            {database}
+            {schema}
+            onCreateEmptyTable={() => addTableModal.open()}
+          />
         {/if}
       </div>
     {:else if activeTab?.id === 'explorations'}
@@ -168,8 +176,8 @@
   </TabContainer>
 </LayoutWithHeader>
 
-<AddEditSchemaModal controller={addEditModal} {database} {schema} />
-
+<AddEditSchemaModal controller={editSchemaModal} {database} {schema} />
+<AddTableModal controller={addTableModal} {schema} {tablesMap} />
 <SchemaPermissionsModal controller={permissionsModal} {schema} />
 
 <style lang="scss">
diff --git a/mathesar_ui/src/pages/schema/SchemaTables.svelte b/mathesar_ui/src/pages/schema/SchemaTables.svelte
index de8c5aaab5..d1701fe13c 100644
--- a/mathesar_ui/src/pages/schema/SchemaTables.svelte
+++ b/mathesar_ui/src/pages/schema/SchemaTables.svelte
@@ -12,9 +12,9 @@
   import TablesList from './TablesList.svelte';
 
   export let tablesMap: Map<number, Table>;
-
   export let database: Database;
   export let schema: Schema;
+  export let onCreateEmptyTable: () => void;
 
   $: ({ currentRolePrivileges } = schema.currentAccess);
   $: showTutorial =
@@ -41,7 +41,7 @@
   on:clear={clearQuery}
 >
   <svelte:fragment slot="action">
-    <CreateNewTableButton {database} {schema} />
+    <CreateNewTableButton {database} {schema} {onCreateEmptyTable} />
   </svelte:fragment>
   <svelte:fragment slot="resultInfo">
     <p>
@@ -59,7 +59,7 @@
   </svelte:fragment>
   <svelte:fragment slot="content">
     {#if showTutorial}
-      <CreateNewTableTutorial {database} {schema} />
+      <CreateNewTableTutorial {database} {schema} {onCreateEmptyTable} />
     {:else}
       <TablesList tables={filteredTables} {database} {schema} />
     {/if}
diff --git a/mathesar_ui/src/pages/schema/TablesList.svelte b/mathesar_ui/src/pages/schema/TablesList.svelte
index 90cdee0171..dda5c2736b 100644
--- a/mathesar_ui/src/pages/schema/TablesList.svelte
+++ b/mathesar_ui/src/pages/schema/TablesList.svelte
@@ -5,13 +5,14 @@
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
   import type { Table } from '@mathesar/models/Table';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { modal } from '@mathesar/stores/modal';
 
-  import EditTable from './EditTable.svelte';
+  import EditTableModal from './EditTableModal.svelte';
   import EmptyEntity from './EmptyEntity.svelte';
   import TableCard from './TableCard.svelte';
 
-  const editTableModalController = modal.spawnModalController();
+  const editTableModal = modal.spawnModalController();
 
   export let tables: Table[];
   export let database: Database;
@@ -21,13 +22,16 @@
 
   function openEditTableModal(table: Table) {
     selectedTable = table;
-    editTableModalController.open();
+    editTableModal.open();
   }
 </script>
 
 <div class="tables-list">
   {#if tables.length > 0}
-    <div class="container">
+    <div
+      class="container"
+      use:highlightNewItems={{ scrollHint: $_('table_new_items_scroll_hint') }}
+    >
       {#each tables as table (table.oid)}
         <TableCard {table} {database} {schema} {openEditTableModal} />
       {/each}
@@ -40,7 +44,7 @@
 </div>
 
 {#if selectedTable}
-  <EditTable modalController={editTableModalController} table={selectedTable} />
+  <EditTableModal controller={editTableModal} table={selectedTable} />
 {/if}
 
 <style lang="scss">
diff --git a/mathesar_ui/src/stores/tables.ts b/mathesar_ui/src/stores/tables.ts
index 3b7104340f..a4e826e0b7 100644
--- a/mathesar_ui/src/stores/tables.ts
+++ b/mathesar_ui/src/stores/tables.ts
@@ -285,13 +285,19 @@ export async function updateTable({
 
 export async function createTable({
   schema,
+  name,
+  description,
 }: {
   schema: Schema;
+  name?: string;
+  description?: string;
 }): Promise<Table> {
   const created = await api.tables
     .add({
       database_id: schema.database.id,
       schema_oid: schema.oid,
+      table_name: name,
+      comment: description,
     })
     .run();
 
diff --git a/mathesar_ui/src/systems/databases/create-database/ConnectDatabaseModal.svelte b/mathesar_ui/src/systems/databases/create-database/ConnectDatabaseModal.svelte
index fd83e7af65..95b8525d9f 100644
--- a/mathesar_ui/src/systems/databases/create-database/ConnectDatabaseModal.svelte
+++ b/mathesar_ui/src/systems/databases/create-database/ConnectDatabaseModal.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import { router } from 'tinro';
 
   import { iconConnectDatabase, iconCreateDatabase } from '@mathesar/icons';
-  import type { Database } from '@mathesar/models/Database';
-  import { getDatabasePageUrl } from '@mathesar/routes/urls';
   import {
     ControlledModal,
     type ModalController,
@@ -39,10 +36,8 @@
     controller.close();
   }
 
-  function handleSuccess(database: Database) {
+  function handleSuccess() {
     controller.close();
-    const url = getDatabasePageUrl(database.id);
-    router.goto(url);
   }
 </script>
 
diff --git a/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte b/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte
index 27b925dc04..826651764c 100644
--- a/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte
+++ b/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte
@@ -9,6 +9,7 @@
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import { iconAddNew } from '@mathesar/icons';
   import type { Role } from '@mathesar/models/Role';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import {
     ButtonMenuItem,
     DropdownMenu,
@@ -144,25 +145,33 @@
     {/if}
   </svelte:fragment>
 
-  {#each [...$roleAccessField.values()] as roleAccess (roleAccess.roleOid)}
-    <div class="access-control-row">
-      <AccessControlRow
-        rolesMap={roles}
-        {permissionsMetaData}
-        {accessLevelsInfoMap}
-        {privilegeInfoMap}
-        {roleAccess}
-        {setAccess}
-        {removeAccess}
-      />
-    </div>
-  {:else}
-    <div class="no-access">
-      <WarningBox>
-        {$_('access_not_granted_for_any_role')}
-      </WarningBox>
-    </div>
-  {/each}
+  <div
+    class="access-control-rows"
+    class:empty={$roleAccessField.size === 0}
+    use:highlightNewItems={{
+      scrollHint: $_('privileges_new_items_scroll_hint'),
+    }}
+  >
+    {#each [...$roleAccessField.values()] as roleAccess (roleAccess.roleOid)}
+      <div class="access-control-row">
+        <AccessControlRow
+          rolesMap={roles}
+          {permissionsMetaData}
+          {accessLevelsInfoMap}
+          {privilegeInfoMap}
+          {roleAccess}
+          {setAccess}
+          {removeAccess}
+        />
+      </div>
+    {:else}
+      <div class="no-access">
+        <WarningBox>
+          {$_('access_not_granted_for_any_role')}
+        </WarningBox>
+      </div>
+    {/each}
+  </div>
 </OverviewSection>
 
 {#if $currentRoleOwns}
@@ -182,17 +191,13 @@
 {/if}
 
 <style lang="scss">
+  .access-control-rows:not(.empty) {
+    margin-block: calc(-1 * var(--size-base));
+  }
+
   .access-control-row {
     padding: var(--size-base) 0;
 
-    &:first-child {
-      padding-top: 0;
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-
     & + .access-control-row {
       border-top: 1px solid var(--slate-100);
     }