diff --git a/package.json b/package.json
index 8b6121066..240b6bff1 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
         "cypress:run": "cypress run",
         "gen": "run-p gen:*",
         "gen:gql": "graphql-codegen --config codegen.yml",
-        "gen:i18n": "extract-messages -d en -l=en,ja -o translations -f yaml 'src/**/*.tsx' --extractFromFormatMessageCall",
+        "gen:i18n": "extract-messages -d en -l=en,ja -o translations -f yaml 'src/**/*.ts*' --extractFromFormatMessageCall",
         "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc"
     },
     "engines": {
@@ -204,4 +204,4 @@
         "use-debounce": "^5.2.0",
         "use-file-input": "^1.0.0"
     }
-}
+}
\ No newline at end of file
diff --git a/src/app.tsx b/src/app.tsx
index d8f5dd1c9..437e50097 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,6 +2,7 @@ import { Router, Redirect } from "@reach/router";
 import React, { Suspense } from "react";
 
 import Loading from "@reearth/components/atoms/Loading";
+import NotificationBanner from "@reearth/components/organisms/Notification";
 import NotFound from "@reearth/components/pages/NotFound";
 import AccountSettings from "@reearth/components/pages/Settings/Account";
 import ProjectSettings from "@reearth/components/pages/Settings/Project";
