diff --git a/css/docu-notion-styles.css b/css/docu-notion-styles.css
new file mode 100644
index 000000000..8998845d1
--- /dev/null
+++ b/css/docu-notion-styles.css
@@ -0,0 +1,60 @@
+/* This should be added to the docusaurus.config.js in order to show some notion things correctly.
+See the option: --css-output-directory 
+See the docusaurus docs: https://docusaurus.io/docs/styling-layout
+See the use in the docu-notion-sample-site: https://github.com/sillsdev/docu-notion-sample-site/blob/main/docusaurus.config.js
+*/
+
+/* Copied from
+    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L934
+    and
+    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L1063
+*/
+.notion-column {
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.notion-column > *:first-child {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.notion-column > *:last-child {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+.notion-row {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .notion-row {
+    flex-direction: column;
+  }
+
+  .notion-row .notion-column {
+    width: 100% !important;
+  }
+
+  .notion-row .notion-spacer {
+    display: none;
+  }
+}
+
+.notion-spacer {
+  /* This matches the value in ColumnTransformer.ts */
+  width: calc(min(32px, 4vw));
+}
+
+.notion-spacer:last-child {
+  display: none;
+}
+/* End copied from NotionX */
diff --git a/css/gifplayer.css b/css/gifplayer.css
new file mode 100644
index 000000000..120b9b389
--- /dev/null
+++ b/css/gifplayer.css
@@ -0,0 +1,36 @@
+.gif_player {
+  display: inline-block;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent; }
+  .gif_player .play_button {
+    background-color: rgba(0, 0, 0, 0.5);
+    border: 2px dashed #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
+    color: #fff;
+    cursor: pointer;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 24px;
+    left: 50%;
+    opacity: 1;
+    padding: 14px 10px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(1) rotate(0deg);
+    transition: transform 0.4s, opacity 0.4s; }
+    .gif_player .play_button:hover {
+      background-color: rgba(0, 0, 0, 0.7);
+      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.7); }
+    .gif_player .play_button::after {
+      content: "GIF"; }
+  .gif_player.playing .play_button {
+    transform: translate(-50%, -50%) scale(0) rotate(180deg);
+    opacity: 0.5; }
+  .gif_player img {
+    max-width: 100%; }
+
diff --git a/docusaurus.config.js b/docusaurus.config.js
index c447bc0c7..3ae0ce799 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -30,9 +30,9 @@ const config = {
         blog: false,
         theme: {
           customCss: [
-            require.resolve("./src/css/docu-notion-styles.css"),
+            require.resolve("./css/docu-notion-styles.css"),
             require.resolve(
-              "./src/css/gifplayer.css"
+              "./css/gifplayer.css"
               //"./node_modules/react-gif-player/dist/gifplayer.css" // this gave a big red compile warning which is seaming unrelated "  Replace Autoprefixer browsers option to Browserslist config..."
             ),
           ],
diff --git a/package.json b/package.json
index 4ef418071..f02201a6a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "clear-docs": "rimraf ./docs/",
     "pull-test-tagged": "yarn clear-docs && cross-var yarn docu-notion -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE -m ./docs -i ./static/notion_imgs -p /notion_imgs/ --status-tag test",
-    "pull:latest": "yarn clear-docs && cross-var npx @sillsdev/docu-notion -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE -m ./docs -i ./static/notion_imgs -p /notion_imgs/",    
+    "pull:latest": "yarn clear-docs && cross-var npx @sillsdev/docu-notion -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE -m ./docs -i ./static/notion_imgs -p /notion_imgs/",
     "//pull": "This uses the specific version of docu-notion in yarn.lock, not necessarily the latest",
     "pull": "yarn clear-docs && cross-var yarn docu-notion -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE -m ./docs -i ./static/notion_imgs -p /notion_imgs/",
     "start": "docusaurus start",
@@ -19,8 +19,8 @@
     "@docusaurus/preset-classic": "^2.4.3",
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@mdx-js/react": "^1",
-    "clsx": "^1.2.1",
     "@sillsdev/docu-notion": "^0.16.1",
+    "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",