diff --git a/app/public/templates/template11.png b/app/public/templates/template11.png
index 5036b2ced..a042162e8 100644
Binary files a/app/public/templates/template11.png and b/app/public/templates/template11.png differ
diff --git a/app/public/templates/template17.png b/app/public/templates/template17.png
index 23e0a9af1..388c9dab3 100644
Binary files a/app/public/templates/template17.png and b/app/public/templates/template17.png differ
diff --git a/app/public/templates/template18.png b/app/public/templates/template18.png
index 1e14f5c66..87a51847c 100644
Binary files a/app/public/templates/template18.png and b/app/public/templates/template18.png differ
diff --git a/app/public/templates/template21.png b/app/public/templates/template21.png
index 65d83afc3..def6c793a 100644
Binary files a/app/public/templates/template21.png and b/app/public/templates/template21.png differ
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 3c6ecbaa3..30ba2516b 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -306,7 +306,7 @@ function getGraphUpdater({
 
     try {
       const themeEditor = getThemeEditor(doc);
-      const { layout, style: themeStyle } = toTheme(themeEditor);
+      const { layout, style: themeStyle, postStyle } = toTheme(themeEditor);
 
       // Eventually, this will become cytoscape again...
       const customCss = (doc.meta.cytoscapeStyle as string) ?? "";
@@ -315,7 +315,9 @@ function getGraphUpdater({
       const customCssOnly = (doc.meta?.customCssOnly as boolean) ?? false;
 
       const { style } = preprocessStyle(
-        customCssOnly ? customCss : [themeStyle, customCss].join("\n")
+        customCssOnly
+          ? customCss
+          : [themeStyle, customCss, postStyle].join("\n")
       );
 
       elements = getElements(doc.text);
diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
index e3f16f530..351fb60bd 100644
--- a/app/src/components/GraphContextMenu.tsx
+++ b/app/src/components/GraphContextMenu.tsx
@@ -302,6 +302,7 @@ function DynamicClassesMenu({
       {Object.entries(dynamicClasses).map(([name, options]) => (
         <Submenu
           key={name}
+          // className="max-h-[200px] overflow-y-auto"
           label={
             <span className="text-sm capitalize">
               {name.replace(/-/g, " ")}
diff --git a/app/src/components/LoadTemplateDialog.tsx b/app/src/components/LoadTemplateDialog.tsx
index cd9f5774f..841d408e9 100644
--- a/app/src/components/LoadTemplateDialog.tsx
+++ b/app/src/components/LoadTemplateDialog.tsx
@@ -42,44 +42,44 @@ export function LoadTemplateDialog() {
     setContent(getContentInitialValue);
   }, []);
 
-  const load = useCallback(() => {
-    (async () => {
-      if (!template || !templateData) return;
+  const load = useCallback(async () => {
+    if (!template || !templateData) return;
 
-      const importTemplate = await import(
-        `../lib/templates/${template}-template.ts`
-      );
-      const templateContent = importTemplate.content;
-      const theme: FFTheme = importTemplate.theme;
-      const cytoscapeStyle: string = importTemplate.cytoscapeStyle ?? "";
+    const importTemplate = await import(
+      `../lib/templates/${template}-template.ts`
+    );
+    const templateContent = importTemplate.content;
+    const theme: FFTheme = importTemplate.theme;
+    const cytoscapeStyle: string = importTemplate.cytoscapeStyle ?? "";
 
-      const { text, meta: _meta, details } = useDoc.getState();
+    const { text, meta: _meta, details } = useDoc.getState();
 
-      const nextContent = content ? templateContent : text;
+    const nextContent = content ? templateContent : text;
 
-      const meta = {
-        ..._meta,
-        cytoscapeStyle,
-        themeEditor: theme,
-      };
+    const meta = {
+      ..._meta,
+      cytoscapeStyle,
+      themeEditor: theme,
+      // Unfreeze the doc
+      nodePositions: undefined,
+    };
 
-      reset();
-      setOpen(false);
+    reset();
+    setOpen(false);
 
-      unmountGraph();
-      // The reason this is done is because the unmounting
-      // of the graph happens effectually, i.e. not immediately
-      // and when an elk layout is run, but the graph is no longer
-      // there we get an error, this ensures the graph is actually
-      // unmounted, therefore the layout doesn't begin to run
-      requestAnimationFrame(() => {
-        prepareChart({
-          doc: `${nextContent}\n=====${JSON.stringify(meta)}=====`,
-          details,
-        });
-        mountGraph();
+    unmountGraph();
+    // The reason this is done is because the unmounting
+    // of the graph happens effectually, i.e. not immediately
+    // and when an elk layout is run, but the graph is no longer
+    // there we get an error, this ensures the graph is actually
+    // unmounted, therefore the layout doesn't begin to run
+    requestAnimationFrame(() => {
+      prepareChart({
+        doc: `${nextContent}\n=====${JSON.stringify(meta)}=====`,
+        details,
       });
-    })();
+      mountGraph();
+    });
   }, [template, templateData, content, reset]);
 
   return (
diff --git a/app/src/components/Tabs/ThemeTab.tsx b/app/src/components/Tabs/ThemeTab.tsx
index 989c499b3..1bed1bafa 100644
--- a/app/src/components/Tabs/ThemeTab.tsx
+++ b/app/src/components/Tabs/ThemeTab.tsx
@@ -376,6 +376,7 @@ const Form = createForm<{
           options: [
             { label: "Bezier", value: "bezier" },
             { label: "Taxi", value: "taxi" },
+            { label: "Round Taxi", value: "round-taxi" },
           ],
         },
         {
@@ -631,7 +632,7 @@ export function ThemeTab() {
 function Section({ title, children }: { title: string; children: ReactNode }) {
   return (
     <>
-      <h2 className="font-bold text-blue-600 text-base -mb-8 ml-3 dark:text-blue-400">
+      <h2 className="font-bold text-neutral-800 text-base -mb-8 ml-px dark:text-blue-400">
         {title}
       </h2>
       <div className="border border-blue-100 dark:border-neutral-800 rounded-xl relative w-full overflow-hidden">
diff --git a/app/src/index.css b/app/src/index.css
index 1e7b167bf..6d2cdfc88 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -447,3 +447,7 @@ body.dark .pricing-highlights {
 .plan-button[aria-current="true"] {
   transform: scale(1) translateZ(0);
 }
+
+.react-contexify .react-contexify__submenu {
+  @apply max-h-[300px] overflow-y-auto;
+}
diff --git a/app/src/lib/FFTheme.ts b/app/src/lib/FFTheme.ts
index e8ad2d757..a7daf10cc 100644
--- a/app/src/lib/FFTheme.ts
+++ b/app/src/lib/FFTheme.ts
@@ -25,7 +25,7 @@ export type Direction = "RIGHT" | "LEFT" | "DOWN" | "UP";
 
 export type Shape = "rectangle" | "roundrectangle" | "ellipse";
 
-export type CurveStyle = "bezier" | "taxi";
+export type CurveStyle = "bezier" | "taxi" | "round-taxi";
 
 export type Border = "none" | "solid" | "dashed" | "dotted" | "double";
 
diff --git a/app/src/lib/preprocessStyle.ts b/app/src/lib/preprocessStyle.ts
index e9c828603..1a2a6747e 100644
--- a/app/src/lib/preprocessStyle.ts
+++ b/app/src/lib/preprocessStyle.ts
@@ -336,6 +336,7 @@ export function getStyleStringFromMeta(meta: any) {
   if (customCssOnly) {
     return cytoscapeStyle;
   } else {
-    return `${toTheme(themeEditor).style}\n${cytoscapeStyle}`;
+    const theme = toTheme(themeEditor);
+    return `${theme.style}\n${cytoscapeStyle}\n${theme.postStyle}`;
   }
 }
diff --git a/app/src/lib/templates/code-flow-template.ts b/app/src/lib/templates/code-flow-template.ts
index 9263cbd0e..07f528ac4 100644
--- a/app/src/lib/templates/code-flow-template.ts
+++ b/app/src/lib/templates/code-flow-template.ts
@@ -20,33 +20,36 @@ User
 `;
 
 export const theme: FFTheme = {
-  arrowScale: 1,
-  background: "#f8f8f8",
-  borderColor: "#6f7280",
-  borderWidth: 2,
-  curveStyle: "taxi",
+  layoutName: "dagre",
   direction: "DOWN",
-  edgeColor: "#b9a6a6",
-  edgeTextSize: 1,
-  edgeWidth: 2,
+  spacingFactor: 1.15,
+
+  background: "#f8f8f8",
   fontFamily: "IBM Plex Sans",
-  layoutName: "dagre",
-  lineHeight: 1.4,
-  nodeBackground: "#6f7280",
+
+  shape: "roundrectangle",
+  nodeBackground: "#9397a6",
   nodeForeground: "#ffffff",
   padding: 19,
-  rotateEdgeLabel: false,
-  shape: "roundrectangle",
-  sourceArrowShape: "none",
-  sourceDistanceFromNode: 0,
-  spacingFactor: 1,
-  targetArrowShape: "triangle",
-  targetDistanceFromNode: 5,
-  textMarginY: 1.5,
+  borderWidth: 2,
+  borderColor: "#8f95b1",
   textMaxWidth: 146,
+  lineHeight: 1.4,
+  textMarginY: 1.5,
   useFixedHeight: false,
   fixedHeight: 50,
+
+  curveStyle: "round-taxi",
+  edgeWidth: 2,
+  edgeColor: "#9a9a9a",
+  sourceArrowShape: "none",
+  targetArrowShape: "triangle",
+  sourceDistanceFromNode: 0,
+  targetDistanceFromNode: 5,
+  arrowScale: 1,
+  edgeTextSize: 1,
+  rotateEdgeLabel: false,
 };
 
 export const cytoscapeStyle =
-  "$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8b53e6;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #6f7280;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  shape: roundrectangle;\n  border-color: $color;\n  background-color: white;\n  color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  border-color: $blue;\n  background-color: #d7e9fc;\n  color: $color;\n  height: $width;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  border-color: $green;\n  background-color: #f0fbf8;\n  color: $color;\n}\n:childless.color_blue {\n  border-color: $blue;\n  background-color: #d7e9fc;\n  color: $color;\n}\n:childless.color_purple {\n  border-color: $purple;\n  background-color: #e1d8f4;\n  color: $color;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";
+  "$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8646ed;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #474747;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  shape: roundrectangle;\n  border-color: $color;\n  background-color: white;\n  color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  border-color: $blue;\n  background-color: #d7e9fc;\n  color: $color;\n  height: $width;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  border-color: $green;\n  background-color: #f0fbf8;\n  color: $color;\n}\n:childless.color_blue {\n  border-color: $blue;\n  background-color: $blue;\n}\n:childless.color_purple {\n  border-color: $purple;\n  background-color: $purple;\n}\n:childless.color_grey {\n  background-color: $grey;\n  border-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";
diff --git a/app/src/lib/templates/default-template.ts b/app/src/lib/templates/default-template.ts
index d47dcc17c..b01cc732f 100644
--- a/app/src/lib/templates/default-template.ts
+++ b/app/src/lib/templates/default-template.ts
@@ -10,25 +10,28 @@ Begin Typing
         Now erase the text and try it yourself!`;
 
 export const theme: FFTheme = {
-  background: "#FFFFFF",
-  fontFamily: "IBM Plex Sans",
   layoutName: "dagre",
   direction: "DOWN",
   spacingFactor: 1.1,
-  shape: "rectangle",
-  nodeBackground: "#f2eded",
-  nodeForeground: "#31405b",
-  padding: 25,
-  borderWidth: 2,
-  borderColor: "#31405b",
-  textMaxWidth: 150,
-  lineHeight: 1.4,
+
+  background: "#ffffff",
+  fontFamily: "IBM Plex Sans",
+
+  shape: "roundrectangle",
+  nodeBackground: "#e6e6e6",
+  nodeForeground: "#000000",
+  padding: 16,
+  borderWidth: 0,
+  borderColor: "#000000",
+  textMaxWidth: 146,
+  lineHeight: 1.3,
   textMarginY: 0,
   useFixedHeight: false,
-  fixedHeight: 60,
+  fixedHeight: 50,
+
   curveStyle: "bezier",
-  edgeWidth: 1,
-  edgeColor: "#000000",
+  edgeWidth: 2,
+  edgeColor: "#606ef6",
   sourceArrowShape: "none",
   targetArrowShape: "triangle",
   sourceDistanceFromNode: 0,
@@ -39,4 +42,4 @@ export const theme: FFTheme = {
 };
 
 export const cytoscapeStyle =
-  "$color: #31405b;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start - uncomment to use\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $green;\n  color: white;\n}\n*/\n\n/** Terminal - uncomment to use\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $red;\n  color: white;\n}\n*/\n\n/** Branching - uncomment to use\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $blue;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n*/\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_purple {\n  background-color: $purple;\n  color: white;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";
+  "$color: #000000;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n/** Start - uncomment to use\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $green;\n  color: white;\n}\n*/\n\n/** Terminal - uncomment to use\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $red;\n  color: white;\n}\n*/\n\n/** Branching - uncomment to use\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $blue;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n*/\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_purple {\n  background-color: $purple;\n  color: white;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";
diff --git a/app/src/lib/templates/flowchart-template.ts b/app/src/lib/templates/flowchart-template.ts
index 171e62136..ac4b28fa3 100644
--- a/app/src/lib/templates/flowchart-template.ts
+++ b/app/src/lib/templates/flowchart-template.ts
@@ -18,31 +18,34 @@ Research
 export const theme: FFTheme = {
   layoutName: "dagre",
   direction: "DOWN",
-  spacingFactor: 1.05,
-  lineHeight: 1.4,
+  spacingFactor: 1,
+
+  background: "#ffffff",
+  fontFamily: "REM",
+
   shape: "rectangle",
-  background: "#f0f3f5",
-  textMaxWidth: 150,
+  nodeBackground: "#f5c844",
+  nodeForeground: "#1a1a1a",
   padding: 10,
-  fontFamily: "REM",
-  curveStyle: "bezier",
-  textMarginY: 0,
   borderWidth: 0,
-  edgeTextSize: 0.88,
+  borderColor: "#1a1a1a",
+  textMaxWidth: 150,
+  lineHeight: 1.4,
+  textMarginY: 0,
   useFixedHeight: true,
   fixedHeight: 80,
+
+  curveStyle: "bezier",
   edgeWidth: 2,
+  edgeColor: "#1a1a1a",
   sourceArrowShape: "none",
-  targetArrowShape: "vee",
-  edgeColor: "#5a5a5a",
-  borderColor: "#1a1a1a",
-  nodeBackground: "#f5c844",
-  nodeForeground: "#1a1a1a",
+  targetArrowShape: "triangle",
   sourceDistanceFromNode: 0,
-  targetDistanceFromNode: 0,
+  targetDistanceFromNode: 4,
   arrowScale: 1.5,
-  rotateEdgeLabel: false,
+  edgeTextSize: 1,
+  rotateEdgeLabel: true,
 };
 
 export const cytoscapeStyle =
-  "$color: #1a1a1a;\n$red: #ed6e49;\n$orange: #f4a261;\n$yellow: #f5c844;\n$green: #11ac9a;\n$blue: #4351d1;\n$pink: #f5c3c2;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Terminal */\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $red;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_pink {\n  background-color: $pink;\n  color: $color;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}\n";
+  "$color: #1a1a1a;\n$red: #ed6e49;\n$orange: #f4a261;\n$yellow: #f5c844;\n$green: #11ac9a;\n$blue: #4351d1;\n$pink: #f5c3c2;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Terminal */\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $red;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_pink {\n  background-color: $pink;\n  color: $color;\n}\n:childless.color_grey {\n  background-color: $grey;\n  color: $color;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}\n";
diff --git a/app/src/lib/templates/org-chart-template.ts b/app/src/lib/templates/org-chart-template.ts
index 1b5360fee..9cd5f18a8 100644
--- a/app/src/lib/templates/org-chart-template.ts
+++ b/app/src/lib/templates/org-chart-template.ts
@@ -1,17 +1,7 @@
 import { FFTheme } from "../FFTheme";
 
 export const content = `
-Saraswati Sharma .size_lg.color_pink
-  Robert Wilson .color_red
-    Sarah Thompson .color_yellow
-    David Brown .color_yellow
-      Jennifer Lee .color_blue
-        Andrew Miller .color_green
-        Carrie Richards .color_green
-          Terry Peralta .border_dashed
-  Lisa Anderson .color_red
-    Camille Mitchell .color_yellow
-      Christopher White .color_blue
+Saraswati Sharma .size_lg.color_black\n  Robert Wilson\n    Sarah Thompson\n    David Brown\n      Jennifer Lee\n        Andrew Miller .color_green\n        Carrie Richards .color_green\n          Terry Peralta .color_green\n  Lisa Anderson .color_purple\n    Camille Mitchell .color_purple\n      Christopher White .color_purple\n
 `;
 
 export const theme: FFTheme = {
@@ -20,23 +10,23 @@ export const theme: FFTheme = {
   spacingFactor: 0.96,
   lineHeight: 1.4,
   shape: "roundrectangle",
-  background: "#fefdf9",
-  textMaxWidth: 176,
-  padding: 14,
-  fontFamily: "Onest",
-  curveStyle: "taxi",
-  textMarginY: 1,
-  borderWidth: 1,
+  background: "#ffffff",
+  textMaxWidth: 142,
+  padding: 16,
+  fontFamily: "Overpass",
+  curveStyle: "round-taxi",
+  textMarginY: 2.5,
+  borderWidth: 2,
   edgeTextSize: 1,
-  edgeWidth: 1,
+  edgeWidth: 2,
   useFixedHeight: false,
   fixedHeight: 60,
   sourceArrowShape: "none",
   targetArrowShape: "none",
-  edgeColor: "#2a2a26",
-  borderColor: "#2a2a26",
-  nodeBackground: "#fefdf9",
-  nodeForeground: "#2a2a26",
+  edgeColor: "#b6b6b6",
+  borderColor: "#dadada",
+  nodeBackground: "#f4f4f4",
+  nodeForeground: "#2a2a2a",
   sourceDistanceFromNode: 0,
   targetDistanceFromNode: 0,
   arrowScale: 1,
@@ -44,4 +34,4 @@ export const theme: FFTheme = {
 };
 
 export const cytoscapeStyle =
-  "$red: #f1bfb8;\n$orange: #ff8e16;\n$yellow: #f8edba;\n$green: #b1d1d3;\n$blue: #c1e1f8;\n$pink: #e9b5da;\n$purple: #d0a9e1;\n$grey: #cacaca;\n\n:childless {\n  font-weight: 300;\n}\n\n:childless.color_red {\n  background-color: $red;\n  border-color: #be8179;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n  border-color: #c8bd84;\n}\n:childless.color_green {\n  background-color: $green;\n  border-color: #7ea9a5;\n}\n:childless.color_blue {\n  background-color: $blue;\n  border-color: #89add1;\n}\n:childless.color_purple {\n  background-color: $purple;\n  border-color: #aa82ba;\n}\n:childless.color_pink {\n  background-color: $pink;\n  border-color: #a585b1;\n}\n\n:childless.size_lg {\n  font-size: 24;\n  padding: 18;\n  width: 250;\n  text-max-width: 218;\n  text-margin-y: 2;\n}";
+  "edge {taxi-radius: 40px;}\n\n$red: #ffd1cb;\n$orange: #ff8e16;\n$yellow: #fff7d5;\n$green: #bcfcff;\n$blue: #c1e1f8;\n$pink: #ffe7f7;\n$purple: #eec6ff;\n$grey: #cacaca;\n\n:childless {\n  font-weight: 300;\n}\n\n:childless.color_red {\n  background-color: $red;\n  border-color: #b38d88;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n  border-color: #c8bd84;\n}\n:childless.color_green {\n  background-color: $green;\n  border-color: #60c8bd;\n}\n:childless.color_blue {\n  background-color: $blue;\n  border-color: #89add1;\n}\n:childless.color_purple {\n  background-color: $purple;\n  border-color: #aa82ba;\n}\n:childless.color_pink {\n  background-color: $pink;\n  border-color: #c5aacf;\n}\n:childless.color_black {\n  background-color: black;\n  border-color: black;\n  color: white;\n}\n\n:childless.size_lg {\n  font-size: 24;\n  padding: 18;\n  width: 250;\n  text-max-width: 218;\n  text-margin-y: 3;\n}";
diff --git a/app/src/lib/templates/templates.ts b/app/src/lib/templates/templates.ts
index af7fbde8d..d6b009b8c 100644
--- a/app/src/lib/templates/templates.ts
+++ b/app/src/lib/templates/templates.ts
@@ -20,23 +20,15 @@ export const templates: {
   {
     key: "flowchart",
     img: "template11.png",
-    bgColor: "#F1F3F5",
+    bgColor: "#FFFFFF",
     title: () => `Flowchart`,
     promptType: "flowchart",
     accentClasses: ["color_blue", "color_green"],
   },
-  {
-    key: "mindmap",
-    img: "template19.png",
-    bgColor: "#FFFFFF",
-    title: () => `Mind Map`,
-    promptType: "knowledge",
-    accentClasses: ["size_lg", "color_blue", "color_green", "color_orange"],
-  },
   {
     key: "org-chart",
     img: "template17.png",
-    bgColor: "#fefdf9",
+    bgColor: "#FFFFFF",
     title: () => t`Organization Chart`,
     promptType: "flowchart",
     accentClasses: ["color_blue", "color_orange"],
@@ -49,6 +41,14 @@ export const templates: {
     promptType: "flowchart",
     accentClasses: ["color_blue", "color_green", "color_purple"],
   },
+  {
+    key: "mindmap",
+    img: "template19.png",
+    bgColor: "#FFFFFF",
+    title: () => `Mind Map`,
+    promptType: "knowledge",
+    accentClasses: ["size_lg", "color_blue", "color_green", "color_orange"],
+  },
   {
     key: "knowledge-graph",
     img: "template20.png",
diff --git a/app/src/lib/toTheme.ts b/app/src/lib/toTheme.ts
index b0ca72330..0c704e54f 100644
--- a/app/src/lib/toTheme.ts
+++ b/app/src/lib/toTheme.ts
@@ -133,7 +133,7 @@ export function toTheme(theme: FFTheme) {
     }
   }
 
-  const elementStyles: cytoscape.StylesheetCSS[] = [
+  const preStyles: cytoscape.StylesheetCSS[] = [
     {
       selector: ":childless",
       css: node as any,
@@ -169,10 +169,25 @@ export function toTheme(theme: FFTheme) {
         "active-bg-opacity": 0,
       },
     },
+  ];
+  const postStyles: cytoscape.StylesheetCSS[] = [
     ...edgeStyleClasses,
     ...childlessShapeClasses,
     ...createSmartChildlessBorderClasses(theme.borderWidth || theme.edgeWidth),
     ...createSmartShapeClasses(width),
+    // for width and height in the form [w=100][h=100]
+    {
+      selector: ":childless[w]",
+      css: {
+        width: "data(width)",
+      },
+    },
+    {
+      selector: ":childless[h]",
+      css: {
+        height: "data(height)",
+      },
+    },
   ];
 
   const variables = [
@@ -182,17 +197,19 @@ export function toTheme(theme: FFTheme) {
     `$background: ${theme.background};`,
   ].join("\n");
 
-  const style = [variables, styleToString(elementStyles)];
+  const preStyle = [variables, styleToString(preStyles)];
+  const postStyle = styleToString(postStyles);
 
   // Add font style
   let knownFont = fonts.find((f) => f.name === theme.fontFamily);
   if (knownFont) {
-    style.unshift(knownFont.importSnippet);
+    preStyle.unshift(knownFont.importSnippet);
   }
 
   return {
     layout,
-    style: style.join("\n"),
+    style: preStyle.join("\n"),
+    postStyle,
   };
 }