@@ -42,6 +43,7 @@ const App: React.FC = () => {
           <DndProvider>
             <IntlProvider>
               <Suspense fallback={<Loading />}>
+                <NotificationBanner />
                 <StyledRouter>
                   <TopPage path="/" />
                   <Dashboard path="/dashboard/:teamId" />
diff --git a/src/components/atoms/Notification/index.stories.tsx b/src/components/atoms/Notification/index.stories.tsx
new file mode 100644
index 000000000..4cfa1d726
--- /dev/null
+++ b/src/components/atoms/Notification/index.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import Notification from ".";
+
+export default {
+  title: "atoms/NotificationBanner",
+  component: Notification,
+} as Meta;
+
+export const Success = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "success",
+      heading: "Notice",
+      text: "This is a notice of successful completion of a task.",
+    }}
+  />
+);
+export const Error = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "error",
+      heading: "Error",
+      text: "This is telling you that there is an error, hence the scary red color.",
+    }}
+  />
+);
+export const Warning = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "warning",
+      heading: "Warning",
+      text: "This is a warning that something isn't quite right.",
+    }}
+  />
+);
+export const Info = () => (
+  <Notification
+    visible={true}
+    notification={{
+      type: "info",
+      heading: "Notice",
+      text: "This is a neutral message. Could be an update or some general information.",
+    }}
+  />
+);
diff --git a/src/components/atoms/Notification/index.test.tsx b/src/components/atoms/Notification/index.test.tsx
new file mode 100644
index 000000000..353b6e172
--- /dev/null
+++ b/src/components/atoms/Notification/index.test.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+import { render, screen } from "@reearth/test/utils";
+
+import NotificationBanner, { Notification } from ".";
+
+const sampleNotification: Notification = {
+  type: "info",
+  heading: "Notice",
+  text: "This is a notification for something super cool.",
+};
+
+test("Notification component should be rendered", () => {
+  render(<NotificationBanner />);
+});
+
+test("Notification component should display notification heading", () => {
+  render(<NotificationBanner visible notification={sampleNotification} />);
+  expect(screen.getByText(/Notice/)).toBeInTheDocument();
+});
+
+test("Notification component should display notification text", () => {
+  render(<NotificationBanner visible notification={sampleNotification} />);
+  expect(screen.getByText(/This is a notification/)).toBeInTheDocument();
+});
+
+test("Notification component should not display anything", () => {
+  render(<NotificationBanner notification={sampleNotification} />);
+  expect(screen.getByText(/This is a notification/)).not.toBeVisible();
+});
diff --git a/src/components/atoms/Notification/index.tsx b/src/components/atoms/Notification/index.tsx
new file mode 100644
index 000000000..ae410bb79
--- /dev/null
+++ b/src/components/atoms/Notification/index.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+import Flex from "@reearth/components/atoms/Flex";
+import Icon from "@reearth/components/atoms/Icon";
+import Text from "@reearth/components/atoms/Text";
+import { styled, metrics, useTheme } from "@reearth/theme";
+
+export type NotificationType = "error" | "warning" | "info" | "success";
+export type Notification = {
+  type: NotificationType;
+  heading?: string;
+  text: string;
+};
+
+export type Props = {
+  visible?: boolean;
+  setModal?: (show: boolean) => void;
+  notification?: Notification;
+  resetNotification?: () => void;
+};
+
+const NotificationBanner: React.FC<Props> = ({
+  visible,
+  setModal,
+  notification,
+  resetNotification,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledNotificationBanner visible={visible} type={notification?.type} direction="column">
+      <HeadingArea justify="space-between">
+        <Text
+          size="m"
+          color={theme.notification.text}
+          weight="bold"
+          otherProperties={{ padding: "0 0 8px 0" }}>
+          {notification?.heading}
+        </Text>
+        <CloseBtn
+          icon="cancel"
+          size={20}
+          onClick={() => {
+            setModal?.(false);
+            resetNotification?.();
+          }}
+        />
+      </HeadingArea>
+      <Text size="s" color={theme.notification.text}>
+        {notification?.text}
+      </Text>
+    </StyledNotificationBanner>
+  );
+};
+
+const StyledNotificationBanner = styled(Flex)<{
+  type?: NotificationType;
+  visible?: boolean;
+}>`
+  position: absolute;
+  top: ${metrics.headerHeight}px;
+  right: 0;
+  width: 312px;
+  padding: 8px 12px;
+  background-color: ${({ type, theme }) =>
+    type === "error"
+      ? theme.notification.errorBg
+      : type === "warning"
+      ? theme.notification.warningBg
+      : type === "success"
+      ? theme.notification.successBg
+      : theme.notification.infoBg};
+  color: ${({ theme }) => theme.notification.text};
+  z-index: ${({ theme, visible }) => (visible ? theme.zIndexes.notificationBar : 0)};
+  opacity: ${({ visible }) => (visible ? "1" : "0")};
+  transition: all 0.5s;
+  pointer-event: ${({ visible }) => (visible ? "auto" : "none")};
+`;
+
+const HeadingArea = styled(Flex)`
+  width: 100%;
+`;
+
+const CloseBtn = styled(Icon)`
+  cursor: pointer;
+`;
+
+export default NotificationBanner;
diff --git a/src/components/atoms/NotificationBar/README.md b/src/components/atoms/NotificationBar/README.md
deleted file mode 100644
index 9488cf971..000000000
--- a/src/components/atoms/NotificationBar/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# NotificationBar
-[![Generic badge](https://img.shields.io/badge/GROUP-global-<COLOR>.svg)]()
-[![Generic badge](https://img.shields.io/badge/SIZE-atom-blue.svg)]()
-
-NotificationBar. This component is a global component.
-
-## Usage
-
-## Properties
diff --git a/src/components/atoms/NotificationBar/index.stories.tsx b/src/components/atoms/NotificationBar/index.stories.tsx
deleted file mode 100644
index 033e3b5d7..000000000
--- a/src/components/atoms/NotificationBar/index.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-
-import NotificationBar from ".";
-
-export default {
-  title: "atoms/NotificationBar",
-  component: NotificationBar,
-} as Meta;
-
-export const Info = () => <NotificationBar text="Successfully done" />;
-export const Error = () => <NotificationBar type={"error"} text="Error!" />;
-export const Warning = () => <NotificationBar type={"warning"} text="This API is deprecated!!" />;
diff --git a/src/components/atoms/NotificationBar/index.tsx b/src/components/atoms/NotificationBar/index.tsx
deleted file mode 100644
index 036435be1..000000000
--- a/src/components/atoms/NotificationBar/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import Icon from "@reearth/components/atoms/Icon";
-import Text from "@reearth/components/atoms/Text";
-import { styled, useTheme } from "@reearth/theme";
-
-export type Type = "error" | "warning" | "info" | "success";
-
-interface NotificationBarProps {
-  text?: string;
-  hidden?: boolean;
-  type?: Type;
-  onClose?: () => void;
-}
-
-const NotificationBar: React.FC<NotificationBarProps> = ({
-  text,
-  hidden,
-  type,
-  children,
-  onClose,
-}) => {
-  const [visibility, changeVisibility] = useState(!hidden);
-  useEffect(() => {
-    changeVisibility(!hidden);
-  }, [hidden, text]);
-  const theme = useTheme();
-
-  return visibility && (text || children) && type ? (
-    <StyledNotificationBar type={type}>
-      <Text
-        size="m"
-        color={theme.notification.text}
-        weight="bold"
-        otherProperties={{ padding: "10px" }}>
-        {text || children}
-      </Text>
-      <CloseBtn
-        icon="cancel"
-        size={20}
-        onClick={() => {
-          changeVisibility(false);
-          onClose?.();
-        }}
-      />
-    </StyledNotificationBar>
-  ) : null;
-};
-
-const StyledNotificationBar = styled.div<{
-  type?: Type;
-}>`
-  width: 100%;
-  height: 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ type, theme }) =>
-    type === "error"
-      ? theme.notification.errorBg
-      : type === "warning"
-      ? theme.notification.warningBg
-      : type === "success"
-      ? theme.notification.successBg
-      : theme.notification.infoBg};
-  color: ${({ theme }) => theme.notification.text};
-  position: absolute;
-  top: 0;
-  z-index: ${props => props.theme.zIndexes.notificationBar};
-`;
-
-const CloseBtn = styled(Icon)`
-  padding: 10px;
-  cursor: pointer;
-`;
-
-export default NotificationBar;
diff --git a/src/components/molecules/Common/Header/index.tsx b/src/components/molecules/Common/Header/index.tsx
index dbd974e5b..b5a65bf33 100644
--- a/src/components/molecules/Common/Header/index.tsx
+++ b/src/components/molecules/Common/Header/index.tsx
@@ -2,7 +2,6 @@ import { Link } from "@reach/router";
 import React from "react";
 
 import Icon from "@reearth/components/atoms/Icon";
-import NotificationBar, { Type } from "@reearth/components/atoms/NotificationBar";
 import WorkspaceCreationModal from "@reearth/components/molecules/Common/WorkspaceCreationModal";
 import { styled, metrics, css } from "@reearth/theme";
 
@@ -11,8 +10,6 @@ import { User, Team, Project } from "./types";
 
 export * from "./types";
 
-export type NotificationType = Type;
-
 export interface Props {
   className?: string;
   user?: User;
@@ -31,11 +28,6 @@ export interface Props {
   modalShown?: boolean;
   openModal?: () => void;
   handleModalClose?: (r?: boolean | undefined) => void;
-  notification?: {
-    type?: NotificationType;
-    text: string;
-  };
-  onNotificationClose?: () => void;
   dashboard?: boolean;
 }
 
@@ -54,50 +46,39 @@ const Header: React.FC<Props> = ({
   modalShown,
   openModal,
   handleModalClose,
-  notification,
-  onNotificationClose,
   dashboard,
 }) => {
   return (
-    <>
-      <Wrapper className={className}>
-        <Content>
-          <LeftArea>
-            <StyledLink to={`/dashboard/${currentTeam?.id}`}>
-              {!dashboard && <StyledIcon icon="dashboard" size={24} />}
-            </StyledLink>
-            {icon}
-            {onSignOut && onChangeTeam && (
-              <>
-                <Profile
-                  user={user}
-                  currentTeam={currentTeam}
-                  currentProject={currentProject}
-                  teams={teams}
-                  onSignOut={onSignOut}
-                  onChangeTeam={onChangeTeam}
-                  openModal={openModal}
-                />
-                <WorkspaceCreationModal
-                  open={modalShown}
-                  onClose={handleModalClose}
-                  onSubmit={onCreateTeam}
-                />
-              </>
-            )}
-          </LeftArea>
-          <CenterArea>{center}</CenterArea>
-          <RightArea>{right}</RightArea>
-        </Content>
-      </Wrapper>
-      {notification && (
-        <NotificationBar
-          text={notification.text}
-          type={notification.type}
-          onClose={onNotificationClose}
-        />
-      )}
-    </>
+    <Wrapper className={className}>
+      <Content>
+        <LeftArea>
+          <StyledLink to={`/dashboard/${currentTeam?.id}`}>
+            {!dashboard && <StyledIcon icon="dashboard" size={24} />}
+          </StyledLink>
+          {icon}
+          {onSignOut && onChangeTeam && (
+            <>
+              <Profile
+                user={user}
+                currentTeam={currentTeam}
+                currentProject={currentProject}
+                teams={teams}
+                onSignOut={onSignOut}
+                onChangeTeam={onChangeTeam}
+                openModal={openModal}
+              />
+              <WorkspaceCreationModal
+                open={modalShown}
+                onClose={handleModalClose}
+                onSubmit={onCreateTeam}
+              />
+            </>
+          )}
+        </LeftArea>
+        <CenterArea>{center}</CenterArea>
+        <RightArea>{right}</RightArea>
+      </Content>
+    </Wrapper>
   );
 };
 
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetDeleteModal/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/DatasetDeleteModal/index.tsx
new file mode 100644
index 000000000..73c3c5909
--- /dev/null
+++ b/src/components/molecules/EarthEditor/DatasetPane/DatasetDeleteModal/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
+import Button from "@reearth/components/atoms/Button";
+import Icon from "@reearth/components/atoms/Icon";
+import Modal from "@reearth/components/atoms/Modal";
+import Text from "@reearth/components/atoms/Text";
+import { styled, useTheme, metricsSizes } from "@reearth/theme";
+
+export type Props = {
+  onRemove?: (schemaId?: string) => void;
+  setModal?: (show: boolean) => void;
+  openModal?: boolean;
+};
+
+const DatasetDeleteModal: React.FC<Props> = ({ onRemove, setModal, openModal }) => {
+  const intl = useIntl();
+  const theme = useTheme();
+  return (
+    <Modal
+      button1={
+        <Button
+          large
+          buttonType="danger"
+          text={intl.formatMessage({ defaultMessage: "OK" })}
+          onClick={() => onRemove?.()}
+        />
+      }
+      button2={
+        <Button
+          large
+          buttonType="secondary"
+          text={intl.formatMessage({ defaultMessage: "Cancel" })}
+          onClick={() => setModal?.(false)}
+        />
+      }
+      size="sm"
+      isVisible={openModal}
+      onClose={() => setModal?.(false)}>
+      <StyledIcon icon="alert" size={24} />
+      <Text
+        size="m"
+        color={theme.main.text}
+        otherProperties={{ marginTop: `${metricsSizes["s"]}px` }}>
+        {intl.formatMessage({
+          defaultMessage:
+            "You are deleting a dataset. Layers that are linked to this dataset might show errors.",
+        })}
+      </Text>
+      <Text
+        size="m"
+        color={theme.main.text}
+        otherProperties={{ marginTop: `${metricsSizes["s"]}px` }}>
+        {intl.formatMessage({
+          defaultMessage:
+            "Please make sure your project doesn't rely on this dataset before proceeding.",
+        })}
+      </Text>
+    </Modal>
+  );
+};
+
+export default DatasetDeleteModal;
+
+const StyledIcon = styled(Icon)`
+  color: ${props => props.theme.main.alert};
+`;
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts
index 88866d665..02c289156 100644
--- a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts
+++ b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts
@@ -1,9 +1,6 @@
 import { useCallback, useState, useEffect } from "react";
-import { useIntl } from "react-intl";
 import useFileInput from "use-file-input";
 
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
-
 import { SheetParameter } from "./Gdrive";
 
 export type DatasetType = "csv" | "gcms" | "box" | "drop" | "gdrive";
@@ -16,9 +13,7 @@ export default (
     sheetName: string,
     schemeId: string | null,
   ) => Promise<void>,
-  onNotify?: (type: NotificationType, text: string) => void,
 ) => {
-  const intl = useIntl();
   const [url, onUrlChange] = useState<string>();
   const [csv, changeCsv] = useState<File>();
   const [sheet, changeSheet] = useState<SheetParameter>();
@@ -29,19 +24,11 @@ export default (
     if (dataType === "gdrive") {
       if (!sheet || !handleGoogleSheetDatasetAdd) return;
       await handleGoogleSheetDatasetAdd(sheet.accessToken, sheet.fileId, sheet.sheetName, null);
-      onNotify?.(
-        "success",
-        intl.formatMessage({ defaultMessage: "You have added a dataset successfully." }),
-      );
     }
     const data = dataType === "csv" ? csv : url;
     if (!data || !handleDatasetAdd) return;
     await handleDatasetAdd(data, null);
-    onNotify?.(
-      "success",
-      intl.formatMessage({ defaultMessage: "You have added a dataset successfully." }),
-    );
-  }, [dataType, url, csv, sheet, handleDatasetAdd, handleGoogleSheetDatasetAdd, intl, onNotify]);
+  }, [dataType, url, csv, sheet, handleDatasetAdd, handleGoogleSheetDatasetAdd]);
 
   const onSelectCsvFile = useFileInput(
     (files: FileList) => {
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx
index a3d37b8b2..25e68cd28 100644
--- a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx
+++ b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx
@@ -7,7 +7,6 @@ import Divider from "@reearth/components/atoms/Divider";
 import Icon from "@reearth/components/atoms/Icon";
 import Loading from "@reearth/components/atoms/Loading";
 import Modal from "@reearth/components/atoms/Modal";
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import Text from "@reearth/components/atoms/Text";
 import { styled, useTheme } from "@reearth/theme";
 
@@ -26,7 +25,6 @@ interface Props {
     sheetName: string,
     schemeId: string | null,
   ) => Promise<void>;
-  onNotify?: (type: NotificationType, text: string) => void;
 }
 
 const DatasetModal: React.FC<Props> = ({
@@ -35,7 +33,6 @@ const DatasetModal: React.FC<Props> = ({
   onClose,
   handleDatasetAdd,
   handleGoogleSheetDatasetAdd,
-  onNotify,
 }) => {
   const intl = useIntl();
   const googleApiKey = window.REEARTH_CONFIG?.googleApiKey;
@@ -48,7 +45,7 @@ const DatasetModal: React.FC<Props> = ({
     onSheetSelect,
     handleImport,
     handleClick,
-  } = useHooks(handleDatasetAdd, handleGoogleSheetDatasetAdd, onNotify);
+  } = useHooks(handleDatasetAdd, handleGoogleSheetDatasetAdd);
 
   const primaryButtonText = useMemo(() => {
     if (syncLoading) {
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetSchemaCell/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/DatasetSchemaCell/index.tsx
index 6c1cf94f2..63500e19a 100644
--- a/src/components/molecules/EarthEditor/DatasetPane/DatasetSchemaCell/index.tsx
+++ b/src/components/molecules/EarthEditor/DatasetPane/DatasetSchemaCell/index.tsx
@@ -1,8 +1,9 @@
-import React, { useCallback } from "react";
+import React, { useState } from "react";
 
 import Icon from "@reearth/components/atoms/Icon";
-import { styled } from "@reearth/theme";
-import fonts from "@reearth/theme/fonts";
+import { styled, fonts } from "@reearth/theme";
+
+import DatasetDeleteModal from "../DatasetDeleteModal";
 
 import useHooks from "./hooks";
 
@@ -26,18 +27,21 @@ const DatasetSchemaCell: React.FC<DatasetSchemaProps> = ({
   selected,
 }) => {
   const ref = useHooks(onDrop);
-  const handleRemove = useCallback(() => {
-    if (!id || !window.confirm("Are you sure to remove this dataset?")) return;
-    onRemove?.(id);
-  }, [id, onRemove]);
+  const [showDeleteModal, setDeleteModal] = useState(false);
+
   return (
     <Wrapper className={className} ref={ref} selected={selected}>
       <StyledIcon icon="dataset" size={16} />
       <Name>{name}</Name>
       <Count>({totalCount ?? ""})</Count>
-      <div onClick={handleRemove}>
+      <div onClick={() => setDeleteModal(!showDeleteModal)}>
         <RemoveButton icon="bin" size={14} />
       </div>
+      <DatasetDeleteModal
+        onRemove={() => id && onRemove?.(id)}
+        openModal={showDeleteModal}
+        setModal={(show: boolean) => setDeleteModal(show)}
+      />
     </Wrapper>
   );
 };
diff --git a/src/components/molecules/EarthEditor/DatasetPane/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/index.tsx
index f8a711a06..167e47daa 100644
--- a/src/components/molecules/EarthEditor/DatasetPane/index.tsx
+++ b/src/components/molecules/EarthEditor/DatasetPane/index.tsx
@@ -3,7 +3,6 @@ import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
 import Loading from "@reearth/components/atoms/Loading";
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import Text from "@reearth/components/atoms/Text";
 import { styled, useTheme } from "@reearth/theme";
 import { parseHost, DataSource as RawDataSource } from "@reearth/util/path";
@@ -36,7 +35,6 @@ export type Props = {
   ) => void | Promise<void>;
   onRemoveDataset?: (schemaId: string) => void | Promise<void>;
   loading?: boolean;
-  onNotify?: (type: NotificationType, text: string) => void;
 };
 
 const DatasetPane: React.FC<Props> = ({
@@ -47,7 +45,6 @@ const DatasetPane: React.FC<Props> = ({
   onGoogleSheetDatasetImport,
   onRemoveDataset,
   loading,
-  onNotify,
 }) => {
   const intl = useIntl();
   const {
@@ -87,13 +84,6 @@ const DatasetPane: React.FC<Props> = ({
     [onDatasetImport, onDatasetSync, setDatasetSyncLoading, setDatasetSyncOpen],
   );
 
-  const handleDatasetRemove = useCallback(
-    async (schemeId: string) => {
-      await onRemoveDataset?.(schemeId);
-    },
-    [onRemoveDataset],
-  );
-
   const byHost = (datasetSchemas || []).reduce((acc, ac) => {
     const host = parseHost(ac.source);
     const identifier = host || intl.formatMessage({ defaultMessage: "Other Source" });
@@ -125,7 +115,7 @@ const DatasetPane: React.FC<Props> = ({
                   name={ds.name}
                   totalCount={ds.totalCount}
                   onDrop={ds.onDrop}
-                  onRemove={handleDatasetRemove}
+                  onRemove={onRemoveDataset}
                 />
               ))}
             </div>
@@ -146,7 +136,6 @@ const DatasetPane: React.FC<Props> = ({
         onClose={closeDatasetModal}
         handleGoogleSheetDatasetAdd={handleGoogleSheetDatasetAdd}
         handleDatasetAdd={handleDatasetAdd}
-        onNotify={onNotify}
       />
     </Wrapper>
   );
diff --git a/src/components/molecules/EarthEditor/Header/index.tsx b/src/components/molecules/EarthEditor/Header/index.tsx
index 779a067ab..65e0738f8 100644
--- a/src/components/molecules/EarthEditor/Header/index.tsx
+++ b/src/components/molecules/EarthEditor/Header/index.tsx
@@ -17,7 +17,7 @@ import ProjectMenu from "@reearth/components/molecules/Common/ProjectMenu";
 import { styled } from "@reearth/theme";
 
 // Proxy dependent types
-export { User, Team, NotificationType } from "@reearth/components/molecules/Common/Header";
+export { User, Team } from "@reearth/components/molecules/Common/Header";
 
 export type publishingType = "publishing" | "updating" | "unpublishing";
 export type Project = {
diff --git a/src/components/molecules/EarthEditor/PublicationModal/hooks.ts b/src/components/molecules/EarthEditor/PublicationModal/hooks.ts
index 60a74c9f9..d696510a5 100644
--- a/src/components/molecules/EarthEditor/PublicationModal/hooks.ts
+++ b/src/components/molecules/EarthEditor/PublicationModal/hooks.ts
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
-import { useIntl } from "react-intl";
 
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
+import { Status } from "@reearth/components/atoms/PublicationStatus";
+import { publishingType } from "@reearth/components/molecules/EarthEditor/Header/index";
 import generateRandomString from "@reearth/util/generate-random-string";
 
 export type Validation = "too short" | "not match";
@@ -11,12 +11,14 @@ export type CopiedItemKey = {
 };
 
 export default (
+  publishing?: publishingType,
   defaultAlias?: string,
+  searchIndex?: boolean,
+  onPublish?: (alias: string | undefined, publicationStatus: Status) => void | Promise<void>,
   onClose?: () => void,
-  onNotify?: (type: NotificationType, text: string) => void,
   onAliasValidate?: (alias: string) => void,
+  onCopyToClipBoard?: () => void,
 ) => {
-  const intl = useIntl();
   const [copiedKey, setCopiedKey] = useState<CopiedItemKey>();
   const [alias, changeAlias] = useState(defaultAlias);
   const [validation, changeValidation] = useState<Validation>();
@@ -44,17 +46,10 @@ export default (
           [key]: true,
         }));
         navigator.clipboard.writeText(value);
-        onNotify?.(
-          "info",
-          `${
-            key === "embedCode"
-              ? intl.formatMessage({ defaultMessage: "Embed code was successfully copied!" })
-              : intl.formatMessage({ defaultMessage: "URL was successfully copied!" })
-          }`,
-        );
+        onCopyToClipBoard?.();
         resetCopiedWithDelay(key);
       },
-    [onNotify, resetCopiedWithDelay, intl],
+    [resetCopiedWithDelay, onCopyToClipBoard],
   );
 
   const validate = useCallback(
@@ -101,7 +96,21 @@ export default (
     onAliasChange(defaultAlias);
   }, [defaultAlias]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handlePublish = useCallback(async () => {
+    if (!publishing) return;
+    const a = publishing !== "unpublishing" ? alias || generateAlias() : undefined;
+    const mode =
+      publishing === "unpublishing" ? "unpublished" : !searchIndex ? "limited" : "published";
+    await onPublish?.(a, mode);
+    if (publishing === "unpublishing") {
+      handleClose?.();
+    } else {
+      setStatusChange(true);
+    }
+  }, [alias, onPublish, publishing, searchIndex, setStatusChange, generateAlias, handleClose]);
+
   return {
+    handlePublish,
     handleClose,
     statusChanged,
     setStatusChange,
diff --git a/src/components/molecules/EarthEditor/PublicationModal/index.tsx b/src/components/molecules/EarthEditor/PublicationModal/index.tsx
index 03865c502..7faa18ffb 100644
--- a/src/components/molecules/EarthEditor/PublicationModal/index.tsx
+++ b/src/components/molecules/EarthEditor/PublicationModal/index.tsx
@@ -1,11 +1,10 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
 import Divider from "@reearth/components/atoms/Divider";
 import Icon from "@reearth/components/atoms/Icon";
 import Modal from "@reearth/components/atoms/Modal";
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import { Status } from "@reearth/components/atoms/PublicationStatus";
 import Text from "@reearth/components/atoms/Text";
 import ToggleButton from "@reearth/components/atoms/ToggleButton";
@@ -29,7 +28,7 @@ interface Props {
   searchIndex?: boolean;
   publishing?: publishingType;
   onPublish?: (alias: string | undefined, publicationStatus: Status) => void | Promise<void>;
-  onNotify?: (type: NotificationType, text: string) => void;
+  onCopyToClipBoard?: () => void;
   onAliasValidate?: (alias: string) => void;
   validatingAlias?: boolean;
   url?: string[];
@@ -45,7 +44,7 @@ const PublicationModal: React.FC<Props> = ({
   publicationStatus,
   onPublish,
   projectAlias,
-  onNotify,
+  onCopyToClipBoard,
   validAlias,
   onAliasValidate,
   validatingAlias,
@@ -54,17 +53,24 @@ const PublicationModal: React.FC<Props> = ({
   const intl = useIntl();
   const theme = useTheme();
   const {
+    handlePublish,
     handleClose,
     statusChanged,
-    setStatusChange,
     alias,
     validation,
-    generateAlias,
     copiedKey,
     handleCopyToClipBoard,
     showOptions,
     setOptions,
-  } = useHooks(projectAlias, onClose, onNotify, onAliasValidate);
+  } = useHooks(
+    publishing,
+    projectAlias,
+    searchIndex,
+    onPublish,
+    onClose,
+    onAliasValidate,
+    onCopyToClipBoard,
+  );
 
   const purl = useMemo(() => {
     return (url?.[0] ?? "") + (alias?.replace("/", "") ?? "") + (url?.[1] ?? "");
@@ -81,20 +87,6 @@ const PublicationModal: React.FC<Props> = ({
     ((publishing === "publishing" || publishing === "updating") &&
       (!alias || !!validation || validatingAlias || !validAlias));
 
-  const handlePublish = useCallback(async () => {
-    if (!publishing) return;
-    const a = publishing !== "unpublishing" ? alias || generateAlias() : undefined;
-    // const p = !searchIndex && publishing !== "unpublishing" ? alias || generateAlias() : undefined;
-    const mode =
-      publishing === "unpublishing" ? "unpublished" : !searchIndex ? "limited" : "published";
-    await onPublish?.(a, mode);
-    if (publishing === "unpublishing") {
-      handleClose?.();
-    } else {
-      setStatusChange(true);
-    }
-  }, [alias, onPublish, publishing, searchIndex, setStatusChange, generateAlias, handleClose]);
-
   const modalTitleText = useMemo(() => {
     return statusChanged
       ? intl.formatMessage({
diff --git a/src/components/molecules/Settings/Project/PublishSection/index.tsx b/src/components/molecules/Settings/Project/PublishSection/index.tsx
index e0c97b75e..420d97e74 100644
--- a/src/components/molecules/Settings/Project/PublishSection/index.tsx
+++ b/src/components/molecules/Settings/Project/PublishSection/index.tsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo, useCallback } from "react";
 import { useIntl } from "react-intl";
 
 import Icon from "@reearth/components/atoms/Icon";
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import { Status } from "@reearth/components/atoms/PublicationStatus";
 import Text from "@reearth/components/atoms/Text";
 import Field from "@reearth/components/molecules/Settings/Field";
@@ -22,7 +21,6 @@ interface Props {
   onPublish?: (alias: string | undefined, publicationStatus: Status) => void | Promise<void>;
   onAliasValidate?: (alias: string) => void;
   validatingAlias?: boolean;
-  onNotify?: (type: NotificationType, text: string) => void;
 }
 
 const PublishSection: React.FC<Props> = ({
diff --git a/src/components/organisms/Dashboard/hooks.ts b/src/components/organisms/Dashboard/hooks.ts
index 9ebc3fa4e..61f15826e 100644
--- a/src/components/organisms/Dashboard/hooks.ts
+++ b/src/components/organisms/Dashboard/hooks.ts
@@ -15,15 +15,15 @@ import {
   AssetsQuery,
   useAssetsQuery,
 } from "@reearth/gql";
-import { useError, useTeam, useProject, useUnselectProject } from "@reearth/state";
+import { useTeam, useProject, useUnselectProject, useNotification } from "@reearth/state";
 
 export type AssetNodes = NonNullable<AssetsQuery["assets"]["nodes"][number]>[];
 
 export default (teamId?: string) => {
-  const [error, setError] = useError();
   const [currentTeam, setCurrentTeam] = useTeam();
   const [currentProject] = useProject();
   const unselectProject = useUnselectProject();
+  const [, setNotification] = useNotification();
 
   const { data, refetch } = useMeQuery();
   const [modalShown, setModalShown] = useState(false);
@@ -74,34 +74,18 @@ export default (teamId?: string) => {
         refetchQueries: ["teams"],
       });
       if (results.data?.createTeam) {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({ defaultMessage: "Successfully created workspace!" }),
+        });
         setCurrentTeam(results.data.createTeam.team);
         navigate(`/dashboard/${results.data.createTeam.team.id}`);
       }
       refetch();
     },
-    [createTeamMutation, setCurrentTeam, refetch, navigate],
+    [createTeamMutation, setCurrentTeam, refetch, navigate, intl, setNotification],
   );
 
-  const notificationTimeout = 5000;
-
-  const notification = useMemo<{ type: "error"; text: string } | undefined>(() => {
-    return error ? { type: "error", text: error } : undefined;
-  }, [error]);
-
-  useEffect(() => {
-    if (!error) return;
-    const timerID = setTimeout(() => {
-      setError(undefined);
-    }, notificationTimeout);
-    return () => clearTimeout(timerID);
-  }, [error, setError]);
-
-  const onNotificationClose = useCallback(() => {
-    if (error) {
-      setError(undefined);
-    }
-  }, [error, setError]);
-
   useEffect(() => {
     // unselect project
     if (currentProject) {
@@ -154,18 +138,32 @@ export default (teamId?: string) => {
         },
       });
       if (project.errors || !project.data?.createProject) {
-        throw new Error(intl.formatMessage({ defaultMessage: "Failed to create project." }));
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+        });
+        setModalShown(false);
+        return;
       }
       const scene = await createScene({
         variables: { projectId: project.data.createProject.project.id },
       });
-      if (scene.errors || !scene.data?.createScene) {
-        throw new Error(intl.formatMessage({ defaultMessage: "Failed to create project." }));
+      if (scene.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+        });
+        setModalShown(false);
+        return;
       }
+      setNotification({
+        type: "success",
+        text: intl.formatMessage({ defaultMessage: "Successfully created project!" }),
+      });
       setModalShown(false);
       refetch();
     },
-    [createNewProject, createScene, teamId, refetch, intl],
+    [createNewProject, createScene, teamId, refetch, intl, setNotification],
   );
 
   const [createAssetMutation] = useCreateAssetMutation();
@@ -197,8 +195,6 @@ export default (teamId?: string) => {
     currentTeam: team as Team,
     createTeam,
     changeTeam,
-    notification,
-    onNotificationClose,
     modalShown,
     openModal,
     handleModalClose,
diff --git a/src/components/organisms/Dashboard/index.tsx b/src/components/organisms/Dashboard/index.tsx
index a7c017869..3f2c3418c 100644
--- a/src/components/organisms/Dashboard/index.tsx
+++ b/src/components/organisms/Dashboard/index.tsx
@@ -25,8 +25,6 @@ const Dashboard: React.FC<Props> = ({ teamId }) => {
     currentTeam,
     createTeam,
     changeTeam,
-    notification,
-    onNotificationClose,
     modalShown,
     openModal,
     handleModalClose,
@@ -47,8 +45,6 @@ const Dashboard: React.FC<Props> = ({ teamId }) => {
           modalShown={modalShown}
           openModal={openModal}
           handleModalClose={handleModalClose}
-          notification={notification}
-          onNotificationClose={onNotificationClose}
           dashboard
         />
       }>
diff --git a/src/components/organisms/EarthEditor/DataSourcePane/hooks.ts b/src/components/organisms/EarthEditor/DataSourcePane/hooks.ts
index ddf2db85a..f37f02c55 100644
--- a/src/components/organisms/EarthEditor/DataSourcePane/hooks.ts
+++ b/src/components/organisms/EarthEditor/DataSourcePane/hooks.ts
@@ -1,7 +1,7 @@
 import { useApolloClient } from "@apollo/client";
 import { useMemo, useCallback } from "react";
+import { useIntl } from "react-intl";
 
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import { DatasetSchema, DataSource } from "@reearth/components/molecules/EarthEditor/DatasetPane";
 import {
   useGetAllDataSetsQuery,
@@ -17,8 +17,9 @@ const pluginId = "reearth";
 const extensionId = "marker";
 
 export default () => {
-  const [sceneId] = useSceneId();
+  const intl = useIntl();
   const [, setNotification] = useNotification();
+  const [sceneId] = useSceneId();
   const [addLayerGroupFromDatasetSchemaMutation] = useAddLayerGroupFromDatasetSchemaMutation();
 
   const { data, loading } = useGetAllDataSetsQuery({
@@ -26,6 +27,19 @@ export default () => {
     skip: !sceneId,
   });
 
+  const datasetMessageSuccess = intl.formatMessage({
+    defaultMessage: "Successfully added the dataset!",
+  });
+  const datasetMessageFailure = intl.formatMessage({
+    defaultMessage: "Failed to add the dataset.",
+  });
+  const datasetDeleteMessageSuccess = intl.formatMessage({
+    defaultMessage: "Successfully deleted the dataset!",
+  });
+  const datasetDeleteMessageFailure = intl.formatMessage({
+    defaultMessage: "Failed to delete the dataset.",
+  });
+
   const datasetSchemas = useMemo(
     () =>
       data
@@ -78,17 +92,29 @@ export default () => {
   const handleDatasetImport = useCallback(
     async (file: File, schemeId: string | null) => {
       if (!sceneId) return;
-      await importData({
+      const result = await importData({
         variables: {
           file,
           sceneId,
           datasetSchemaId: schemeId,
         },
       });
+
+      if (result.errors) {
+        setNotification({
+          type: "error",
+          text: datasetMessageFailure,
+        });
+      } else {
+        setNotification({
+          type: "success",
+          text: datasetMessageSuccess,
+        });
+      }
       // re-render
       await client.resetStore();
     },
-    [client, importData, sceneId],
+    [client, importData, sceneId, datasetMessageSuccess, datasetMessageFailure, setNotification],
   );
 
   const [importGoogleSheetData] = useImportGoogleSheetDatasetMutation();
@@ -96,7 +122,7 @@ export default () => {
   const handleGoogleSheetDatasetImport = useCallback(
     async (accessToken: string, fileId: string, sheetName: string, schemeId: string | null) => {
       if (!sceneId) return;
-      await importGoogleSheetData({
+      const result = await importGoogleSheetData({
         variables: {
           accessToken,
           fileId,
@@ -105,36 +131,48 @@ export default () => {
           datasetSchemaId: schemeId,
         },
       });
+      if (result.errors) {
+        setNotification({ type: "error", text: datasetMessageFailure });
+      } else {
+        setNotification({ type: "success", text: datasetMessageSuccess });
+      }
       // re-render
       await client.resetStore();
     },
-    [client, importGoogleSheetData, sceneId],
+    [
+      client,
+      importGoogleSheetData,
+      sceneId,
+      datasetMessageFailure,
+      datasetMessageSuccess,
+      setNotification,
+    ],
   );
 
   const [removeDatasetSchema] = useRemoveDatasetMutation();
   const handleRemoveDataset = useCallback(
     async (schemaId: string) => {
-      await removeDatasetSchema({
+      const result = await removeDatasetSchema({
         variables: {
           schemaId,
           force: true,
         },
       });
+      if (result.errors) {
+        setNotification({ type: "error", text: datasetDeleteMessageFailure });
+      } else {
+        setNotification({ type: "info", text: datasetDeleteMessageSuccess });
+      }
       // re-render
       await client.resetStore();
     },
-    [client, removeDatasetSchema],
-  );
-
-  const onNotify = useCallback(
-    (type?: NotificationType, text?: string) => {
-      if (!type || !text) return;
-      setNotification({
-        type: type,
-        text: text,
-      });
-    },
-    [setNotification],
+    [
+      client,
+      removeDatasetSchema,
+      datasetDeleteMessageFailure,
+      datasetDeleteMessageSuccess,
+      setNotification,
+    ],
   );
 
   return {
@@ -144,6 +182,5 @@ export default () => {
     handleGoogleSheetDatasetImport,
     handleRemoveDataset,
     loading,
-    onNotify,
   };
 };
diff --git a/src/components/organisms/EarthEditor/DataSourcePane/index.tsx b/src/components/organisms/EarthEditor/DataSourcePane/index.tsx
index b7053b29c..b394cbddf 100644
--- a/src/components/organisms/EarthEditor/DataSourcePane/index.tsx
+++ b/src/components/organisms/EarthEditor/DataSourcePane/index.tsx
@@ -18,7 +18,6 @@ const DataSourcePane: React.FC<Props> = ({ className }) => {
     handleGoogleSheetDatasetImport,
     handleRemoveDataset,
     loading,
-    onNotify,
   } = useHooks();
 
   return (
@@ -30,7 +29,6 @@ const DataSourcePane: React.FC<Props> = ({ className }) => {
       onDatasetImport={handleDatasetImport}
       onRemoveDataset={handleRemoveDataset}
       loading={loading}
-      onNotify={onNotify}
     />
   );
 };
diff --git a/src/components/organisms/EarthEditor/Header/hooks.ts b/src/components/organisms/EarthEditor/Header/hooks.ts
index 5b526d399..44b146aa2 100644
--- a/src/components/organisms/EarthEditor/Header/hooks.ts
+++ b/src/components/organisms/EarthEditor/Header/hooks.ts
@@ -3,7 +3,6 @@ import { useState, useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
 
 import { useAuth } from "@reearth/auth";
-import { Type as NotificationType } from "@reearth/components/atoms/NotificationBar";
 import { Status } from "@reearth/components/atoms/PublicationStatus";
 import { User } from "@reearth/components/molecules/EarthEditor/Header";
 import { publishingType } from "@reearth/components/molecules/EarthEditor/Header/index";
@@ -15,18 +14,17 @@ import {
   useCheckProjectAliasLazyQuery,
   useCreateTeamMutation,
 } from "@reearth/gql";
-import { useError, useSceneId, useTeam, useProject, useNotification } from "@reearth/state";
+import { useSceneId, useTeam, useProject, useNotification } from "@reearth/state";
 
 export default () => {
   const url = window.REEARTH_CONFIG?.published?.split("{}");
   const { logout } = useAuth();
   const intl = useIntl();
 
-  const [error, setError] = useError();
+  const [, setNotification] = useNotification();
   const [sceneId] = useSceneId();
   const [currentTeam, setTeam] = useTeam();
   const [currentProject, setProject] = useProject();
-  const [notification, setNotification] = useNotification();
 
   const navigate = useNavigate();
 
@@ -117,17 +115,6 @@ export default () => {
     setPublicationModalVisible(false);
   }, [project?.publishmentStatus]);
 
-  const notify = useCallback(
-    (type?: NotificationType, text?: string) => {
-      if (!type || !text) return;
-      setNotification({
-        type: type,
-        text: text,
-      });
-    },
-    [setNotification],
-  );
-
   const publishProject = useCallback(
     async (alias: string | undefined, s: Status) => {
       if (!project) return;
@@ -137,22 +124,34 @@ export default () => {
           : s == "published"
           ? PublishmentStatus.Public
           : PublishmentStatus.Private;
-      await publishProjectMutation({
+      const result = await publishProjectMutation({
         variables: { projectId: project.id, alias, status: gqlStatus },
       });
 
-      notify(
-        s === "limited" ? "success" : s == "published" ? "success" : "info",
-        s === "limited"
-          ? intl.formatMessage({ defaultMessage: "Successfully published your project!" })
-          : s == "published"
-          ? intl.formatMessage({
-              defaultMessage: "Successfully published your project with search engine indexing!",
-            })
-          : intl.formatMessage({ defaultMessage: "Successfully unpublished your project!" }),
-      );
+      if (result.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to publish your project." }),
+        });
+      } else {
+        setNotification({
+          type: s === "limited" ? "success" : s == "published" ? "success" : "info",
+          text:
+            s === "limited"
+              ? intl.formatMessage({ defaultMessage: "Successfully published your project!" })
+              : s == "published"
+              ? intl.formatMessage({
+                  defaultMessage:
+                    "Successfully published your project with search engine indexing!",
+                })
+              : intl.formatMessage({
+                  defaultMessage:
+                    "Successfully unpublished your project. Now nobody can access your project.",
+                }),
+        });
+      }
     },
-    [project, publishProjectMutation, notify, intl],
+    [project, publishProjectMutation, intl, setNotification],
   );
 
   const changeTeam = useCallback(
@@ -186,35 +185,16 @@ export default () => {
     setProjectAlias(project?.alias);
   }, [project]);
 
-  const notificationTimeout = 5000;
-
-  useEffect(() => {
-    if (!error) return;
-    setNotification({
-      type: "error",
-      text: error,
-    });
-    const timerID = setTimeout(() => {
-      setError(undefined);
-    }, notificationTimeout);
-    return () => clearTimeout(timerID);
-  }, [error, setError, setNotification]);
-
-  const closeNotification = useCallback(() => {
-    if (error) {
-      setError(undefined);
-    }
-  }, [error, setError]);
-
   const openPreview = useCallback(() => {
     window.open(location.pathname + "/preview", "_blank");
   }, []);
 
-  useEffect(() => {
-    if (!notification?.text) return;
-    const timerID = setTimeout(() => setNotification(undefined), notificationTimeout);
-    return () => clearTimeout(timerID);
-  }, [notification?.text, setNotification]);
+  const handleCopyToClipBoard = useCallback(() => {
+    setNotification({
+      type: "info",
+      text: intl.formatMessage({ defaultMessage: "Successfully copied to clipboard!" }),
+    });
+  }, [intl, setNotification]);
 
   return {
     teams,
@@ -231,7 +211,6 @@ export default () => {
     user,
     currentTeam,
     currentProject,
-    notification,
     validAlias,
     validatingAlias,
     url,
@@ -240,11 +219,10 @@ export default () => {
     closePublicationModal,
     openWorkspaceModal,
     closeWorkspaceModal,
+    handleCopyToClipBoard,
     publishProject,
     logout,
-    notify,
     checkProjectAlias,
-    closeNotification,
     createTeam,
     openPreview,
   };
diff --git a/src/components/organisms/EarthEditor/Header/index.tsx b/src/components/organisms/EarthEditor/Header/index.tsx
index dca7322c4..7d8903a47 100644
--- a/src/components/organisms/EarthEditor/Header/index.tsx
+++ b/src/components/organisms/EarthEditor/Header/index.tsx
@@ -35,12 +35,10 @@ const Header: React.FC<Props> = ({ className }) => {
     currentTeam,
     currentProject,
     logout,
-    notification,
-    notify,
+    handleCopyToClipBoard,
     validAlias,
     checkProjectAlias,
     validatingAlias,
-    closeNotification,
     createTeam,
     url,
     openPreview,
@@ -60,8 +58,6 @@ const Header: React.FC<Props> = ({ className }) => {
         onSignOut={logout}
         onCreateTeam={createTeam}
         onChangeTeam={changeTeam}
-        notification={notification}
-        onNotificationClose={closeNotification}
         onPreviewOpen={openPreview}
         modalShown={workspaceModalVisible}
         openModal={openWorkspaceModal}
@@ -79,7 +75,7 @@ const Header: React.FC<Props> = ({ className }) => {
         projectId={projectId}
         projectAlias={projectAlias}
         publicationStatus={projectStatus}
-        onNotify={notify}
+        onCopyToClipBoard={handleCopyToClipBoard}
         validAlias={validAlias}
         onAliasValidate={checkProjectAlias}
         validatingAlias={validatingAlias}
diff --git a/src/components/organisms/Notification/hooks.ts b/src/components/organisms/Notification/hooks.ts
new file mode 100644
index 000000000..8c3457248
--- /dev/null
+++ b/src/components/organisms/Notification/hooks.ts
@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "react";
+import { useIntl } from "react-intl";
+
+import { useError, useNotification, Notification } from "@reearth/state";
+
+export const notificationTimeout = 5000;
+
+export default () => {
+  const intl = useIntl();
+  const [error, setError] = useError();
+  const [notification, setNotification] = useNotification();
+  const [visible, changeVisibility] = useState(false);
+
+  const errorMessage = intl.formatMessage({ defaultMessage: "Error" });
+  const warningMessage = intl.formatMessage({ defaultMessage: "Warning" });
+  const noticeMessage = intl.formatMessage({ defaultMessage: "Notice" });
+
+  const notificationHeading =
+    notification?.type === "error"
+      ? errorMessage
+      : notification?.type === "warning"
+      ? warningMessage
+      : noticeMessage;
+
+  const resetNotification = useCallback(() => setNotification(undefined), [setNotification]);
+
+  const setModal = (show: boolean) => {
+    changeVisibility(show);
+  };
+
+  useEffect(() => {
+    if (!error) return;
+    setNotification({
+      type: "error",
+      heading: errorMessage,
+      text: intl.formatMessage({ defaultMessage: "Something went wrong. Please try again later." }),
+    });
+    setError(undefined);
+  }, [error, setError, errorMessage, setNotification, intl]);
+
+  useEffect(() => {
+    if (!notification) return;
+    const timerID = setTimeout(() => {
+      changeVisibility(false);
+    }, notificationTimeout);
+    return () => clearTimeout(timerID);
+  }, [notification]);
+
+  useEffect(() => {
+    changeVisibility(!!notification);
+  }, [notification]);
+
+  return {
+    visible,
+    setModal,
+    notification: {
+      type: notification?.type,
+      heading: notificationHeading,
+      text: notification?.text,
+    } as Notification,
+    resetNotification,
+  };
+};
diff --git a/src/components/organisms/Notification/index.tsx b/src/components/organisms/Notification/index.tsx
new file mode 100644
index 000000000..33be92f0a
--- /dev/null
+++ b/src/components/organisms/Notification/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import MoleculeNotificationBanner from "@reearth/components/atoms/Notification";
+
+import useHooks from "./hooks";
+
+const NotificationBanner: React.FC = () => {
+  const { visible, setModal, notification, resetNotification } = useHooks();
+
+  return (
+    <MoleculeNotificationBanner
+      visible={visible}
+      setModal={setModal}
+      notification={notification}
+      resetNotification={resetNotification}
+    />
+  );
+};
+
+export default NotificationBanner;
diff --git a/src/components/organisms/Settings/Account/hooks.ts b/src/components/organisms/Settings/Account/hooks.ts
index 36e857956..4f1a132ca 100644
--- a/src/components/organisms/Settings/Account/hooks.ts
+++ b/src/components/organisms/Settings/Account/hooks.ts
@@ -1,8 +1,9 @@
 import { useApolloClient } from "@apollo/client";
 import { useCallback } from "react";
+import { useIntl } from "react-intl";
 
 import { useUpdateMeMutation, useProfileQuery } from "@reearth/gql";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 export enum Theme {
   Default = "DEFAULT",
@@ -11,6 +12,8 @@ export enum Theme {
 }
 
 export default () => {
+  const intl = useIntl();
+  const [, setNotification] = useNotification();
   const client = useApolloClient();
   const [currentTeam] = useTeam();
   const [currentProject] = useProject();
@@ -23,32 +26,62 @@ export default () => {
   const [updateMeMutation] = useUpdateMeMutation();
 
   const updateName = useCallback(
-    (name: string) => {
-      updateMeMutation({ variables: { name } });
+    async (name: string) => {
+      const username = await updateMeMutation({ variables: { name } });
+      if (username.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to update account name." }),
+        });
+      }
     },
-    [updateMeMutation],
+    [updateMeMutation, intl, setNotification],
   );
 
   const updatePassword = useCallback(
-    (password: string, passwordConfirmation: string) => {
-      updateMeMutation({ variables: { password, passwordConfirmation } });
+    async (password: string, passwordConfirmation: string) => {
+      const newPassword = await updateMeMutation({ variables: { password, passwordConfirmation } });
+      if (newPassword.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to update password." }),
+        });
+      } else {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({ defaultMessage: "Successfully updated password!" }),
+        });
+      }
     },
-    [updateMeMutation],
+    [updateMeMutation, intl, setNotification],
   );
 
   const updateLanguage = useCallback(
     async (lang: string) => {
-      await updateMeMutation({ variables: { lang } });
-      await client.resetStore();
+      const language = await updateMeMutation({ variables: { lang } });
+      if (language.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to change language." }),
+        });
+      } else {
+        await client.resetStore();
+      }
     },
-    [updateMeMutation, client],
+    [updateMeMutation, intl, setNotification, client],
   );
 
   const updateTheme = useCallback(
-    (theme: string) => {
-      updateMeMutation({ variables: { theme: theme as Theme } });
+    async (theme: string) => {
+      const newTheme = await updateMeMutation({ variables: { theme: theme as Theme } });
+      if (newTheme.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to change theme." }),
+        });
+      }
     },
-    [updateMeMutation],
+    [updateMeMutation, intl, setNotification],
   );
 
   return {
diff --git a/src/components/organisms/Settings/Project/Dataset/hooks.ts b/src/components/organisms/Settings/Project/Dataset/hooks.ts
index 013c4a926..03b988005 100644
--- a/src/components/organisms/Settings/Project/Dataset/hooks.ts
+++ b/src/components/organisms/Settings/Project/Dataset/hooks.ts
@@ -1,5 +1,6 @@
 import { useApolloClient } from "@apollo/client";
 import { useCallback } from "react";
+import { useIntl } from "react-intl";
 
 import {
   DatasetSchemasQuery,
@@ -8,15 +9,17 @@ import {
   useImportDatasetMutation,
   useRemoveDatasetMutation,
 } from "@reearth/gql";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 type Nodes = NonNullable<DatasetSchemasQuery["scene"]>["datasetSchemas"]["nodes"];
 
 type DatasetSchemas = NonNullable<Nodes[number]>[];
 
 export default (projectId: string) => {
+  const intl = useIntl();
   const [currentTeam] = useTeam();
   const [currentProject] = useProject();
+  const [, setNotification] = useNotification();
 
   const { data: sceneData } = useSceneQuery({
     variables: { projectId: projectId ?? "" },
@@ -38,16 +41,27 @@ export default (projectId: string) => {
   const [removeDatasetSchema] = useRemoveDatasetMutation();
   const handleRemoveDataset = useCallback(
     async (schemaId: string) => {
-      await removeDatasetSchema({
+      const results = await removeDatasetSchema({
         variables: {
           schemaId,
           force: true,
         },
       });
-      // re-render
-      await client.resetStore();
+      if (results.errors) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to delete dataset." }),
+        });
+      } else {
+        setNotification({
+          type: "info",
+          text: intl.formatMessage({ defaultMessage: "Dataset was successfully deleted." }),
+        });
+        // re-render
+        await client.resetStore();
+      }
     },
-    [client, removeDatasetSchema],
+    [client, removeDatasetSchema, setNotification, intl],
   );
 
   // Add
diff --git a/src/components/organisms/Settings/Project/Plugin/hooks.ts b/src/components/organisms/Settings/Project/Plugin/hooks.ts
index 61a14398f..1d75f34f1 100644
--- a/src/components/organisms/Settings/Project/Plugin/hooks.ts
+++ b/src/components/organisms/Settings/Project/Plugin/hooks.ts
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
 
 import { PluginItem } from "@reearth/components/molecules/Settings/Project/Plugin/PluginSection";
 import {
@@ -7,11 +8,13 @@ import {
   useUninstallPluginMutation,
   useUploadPluginMutation,
 } from "@reearth/gql/graphql-client-api";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 export default (projectId: string) => {
+  const intl = useIntl();
   const [currentTeam] = useTeam();
   const [currentProject] = useProject();
+  const [, setNotification] = useNotification();
 
   const { loading: pluginLoading } = useInstallablePluginsQuery();
   const [uploadPluginMutation] = useUploadPluginMutation();
@@ -45,38 +48,79 @@ export default (projectId: string) => {
     async (files: FileList) => {
       const sceneId = rawSceneData?.scene?.id;
       if (!sceneId) return;
-      await Promise.all(
+      const results = await Promise.all(
         Array.from(files).map(f =>
           uploadPluginMutation({
             variables: { sceneId: sceneId, file: f },
           }),
         ),
       );
-      await refetchInstalledPlugins();
+      if (results) {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({ defaultMessage: "Successfully installed plugin!" }),
+        });
+        await refetchInstalledPlugins();
+      } else {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to install plugin." }),
+        });
+      }
     },
-    [rawSceneData?.scene?.id, refetchInstalledPlugins, uploadPluginMutation],
+    [rawSceneData?.scene?.id, refetchInstalledPlugins, uploadPluginMutation, setNotification, intl],
   );
 
   const installFromPublicRepo = useCallback(
     async (repoUrl: string) => {
       const sceneId = rawSceneData?.scene?.id;
       if (!sceneId) return;
-      await uploadPluginMutation({
+      const results = await uploadPluginMutation({
         variables: { sceneId: sceneId, url: repoUrl },
       });
-      await refetchInstalledPlugins();
+      if (results.errors || !results.data?.uploadPlugin) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to install plugin." }),
+        });
+      } else {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({ defaultMessage: "Successfully installed plugin!" }),
+        });
+        await refetchInstalledPlugins();
+      }
     },
-    [rawSceneData?.scene?.id, refetchInstalledPlugins, uploadPluginMutation],
+    [rawSceneData?.scene?.id, refetchInstalledPlugins, uploadPluginMutation, setNotification, intl],
   );
 
   const uninstallPlugin = useCallback(
     async (pluginId: string) => {
       const sceneId = rawSceneData?.scene?.id;
       if (!sceneId) return;
-      await uninstallPluginMutation({ variables: { sceneId: sceneId, pluginId: pluginId } });
-      await refetchInstalledPlugins();
+      const results = await uninstallPluginMutation({
+        variables: { sceneId: sceneId, pluginId: pluginId },
+      });
+      if (results.errors || !results.data?.uninstallPlugin) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to uninstall plugin." }),
+        });
+      } else {
+        setNotification({
+          type: "info",
+          text: intl.formatMessage({ defaultMessage: "Successfully removed plugin." }),
+        });
+        await refetchInstalledPlugins();
+      }
     },
-    [rawSceneData?.scene?.id, refetchInstalledPlugins, uninstallPluginMutation],
+    [
+      rawSceneData?.scene?.id,
+      refetchInstalledPlugins,
+      uninstallPluginMutation,
+      setNotification,
+      intl,
+    ],
   );
 
   const loading = sceneLoading || pluginLoading;
diff --git a/src/components/organisms/Settings/Project/hooks.ts b/src/components/organisms/Settings/Project/hooks.ts
index 5562242cb..df2c95f30 100644
--- a/src/components/organisms/Settings/Project/hooks.ts
+++ b/src/components/organisms/Settings/Project/hooks.ts
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
 
 import {
   useProjectQuery,
@@ -9,7 +10,7 @@ import {
   AssetsQuery,
   useAssetsQuery,
 } from "@reearth/gql";
-import { useTeam } from "@reearth/state";
+import { useTeam, useNotification } from "@reearth/state";
 
 export type AssetNodes = NonNullable<AssetsQuery["assets"]["nodes"][number]>[];
 
@@ -18,6 +19,8 @@ type Params = {
 };
 
 export default ({ projectId }: Params) => {
+  const intl = useIntl();
+  const [, setNotification] = useNotification();
   const [currentTeam] = useTeam();
 
   const teamId = currentTeam?.id;
@@ -66,10 +69,6 @@ export default ({ projectId }: Params) => {
     [projectId, updateProjectMutation],
   );
 
-  const deleteProject = useCallback(() => {
-    projectId && deleteProjectMutation({ variables: { projectId } });
-  }, [projectId, deleteProjectMutation]);
-
   const updateProjectDescription = useCallback(
     (description: string) => {
       projectId && updateProjectMutation({ variables: { projectId, description } });
@@ -85,12 +84,49 @@ export default ({ projectId }: Params) => {
   );
 
   const archiveProject = useCallback(
-    (archived: boolean) => {
-      projectId && archiveProjectMutation({ variables: { projectId, archived } });
+    async (archived: boolean) => {
+      if (!projectId) return;
+      const results = await archiveProjectMutation({ variables: { projectId, archived } });
+      if (results.errors) {
+        setNotification({
+          type: "error",
+          text: archived
+            ? intl.formatMessage({
+                defaultMessage: "Failed to archive project.",
+              })
+            : intl.formatMessage({ defaultMessage: "Failed to unarchive project." }),
+        });
+      } else {
+        setNotification({
+          type: "info",
+          text: archived
+            ? intl.formatMessage({ defaultMessage: "Successfully archived the project." })
+            : intl.formatMessage({
+                defaultMessage:
+                  "Successfully unarchived the project. You can now edit this project.",
+              }),
+        });
+      }
     },
-    [projectId, archiveProjectMutation],
+    [projectId, intl, setNotification, archiveProjectMutation],
   );
 
+  const deleteProject = useCallback(async () => {
+    if (!projectId) return;
+    const results = await deleteProjectMutation({ variables: { projectId } });
+    if (results.errors) {
+      setNotification({
+        type: "error",
+        text: intl.formatMessage({ defaultMessage: "Failed to delete project." }),
+      });
+    } else {
+      setNotification({
+        type: "info",
+        text: intl.formatMessage({ defaultMessage: "Project was successfully deleted." }),
+      });
+    }
+  }, [projectId, intl, setNotification, deleteProjectMutation]);
+
   const [createAssetMutation] = useCreateAssetMutation();
   const createAssets = useCallback(
     (files: FileList) =>
diff --git a/src/components/organisms/Settings/ProjectList/hooks.ts b/src/components/organisms/Settings/ProjectList/hooks.ts
index 5a7da41fd..107354729 100644
--- a/src/components/organisms/Settings/ProjectList/hooks.ts
+++ b/src/components/organisms/Settings/ProjectList/hooks.ts
@@ -13,7 +13,7 @@ import {
   useAssetsQuery,
   useCreateAssetMutation,
 } from "@reearth/gql";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 const toPublishmentStatus = (s: PublishmentStatus) =>
   s === PublishmentStatus.Public
@@ -23,6 +23,7 @@ const toPublishmentStatus = (s: PublishmentStatus) =>
     : "unpublished";
 
 export default () => {
+  const [, setNotification] = useNotification();
   const [currentTeam, setTeam] = useTeam();
   const [, setProject] = useProject();
   const navigate = useNavigate();
@@ -103,18 +104,32 @@ export default () => {
         },
       });
       if (project.errors || !project.data?.createProject) {
-        throw new Error(intl.formatMessage({ defaultMessage: "Failed to create project." }));
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+        });
+        setModalShown(false);
+        return;
       }
       const scene = await createScene({
         variables: { projectId: project.data.createProject.project.id },
       });
       if (scene.errors || !scene.data?.createScene) {
-        throw new Error(intl.formatMessage({ defaultMessage: "Failed to create project." }));
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+        });
+        setModalShown(false);
+        return;
       }
+      setNotification({
+        type: "success",
+        text: intl.formatMessage({ defaultMessage: "Successfully created project!" }),
+      });
       setModalShown(false);
       refetch();
     },
-    [createNewProject, createScene, intl, refetch, teamId],
+    [createNewProject, createScene, intl, refetch, setNotification, teamId],
   );
 
   const selectProject = useCallback(
diff --git a/src/components/organisms/Settings/SettingPage/hooks.ts b/src/components/organisms/Settings/SettingPage/hooks.ts
index 6c269504f..bf13a5bdf 100644
--- a/src/components/organisms/Settings/SettingPage/hooks.ts
+++ b/src/components/organisms/Settings/SettingPage/hooks.ts
@@ -1,5 +1,5 @@
 import { useNavigate } from "@reach/router";
-import { useEffect, useCallback, useMemo, useState } from "react";
+import { useEffect, useCallback, useState } from "react";
 
 import { User } from "@reearth/components/molecules/Common/Header";
 import {
@@ -9,7 +9,7 @@ import {
   useProjectQuery,
   useCreateTeamMutation,
 } from "@reearth/gql";
-import { useError, useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject } from "@reearth/state";
 
 type Params = {
   teamId?: string;
@@ -19,7 +19,6 @@ type Params = {
 export default (params: Params) => {
   const projectId = params.projectId;
 
-  const [error, setError] = useError();
   const [currentTeam, setTeam] = useTeam();
   const [currentProject, setProject] = useProject();
 
@@ -104,26 +103,6 @@ export default (params: Params) => {
     [createTeamMutation, setTeam],
   );
 
-  const notificationTimeout = 5000;
-
-  const notification = useMemo<{ type: "error"; text: string } | undefined>(() => {
-    return error ? { type: "error", text: error } : undefined;
-  }, [error]);
-
-  useEffect(() => {
-    if (!error) return;
-    const timerID = setTimeout(() => {
-      setError(undefined);
-    }, notificationTimeout);
-    return () => clearTimeout(timerID);
-  }, [error, setError]);
-
-  const onNotificationClose = useCallback(() => {
-    if (error) {
-      setError(undefined);
-    }
-  }, [error, setError]);
-
   const back = useCallback(() => navigate(-1), [navigate]);
 
   return {
@@ -138,7 +117,5 @@ export default (params: Params) => {
     openModal,
     handleModalClose,
     back,
-    notification,
-    onNotificationClose,
   };
 };
diff --git a/src/components/organisms/Settings/SettingPage/index.tsx b/src/components/organisms/Settings/SettingPage/index.tsx
index 58741db1a..1159abaf5 100644
--- a/src/components/organisms/Settings/SettingPage/index.tsx
+++ b/src/components/organisms/Settings/SettingPage/index.tsx
@@ -21,14 +21,12 @@ const SettingPage: React.FC<Props> = ({ teamId, projectId, children }) => {
     currentTeam,
     currentProject,
     sceneId,
+    modalShown,
     changeTeam,
     createTeam,
-    modalShown,
     openModal,
     handleModalClose,
     back,
-    notification,
-    onNotificationClose,
   } = useHooks({
     teamId,
     projectId,
@@ -47,9 +45,7 @@ const SettingPage: React.FC<Props> = ({ teamId, projectId, children }) => {
       onChangeTeam={changeTeam}
       modalShown={modalShown}
       openModal={openModal}
-      handleModalClose={handleModalClose}
-      notification={notification}
-      onNotificationClose={onNotificationClose}>
+      handleModalClose={handleModalClose}>
       {children}
     </MoleculesSettingPage>
   );
diff --git a/src/components/organisms/Settings/Workspace/Asset/hooks.ts b/src/components/organisms/Settings/Workspace/Asset/hooks.ts
index d9cf2a85b..c6d2eede9 100644
--- a/src/components/organisms/Settings/Workspace/Asset/hooks.ts
+++ b/src/components/organisms/Settings/Workspace/Asset/hooks.ts
@@ -1,5 +1,6 @@
 import { useNavigate } from "@reach/router";
 import { useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
 
 import {
   AssetsQuery,
@@ -7,7 +8,7 @@ import {
   useCreateAssetMutation,
   useRemoveAssetMutation,
 } from "@reearth/gql";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 type AssetNodes = NonNullable<AssetsQuery["assets"]["nodes"][number]>[];
 
@@ -16,6 +17,8 @@ type Params = {
 };
 
 export default (params: Params) => {
+  const intl = useIntl();
+  const [, setNotification] = useNotification();
   const [currentTeam] = useTeam();
   const [currentProject] = useProject();
   const navigate = useNavigate();
@@ -36,15 +39,28 @@ export default (params: Params) => {
   const createAssets = useCallback(
     (files: FileList) =>
       (async () => {
-        if (teamId) {
-          await Promise.all(
-            Array.from(files).map(file => createAssetMutation({ variables: { teamId, file } })),
-          );
+        if (!teamId) return;
 
+        const results = await Promise.all(
+          Array.from(files).map(async file => {
+            const result = await createAssetMutation({ variables: { teamId, file } });
+            if (result.errors || !result.data?.createAsset) {
+              setNotification({
+                type: "error",
+                text: intl.formatMessage({ defaultMessage: "Failed to add one or more assets." }),
+              });
+            }
+          }),
+        );
+        if (results) {
+          setNotification({
+            type: "success",
+            text: intl.formatMessage({ defaultMessage: "Successfully added one or more assets." }),
+          });
           await refetch();
         }
       })(),
-    [createAssetMutation, refetch, teamId],
+    [createAssetMutation, refetch, teamId, setNotification, intl],
   );
 
   const [removeAssetMutation] = useRemoveAssetMutation();
@@ -52,15 +68,33 @@ export default (params: Params) => {
   const removeAsset = useCallback(
     (assetIds: string[]) =>
       (async () => {
-        if (teamId) {
-          await Promise.all(
-            assetIds.map(assetId => {
-              removeAssetMutation({ variables: { assetId }, refetchQueries: ["Assets"] });
+        if (!teamId) return;
+        const results = await Promise.all(
+          assetIds.map(async assetId => {
+            const result = await removeAssetMutation({
+              variables: { assetId },
+              refetchQueries: ["Assets"],
+            });
+            if (result.errors || result.data?.removeAsset) {
+              setNotification({
+                type: "error",
+                text: intl.formatMessage({
+                  defaultMessage: "Failed to delete one or more assets.",
+                }),
+              });
+            }
+          }),
+        );
+        if (results) {
+          setNotification({
+            type: "info",
+            text: intl.formatMessage({
+              defaultMessage: "One or more assets were successfully deleted.",
             }),
-          );
+          });
         }
       })(),
-    [removeAssetMutation, teamId],
+    [removeAssetMutation, teamId, setNotification, intl],
   );
 
   return {
diff --git a/src/components/organisms/Settings/Workspace/hooks.ts b/src/components/organisms/Settings/Workspace/hooks.ts
index b5d61487d..3fd6a04a4 100644
--- a/src/components/organisms/Settings/Workspace/hooks.ts
+++ b/src/components/organisms/Settings/Workspace/hooks.ts
@@ -1,5 +1,6 @@
 import { useNavigate } from "@reach/router";
 import { useCallback, useEffect, useState } from "react";
+import { useIntl } from "react-intl";
 
 import { Role as RoleUnion } from "@reearth/components/molecules/Settings/Workspace/MemberListItem";
 import {
@@ -14,15 +15,17 @@ import {
   useRemoveMemberFromTeamMutation,
 } from "@reearth/gql";
 import { Team } from "@reearth/gql/graphql-client-api";
-import { useTeam, useProject } from "@reearth/state";
+import { useTeam, useProject, useNotification } from "@reearth/state";
 
 type Params = {
   teamId: string;
 };
 
 export default (params: Params) => {
+  const intl = useIntl();
   const [currentTeam, setTeam] = useTeam();
   const [currentProject] = useProject();
+  const [, setNotification] = useNotification();
 
   const navigate = useNavigate();
   const [modalShown, setModalShown] = useState(false);
@@ -66,49 +69,93 @@ export default (params: Params) => {
         refetchQueries: ["teams"],
       });
       const team = results.data?.createTeam?.team;
-      if (results) {
+      if (results.errors || !results.data?.createTeam) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to create workspace." }),
+        });
+      } else {
         setTeam(team);
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({ defaultMessage: "Sucessfully created a workspace!" }),
+        });
       }
       setModalShown(false);
     },
-    [createTeamMutation, setTeam],
+    [createTeamMutation, setTeam, intl, setNotification],
   );
 
   const [updateTeamMutation] = useUpdateTeamMutation();
 
   const updateName = useCallback(
     async (name: string) => {
-      if (teamId) {
-        const results = await updateTeamMutation({ variables: { teamId, name } });
+      if (!teamId) return;
+      const results = await updateTeamMutation({ variables: { teamId, name } });
+      if (results.errors || !results.data?.__typename) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({ defaultMessage: "Failed to update workspace name." }),
+        });
+      } else {
         setTeam(results.data?.updateTeam?.team);
+        setNotification({
+          type: "info",
+          text: intl.formatMessage({ defaultMessage: "You have changed the workspace's name." }),
+        });
       }
     },
-    [teamId, updateTeamMutation, setTeam],
+    [teamId, updateTeamMutation, intl, setNotification, setTeam],
   );
 
   const [deleteTeamMutation] = useDeleteTeamMutation({
     refetchQueries: ["teams"],
   });
   const deleteTeam = useCallback(async () => {
-    if (teamId) {
-      await deleteTeamMutation({ variables: { teamId } });
+    if (!teamId) return;
+    const result = await deleteTeamMutation({ variables: { teamId } });
+    if (result.errors || !result.data?.deleteTeam) {
+      setNotification({
+        type: "error",
+        text: intl.formatMessage({ defaultMessage: "Failed to delete workspace." }),
+      });
+    } else {
+      setNotification({
+        type: "info",
+        text: intl.formatMessage({ defaultMessage: "Workspace was successfully deleted." }),
+      });
+      setTeam(teams[0]);
     }
-    setTeam(teams[0]);
-  }, [teamId, setTeam, teams, deleteTeamMutation]);
+  }, [teamId, setTeam, teams, deleteTeamMutation, intl, setNotification]);
 
   const [addMemberToTeamMutation] = useAddMemberToTeamMutation();
 
   const addMembersToTeam = useCallback(
     async (userIds: string[]) => {
-      await Promise.all(
+      const results = await Promise.all(
         userIds.map(async userId => {
-          if (teamId) {
-            await addMemberToTeamMutation({ variables: { userId, teamId, role: Role.Reader } });
+          if (!teamId) return;
+          const result = await addMemberToTeamMutation({
+            variables: { userId, teamId, role: Role.Reader },
+          });
+          if (result.errors || !result.data?.addMemberToTeam) {
+            setNotification({
+              type: "error",
+              text: intl.formatMessage({ defaultMessage: "Failed to add one or more members." }),
+            });
           }
         }),
       );
+      if (results) {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({
+            defaultMessage: "Successfully added member(s) to the workspace!",
+          }),
+        });
+      }
     },
-    [teamId, addMemberToTeamMutation],
+    [teamId, addMemberToTeamMutation, setNotification, intl],
   );
 
   const [updateMemberOfTeamMutation] = useUpdateMemberOfTeamMutation();
@@ -135,12 +182,26 @@ export default (params: Params) => {
   const [removeMemberFromTeamMutation] = useRemoveMemberFromTeamMutation();
 
   const removeMemberFromTeam = useCallback(
-    (userId: string) => {
-      if (teamId) {
-        removeMemberFromTeamMutation({ variables: { teamId, userId } });
+    async (userId: string) => {
+      if (!teamId) return;
+      const result = await removeMemberFromTeamMutation({ variables: { teamId, userId } });
+      if (result.errors || !result.data?.removeMemberFromTeam) {
+        setNotification({
+          type: "error",
+          text: intl.formatMessage({
+            defaultMessage: "Failed to delete member from the workspace.",
+          }),
+        });
+      } else {
+        setNotification({
+          type: "success",
+          text: intl.formatMessage({
+            defaultMessage: "Successfully removed member from the workspace.",
+          }),
+        });
       }
     },
-    [teamId, removeMemberFromTeamMutation],
+    [teamId, removeMemberFromTeamMutation, intl, setNotification],
   );
 
   const selectWorkspace = useCallback(
diff --git a/src/components/pages/TopPage/hooks.ts b/src/components/pages/TopPage/hooks.ts
index ac0bec282..b7f95eeb1 100644
--- a/src/components/pages/TopPage/hooks.ts
+++ b/src/components/pages/TopPage/hooks.ts
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 
 import { useAuth, useCleanUrl } from "@reearth/auth";
 import { useTeamsQuery } from "@reearth/gql";
-import { useTeam } from "@reearth/state";
+import { useTeam, useNotification } from "@reearth/state";
 
 export type Mode = "layer" | "widget";
 
@@ -12,6 +12,7 @@ export default () => {
   const error = useCleanUrl();
   const navigate = useNavigate();
   const [currentTeam, setTeam] = useTeam();
+  const [, setNotification] = useNotification();
 
   const { data, loading } = useTeamsQuery({ skip: !isAuthenticated });
   const teamId = currentTeam?.id || data?.me?.myTeam.id;
@@ -28,10 +29,16 @@ export default () => {
     }
   }, [authError, data?.me, isAuthenticated, loading, logout]);
 
+  if (error) {
+    setNotification({
+      type: "error",
+      text: error,
+    });
+  }
+
   return {
     isLoading,
     isAuthenticated,
     login,
-    error,
   };
 };
diff --git a/src/components/pages/TopPage/index.tsx b/src/components/pages/TopPage/index.tsx
index 05fcdf99f..0f0b21964 100644
--- a/src/components/pages/TopPage/index.tsx
+++ b/src/components/pages/TopPage/index.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { useIntl } from "react-intl";
 
 import Loading from "@reearth/components/atoms/Loading";
-import NotificationBar from "@reearth/components/atoms/NotificationBar";
 import MoleculeTopPage from "@reearth/components/molecules/TopPage";
+import NotificationBanner from "@reearth/components/organisms/Notification";
 
 import useHooks from "./hooks";
 
@@ -12,18 +11,13 @@ export type Props = {
 };
 
 const TopPage: React.FC<Props> = () => {
-  const intl = useIntl();
-  const { isLoading, isAuthenticated, login, error } = useHooks();
+  const { isLoading, isAuthenticated, login } = useHooks();
 
   return isLoading ? (
     <Loading />
   ) : !isAuthenticated ? (
     <MoleculeTopPage login={login}>
-      {error && (
-        <NotificationBar type="error">
-          {intl.formatMessage({ defaultMessage: "Sign in error" })}: {error}
-        </NotificationBar>
-      )}
+      <NotificationBanner />
     </MoleculeTopPage>
   ) : null;
 };
diff --git a/src/gql/provider.tsx b/src/gql/provider.tsx
index d27a17c60..3ef63e16d 100644
--- a/src/gql/provider.tsx
+++ b/src/gql/provider.tsx
@@ -37,8 +37,10 @@ const Provider: React.FC = ({ children }) => {
   const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (!networkError && !graphQLErrors) return;
     const error = networkError?.message ?? graphQLErrors?.map(e => e.message).join(", ");
-    setError(error);
-    if (error) reportError(error);
+    if (error) {
+      setError(error);
+      reportError(error);
+    }
   });
 
   const sentryLink = new SentryLink({ uri: endpoint });
diff --git a/src/state/index.ts b/src/state/index.ts
index a8d4bd8b2..359e42e29 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -2,6 +2,7 @@ import { atom, useAtom } from "jotai";
 
 import { Camera } from "@reearth/util/value";
 
+// useError is needed for Apollo provider error only. Handle other errors with useNotification directly.
 const error = atom<string | undefined>(undefined);
 export const useError = () => useAtom(error);
 
@@ -47,7 +48,13 @@ export type Project = {
 const project = atom<Project | undefined>(undefined);
 export const useProject = () => useAtom(project);
 
-export type Notification = { type: "error" | "warning" | "info" | "success"; text: string };
+export type NotificationType = "error" | "warning" | "info" | "success";
+
+export type Notification = {
+  type: NotificationType;
+  heading?: string;
+  text: string;
+};
 const notification = atom<Notification | undefined>(undefined);
 export const useNotification = () => useAtom(notification);
 
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index e13856dad..bfd9d376f 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -36,8 +36,8 @@ const colors = {
     },
     functional: {
       link: "#3592FF",
-      success: "#00D1A2",
-      attention: "#D6C71C",
+      success: "#07B28C",
+      attention: "#CFBF01",
       error: "#FF3C53",
       select: "#3B3CD0",
       notice: "#6E9CD2",
@@ -84,7 +84,7 @@ const colors = {
     },
     functional: {
       link: "#0063D8",
-      success: "#00D1A2",
+      success: "#00B68D",
       attention: "#E17A00",
       error: "#FF3C53",
       select: "#F57C4B",
diff --git a/translations/en.yml b/translations/en.yml
index afd6ce114..b385464f6 100644
--- a/translations/en.yml
+++ b/translations/en.yml
@@ -87,6 +87,15 @@ src:
           '293739158': Add Dataset
           '2446409280': No Dataset is here
           '3786358103': Other Source
+          DatasetDeleteModal:
+            '660592555': OK
+            '709595739': >-
+              Please make sure your project doesn't rely on this dataset before
+              proceeding.
+            '3057145766': >-
+              You are deleting a dataset. Layers that are linked to this dataset
+              might show errors.
+            '3528672691': Cancel
           DatasetModal:
             '142299937': Google Drive
             '293739158': Add Dataset
@@ -417,7 +426,24 @@ src:
         Infobox:
           '3037025019': Move mouse here and click "+" to add content
     organisms:
+      Dashboard:
+        '118901803': Successfully created project!
+        '1043376506': Failed to create project.
+        '1573629237': Successfully created workspace!
       EarthEditor:
+        DataSourcePane:
+          '8458775': Successfully deleted the dataset!
+          '373918798': Failed to delete the dataset.
+          '517189107': Successfully added the dataset!
+          '1235836640': Failed to add the dataset.
+        Header:
+          '329817781': >-
+            Successfully unpublished your project. Now nobody can access your
+            project.
+          '393928859': Successfully published your project!
+          '1300930556': Successfully published your project with search engine indexing!
+          '1754679519': Successfully copied to clipboard!
+          '3374937831': Failed to publish your project.
         LeftMenu:
           '3127270027': Outline
           '3833270271': Dataset
@@ -429,23 +455,58 @@ src:
           '1676374721': Widget
           '1884622259': Infobox
           '3590336714': Export
+      Notification:
+        '687096634': Warning
+        '1354606874': Notice
+        '2845142593': Error
+        '3620760668': Something went wrong. Please try again later.
       Settings:
         Account:
+          '536986583': Failed to change language.
+          '1420361838': Failed to update password.
+          '1443501844': Failed to change theme.
           '3198092477': Account
+          '3937010984': Failed to update account name.
+          '4233838386': Successfully updated password!
         Project:
+          '159368865': Failed to delete project.
+          '458538859': Successfully archived the project.
+          '1212782674': Failed to archive project.
+          '2614602809': Successfully unarchived the project. You can now edit this project.
+          '2666836613': Failed to unarchive project.
+          '2767494453': Project was successfully deleted.
           Dataset:
+            '94263160': Failed to delete dataset.
+            '1218000428': Dataset was successfully deleted.
             '3833270271': Dataset
           Plugin:
+            '1179803049': Successfully installed plugin!
+            '1442994697': Failed to install plugin.
+            '1961603541': Failed to uninstall plugin.
+            '1991459155': Successfully removed plugin.
             '2057458630': Plugins
           Public:
             '3135366329': Public
         ProjectList:
+          '118901803': Successfully created project!
+          '1043376506': Failed to create project.
           '3336263640': Project List
         Workspace:
+          '905470392': Failed to delete member from the workspace.
+          '1979109196': Failed to create workspace.
+          '2491404296': Sucessfully created a workspace!
+          '2536720333': Successfully removed member from the workspace.
+          '2541564604': Failed to update workspace name.
+          '2578195155': Failed to delete workspace.
+          '2877996676': Workspace was successfully deleted.
+          '3360288793': Successfully added member(s) to the workspace!
+          '3996792911': Failed to add one or more members.
+          '4038320151': You have changed the workspace's name.
           Asset:
             '165162143': Assets
+            '325979456': Failed to add one or more assets.
+            '2700226140': Successfully added one or more assets.
+            '3402808678': Failed to delete one or more assets.
+            '4222118896': One or more assets were successfully deleted.
         WorkspaceList:
           '541301752': Workspace List
-    pages:
-      TopPage:
-        '802859307': Sign in error
diff --git a/translations/ja.yml b/translations/ja.yml
index b94c4db68..867a51ce0 100644
--- a/translations/ja.yml
+++ b/translations/ja.yml
@@ -77,6 +77,11 @@ src:
           '293739158': データセットを追加
           '2446409280': データセットは存在しません
           '3786358103': その他
+          DatasetDeleteModal:
+            '660592555': 確認
+            '709595739': ''
+            '3057145766': ''
+            '3528672691': キャンセル
           DatasetModal:
             '142299937': グーグルドライブ
             '293739158': データセットを追加
@@ -198,10 +203,10 @@ src:
           '2324218928': 閉じる
           '2837536782': その他のWebサイトでこのプロジェクトを埋め込む場合は、こちらのコードを使用してください
           '3017637822': '*　このリンクを知っているインターネット上の全員が閲覧できます'
-          '3185451863': ''
+          '3185451863': おめでとうございます！
           '3528672691': キャンセル
           '3575955052': プロジェクトが公開されます。URLを知っている人は誰でもこのプロジェクトを見ることができるようになります。
-          '3577703060': ''
+          '3577703060': 確認
           '3640052215': 非公開にする
           '3701940701': その他の設定
           '3733220817': URLを知っている人もこのプロジェクトを見ることができなくなります。
@@ -315,9 +320,9 @@ src:
             '3825437586': 公開詳細設定
           PublishSection:
             '653686109': 編集画面からプロジェクトが公開されると、URLの詳細がここに表示されます。
-            '784802132': サイト名
+            '784802132': サイト設定
             '3352828776': ''
-            '3572249962': ''
+            '3572249962': サイト名
           StatusSection:
             '2025719264': このプロジェクトは、検索エンジンのインデックスを無効にした状態で公開されています。
             '3306960224': このプロジェクトは、非公開です。
@@ -373,7 +378,22 @@ src:
         Infobox:
           '3037025019': マウスをここへ、“+”をクリックしコンテンツを追加
     organisms:
+      Dashboard:
+        '118901803': 新しいプロジェクトの作成に成功しました！
+        '1043376506': プロジェクトの作成に失敗しました。
+        '1573629237': 新しいワークスペースの作成に成功しました！
       EarthEditor:
+        DataSourcePane:
+          '8458775': ''
+          '373918798': ''
+          '517189107': ''
+          '1235836640': ''
+        Header:
+          '329817781': プロジェクトは非公開状態です。現在、誰も閲覧することはできません。
+          '393928859': プロジェクトの公開に成功しました！
+          '1300930556': 検索エンジンのインデックス含めてプロジェクトの公開に成功しました！
+          '1754679519': ''
+          '3374937831': ''
         LeftMenu:
           '3127270027': アウトライン
           '3833270271': データセット
@@ -385,23 +405,58 @@ src:
           '1676374721': ウィジェット
           '1884622259': インフォボックス
           '3590336714': エクスポート
+      Notification:
+        '687096634': 注意
+        '1354606874': お知らせ
+        '2845142593': エラー
+        '3620760668': ''
       Settings:
         Account:
+          '536986583': 言語の変更に失敗しました。
+          '1420361838': パスワードの更新に失敗しました。
+          '1443501844': テーマの変更に失敗しました。
           '3198092477': アカウント
+          '3937010984': アカウント名の変更に失敗しました。
+          '4233838386': パスワードの更新が完了しました。
         Project:
+          '159368865': プロジェクトの削除に失敗しました。
+          '458538859': プロジェクトを非編集状態にしました。
+          '1212782674': プロジェクトの非編集状態に失敗しました。
+          '2614602809': プロジェクトの非編集化が解除されました。このプロジェクトは編集可能です。
+          '2666836613': プロジェクトの非編集化の解除に失敗しました。
+          '2767494453': プロジェクトが削除されました。
           Dataset:
+            '94263160': デーだセットの削除に失敗したました。
+            '1218000428': データセットが削除されました。
             '3833270271': データセット
           Plugin:
+            '1179803049': プラグインがインストールされました。
+            '1442994697': プラグインのインストールに失敗しました。
+            '1961603541': プラグインの削除に失敗しました。
+            '1991459155': プラグインが削除されました。
             '2057458630': プラグイン
           Public:
             '3135366329': 公開設定
         ProjectList:
+          '118901803': 新しいプロジェクトの作成に成功しました！
+          '1043376506': プロジェクトの作成に失敗しました。
           '3336263640': プロジェクト一覧
         Workspace:
+          '905470392': メンバーの削除に失敗しました。
+          '1979109196': ワークスペースの作成に失敗しました。
+          '2491404296': 新しいワークスペースの作成に成功しました！
+          '2536720333': このワークスペースからひとりのメンバーを削除しました。
+          '2541564604': ワークスペース名の変更に失敗しました。
+          '2578195155': ワークスペースの削除に失敗しました。
+          '2877996676': ワークスペースを削除しました。
+          '3360288793': このワークスペースに新しいメンバーを追加しました。
+          '3996792911': メンバーの追加に失敗しました。
+          '4038320151': ワークスペース名を変更しました。
           Asset:
             '165162143': アセット
+            '325979456': アセットの作成に失敗しました。
+            '2700226140': ''
+            '3402808678': アセットの削除に失敗しまたした。
+            '4222118896': ''
         WorkspaceList:
           '541301752': ワークスペース一覧
-    pages:
-      TopPage:
-        '802859307': ログインエラー