diff --git a/src/App.jsx b/src/App.jsx
index 5fe951a..f5677f1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,46 @@
-import React from "react";
-import Test from './Test'
+import React, { useState, useEffect, useRef } from "react";
+import useOrderedHash from "./hooks/useOrderedHash";
+import Grid from "./Grid";
+
+const DIRECTION = {
+  UP: "up",
+  DOWN: "down",
+  LEFT: "left",
+  RIGHT: "right",
+};
+
 function App() {
+  const moveForward = () => {
+    snake.moveForward();
+  };
+
+  useEffect(() => {
+    const timer = setInterval(moveForward, 1 * 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const snake = useOrderedHash([
+    [0, 4],
+    [0, 3],
+    [0, 2],
+    [0, 1],
+    [0, 0],
+  ]);
+  console.log(snake);
+
+  // useEffect(() => {
+  //   const timer = setInterval(move, 1 * 1000);
+  //   // Listen for key presses.
+  //   return () => {
+  //     clearInterval(timer);
+  //   };
+  // }, []);
+
   return (
     <div>
-      <Test />
+      <Grid snake={snake} />
     </div>
   );
 }
diff --git a/src/Grid.jsx b/src/Grid.jsx
index ccf29aa..e93feb0 100644
--- a/src/Grid.jsx
+++ b/src/Grid.jsx
@@ -1,13 +1,7 @@
 import React from "react";
 import styles from "./grid.module.css";
-
-// in px (pixels)
-const GRID_WIDTH = 1500;
-const GRID_HEIGHT = 500;
-const CELL_DIMENSION = 30;
-
-const NUMBER_OF_ROWS = GRID_HEIGHT / CELL_DIMENSION;
-const NUMBER_OF_COLUMNS = GRID_WIDTH / CELL_DIMENSION;
+import { CELL_DIMENSION, NUMBER_OF_COLUMNS, NUMBER_OF_ROWS } from "./constants";
+import { generateKey } from "./utils";
 
 const grid = [];
 for (let i = 0; i < NUMBER_OF_ROWS; i++) {
@@ -18,7 +12,16 @@ for (let i = 0; i < NUMBER_OF_ROWS; i++) {
   grid.push(row);
 }
 
-function Cell({ x, y }) {
+function Cell({ x, y, body, head }) {
+  const cellColor = () => {
+    if (body) {
+      return { backgroundColor: "red" };
+    } else if (head) {
+      return { backgroundColor: "black" };
+    } else {
+      return { backgroundColor: "white" };
+    }
+  };
   return (
     <div
       className={styles.cell}
@@ -27,18 +30,26 @@ function Cell({ x, y }) {
         left: `${y * CELL_DIMENSION}px`,
         height: `${CELL_DIMENSION}px`,
         width: `${CELL_DIMENSION}px`,
+        ...cellColor(),
       }}
     ></div>
   );
 }
 
-function Grid({ snakes }) {
+function Grid({ snake }) {
   return (
     <div className={styles.grid}>
       {grid.map((rows) => {
         return rows.map((col) => {
           const [x, y] = col;
-          return <Cell x={x} y={y} key={`${x}-${y}`} />;
+          const key = generateKey(x, y);
+          if (snake.getHead().key == key) {
+            return <Cell x={x} y={y} key={`${x}-${y}`} head={true} />;
+          } else if (snake.hash[generateKey(x, y)]) {
+            return <Cell x={x} y={y} key={`${x}-${y}`} body={true} />;
+          } else {
+            return <Cell x={x} y={y} key={`${x}-${y}`} />;
+          }
         });
       })}
     </div>
diff --git a/src/Test.jsx b/src/Test.jsx
deleted file mode 100644
index eff6207..0000000
--- a/src/Test.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-function App() {
-  const [message, setMessage] = useState("");
-  const [peerConnection, setPeerConnection] = useState(null);
-
-  const handleInputChange = (e) => {
-    setMessage(e.target.value);
-  };
-
-  const handleSendMessage = () => {
-    if (peerConnection && message.trim() !== "") {
-      sendMessage(message);
-    }
-  };
-
-  const sendMessage = (message) => {
-    const dataChannel = peerConnection.createDataChannel("dataChannel");
-    dataChannel.onopen = () => {
-      dataChannel.send(message);
-    };
-  };
-
-  useEffect(() => {
-    const config = {
-      iceServers: [
-        {
-          urls: "stun:stun4.l.google.com:19302", // Public STUN server
-        },
-        {
-          url: "turn:192.158.29.39:3478?transport=udp",
-          credential: "JZEOEt2V3Qb0y27GRntt2u2PAYA=",
-          username: "28224511:1379330808",
-        },
-      ],
-    };
-
-    const peerConn = new RTCPeerConnection(config);
-
-    peerConn.ondatachannel = (event) => {
-      event.channel.onmessage = (e) => {
-        setMessage(e.data);
-      };
-    };
-
-    setPeerConnection(peerConn);
-  }, []);
-
-  return (
-    <div className="App">
-      <h1>WebRTC Chat</h1>
-      <div className="message-box">
-        <input
-          type="text"
-          placeholder="Type a message..."
-          value={message}
-          onChange={handleInputChange}
-        />
-        <button onClick={handleSendMessage}>Send</button>
-      </div>
-      <div className="chat-box">
-        <h2>Received Message:</h2>
-        <div className="received-message">{message}</div>
-      </div>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..ba9d3a5
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,15 @@
+// in px (pixels)
+const GRID_WIDTH = 1500;
+const GRID_HEIGHT = 600;
+const CELL_DIMENSION = 30;
+
+const NUMBER_OF_ROWS = GRID_HEIGHT / CELL_DIMENSION;
+const NUMBER_OF_COLUMNS = GRID_WIDTH / CELL_DIMENSION;
+
+export {
+  GRID_HEIGHT,
+  GRID_WIDTH,
+  CELL_DIMENSION,
+  NUMBER_OF_COLUMNS,
+  NUMBER_OF_ROWS,
+};
diff --git a/src/hooks/orderedHash.js b/src/hooks/orderedHash.js
new file mode 100644
index 0000000..b030b77
--- /dev/null
+++ b/src/hooks/orderedHash.js
@@ -0,0 +1,76 @@
+import { generateKey } from './utils.js';
+export default class OrderedHash {
+	constructor({ list = [], columns, rows } = {}) {
+		this.columns = columns;
+		this.rows = rows;
+		this.orderedHash = {};
+		this.keys = [];
+		list.forEach((item) => {
+			this.push(...item);
+		});
+	}
+	push(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (!this.keys.includes(key)) {
+			this.keys.push(key);
+		} else {
+			throw new Error("Error: The key already exists in the 'OrderedHash'.");
+		}
+		this.orderedHash[key] = [x, y];
+	}
+	/**
+	 * Adds an element to the beginning of the ordered hash.
+	 * @param {any} x - Data to be added to the ordered hash.
+	 * @param {any} y - Data to be added to the ordered hash.
+	 * @returns {void}
+	 */
+	unshift(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (!this.keys.includes(key)) {
+			this.keys.unshift(key);
+		} else {
+			throw new Error("Error: The key already exists in the 'OrderedHash'.");
+		}
+		this.orderedHash[key] = [x, y];
+	}
+	remove(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		if (this.keys.includes(key)) {
+			this.keys.splice(this.keys.indexOf(key), 1);
+			delete this.orderedHash[key];
+		} else {
+			throw new Error("Error: The key doesn't exists in the 'OrderedHash'.");
+		}
+	}
+	count() {
+		return this.keys.length;
+	}
+	get(x, y) {
+		const key = generateKey(x, y, this.columns, this.rows);
+		return this.orderedHash[key];
+	}
+	getOrderedHash() {
+		return this.orderedHash;
+	}
+	getKeys() {
+		return this.keys;
+	}
+	getArray() {
+		return this.keys.map((key) => this.orderedHash[key]);
+	}
+	getHead() {
+		const [head] = this.keys;
+		return this.orderedHash[head];
+	}
+	getBody() {
+		const [head, ...body] = this.keys;
+		return body.map((key) => this.orderedHash[key]);
+	}
+	getTail() {
+		const key = this.keys[this.keys.length - 1];
+		return this.orderedHash[key];
+	}
+	getNeck() {
+		return this.orderedHash[this.keys[1]];
+	}
+}
diff --git a/src/hooks/useOrderedHash.js b/src/hooks/useOrderedHash.js
new file mode 100644
index 0000000..4215c70
--- /dev/null
+++ b/src/hooks/useOrderedHash.js
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { generateKey } from "../utils";
+
+const useOrderedHash = (list = []) => {
+  const hash = {};
+  const keys = [];
+
+  list.forEach(([x, y]) => {
+    const key = generateKey(x, y);
+    if (!keys.includes(key)) {
+      keys.push(key);
+    } else {
+      throw new Error("Error: The key already exists in the 'OrderedHash'.");
+    }
+    hash[key] = [x, y];
+  });
+
+
+  const getHead = () => {
+    const key = keys[0];
+    return { key, value: hash[key] };
+  };
+
+  const getTail = () => {
+    return hash[keys[keys.length - 1]];
+  };
+
+  const getNeck = () => {
+    // TODO:
+    // Note: A snake should have atleast two cells, a head and a neck... Snake with only one
+    // cell (only head doesn't make sense).
+    return hash[keys[keys[1]]];
+  };
+
+  const moveForward = () => {
+    console.log("move forward invoked -> ", Date.now());
+  };
+
+  return { list, hash, moveForward, getHead, getTail, getNeck };
+};
+
+export default useOrderedHash;
diff --git a/src/index.js b/src/index.js
index 02df9aa..b0590e6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./Grid";
+import App from "./App";
 import "./index.css"
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..61feb5c
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,7 @@
+import { NUMBER_OF_COLUMNS, NUMBER_OF_ROWS } from "./constants";
+export const generateKey = (i, j) => {
+  if (i > NUMBER_OF_ROWS || j > NUMBER_OF_COLUMNS) {
+    throw new Error(`Invalid cordinate, (${i}, ${j})!`);
+  }
+  return `${i}-${j}`;
+};