diff --git a/patches/jsxgraph+1.9.2.patch b/patches/jsxgraph+1.9.2.patch
new file mode 100644
index 0000000..56a6e00
--- /dev/null
+++ b/patches/jsxgraph+1.9.2.patch
@@ -0,0 +1,42 @@
+diff --git a/node_modules/jsxgraph/src/3d/circle3d.js b/node_modules/jsxgraph/src/3d/circle3d.js
+index 2e9438a..2d4d980 100644
+--- a/node_modules/jsxgraph/src/3d/circle3d.js
++++ b/node_modules/jsxgraph/src/3d/circle3d.js
+@@ -264,7 +264,7 @@ JXG.createCircle3D = function (board, parents, attributes) {
+     el = new JXG.Circle3D(view, center, normal, radius, attr);
+ 
+     // update scene tree
+-    el.center.addChild(el);
++    el.center.addParents(el);
+     el.addChild(el.curve);
+ 
+     el.update();
+diff --git a/node_modules/jsxgraph/src/3d/view3d.js b/node_modules/jsxgraph/src/3d/view3d.js
+index b911e87..a23fa2f 100644
+--- a/node_modules/jsxgraph/src/3d/view3d.js
++++ b/node_modules/jsxgraph/src/3d/view3d.js
+@@ -1832,20 +1832,20 @@ JXG.createView3D = function (board, parents, attributes) {
+ 
+     attr = Type.copyAttributes(attributes, board.options, 'view3d');
+     view = new JXG.View3D(board, parents, attr);
+-    view.defaultAxes = view.create('axes3d', parents, attributes);
++    view.defaultAxes = view.create('axes3d', parents, attr);
+ 
+     x = coords[0];
+     y = coords[1];
+     w = size[0];
+     h = size[1];
+ 
+-    attr_az = Type.copyAttributes(attributes, board.options, 'view3d', 'az', 'slider');
++    attr_az = Type.copyAttributes(attr, board.options, 'view3d', 'az', 'slider');
+     attr_az.name = 'az';
+ 
+-    attr_el = Type.copyAttributes(attributes, board.options, 'view3d', 'el', 'slider');
++    attr_el = Type.copyAttributes(attr, board.options, 'view3d', 'el', 'slider');
+     attr_el.name = 'el';
+ 
+-    attr_bank = Type.copyAttributes(attributes, board.options, 'view3d', 'bank', 'slider');
++    attr_bank = Type.copyAttributes(attr, board.options, 'view3d', 'bank', 'slider');
+     attr_bank.name = 'bank';
+ 
+     /**
diff --git a/src/theme/obsidian.ts b/src/theme/obsidian.ts
index 267a68c..70d166f 100644
--- a/src/theme/obsidian.ts
+++ b/src/theme/obsidian.ts
@@ -34,16 +34,42 @@ JXG.themes['obsidian'] = {
 			strokeColor: "var(--color-blue)",
 		},
 		xPlaneRear: {
-			fillColor: textMuted,
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
+		},
+		xPlaneFront: {
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
 		},
 		yPlaneRear: {
-			fillColor: textMuted,
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
+		},
+		yPlaneFront: {
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
 		},
 		zPlaneRear: {
-			fillColor: textMuted,
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
+		},
+		zPlaneFront: {
+			fillColor: "var(--color-base-00)",
+			gradient: "linear",
+			gradientSecondColor: "var(--color-base-50)",
 		},
 	},
 
+	mesh3d: {
+		strokeColor: textNormal,
+		fillColor: textNormal,
+	},
+
 	point3d: {
 		fillColor: interactiveAccent,
 		strokeColor: interactiveAccent,
diff --git a/src/types.ts b/src/types.ts
index 0273be1..2ea4e77 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -36,6 +36,7 @@ export interface GraphInfo {
 }
 	export interface Att3d {
 		axisPosition: string,
+		projection: string,
 
 		xAxis: Attributes ,
 		xPlaneFront: Attributes,
diff --git a/src/utils.ts b/src/utils.ts
index c3aaae4..2516499 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -99,8 +99,8 @@ export class Utils {
 
 			const xLength = Math.abs(graphInfo.bounds[2]-graphInfo.bounds[0]);
 			const yLength = Math.abs(graphInfo.bounds[1]-graphInfo.bounds[3]);
-			const xMin = graphInfo.bounds[0] <= 0 ? graphInfo.bounds[0] + xLength*0.15 : graphInfo.bounds[0] - xLength*0.15; 
-			const yMin = graphInfo.bounds[3] <= 0 ? graphInfo.bounds[3] + yLength*0.15 : graphInfo.bounds[3] - yLength*0.15; 
+			const xMin = graphInfo.bounds[0] + xLength*0.15; 
+			const yMin = graphInfo.bounds[3] + yLength*0.15; 
 
 			const element: ElementInfo = {
 				type: "view3d",
@@ -110,10 +110,10 @@ export class Utils {
 
 
 			if (graphInfo.att3d == undefined) {
-				graph.view3d = board.create("view3d", [[xMin, yMin], [xLength-xLength*0.3, yLength-yLength*0.3], graphInfo.bounds3d])
+				graph.view3d = board.create("view3d", element.def);
 			}
 			else {
-				this.checkComposedAtts(graphInfo.att3d, graph.createdElements);
+				this.checkComposedAtts(element.att as Att3d, graph.createdElements);
 				//@ts-ignore
 				graph.view3d = board.create(element.type, element.def, element.att);
 			}
diff --git a/styles.css b/styles.css
index 3b0cd20..8f2b4bf 100644
--- a/styles.css
+++ b/styles.css
@@ -12,15 +12,20 @@
 	max-width: var(--graph-width);
     background-color: var(--background-secondary);
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     border-color: var(--background-modifier-border);
-    border-radius: 10px;
-    -webkit-border-radius: 10px;
+    border-radius: var(--radius-m);
+    -webkit-border-radius: var(--radius-m);
     margin: var(--graph-alignment);
+	-webkit-touch-action: none;
     -ms-touch-action: none;
     /* "touch-action: none;" is set with JavaScript. */
 }
 
+.jxgbox:hover {
+    border-color: var(--background-modifier-border-focus);
+}
+
 .jxgbox svg text {
     cursor: default;
     -webkit-user-select: none;