diff --git a/src/components/layer.tsx b/src/components/layer.tsx
deleted file mode 100644
index b4e6069..0000000
--- a/src/components/layer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import react from 'react';
-import { useSelector } from 'react-redux';
-
-import { ViewportState } from './viewport';
-
-import '../theme/layer.css';
-
-const Layer: react.FC<{
-  children?: JSX.Element;
-}> = (props: { children?: JSX.Element }) => {
-  const viewportState = useSelector(
-    (state: { slippy: ViewportState }) => state.slippy
-  );
-  console.log(
-    `--- Rendering layer, viewportState: ${JSON.stringify(viewportState)} ---`
-  );
-
-  return (
-    <div
-      className='background'
-      style={{
-        transform: `translate(${viewportState.translation.x}px, ${viewportState.translation.y}px) scale(${viewportState.scale})`,
-      }}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default Layer;
diff --git a/src/components/map.tsx b/src/components/map.tsx
index 4fede39..7b7c584 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -1,11 +1,11 @@
 import react from 'react';
-import Viewport from './viewport';
+import Slippy from './slippy/index';
 
 const Map: react.FC<{}> = (props: {}) => {
   return (
-    <Viewport>
+    <Slippy>
       <div>
-      <div style={{ height: '256px' }}>
+        <div style={{ height: '256px' }}>
           <img
             alt=''
             role='presentation'
@@ -83,9 +83,8 @@ const Map: react.FC<{}> = (props: {}) => {
             style={{ width: '256px', height: '256px', opacity: 1 }}
           />
         </div>
-
       </div>
-    </Viewport>
+    </Slippy>
   );
 };
 
diff --git a/src/components/double-touch-handler.tsx b/src/components/slippy/double-touch-handler.tsx
similarity index 98%
rename from src/components/double-touch-handler.tsx
rename to src/components/slippy/double-touch-handler.tsx
index b23cb4e..14c8766 100644
--- a/src/components/double-touch-handler.tsx
+++ b/src/components/slippy/double-touch-handler.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface DoubleTouchHandlerProps {
   children: any;
diff --git a/src/components/viewport.tsx b/src/components/slippy/index.tsx
similarity index 77%
rename from src/components/viewport.tsx
rename to src/components/slippy/index.tsx
index 877898f..1374db8 100644
--- a/src/components/viewport.tsx
+++ b/src/components/slippy/index.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import MouseHandler from './mouse-handler';
 import Layer from './layer';
 
-import '../theme/viewport.css';
+import '../../theme/slippy.css';
 import SingleTouchHandler from './single-touch-handler';
 import DoubleTouchHandler from './double-touch-handler';
 
@@ -28,16 +28,11 @@ interface ViewportProps {
   children: any;
 }
 
-export interface ViewportState {
-  scale: number;
-  translation: Point;
-}
-
-const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
+const Slippy: react.FC<ViewportProps> = (props: ViewportProps) => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
   return (
-    <div className='viewport'>
+    <div className='slippy'>
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
@@ -49,4 +44,4 @@ const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   );
 };
 
-export default Viewport;
+export default Slippy;
diff --git a/src/components/slippy/layer.tsx b/src/components/slippy/layer.tsx
new file mode 100644
index 0000000..5890f46
--- /dev/null
+++ b/src/components/slippy/layer.tsx
@@ -0,0 +1,30 @@
+import react from 'react';
+import { useSelector } from 'react-redux';
+
+import { SlippyState } from '../../store/slippy';
+
+import '../../theme/layer.css';
+
+const Layer: react.FC<{
+  children?: JSX.Element;
+}> = (props: { children?: JSX.Element }) => {
+  const slippyState = useSelector(
+    (state: { slippy: SlippyState }) => state.slippy
+  );
+  console.log(
+    `--- Rendering layer, slippyState: ${JSON.stringify(slippyState)} ---`
+  );
+
+  return (
+    <div
+      className='background'
+      style={{
+        transform: `translate(${slippyState.translation.x}px, ${slippyState.translation.y}px) scale(${slippyState.scale})`,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Layer;
diff --git a/src/components/mouse-handler.tsx b/src/components/slippy/mouse-handler.tsx
similarity index 98%
rename from src/components/mouse-handler.tsx
rename to src/components/slippy/mouse-handler.tsx
index 1736b78..3f320f3 100644
--- a/src/components/mouse-handler.tsx
+++ b/src/components/slippy/mouse-handler.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface MouseHandlerProps {
   children: any;
diff --git a/src/components/single-touch-handler.tsx b/src/components/slippy/single-touch-handler.tsx
similarity index 98%
rename from src/components/single-touch-handler.tsx
rename to src/components/slippy/single-touch-handler.tsx
index 32b87d4..3665f04 100644
--- a/src/components/single-touch-handler.tsx
+++ b/src/components/slippy/single-touch-handler.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface SingleTouchHandlerProps {
   children: any;
diff --git a/src/store/slippy.ts b/src/store/slippy.ts
index cdaf9f7..960b042 100644
--- a/src/store/slippy.ts
+++ b/src/store/slippy.ts
@@ -1,8 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import { ViewportState } from '../components/viewport';
+import { Point } from '../components/slippy/index';
 
-const initialSlippyState: ViewportState = {
+export interface SlippyState {
+    scale: number;
+    translation: Point;
+  }
+  
+const initialSlippyState: SlippyState = {
   scale: 1,
   translation: { x: 0, y: 0 },
 };
diff --git a/src/theme/viewport.css b/src/theme/slippy.css
similarity index 89%
rename from src/theme/viewport.css
rename to src/theme/slippy.css
index 8b4137e..8797080 100644
--- a/src/theme/viewport.css
+++ b/src/theme/slippy.css
@@ -1,4 +1,4 @@
-.viewport {
+.slippy {
     position: fixed;
     width: 100%;
     height: 100%;