diff --git a/docs/assets/images/screen-main.png b/docs/assets/images/screen-main.png
index e3d3bc8..6a589c9 100644
Binary files a/docs/assets/images/screen-main.png and b/docs/assets/images/screen-main.png differ
diff --git a/docs/assets/images/screen-settings.png b/docs/assets/images/screen-settings.png
index 8d4608a..b0dbe90 100644
Binary files a/docs/assets/images/screen-settings.png and b/docs/assets/images/screen-settings.png differ
diff --git a/frontend/src/components/controls/index.js b/frontend/src/components/controls/index.js
index 4c79ae5..cbbff5a 100644
--- a/frontend/src/components/controls/index.js
+++ b/frontend/src/components/controls/index.js
@@ -33,7 +33,7 @@ const Controls = ({
                 <Button onClick={onClickNextFile} text={<Icon name="chevron-right" />} accessKey="x" />
               </Tooltip>
               <Tooltip text="Open with external application">
-                <Button onClick={onClickOpenWith} text={<Icon name="external-link" />} accessKey="z" />
+                <Button onClick={onClickOpenWith} text={<Icon name="external-link" />} />
               </Tooltip>
             </>
           ) : <></>
diff --git a/frontend/src/components/frame/index.js b/frontend/src/components/frame/index.js
deleted file mode 100644
index 224add0..0000000
--- a/frontend/src/components/frame/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
-import { Canvas } from '@react-three/fiber'
-import { useEffect, useRef, Suspense } from 'react'
-import style from "./style.module.css"
-import Helpers from '../../components/helpers'
-import Model from '../../components/model'
-import { OrbitControls } from "@react-three/drei"
-
-const defaultSettings = { modelColor: "#cc8800" }
-
-const parseSettings = () => {
-  const settingsString = localStorage.getItem("settings");
-  if (settingsString) {
-    return JSON.parse(settingsString);
-  }
-  return defaultSettings;
-}
-
-const Frame = ({ file, filePath, size }) => {
-  const containerRef = useRef(null);
-  const canvasRef = useRef(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    const canvas = canvasRef.current;
-    canvas.width = container.clientWidth;
-    canvas.height = container.clientHeight;
-  }, []);
-
-  return (
-    <div style={{ width: size, height: size }} ref={containerRef} className={style.mainWrapper}>
-      <Canvas ref={canvasRef} style={{ width: '100%', height: '100%' }}>
-        <Suspense fallback={null}>
-          {filePath ? <Model file={file} color={parseSettings().modelColor} yOffset={-40} /> : <></>}
-          <Helpers cameraPosition={[80, 80, 80]} isBedVisible={false} isVisible={false} />
-          <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
-        </Suspense>
-      </Canvas>
-    </div>
-  )
-}
-
-export default Frame
diff --git a/frontend/src/components/frame/style.module.css b/frontend/src/components/frame/style.module.css
deleted file mode 100644
index 02688f1..0000000
--- a/frontend/src/components/frame/style.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.mainWrapper {
-  box-sizing: border-box;
-  background-color: #222222dd;
-  border: solid 1px #f0f0f088;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/frontend/src/pages/application/index.js b/frontend/src/pages/application/index.js
index 537f13d..2308f64 100644
--- a/frontend/src/pages/application/index.js
+++ b/frontend/src/pages/application/index.js
@@ -20,6 +20,7 @@ const Application = () => {
   const canvasRef = useRef(null);
   const [cameraPosition, setCameraPosition] = useState([100, 100, 100])
   const [settings, setSetting] = useState(parseSettings())
+  const orbitRef = useRef(null);
 
   const readFile = toReadFile => {
     const reader = new FileReader();
@@ -74,18 +75,22 @@ const Application = () => {
   }
 
   const onClickSideX = () => {
+    orbitRef?.current?.reset();
     setCameraPosition(() => [0, 0, 100])
   }
 
   const onClickSideY = () => {
+    orbitRef?.current?.reset();
     setCameraPosition(() => [0, 100, 0])
   }
 
   const onClickSideZ = () => {
+    orbitRef?.current?.reset();
     setCameraPosition(() => [100, 0, 0])
   }
 
   const onClickResetPosition = () => {
+    orbitRef?.current?.reset();
     setCameraPosition(() => [100, 100, 100])
   }
 
@@ -140,7 +145,7 @@ const Application = () => {
           <Suspense fallback={<></>}>
             <Bed bedSize={settings.bedSize} cellSize={settings.bedGridCellSize} isVisible={settings.isBedVisible} color={settings.bedColor} />
             {filePath ? <Model file={file} color={settings.modelColor} /> : <></>}
-            <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
+            <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} ref={orbitRef}/>
             <Helpers cameraPosition={cameraPosition} isAxesVisible={settings.isAxesVisible} />
           </Suspense>
         </Canvas>