diff --git a/components/ChatPlanet.jsx b/components/ChatPlanet.jsx
index 79b967e..d68d83e 100644
--- a/components/ChatPlanet.jsx
+++ b/components/ChatPlanet.jsx
@@ -13,9 +13,10 @@ function ChatPlanet(props) {
     ])
 
   useFrame(() => {
-    mesh.current.rotation.x += 0.01
+    mesh.current.rotation.x += props.rotateAmount
   })
 
+
   mesh.scale = 10
 
   return (
diff --git a/components/stars.jsx b/components/stars.jsx
new file mode 100644
index 0000000..87addde
--- /dev/null
+++ b/components/stars.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import THREE from '@react-three/fiber'
+import { Mesh } from 'three'
+
+function Stars({ pointCount }) {
+    const [positions, colors] = useMemo(() => {
+      let positions = [],
+        colors = []
+      for (let i = 0; i < pointCount; i++) {
+        positions.push(5 - Math.random() * 10)
+        positions.push(5 - Math.random() * 10)
+        positions.push(5 - Math.random() * 10)
+        colors.push(1)
+        colors.push(0.5)
+        colors.push(0.5)
+      }
+      return [new Float32Array(positions), new Float32Array(colors)]
+    }, [pointCount])
+  
+    const attrib = useRef()
+    const hover = useCallback(e => {
+      e.stopPropagation()
+      attrib.current.array[e.index * 3] = 1
+      attrib.current.array[e.index * 3 + 1] = 1
+      attrib.current.array[e.index * 3 + 2] = 1
+      attrib.current.needsUpdate = true
+    }, [])
+  
+    const unhover = useCallback(e => {
+      attrib.current.array[e.index * 3] = 1
+      attrib.current.array[e.index * 3 + 1] = 0.5
+      attrib.current.array[e.index * 3 + 2] = 0.5
+      attrib.current.needsUpdate = true
+    }, [])
+  
+    return (
+      <points onPointerOver={hover} onPointerOut={unhover}>
+        <bufferGeometry attach="geometry">
+          <bufferAttribute attachObject={["attributes", "position"]} count={positions.length / 3} array={positions} itemSize={3} />
+          <bufferAttribute ref={attrib} attachObject={["attributes", "color"]} count={colors.length / 3} array={colors} itemSize={3} />
+        </bufferGeometry>
+        <pointsMaterial attach="material" vertexColors size={10} sizeAttenuation={false} />
+      </points>
+    )
+  }
+
+export default Stars
\ No newline at end of file
diff --git a/pages/chat.js b/pages/chat.js
index 438ba13..f1a223b 100644
--- a/pages/chat.js
+++ b/pages/chat.js
@@ -1,35 +1,51 @@
 // import { Canvas as CanvasCSS3D, useFrame as useFrameCSS3D, useThree as useThreeCSS3D } from '@react-three/fiber'
 import { Canvas } from '@react-three/fiber'
-import css from "../styles/Home.module.css"
+import css from "../styles/Chat.module.css"
 
-import Floor from "../components/Floor"
 import LightBulb from '../components/LightBulb'
 import OrbitControls from '../components/OrbitControls'
 import ChatPlanet from '../components/ChatPlanet'
+import Stars from '../components/stars'
+
+import React, { useState } from 'react';
 
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'
 
 export default function Chat() {
 
+    const stage1 = {
+        rotateAmount: 0.001,
+        nextProp: 0
+    }
+    const stage2 = {
+        rotateAmount: 0.00
+    }
+
+    const [currentStage, setStage] = useState(stage1)
+
     return (
         <>
+            <div className={css.container}>
+
+                <div className={css.history}>
+                    History here
+                </div>
+
+                <div className={css.scene}>
+                    <Canvas
+                        shadows={true}
+                        className={css.canvas}
+                        camera={{
+                        position: [2, 2, 0],
+                        }}
+                    >
+                        <ambientLight color={"white"} intensity={0.2} />
+                        <LightBulb position={[0, 5, 3]} />
+                        <ChatPlanet rotateX={5} rotateY={5} rotateAmount={currentStage.rotateAmount} />
+                        {/* <OrbitControls/> */}
+                    </Canvas>
+                </div>
 
-        
-        
-        <div className={css.scene}>
-        <Canvas
-            shadows={true}
-            className={css.canvas}
-            camera={{
-            position: [2, 2, 2],
-            }}
-        >
-            <ambientLight color={"white"} intensity={0.2} />
-            <LightBulb position={[0, 5, 3]} />
-            <ChatPlanet rotateX={5} rotateY={5} />
-            {/* <OrbitControls/> */}
-        </Canvas>
-    </div>
-    </>
+            </div>
+        </>
     )
 }
\ No newline at end of file
diff --git a/styles/Chat.module.css b/styles/Chat.module.css
new file mode 100644
index 0000000..dba6696
--- /dev/null
+++ b/styles/Chat.module.css
@@ -0,0 +1,20 @@
+.scene{
+    width:75vw;
+    height:75vh;
+    float: left;
+}
+  
+.canvas{
+  background: #000;
+}
+
+.history {
+    width: 25vw;
+    height: 100vh;
+    float: left;
+}
+
+.container {
+    height: 100vh;
+    width: 100vw;
+}
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index ea03d2b..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,126 +0,0 @@
-.container {
-  padding: 0 2rem;
-  background-color: #000;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-.scene{
-  width:100vw;
-  height:100vh;
-}
-
-.canvas{
-  background: #000;
-}
\ No newline at end of file