diff --git a/apps/web/src/components/publish-view/index.js b/apps/web/src/components/publish-view/index.js
index 8344fddfb..d3977e3bb 100644
--- a/apps/web/src/components/publish-view/index.js
+++ b/apps/web/src/components/publish-view/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
-import { Flex, Text, Button } from "rebass";
+import { Flex, Text, Button, Box } from "rebass";
 import * as Icon from "../icons";
 import Toggle from "../toggle";
 import Field from "../field";
@@ -25,17 +25,17 @@ function PublishView(props) {
     setPublishId(db.monographs.monograph(noteId));
   }, [noteId]);
 
-  useEffect(() => {
-    window.addEventListener("keydown", onKeyDown);
-    window.addEventListener("click", onWindowClick);
-    window.addEventListener("blur", onWindowClick);
+  // useEffect(() => {
+  //   window.addEventListener("keydown", onKeyDown);
+  //   window.addEventListener("click", onWindowClick);
+  //   window.addEventListener("blur", onWindowClick);
 
-    return () => {
-      window.removeEventListener("click", onWindowClick);
-      window.removeEventListener("keydown", onKeyDown);
-      window.removeEventListener("blur", onWindowClick);
-    }
-  }, []);
+  //   return () => {
+  //     window.removeEventListener("click", onWindowClick);
+  //     window.removeEventListener("keydown", onKeyDown);
+  //     window.removeEventListener("blur", onWindowClick);
+  //   };
+  // }, []);
 
   useEffect(() => {
     const attachmentsLoadingEvent = EV.subscribe(
@@ -61,183 +61,206 @@ function PublishView(props) {
         border: "1px solid",
         borderColor: "border",
         borderRadius: "default",
+        boxShadow: "0px 0px 15px 0px #00000011",
         ...position,
       }}
       bg="background"
-      p={2}
+      // p={2}
       flexDirection="column"
-      onClick={e => {
-        e.stopPropagation()
+      onClick={(e) => {
+        e.stopPropagation();
       }}
     >
-      <Text variant="body" fontSize="title" fontWeight="bold" color="primary">
-        {noteTitle}
-      </Text>
-      {isPublishing ? (
-        <Flex
-          flexDirection="column"
-          alignItems="center"
-          my={50}
-          justifyContent="center"
-        >
-          <Text>Publishing note</Text>
-          {processingStatus && (
-            <Text variant="subBody" mt={1}>
-              Downloading images ({processingStatus.current}/
-              {processingStatus.total})
-            </Text>
-          )}
-        </Flex>
-      ) : (
-        <>
-          {publishId ? (
-            <Flex
-              mt={1}
-              p={1}
-              sx={{
-                border: "1px solid",
-                borderColor: "primary",
-                borderRadius: "default",
-              }}
-              justifyContent="space-between"
-            >
-              <Flex flexDirection="column" mr={2} overflow="hidden">
-                <Text variant="body" fontWeight="bold">
-                  This note is published at:
+      <Flex flexDirection={"column"} p={2}>
+        <Text variant="body" fontSize="title" fontWeight="bold" color="primary">
+          {noteTitle}
+        </Text>
+        {isPublishing ? (
+          <Flex
+            flexDirection="column"
+            alignItems="center"
+            my={50}
+            justifyContent="center"
+          >
+            <Text>Please wait...</Text>
+            {processingStatus && (
+              <Text variant="subBody" mt={1}>
+                Downloading images ({processingStatus.current}/
+                {processingStatus.total})
+              </Text>
+            )}
+          </Flex>
+        ) : (
+          <>
+            {publishId ? (
+              <Flex mt={1} flexDirection="column" overflow="hidden">
+                <Text variant="body" color="fontTertiary" fontWeight="bold">
+                  Published at
                 </Text>
-                <Text
-                  variant="subBody"
-                  as="a"
-                  target="_blank"
-                  href={`https://monograph.notesnook.com/${publishId}`}
+                <Flex
                   sx={{
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
+                    bg: "bgSecondary",
+                    mt: 1,
+                    p: 1,
+                    borderRadius: "default",
+                    alignItems: "center",
+                    justifyContent: "center",
                   }}
                 >
-                  {`https://monograph.notesnook.com/${publishId}`}
-                </Text>
+                  <Text
+                    variant="body"
+                    as="a"
+                    target="_blank"
+                    href={`https://monograph.notesnook.com/${publishId}`}
+                    sx={{
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      textDecoration: "none",
+                      overflow: "hidden",
+                      mr: 2,
+                    }}
+                  >
+                    {`https://monograph.notesnook.com/${publishId}`}
+                  </Text>
+                  <Button
+                    variant="anchor"
+                    className="copyPublishLink"
+                    onClick={() => {
+                      clipboard.writeText(
+                        `https://monograph.notesnook.com/${publishId}`
+                      );
+                    }}
+                  >
+                    <Icon.Copy size={20} color="primary" />
+                  </Button>
+                </Flex>
               </Flex>
-              <Button
-                variant="anchor"
-                className="copyPublishLink"
-                onClick={() => {
-                  clipboard.writeText(
-                    `https://monograph.notesnook.com/${publishId}`
-                  );
-                }}
-              >
-                <Icon.Copy size={20} color="primary" />
-              </Button>
-            </Flex>
-          ) : (
-            <>
-              <Text variant="body" color="fontTertiary">
-                This note will be published to a public URL.
-              </Text>
-            </>
-          )}
-          <Toggle
-            title="Self destruct?"
-            onTip="Note will be automatically unpublished after first view."
-            offTip="Note will stay published until manually unpublished."
-            isToggled={selfDestruct}
-            onToggled={() => setSelfDestruct((s) => !s)}
-          />
-          <Toggle
-            title="Password protect?"
-            onTip="Protect published note with a password."
-            offTip="Do not protect published note with a password."
-            isToggled={isPasswordProtected}
-            onToggled={() => setIsPasswordProtected((s) => !s)}
-          />
-          {isPasswordProtected && (
-            <Field
-              autoFocus
-              id="publishPassword"
-              label="Password"
-              helpText="Enter password to encrypt this note"
-              required
-              sx={{ my: 1 }}
-            />
-          )}
-          <Flex alignItems="center" justifyContent="space-evenly" mt={1}>
-            <Button
-              flex={1}
-              mr={2}
-              onClick={async () => {
-                try {
-                  setIsPublishing(true);
-                  const password =
-                    document.getElementById("publishPassword")?.value;
-
-                  const publishId = await db.monographs.publish(noteId, {
-                    selfDestruct,
-                    password,
-                  });
-                  setPublishId(publishId);
-                  showToast("success", "Note published.");
-                } catch (e) {
-                  console.error(e);
-                  showToast(
-                    "error",
-                    "Note could not be published: " + e.message
-                  );
-                } finally {
-                  setIsPublishing(false);
-                }
-              }}
-            >
-              {isPublishing ? (
-                <>
-                  <Icon.Loading color="static" />
-                </>
-              ) : publishId ? (
-                "Update"
-              ) : (
-                "Publish"
-              )}
-            </Button>
-            {publishId && (
-              <Button
-                flex={1}
-                bg="errorBg"
-                mr={2}
-                color="error"
-                onClick={async () => {
-                  try {
-                    setIsPublishing(true);
-                    await db.monographs.unpublish(noteId);
-                    setPublishId();
-                    onClose(true);
-                    showToast("success", "Note unpublished.");
-                  } catch (e) {
-                    console.error(e);
-                    showToast(
-                      "error",
-                      "Note could not be unpublished: " + e.message
-                    );
-                  } finally {
-                    setIsPublishing(false);
-                  }
-                }}
-              >
-                Unpublish
-              </Button>
+            ) : (
+              <>
+                <Text variant="body" color="fontTertiary">
+                  This note will be published to a public URL.
+                </Text>
+              </>
             )}
-            <Button
-              flex={1}
-              variant="secondary"
-              onClick={() => {
-                onClose(false);
-              }}
-            >
-              Cancel
-            </Button>
-          </Flex>
-        </>
-      )}
+            <Toggle
+              title="Self destruct?"
+              onTip="Note will be automatically unpublished after first view."
+              offTip="Note will stay published until manually unpublished."
+              isToggled={selfDestruct}
+              onToggled={() => setSelfDestruct((s) => !s)}
+            />
+            <Toggle
+              title="Password protect?"
+              onTip="Protect published note with a password."
+              offTip="Do not protect published note with a password."
+              isToggled={isPasswordProtected}
+              onToggled={() => setIsPasswordProtected((s) => !s)}
+            />
+            {isPasswordProtected && (
+              <Field
+                autoFocus
+                id="publishPassword"
+                placeholder="Enter password to encrypt this note"
+                required
+                sx={{ my: 1 }}
+              />
+            )}
+          </>
+        )}
+      </Flex>
+
+      <Flex
+        alignItems="center"
+        justifyContent={"end"}
+        bg="bgSecondary"
+        p={1}
+        px={2}
+      >
+        <Button
+          variant="primary"
+          color="primary"
+          fontWeight="bold"
+          bg={"transparent"}
+          sx={{
+            ":hover": { bg: "bgSecondary" },
+          }}
+          onClick={async () => {
+            try {
+              setIsPublishing(true);
+              const password =
+                document.getElementById("publishPassword")?.value;
+
+              const publishId = await db.monographs.publish(noteId, {
+                selfDestruct,
+                password,
+              });
+              setPublishId(publishId);
+              showToast("success", "Note published.");
+            } catch (e) {
+              console.error(e);
+              showToast("error", "Note could not be published: " + e.message);
+            } finally {
+              setIsPublishing(false);
+            }
+          }}
+        >
+          {isPublishing ? (
+            <>
+              <Icon.Loading color="static" />
+            </>
+          ) : publishId ? (
+            "Update"
+          ) : (
+            "Publish"
+          )}
+        </Button>
+        {publishId && (
+          <Button
+            variant="primary"
+            color="error"
+            fontWeight="bold"
+            bg={"transparent"}
+            sx={{
+              ":hover": { bg: "bgSecondary" },
+            }}
+            onClick={async () => {
+              try {
+                setIsPublishing(true);
+                await db.monographs.unpublish(noteId);
+                setPublishId();
+                onClose(true);
+                showToast("success", "Note unpublished.");
+              } catch (e) {
+                console.error(e);
+                showToast(
+                  "error",
+                  "Note could not be unpublished: " + e.message
+                );
+              } finally {
+                setIsPublishing(false);
+              }
+            }}
+          >
+            Unpublish
+          </Button>
+        )}
+
+        <Button
+          variant="primary"
+          data-test-id="dialog-no"
+          color="text"
+          fontWeight="bold"
+          bg={"transparent"}
+          sx={{
+            ":hover": { bg: "bgSecondary" },
+          }}
+          onClick={() => {
+            onClose(false);
+          }}
+        >
+          Cancel
+        </Button>
+      </Flex>
     </Flex>
   );
 }
@@ -258,8 +281,8 @@ export function showPublishView(noteId, location = "top") {
           <PublishView
             noteId={noteId}
             position={{
-              top: location === "top" ? [0, 50, 50] : undefined,
-              right: location === "top" ? [0, 20, 20] : undefined,
+              top: location === "top" ? [0, 50, 60] : undefined,
+              right: location === "top" ? [0, 20, 10] : undefined,
               bottom: location === "bottom" ? 0 : undefined,
               left: location === "bottom" ? 0 : undefined,
             }}
@@ -273,11 +296,10 @@ export function showPublishView(noteId, location = "top") {
   return Promise.reject("No element with id 'dialogContainer'");
 }
 
-
 function onKeyDown(event) {
   if (event.keyCode === 27) closeOpenedDialog();
 }
 
 function onWindowClick() {
-  closeOpenedDialog()
+  closeOpenedDialog();
 }