From ab72dd88cb5aa0740e27e48d5ea9a8cc190bd2c8 Mon Sep 17 00:00:00 2001
From: Tim Howitz <Tim.Howitz@dyson.com>
Date: Mon, 28 Apr 2025 19:03:29 +0100
Subject: [PATCH] Did a lot of cleaning up and improving

---
 package-lock.json              | 102 +++++++-
 package.json                   |   1 +
 src/app/contact-us/page.tsx    | 286 ++++++++++------------
 src/app/earthquakes/page.tsx   | 147 +++++------
 src/app/layout.tsx             |  50 ++--
 src/app/observatories/page.tsx | 120 ++++-----
 src/app/our-mission/page.tsx   |  90 ++++---
 src/app/shop/page.tsx          | 433 ++++++++++++++++++++-------------
 src/app/warehouse/page.tsx     | 100 ++++----
 src/components/AuthModal.tsx   | 244 ++++++++++---------
 src/components/Sidebar.tsx     | 169 ++++++-------
 src/components/navbar.tsx      | 172 ++++++++-----
 src/components/sidebar_e.tsx   |  72 +++---
 src/components/sidebar_o.tsx   |  70 +++---
 src/hooks/store.ts             |  10 +
 src/types/Artifact.ts          |  11 +
 src/types/StoreModel.ts        |  17 ++
 tsconfig.json                  |  10 +-
 18 files changed, 1178 insertions(+), 926 deletions(-)
 create mode 100644 src/hooks/store.ts
 create mode 100644 src/types/Artifact.ts
 create mode 100644 src/types/StoreModel.ts

diff --git a/package-lock.json b/package-lock.json
index 383ebc5..fc39165 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
                 "bcryptjs": "^3.0.2",
                 "body-parser": "^2.2.0",
                 "csv-parser": "^3.2.0",
+                "easy-peasy": "^6.1.0",
                 "express": "^5.1.0",
                 "fs": "^0.0.1-security",
                 "jwt-decode": "^4.0.0",
@@ -55,6 +56,18 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+            "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+            "license": "MIT",
+            "dependencies": {
+                "regenerator-runtime": "^0.14.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@emnapi/runtime": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1637,7 +1650,7 @@
             "version": "19.0.10",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
             "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "csstype": "^3.0.2"
@@ -1647,7 +1660,7 @@
             "version": "19.0.4",
             "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
             "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "peerDependencies": {
                 "@types/react": "^19.0.0"
@@ -2803,7 +2816,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/csv-parser": {
@@ -3048,6 +3061,42 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/easy-peasy": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/easy-peasy/-/easy-peasy-6.1.0.tgz",
+            "integrity": "sha512-zW7mUATJRohNWWSrihmeFhS85jjsIHa1ptTDn6bSXa2DXh8Zeawfpmm1LtKa+Y6jNNz5aQlMjWZ8uuuVk5bdVQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.22.6",
+                "fast-deep-equal": "^3.1.3",
+                "immer": "^9.0.21",
+                "redux": "^5.0.1",
+                "redux-thunk": "^3.1.0",
+                "ts-toolbelt": "^9.6.0",
+                "use-sync-external-store": "^1.4.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^18.0 || ^19.0",
+                "@types/react-dom": "^18.0 || ^19.0",
+                "react": "^18.0 || ^19.0",
+                "react-dom": "^18.0 || ^19.0",
+                "react-native": ">=0.59"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                },
+                "react-native": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -3844,7 +3893,6 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/fast-glob": {
@@ -4561,6 +4609,16 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/immer": {
+            "version": "9.0.21",
+            "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+            "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/immer"
+            }
+        },
         "node_modules/import-fresh": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -6605,6 +6663,21 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/redux": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+            "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+            "license": "MIT"
+        },
+        "node_modules/redux-thunk": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+            "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "redux": "^5.0.0"
+            }
+        },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6628,6 +6701,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+            "license": "MIT"
+        },
         "node_modules/regexp.prototype.flags": {
             "version": "1.5.4",
             "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -7770,6 +7849,12 @@
             "dev": true,
             "license": "Apache-2.0"
         },
+        "node_modules/ts-toolbelt": {
+            "version": "9.6.0",
+            "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz",
+            "integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
+            "license": "Apache-2.0"
+        },
         "node_modules/tsconfig-paths": {
             "version": "3.15.0",
             "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -7953,6 +8038,15 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+            "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/util": {
             "version": "0.10.4",
             "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
diff --git a/package.json b/package.json
index a93180e..6bec9ce 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "bcryptjs": "^3.0.2",
         "body-parser": "^2.2.0",
         "csv-parser": "^3.2.0",
+        "easy-peasy": "^6.1.0",
         "express": "^5.1.0",
         "fs": "^0.0.1-security",
         "jwt-decode": "^4.0.0",
diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
index ac3ebc2..7c7f00e 100644
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -1,173 +1,143 @@
 "use client";
-import React, { useState } from "react";
 import Image from "next/image";
+import React, { useState } from "react";
 
 const ContactUs = () => {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    message: "",
-  });
+	const [formData, setFormData] = useState({
+		name: "",
+		email: "",
+		message: "",
+	});
 
-  const handleChange = (e) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
-  };
+	const handleChange = (e) => {
+		setFormData({ ...formData, [e.target.name]: e.target.value });
+	};
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log("Form submitted with data:", formData);
-    alert("Thank you for reaching out! We will get back to you soon.");
-    setFormData({ name: "", email: "", message: "" });
-  };
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		console.log("Form submitted with data:", formData);
+		alert("Thank you for reaching out! We will get back to you soon.");
+		setFormData({ name: "", email: "", message: "" });
+	};
 
-  return (
-    <div
-      className="h-screen relative text-white py-10 border border-black">
-       <Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
-    
-      {/* Overlay for readability */}
-      <div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
-        {/* Container */}
-        <div className="max-w-4xl mx-auto p-5">
-          {/* Header */}
-          <h1 className="text-4xl font-bold text-center text-white mb-6">
-            Contact Us
-          </h1>
-          <p className="text-lg text-center text-gray-300 mb-6">
-            Have questions or concerns about earthquake preparedness? Contact us
-            using the form below or through the provided contact details.
-          </p>
+	return (
+		<div className="h-screen relative text-white py-10 border border-black">
+			<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg" />
 
-          {/* Content Section */}
-          <div className="flex flex-col md:flex-row gap-6">
-            {/* Contact Form Section */}
-            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
-              <form onSubmit={handleSubmit}>
-                <div className="mb-4">
-                  <label
-                    htmlFor="name"
-                    className="block text-gray-700 font-medium mb-2"
-                  >
-                    Name
-                  </label>
-                  <input
-                    type="text"
-                    name="name"
-                    id="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    placeholder="Your Name"
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    required
-                  />
-                </div>
+			{/* Overlay for readability */}
+			<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
+				{/* Container */}
+				<div className="max-w-4xl mx-auto p-5">
+					{/* Header */}
+					<h1 className="text-4xl font-bold text-center text-white mb-6">Contact Us</h1>
+					<p className="text-lg text-center text-neutral-300 mb-6">
+						Have questions or concerns about earthquake preparedness? Contact us using the form below or through the provided
+						contact details.
+					</p>
 
-                <div className="mb-4">
-                  <label
-                    htmlFor="email"
-                    className="block text-gray-700 font-medium mb-2"
-                  >
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    name="email"
-                    id="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    placeholder="Your Email"
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    required
-                  />
-                </div>
+					{/* Content Section */}
+					<div className="flex flex-col md:flex-row gap-6">
+						{/* Contact Form Section */}
+						<div className="flex-1 bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
+							<form onSubmit={handleSubmit}>
+								<div className="mb-4">
+									<label htmlFor="name" className="block text-neutral-700 font-medium mb-2">
+										Name
+									</label>
+									<input
+										type="text"
+										name="name"
+										id="name"
+										value={formData.name}
+										onChange={handleChange}
+										placeholder="Your Name"
+										className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+										required
+									/>
+								</div>
 
-                <div className="mb-4">
-                  <label
-                    htmlFor="message"
-                    className="block text-gray-700 font-medium mb-2"
-                  >
-                    Message
-                  </label>
-                  <textarea
-                    name="message"
-                    id="message"
-                    value={formData.message}
-                    onChange={handleChange}
-                    rows="5"
-                    placeholder="Your Message"
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    required
-                  />
-                </div>
+								<div className="mb-4">
+									<label htmlFor="email" className="block text-neutral-700 font-medium mb-2">
+										Email
+									</label>
+									<input
+										type="email"
+										name="email"
+										id="email"
+										value={formData.email}
+										onChange={handleChange}
+										placeholder="Your Email"
+										className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+										required
+									/>
+								</div>
 
-                <button
-                  type="submit"
-                  className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
-                >
-                  Send Message
-                </button>
-              </form>
-            </div>
+								<div className="mb-4">
+									<label htmlFor="message" className="block text-neutral-700 font-medium mb-2">
+										Message
+									</label>
+									<textarea
+										name="message"
+										id="message"
+										value={formData.message}
+										onChange={handleChange}
+										rows="5"
+										placeholder="Your Message"
+										className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+										required
+									/>
+								</div>
 
-            {/* Contact Details Section */}
-            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
-              <h2 className="text-xl font-bold text-gray-800 mb-4">
-                Get in Touch
-              </h2>
-              <div className="mb-4">
-                <h3 className="text-gray-700 font-medium">Email</h3>
-                <p className="text-gray-600">support@earthquakesafety.org</p>
-              </div>
-              <div className="mb-4">
-                <h3 className="text-gray-700 font-medium">Phone</h3>
-                <p className="text-gray-600">+1 800 123 4567</p>
-              </div>
-              <div className="mb-4">
-                <h3 className="text-gray-700 font-medium">Address</h3>
-                <p className="text-gray-600">
-                  123 Earthquake Ave, Prepared City, CA 98765
-                </p>
-              </div>
+								<button
+									type="submit"
+									className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
+								>
+									Send Message
+								</button>
+							</form>
+						</div>
 
-              <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
-                Follow Us
-              </h2>
-              <div className="flex justify-around items-center">
-                <a
-                  href="#"
-                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
-                >
-                  <span className="sr-only">Instagram</span>
-                  <Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
-                </a>
-                <a
-                  href="#"
-                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
-                >
-                  <span className="sr-only">Facebook</span>
-                  <Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
-                </a>
-                <a
-                  href="#"
-                  className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200"
-                >
-                  <span className="sr-only">X</span>
-                  <Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
-                </a>
-                <a
-                  href="#"
-                  className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200"
-                >
-                  <span className="sr-only">LinkedIn</span>
-                  <Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png"/>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+						{/* Contact Details Section */}
+						<div className="flex-1 bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
+							<h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
+							<div className="mb-4">
+								<h3 className="text-neutral-700 font-medium">Email</h3>
+								<p className="text-neutral-600">support@earthquakesafety.org</p>
+							</div>
+							<div className="mb-4">
+								<h3 className="text-neutral-700 font-medium">Phone</h3>
+								<p className="text-neutral-600">+1 800 123 4567</p>
+							</div>
+							<div className="mb-4">
+								<h3 className="text-neutral-700 font-medium">Address</h3>
+								<p className="text-neutral-600">123 Earthquake Ave, Prepared City, CA 98765</p>
+							</div>
+
+							<h2 className="text-xl font-bold text-neutral-800 mb-4 mt-6">Follow Us</h2>
+							<div className="flex justify-around items-center">
+								<a href="#" className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200">
+									<span className="sr-only">Instagram</span>
+									<Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp" />
+								</a>
+								<a href="#" className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200">
+									<span className="sr-only">Facebook</span>
+									<Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp" />
+								</a>
+								<a href="#" className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200">
+									<span className="sr-only">X</span>
+									<Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg" />
+								</a>
+								<a href="#" className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200">
+									<span className="sr-only">LinkedIn</span>
+									<Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png" />
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 };
 
-export default ContactUs;
\ No newline at end of file
+export default ContactUs;
diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx
index 5a24479..6cc05b2 100644
--- a/src/app/earthquakes/page.tsx
+++ b/src/app/earthquakes/page.tsx
@@ -1,80 +1,81 @@
 "use client";
 
-import Sidebar from "@/components/sidebar";
-import Map from "@/components/map";
-import { useState, useMemo } from "react";
+import { useMemo, useState } from 'react';
+
+import Map from '@components/Map';
+import Sidebar from '@components/Sidebar';
 
 export default function Earthquakes() {
-  const [selectedEventId, setSelectedEventId] = useState("");
-  const [hoveredEventId, setHoveredEventId] = useState("");
+	const [selectedEventId, setSelectedEventId] = useState("");
+	const [hoveredEventId, setHoveredEventId] = useState("");
 
-  const events = useMemo(
-    () => [
-      {
-        id: "1234",
-        title: "Earthquake in Germany",
-        text1: "Magnitude 8.5",
-        text2: "30 minutes ago",
-        magnitude: 8.5,
-        longitude: 10.4515, // Near Berlin, Germany
-        latitude: 52.52,
-      },
-      {
-        id: "2134",
-        title: "Earthquake in California",
-        text1: "Magnitude 5.3",
-        text2: "2 hours ago",
-        magnitude: 5.3,
-        longitude: -122.4194, // Near San Francisco, California, USA
-        latitude: 37.7749,
-      },
-      {
-        id: "2314",
-        title: "Tremor in Japan",
-        text1: "Magnitude 4.7",
-        text2: "5 hours ago",
-        magnitude: 4.7,
-        longitude: 139.6917, // Near Tokyo, Japan
-        latitude: 35.6762,
-      },
-      {
-        id: "2341",
-        title: "Tremor in Spain",
-        text1: "Magnitude 2.1",
-        text2: "10 hours ago",
-        magnitude: 2.1,
-        longitude: -3.7038, // Near Madrid, Spain
-        latitude: 40.4168,
-      },
-    ],
-    []
-  );
+	const events = useMemo(
+		() => [
+			{
+				id: "1234",
+				title: "Earthquake in Germany",
+				text1: "Magnitude 8.5",
+				text2: "30 minutes ago",
+				magnitude: 8.5,
+				longitude: 10.4515, // Near Berlin, Germany
+				latitude: 52.52,
+			},
+			{
+				id: "2134",
+				title: "Earthquake in California",
+				text1: "Magnitude 5.3",
+				text2: "2 hours ago",
+				magnitude: 5.3,
+				longitude: -122.4194, // Near San Francisco, California, USA
+				latitude: 37.7749,
+			},
+			{
+				id: "2314",
+				title: "Tremor in Japan",
+				text1: "Magnitude 4.7",
+				text2: "5 hours ago",
+				magnitude: 4.7,
+				longitude: 139.6917, // Near Tokyo, Japan
+				latitude: 35.6762,
+			},
+			{
+				id: "2341",
+				title: "Tremor in Spain",
+				text1: "Magnitude 2.1",
+				text2: "10 hours ago",
+				magnitude: 2.1,
+				longitude: -3.7038, // Near Madrid, Spain
+				latitude: 40.4168,
+			},
+		],
+		[]
+	);
 
-  return (
-    <div className="h-full flex overflow-hidden">
-      <div className="flex-grow">
-        <Map
-          events={events}
-          selectedEventId={selectedEventId}
-          setSelectedEventId={setSelectedEventId}
-          hoveredEventId={hoveredEventId}
-          setHoveredEventId={setHoveredEventId}
-          mapType="Earthquakes"
-        ></Map>
-      </div>
-      <Sidebar
-        logTitle="Log an Earthquake"
-        logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
-        recentsTitle="Recent Earthquakes"
-        events={events}
-        selectedEventId={selectedEventId}
-        setSelectedEventId={setSelectedEventId}
-        hoveredEventId={hoveredEventId}
-        setHoveredEventId={setHoveredEventId}
-        button1Name="Log an Earthquake"
-        button2Name="Search Earthquakes"
-      ></Sidebar>
-      {/* <SidebarTest></SidebarTest> */}
-    </div>
-  );
+	return (
+		<div className="h-full flex overflow-hidden">
+			<div className="flex-grow">
+				<Map
+					events={events}
+					selectedEventId={selectedEventId}
+					setSelectedEventId={setSelectedEventId}
+					hoveredEventId={hoveredEventId}
+					setHoveredEventId={setHoveredEventId}
+					mapType="Earthquakes"
+				></Map>
+			</div>
+			<Sidebar
+				logTitle="Log an Earthquake"
+				logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
+				recentsTitle="Recent Earthquakes"
+				events={events}
+				selectedEventId={selectedEventId}
+				setSelectedEventId={setSelectedEventId}
+				hoveredEventId={hoveredEventId}
+				setHoveredEventId={setHoveredEventId}
+				button1Name="Log an Earthquake"
+				button2Name="Search Earthquakes"
+			></Sidebar>
+			{/* <SidebarTest></SidebarTest> */}
+		</div>
+	);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f546284..4e92c23 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,29 +1,43 @@
+"use client";
 import type { Metadata } from "next";
-import Navbar from "@/components/Navbar";
-import { Inter } from "next/font/google";
 import "./globals.css";
 
+import { action, createStore, StoreProvider } from "easy-peasy";
+import { Inter } from "next/font/google";
+
+import { StoreModel } from "@appTypes/StoreModel";
+import Navbar from "@components/Navbar";
+
 const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
+	subsets: ["latin"],
+	variable: "--font-inter",
 });
 
-export const metadata: Metadata = {
-  title: "Tremor Tracker",
-  description: "Generated by tim",
-};
+const store = createStore<StoreModel>({
+	currency: {
+		selectedCurrency: "GBP",
+		setSelectedCurrency: action((state, payload) => {
+			state.selectedCurrency = payload;
+		}),
+		currencies: ["GBP", "USD", "EUR"],
+		conversionRates: { GBP: 1, USD: 1.33, EUR: 1.17 },
+		tickers: { GBP: "£", USD: "$", EUR: "€" },
+	},
+});
 
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={`${inter.variable} h-[calc(100vh-3.5rem)] flex flex-col min-h-screen antialiased`}>
-        <Navbar></Navbar>
-        <div className="flex-1 overflow-y-auto">{children}</div>
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<StoreProvider store={store}>
+				<body className={`${inter.variable} h-[calc(100vh-3.5rem)] flex flex-col min-h-screen antialiased`}>
+					<Navbar></Navbar>
+					<div className="flex-1 overflow-y-auto">{children}</div>
+				</body>
+			</StoreProvider>
+		</html>
+	);
 }
diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index 5e4dd6a..28f4dbf 100644
--- a/src/app/observatories/page.tsx
+++ b/src/app/observatories/page.tsx
@@ -1,68 +1,68 @@
 "use client";
 
-import Sidebar from "@/components/sidebar";
-import Map from "@/components/map";
+import Sidebar from "@/components/Sidebar";
+import Map from "@/components/Map";
 import { useState, useMemo } from "react";
 
 export default function Observatories() {
-  const [selectedEventId, setSelectedEventId] = useState("");
-  const [hoveredEventId, setHoveredEventId] = useState("");
+	const [selectedEventId, setSelectedEventId] = useState("");
+	const [hoveredEventId, setHoveredEventId] = useState("");
 
-  const events = useMemo(
-    () => [
-      {
-        id: "1234",
-        title: "Earthquake - Berlin Observatory",
-        text1: "Logged by ",
-        text2: "30 minutes ago",
-        longitude: 10.4515, // Near Berlin, Germany
-        latitude: 52.52,
-      },
-      {
-        id: "2134",
-        title: "New Observatory - Phuket, Thailand",
-        text1: "Dr. Neil Armstrong",
-        text2: "2 weeks ago",
-        longitude: -122.4194,
-        latitude: 37.7749,
-      },
-      {
-        id: "2314",
-        title: "Observatory Scientist Change",
-        text1: "Dr. Samantha Green new lead scientist",
-        text2: "1 month ago",
-        longitude: 139.6917,
-        latitude: 35.6762,
-      },
-    ],
-    []
-  );
+	const events = useMemo(
+		() => [
+			{
+				id: "1234",
+				title: "Earthquake - Berlin Observatory",
+				text1: "Logged by ",
+				text2: "30 minutes ago",
+				longitude: 10.4515, // Near Berlin, Germany
+				latitude: 52.52,
+			},
+			{
+				id: "2134",
+				title: "New Observatory - Phuket, Thailand",
+				text1: "Dr. Neil Armstrong",
+				text2: "2 weeks ago",
+				longitude: -122.4194,
+				latitude: 37.7749,
+			},
+			{
+				id: "2314",
+				title: "Observatory Scientist Change",
+				text1: "Dr. Samantha Green new lead scientist",
+				text2: "1 month ago",
+				longitude: 139.6917,
+				latitude: 35.6762,
+			},
+		],
+		[]
+	);
 
-  return (
-    <div className="h-full flex overflow-hidden">
-      <div className="flex-grow">
-        <Map
-          events={events}
-          selectedEventId={selectedEventId}
-          setSelectedEventId={setSelectedEventId}
-          hoveredEventId={hoveredEventId}
-          setHoveredEventId={setHoveredEventId}
-          mapType="observatories"
-        ></Map>
-      </div>
-      <Sidebar
-        logTitle="Observatory Mapping"
-        logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
-        recentsTitle="Observatory Events"
-        events={events}
-        selectedEventId={selectedEventId}
-        setSelectedEventId={setSelectedEventId}
-        hoveredEventId={hoveredEventId}
-        setHoveredEventId={setHoveredEventId}
-        button1Name="Log a New Observatory"
-        button2Name="Search Observatories"
-      ></Sidebar>
-      {/* <SidebarTest></SidebarTest> */}
-    </div>
-  );
+	return (
+		<div className="h-full flex overflow-hidden">
+			<div className="flex-grow">
+				<Map
+					events={events}
+					selectedEventId={selectedEventId}
+					setSelectedEventId={setSelectedEventId}
+					hoveredEventId={hoveredEventId}
+					setHoveredEventId={setHoveredEventId}
+					mapType="observatories"
+				></Map>
+			</div>
+			<Sidebar
+				logTitle="Observatory Mapping"
+				logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
+				recentsTitle="Observatory Events"
+				events={events}
+				selectedEventId={selectedEventId}
+				setSelectedEventId={setSelectedEventId}
+				hoveredEventId={hoveredEventId}
+				setHoveredEventId={setHoveredEventId}
+				button1Name="Log a New Observatory"
+				button2Name="Search Observatories"
+			></Sidebar>
+			{/* <SidebarTest></SidebarTest> */}
+		</div>
+	);
 }
diff --git a/src/app/our-mission/page.tsx b/src/app/our-mission/page.tsx
index 24793b7..a7757d4 100644
--- a/src/app/our-mission/page.tsx
+++ b/src/app/our-mission/page.tsx
@@ -2,54 +2,46 @@
 
 //export default function Page()
 const OurMission = () => {
-  return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center py-10">
-      <div className="max-w-4xl mx-auto p-5 bg-white shadow-lg rounded-lg">
-        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Our Mission</h1>
-        <p className="text-lg text-gray-600 leading-relaxed mb-4">
-          At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
-        </p>
-        <p className="text-lg text-gray-600 leading-relaxed mb-4">
-          We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster resilience against nature's powerful forces.
-        </p>
-        <div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
-          <div className="flex flex-col items-center p-4">
-            <img
-              src="/images/education-icon.png"
-              alt="Education Icon"
-              className="h-16 w-16 mb-4"
-            />
-            <h3 className="text-xl font-bold text-gray-700 mb-2">Education</h3>
-            <p className="text-sm text-gray-500 text-center">
-              Providing accessible resources to educate people about earthquake preparedness.
-            </p>
-          </div>
-          <div className="flex flex-col items-center p-4">
-            <img
-              src="/images/research-icon.png"
-              alt="Research Icon"
-              className="h-16 w-16 mb-4"
-            />
-            <h3 className="text-xl font-bold text-gray-700 mb-2">Research</h3>
-            <p className="text-sm text-gray-500 text-center">
-              Supporting scientific studies to enhance understanding of seismic activity.
-            </p>
-          </div>
-          <div className="flex flex-col items-center p-4">
-            <img
-              src="/images/technology-icon.png"
-              alt="Technology Icon"
-              className="h-16 w-16 mb-4"
-            />
-            <h3 className="text-xl font-bold text-gray-700 mb-2">Technology</h3>
-            <p className="text-sm text-gray-500 text-center">
-              Leveraging innovation to deliver real-time alerts and safety tools.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="min-h-screen bg-neutral-100 flex flex-col items-center justify-center py-10">
+			<div className="max-w-4xl mx-auto p-5 bg-white shadow-lg rounded-lg">
+				<h1 className="text-3xl font-bold text-center text-neutral-800 mb-6">Our Mission</h1>
+				<p className="text-lg text-neutral-600 leading-relaxed mb-4">
+					At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
+					worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
+					tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
+				</p>
+				<p className="text-lg text-neutral-600 leading-relaxed mb-4">
+					We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
+					real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
+					resilience against nature's powerful forces.
+				</p>
+				<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
+					<div className="flex flex-col items-center p-4">
+						<img src="/images/education-icon.png" alt="Education Icon" className="h-16 w-16 mb-4" />
+						<h3 className="text-xl font-bold text-neutral-700 mb-2">Education</h3>
+						<p className="text-sm text-neutral-500 text-center">
+							Providing accessible resources to educate people about earthquake preparedness.
+						</p>
+					</div>
+					<div className="flex flex-col items-center p-4">
+						<img src="/images/research-icon.png" alt="Research Icon" className="h-16 w-16 mb-4" />
+						<h3 className="text-xl font-bold text-neutral-700 mb-2">Research</h3>
+						<p className="text-sm text-neutral-500 text-center">
+							Supporting scientific studies to enhance understanding of seismic activity.
+						</p>
+					</div>
+					<div className="flex flex-col items-center p-4">
+						<img src="/images/technology-icon.png" alt="Technology Icon" className="h-16 w-16 mb-4" />
+						<h3 className="text-xl font-bold text-neutral-700 mb-2">Technology</h3>
+						<p className="text-sm text-neutral-500 text-center">
+							Leveraging innovation to deliver real-time alerts and safety tools.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 };
 
-export default OurMission;
\ No newline at end of file
+export default OurMission;
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 1626553..0684fb5 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,185 +1,282 @@
 "use client";
-import Sidebar from "@/components/sidebar";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+
+import Artifact from "@appTypes/Artifact";
+import { Currency } from "@appTypes/StoreModel";
+import Sidebar from "@components/Sidebar";
+import { useStoreState } from "@hooks/store";
 
 // Artifacts Data
-const artifacts = [
-  { id: 1, name: "Golden Scarab", description: "An ancient Egyptian artifact symbolizing rebirth.", location: "Cairo, Egypt", image: "/images/artifact1.jpg", price: 150 },
-  { id: 2, name: "Aztec Sunstone", description: "A replica of the Aztec calendar (inscriptions intact).", location: "Peru", image: "/images/artifact2.jpg", price: 200 },
-  { id: 3, name: "Medieval Chalice", description: "Used by royalty in medieval ceremonies.", location: "Cambridge, England", image: "/images/artifact3.jpg", price: 120 },
-  { id: 4, name: "Roman Coin", description: "An authentic Roman coin from the 2nd century CE.", location: "Rome, Italy", image: "/images/artifact4.jpg", price: 80 },
-  { id: 5, name: "Samurai Mask", description: "Replica of Japanese Samurai battle masks.", location: "Tokyo, Japan", image: "/images/artifact5.jpg", price: 300 },
-  { id: 6, name: "Ancient Greek Vase", description: "Depicts Greek mythology, found in the Acropolis.", location: "Athens, Greece", image: "/images/artifact6.jpg", price: 250 },
-  { id: 7, name: "Incan Pendant", description: "Represents the Sun God Inti.", location: "India", image: "/images/artifact7.jpg", price: 175 },
-  { id: 8, name: "Persian Carpet Fragment", description: "Ancient Persian artistry.", location: "Petra, Jordan", image: "/images/artifact8.jpg", price: 400 },
-  { id: 9, name: "Stone Buddha", description: "Authentic stone Buddha carving.", location: "India", image: "/images/artifact9.jpg", price: 220 },
-  { id: 10, name: "Victorian Brooch", description: "A beautiful Victorian-era brooch with a ruby centre.", location: "Oxford, England", image: "/images/artifact10.jpg", price: 150 },
-  { id: 11, name: "Ancient Scroll", description: "A mysterious scroll from ancient times.", location: "Madrid, Spain", image: "/images/artifact11.jpg", price: 500 },
-  { id: 12, name: "Ming Dynasty Porcelain", description: "Porcelain from China's Ming Dynasty.", location: "Beijing, China", image: "/images/artifact12.jpg", price: 300 },
-  { id: 13, name: "African Tribal Mask", description: "A unique tribal mask from Africa.", location: "Nigeria", image: "/images/artifact13.jpg", price: 250 },
-  { id: 14, name: "Crystal Skull", description: "A mystical pre-Columbian artifact.", location: "Colombia", image: "/images/artifact14.jpg", price: 1000 },
-  { id: 15, name: "Medieval Armor Fragment", description: "A fragment of medieval armor.", location: "Normandy, France", image: "/images/artifact15.jpg", price: 400 },
+const artifacts: Artifact[] = [
+	{
+		id: 1,
+		name: "Golden Scarab",
+		description: "An ancient Egyptian artifact symbolizing rebirth.",
+		location: "Cairo, Egypt",
+		image: "/images/artifact1.jpg",
+		price: 150,
+	},
+	{
+		id: 2,
+		name: "Aztec Sunstone",
+		description: "A replica of the Aztec calendar (inscriptions intact).",
+		location: "Peru",
+		image: "/images/artifact2.jpg",
+		price: 200,
+	},
+	{
+		id: 3,
+		name: "Medieval Chalice",
+		description: "Used by royalty in medieval ceremonies.",
+		location: "Cambridge, England",
+		image: "/images/artifact3.jpg",
+		price: 120,
+	},
+	{
+		id: 4,
+		name: "Roman Coin",
+		description: "An authentic Roman coin from the 2nd century CE.",
+		location: "Rome, Italy",
+		image: "/images/artifact4.jpg",
+		price: 80,
+	},
+	{
+		id: 5,
+		name: "Samurai Mask",
+		description: "Replica of Japanese Samurai battle masks.",
+		location: "Tokyo, Japan",
+		image: "/images/artifact5.jpg",
+		price: 300,
+	},
+	{
+		id: 6,
+		name: "Ancient Greek Vase",
+		description: "Depicts Greek mythology, found in the Acropolis.",
+		location: "Athens, Greece",
+		image: "/images/artifact6.jpg",
+		price: 250,
+	},
+	{
+		id: 7,
+		name: "Incan Pendant",
+		description: "Represents the Sun God Inti.",
+		location: "India",
+		image: "/images/artifact7.jpg",
+		price: 175,
+	},
+	{
+		id: 8,
+		name: "Persian Carpet Fragment",
+		description: "Ancient Persian artistry.",
+		location: "Petra, Jordan",
+		image: "/images/artifact8.jpg",
+		price: 400,
+	},
+	{
+		id: 9,
+		name: "Stone Buddha",
+		description: "Authentic stone Buddha carving.",
+		location: "India",
+		image: "/images/artifact9.jpg",
+		price: 220,
+	},
+	{
+		id: 10,
+		name: "Victorian Brooch",
+		description: "A beautiful Victorian-era brooch with a ruby centre.",
+		location: "Oxford, England",
+		image: "/images/artifact10.jpg",
+		price: 150,
+	},
+	{
+		id: 11,
+		name: "Ancient Scroll",
+		description: "A mysterious scroll from ancient times.",
+		location: "Madrid, Spain",
+		image: "/images/artifact11.jpg",
+		price: 500,
+	},
+	{
+		id: 12,
+		name: "Ming Dynasty Porcelain",
+		description: "Porcelain from China's Ming Dynasty.",
+		location: "Beijing, China",
+		image: "/images/artifact12.jpg",
+		price: 300,
+	},
+	{
+		id: 13,
+		name: "African Tribal Mask",
+		description: "A unique tribal mask from Africa.",
+		location: "Nigeria",
+		image: "/images/artifact13.jpg",
+		price: 250,
+	},
+	{
+		id: 14,
+		name: "Crystal Skull",
+		description: "A mystical pre-Columbian artifact.",
+		location: "Colombia",
+		image: "/images/artifact14.jpg",
+		price: 1000,
+	},
+	{
+		id: 15,
+		name: "Medieval Armor Fragment",
+		description: "A fragment of medieval armor.",
+		location: "Normandy, France",
+		image: "/images/artifact15.jpg",
+		price: 400,
+	},
 ];
 
 // Modal Component
-const Modal = ({ artifact, onClose }) => {
-  if (!artifact) return null;
-
-  const handleOverlayClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  return (
-    <div
-      className="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center z-50"
-      onClick={handleOverlayClick}>
-      <div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6">
-        <h3 className="text-xl font-bold mb-4">{artifact.name}</h3>
-        <img src={artifact.image} alt={artifact.name} className="w-full h-64 object-cover rounded-md mb-4" />
-        <p className="text-gray-600 mb-2">{artifact.description}</p>
-        <p className="text-gray-500 font-bold mb-4">Location: {artifact.location}</p>
-        <p className="text-red-600 font-bold">Price: ${artifact.price}</p>
-        <div className="flex justify-end gap-4 mt-6">
-          <button
-            onClick={() => alert("Reserved Successfully!")}
-            className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400">
-            Reserve
-          </button>
-          <button
-            onClick={() => alert("Purchased Successfully!")}
-            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500">
-            Buy
-          </button>
-          <button
-            onClick={onClose}
-            className="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// ArtifactCard Component
-const ArtifactCard = ({ artifact, onSelect }) => {
-  const [selectedCurrency, setSelectedCurrency] = useState("USD");
-  const conversionRates = { USD: 1, EUR: 0.94, GBP: 0.81 };
-  const convertPrice = (price, currency) => (price * conversionRates[currency]).toFixed(2);
-  const handleCurrencyChange = (e) => {
-    setSelectedCurrency(e.target.value); // Update selected currency
-    e.stopPropagation(); // Prevent the modal from opening on dropdown click
-  };
-
-  return (
-    <div
-      className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
-      onClick={() => onSelect(artifact)} // Opens modal
-      >
-      <img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
-      <div className="p-4">
-        <h3 className="text-lg font-bold">{artifact.name}</h3>
-        <p className="text-gray-700 mb-2">{artifact.description}</p>
-        <p className="text-gray-500 mb-2">{artifact.location}</p>
-        <p className="text-red-600 font-bold text-md mt-4">
-          {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)}
-        </p>
-        <select
-          value={selectedCurrency}
-          onChange={handleCurrencyChange} // Handles currency change
-          className="border border-gray-300 rounded-lg px-3 py-1 text-sm items-left"
-          onClick={(e) => e.stopPropagation()} // Prevents triggering the modal
-          >
-          <option value="USD">USD ($)</option>
-          <option value="EUR">EUR (€)</option>
-          <option value="GBP">GBP (£)</option>
-        </select>
-      </div>
-    </div>
-  );
-};
-
 // Shop Component
 export default function Shop() {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [selectedArtifact, setSelectedArtifact] = useState(null); // Track selected artifact for modal
-  const artifactsPerPage = 9; // Number of artifacts per page
-  const indexOfLastArtifact = currentPage * artifactsPerPage;
-  const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
-  const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);
+	const [currentPage, setCurrentPage] = useState(1);
+	const [selectedArtifact, setSelectedArtifact] = useState<Artifact | null>(null); // Track selected artifact for modal
+	const artifactsPerPage = 9; // Number of artifacts per page
+	const indexOfLastArtifact = currentPage * artifactsPerPage;
+	const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
+	const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);
 
-  const handleNextPage = () => {
-    if (indexOfLastArtifact < artifacts.length) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
+	const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
+	const conversionRates = useStoreState((state) => state.currency.conversionRates);
+	const currencyTickers = useStoreState((state) => state.currency.tickers);
+	const convertPrice = useCallback((price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2), []);
 
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  };
+	const handleNextPage = () => {
+		if (indexOfLastArtifact < artifacts.length) {
+			setCurrentPage((prev) => prev + 1);
+		}
+	};
 
-  const handleSelectArtifact = (artifact) => {
-    setSelectedArtifact(artifact); // Open modal with selected artifact
-  };
+	const handlePreviousPage = () => {
+		if (currentPage > 1) {
+			setCurrentPage((prev) => prev - 1);
+		}
+	};
 
-  const handleCloseModal = () => {
-    setSelectedArtifact(null); // Close modal
-  };
+	function Modal({ artifact }: { artifact: Artifact }) {
+		if (!artifact) return null;
 
-  return (
-    <div className="flex flex-col min-h-screen bg-gray-100">
-      {/* Main Content */}
-      <div className="flex flex-1">
-        {/* Artifact Grid */}
-        <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 pr-72">
-          {currentArtifacts.map((artifact) => (
-            <ArtifactCard key={artifact.id} artifact={artifact} onSelect={handleSelectArtifact} />
-          ))}
-        </div>
+		const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
+			if (e.target === e.currentTarget) {
+				setSelectedArtifact(null);
+			}
+		};
 
-        {/* Sidebar */}
-        <aside className="w-72 bg-white shadow-lg p-4 h-screen fixed top-10 right-0 overflow-auto">
-          <Sidebar
-            logTitle="Artifact Collection"
-            logSubtitle="Record new artifacts - name, description, image, location and price"
-            recentsTitle="Recent Updates"
-            events={[/* example events if needed */]}
-            selectedEventId=""
-            setSelectedEventId={() => {}}
-            hoveredEventId=""
-            setHoveredEventId={() => {}}
-            button1Name="Add New Artifact"
-            button2Name="Search Artifacts"
-          />
-        </aside>
-      </div>
+		return (
+			<div
+				className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
+				onClick={handleOverlayClick}
+			>
+				<div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6">
+					<h3 className="text-xl font-bold mb-4">{artifact.name}</h3>
+					<img src={artifact.image} alt={artifact.name} className="w-full h-64 object-cover rounded-md mb-4" />
+					<p className="text-neutral-600 mb-2">{artifact.description}</p>
+					<p className="text-neutral-500 font-bold mb-4">Location: {artifact.location}</p>
+					<p className="text-red-600 font-bold">Price: ${artifact.price}</p>
+					<div className="flex justify-end gap-4 mt-6">
+						<button
+							onClick={() => alert("Reserved Successfully!")}
+							className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400"
+						>
+							Reserve
+						</button>
+						<button
+							onClick={() => alert("Purchased Successfully!")}
+							className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500"
+						>
+							Buy
+						</button>
+						<button
+							onClick={() => setSelectedArtifact(null)}
+							className="px-4 py-2 bg-neutral-300 rounded-md hover:bg-neutral-400"
+						>
+							Close
+						</button>
+					</div>
+				</div>
+			</div>
+		);
+	}
 
-      {/* Pagination Footer */}
-      <footer className="bg-white border-t border-gray-300 py-2 text-center w-full flex justify-center items-centre">
-        <button
-          onClick={handlePreviousPage}
-          disabled={currentPage === 1}
-          className={`mx-2 px-4 py-1 bg-blue-700 text-white rounded-md font-bold shadow-md ${
-            currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
-          }`} >
-          &larr; Previous
-        </button>
-        <button
-          onClick={handleNextPage}
-          disabled={indexOfLastArtifact >= artifacts.length}
-          className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
-            indexOfLastArtifact >= artifacts.length ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
-          }`} >
-          Next &rarr;
-        </button>
-      </footer>
+	// ArtifactCard Component
+	function ArtifactCard({ artifact }: { artifact: Artifact }) {
+		return (
+			<div
+				className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
+				onClick={() => setSelectedArtifact(artifact)} // Opens modal
+			>
+				<img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
+				<div className="p-4">
+					<h3 className="text-lg font-bold">{artifact.name}</h3>
+					<p className="text-neutral-700 mb-2">{artifact.description}</p>
+					<p className="text-neutral-500 mb-2">{artifact.location}</p>
+					<p className="text-blue-600 font-bold text-md mt-4">
+						{currencyTickers[selectedCurrency]}
+						{convertPrice(artifact.price, selectedCurrency)}
+					</p>
+				</div>
+			</div>
+		);
+	}
 
-      {/* Modal */}
-      <Modal artifact={selectedArtifact} onClose={handleCloseModal} />
-    </div>
-  );
+	return (
+		<div className="flex flex-col min-h-screen bg-neutral-100">
+			{/* Main Content */}
+			<div className="flex flex-1 overflow-y-auto mr-[19rem]">
+				{/* Artifact Grid */}
+				<div className="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+					{currentArtifacts.map((artifact) => (
+						<ArtifactCard key={artifact.id} artifact={artifact} />
+					))}
+				</div>
+			</div>
+			{/* Sidebar */}
+			<div className="bg-white shadow-lg h-screen fixed right-0 overflow-y-auto">
+				<Sidebar
+					logTitle="Artifact Collection"
+					logSubtitle="Record new artifacts - name, description, image, location and price"
+					recentsTitle="Recent Updates"
+					events={
+						[
+							/* example events if needed */
+						]
+					}
+					selectedEventId=""
+					setSelectedEventId={() => {}}
+					hoveredEventId=""
+					setHoveredEventId={() => {}}
+					button1Name="Add New Artifact"
+					button2Name="Search Artifacts"
+				/>
+			</div>
+
+			{/* Pagination Footer */}
+			<footer className="bg-white border-t border-neutral-300 py-2 text-center w-full flex justify-center items-center mr-80">
+				<button
+					onClick={handlePreviousPage}
+					disabled={currentPage === 1}
+					className={`mx-2 px-4 py-1 bg-blue-700 text-white rounded-md font-bold shadow-md ${
+						currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
+					}`}
+				>
+					&larr; Previous
+				</button>
+				<button
+					onClick={handleNextPage}
+					disabled={indexOfLastArtifact >= artifacts.length}
+					className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
+						indexOfLastArtifact >= artifacts.length ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
+					}`}
+				>
+					Next &rarr;
+				</button>
+			</footer>
+			{/* Modal */}
+			{selectedArtifact && <Modal artifact={selectedArtifact} />}
+		</div>
+	);
 }
diff --git a/src/app/warehouse/page.tsx b/src/app/warehouse/page.tsx
index 92806cd..4d80506 100644
--- a/src/app/warehouse/page.tsx
+++ b/src/app/warehouse/page.tsx
@@ -1,57 +1,55 @@
 "use client";
-import Sidebar from "@/components/sidebar";
+import Sidebar from "@/components/Sidebar";
 import { useState, useMemo } from "react";
 
 export default function Warehouse() {
-    const [selectedEventId, setSelectedEventId] = useState("");
-    const [hoveredEventId, setHoveredEventId] = useState("");
-    const events = useMemo(
-      () => [
-        {
-          id: "1234",
-          title: "Artifact found - Germany Earthquake",
-          text1: "Mortar and pestle",
-          text2: "10 minutes ago",
-          longitude: 10.4515, // Near Berlin, Germany
-          latitude: 52.52,
-        },
-        {
-          id: "2134",
-          title: "All artifacts from California earthquake transported",
-          text1: "India to London",
-          text2: "15 hours ago",
-          longitude: -122.4194, // Near San Francisco, California, USA
-          latitude: 37.7749,
-        },
-        {
-          id: "2341",
-          title: "7 artifacts destroyed - Spain earthquake",
-          text1: "edVases and pots from Madrid",
-          text2: "3 weeks ago",
-          longitude: -3.7038, // Near Madrid, Spain
-          latitude: 40.4168,
-        },
-      ],
-      []
-    );
+	const [selectedEventId, setSelectedEventId] = useState("");
+	const [hoveredEventId, setHoveredEventId] = useState("");
+	const events = useMemo(
+		() => [
+			{
+				id: "1234",
+				title: "Artifact found - Germany Earthquake",
+				text1: "Mortar and pestle",
+				text2: "10 minutes ago",
+				longitude: 10.4515, // Near Berlin, Germany
+				latitude: 52.52,
+			},
+			{
+				id: "2134",
+				title: "All artifacts from California earthquake transported",
+				text1: "India to London",
+				text2: "15 hours ago",
+				longitude: -122.4194, // Near San Francisco, California, USA
+				latitude: 37.7749,
+			},
+			{
+				id: "2341",
+				title: "7 artifacts destroyed - Spain earthquake",
+				text1: "edVases and pots from Madrid",
+				text2: "3 weeks ago",
+				longitude: -3.7038, // Near Madrid, Spain
+				latitude: 40.4168,
+			},
+		],
+		[]
+	);
 
-  return (
-    <div className="w-full h-full">
-      <p>
-        warehouse image pasted in here
-      </p>
-      <Sidebar
-        logTitle="Artifact Retrieval and Tracking"
-        logSubtitle="Record new artifacts collected - name, description, time/date found, location found, scientist and collection stage"
-        recentsTitle="Artifact News"
-        events={events}
-        selectedEventId={selectedEventId}
-        setSelectedEventId={setSelectedEventId}
-        hoveredEventId={hoveredEventId}
-        setHoveredEventId={setHoveredEventId}
-        button1Name="Log New Artifacts"
-        button2Name="Search Artifacts"
-      ></Sidebar>
-    </div>
-  );
+	return (
+		<div className="w-full h-full">
+			<p>warehouse image pasted in here</p>
+			<Sidebar
+				logTitle="Artifact Retrieval and Tracking"
+				logSubtitle="Record new artifacts collected - name, description, time/date found, location found, scientist and collection stage"
+				recentsTitle="Artifact News"
+				events={events}
+				selectedEventId={selectedEventId}
+				setSelectedEventId={setSelectedEventId}
+				hoveredEventId={hoveredEventId}
+				setHoveredEventId={setHoveredEventId}
+				button1Name="Log New Artifacts"
+				button2Name="Search Artifacts"
+			></Sidebar>
+		</div>
+	);
 }
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index b46522d..38218e3 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,7 +1,8 @@
 // tells React if you're using its "server-side rendering" features. this component runs only on the client-side (browser)
 "use client";
 // importing React hooks or utilities that enhance functionality inside the component
-import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
+import { FormEvent, MouseEvent, useEffect, useRef, useState } from "react";
+
 /*
   useState: Used to manage state (data that changes over time).
   FormEvent: TypeScript definition for form-related events like submission.
@@ -12,39 +13,40 @@ import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
 
 // defining a type for the props (inputs) that AuthModal expects
 interface AuthModalProps {
-  isOpen: boolean; // bool for if the modal should be visible
-  onClose: () => void; //A function that will be executed to close the modal
+	isOpen: boolean; // bool for if the modal should be visible
+	onClose: () => void; //A function that will be executed to close the modal
 }
 // creates a React functional component
-export default function AuthModal({ isOpen, onClose }: AuthModalProps) { //AuthModalProps ensures TypeScript validates the props to match the type definition above
-  const [isLogin, setIsLogin] = useState<boolean>(true);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const [isFailed, setIsFailed] = useState<boolean>(false);
-  const [failMessage, setFailMessage] = useState<boolean>(false);
-/*
+export default function AuthModal({ isOpen, onClose }: AuthModalProps) {
+	//AuthModalProps ensures TypeScript validates the props to match the type definition above
+	const [isLogin, setIsLogin] = useState<boolean>(true);
+	const modalRef = useRef<HTMLDivElement>(null);
+	const [isFailed, setIsFailed] = useState<boolean>(false);
+	const [failMessage, setFailMessage] = useState<boolean>(false);
+	/*
     useState is a React Hook that declares state variables in a functional component. It returns a two-element array
     The state variable (isLogin) : Represents the current state value (e.g., true initially). This is the value you can use in your component.
     The state updater function (setIsLogin) : A function that allows you to update the state variable. React takes care of re-rendering the component when the state is updated
 */
-/*
+	/*
   modalRef allows direct access to the modal DOM element (the container div for the modal). This is useful for detecting if the user clicks outside of the modal
 */
 
-// useEffect runs code after the component renders or when a dependency changes (in this case, isOpen as seen in the end [])
-  useEffect(() => {
-    if (isOpen) setIsLogin(true); // runs when isOpen changes, if it is true, the login is shown
-  }, [isOpen]);
+	// useEffect runs code after the component renders or when a dependency changes (in this case, isOpen as seen in the end [])
+	useEffect(() => {
+		if (isOpen) setIsLogin(true); // runs when isOpen changes, if it is true, the login is shown
+	}, [isOpen]);
 
-  if (!isOpen) return null; // if is open is false, the model isnt shown
+	if (!isOpen) return null; // if is open is false, the model isnt shown
 
-  // this is an arrow function. e: is used to specify that an event object is expected 
-  const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-      onClose();
-    }
-  };
+	// this is an arrow function. e: is used to specify that an event object is expected
+	const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
+		if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+			onClose();
+		}
+	};
 
-  /*
+	/*
     .current gives a reference to the actual DOM element (the inner modal container)
     e.target refers to the specific element the mouse click event occurred on
     .contains(e.target) checks if the clicked element (e.target) is inside the modal (modalRef.current)
@@ -54,9 +56,9 @@ export default function AuthModal({ isOpen, onClose }: AuthModalProps) { //AuthM
     Logic : if modalRef.current exists and the click target (e.target) is not inside the modal , then the condition is true
       This means the user clicked outside the modal
   */
- 
-// LS - The following bit contains the more important code for what I'm focused on
-/*
+
+	// LS - The following bit contains the more important code for what I'm focused on
+	/*
   Note : handleSubmit is typically used as a event handler for submitting a form in react.
   For example:
     <form onSubmit={handleSubmit}>
@@ -64,105 +66,113 @@ export default function AuthModal({ isOpen, onClose }: AuthModalProps) { //AuthM
       <button type="submit">Submit</button>
     </form>
 */
-/*
+	/*
   e is the parameter passsed into the function
   async indicates the function runs asyncronously, meaning it performs tasks which take time.
   an example of this would be API calls
 */
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault(); // stops page from refreshing
-    setIsFailed(false)
-    const formData = new FormData(e.currentTarget); // new variable of class FormData is created. This is part of the standard Web API included in modern web browsers
-    const email = formData.get("email") as string; // gets email from form response
-    const password = formData.get("password") as string; // gets password from form response
-    const name = isLogin ? undefined : (formData.get("name") as string);// if the form is in login mode, the name is undefine, otherwise the name is a value obtained from the response
+	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault(); // stops page from refreshing
+		setIsFailed(false);
+		const formData = new FormData(e.currentTarget); // new variable of class FormData is created. This is part of the standard Web API included in modern web browsers
+		const email = formData.get("email") as string; // gets email from form response
+		const password = formData.get("password") as string; // gets password from form response
+		const name = isLogin ? undefined : (formData.get("name") as string); // if the form is in login mode, the name is undefine, otherwise the name is a value obtained from the response
 
-    let endpoint = isLogin ? "/api/login" : "/api/signup"; // sets endpoint for backend code (either sign up or login)
-    const body = isLogin ? { email, password } : { name: name!, email, password };// creates a json body for the backend
-    
+		let endpoint = isLogin ? "/api/login" : "/api/signup"; // sets endpoint for backend code (either sign up or login)
+		const body = isLogin ? { email, password } : { name: name!, email, password }; // creates a json body for the backend
 
-    try {
-      console.log("Sending data to API");
-      const res = await fetch(endpoint, { // sends a request to the server at the end point
-        method: "POST", // Post is used since the form submission modifies the server side state
-        headers: { "Content-Type": "application/json" }, //indicates it expects a json object returned
-        body: JSON.stringify(body), // converts the body to a JSON string to be sent
-      });
-      if (res.ok) { //res.ok checks if the response is between 200-299
-        console.log("Success!");
-        onClose(); // closes UI
-      } else if (res.status >= 400 && res.status <500){
-        const responseBody = await res.json()
-        console.log("4xx error:", responseBody.message)
-        setFailMessage(responseBody.message)
-        setIsFailed(true)
-      } else{
-        console.error("Error:", await res.text()); // logs error with error message sent to console
-      }
-    } catch (error) {// catches any errors (e.g. Not connected to network)
-      console.error("Request failed:", error instanceof Error ? error.message : String(error));
-    }
-  };
+		try {
+			console.log("Sending data to API");
+			const res = await fetch(endpoint, {
+				// sends a request to the server at the end point
+				method: "POST", // Post is used since the form submission modifies the server side state
+				headers: { "Content-Type": "application/json" }, //indicates it expects a json object returned
+				body: JSON.stringify(body), // converts the body to a JSON string to be sent
+			});
+			if (res.ok) {
+				//res.ok checks if the response is between 200-299
+				console.log("Success!");
+				onClose(); // closes UI
+			} else if (res.status >= 400 && res.status < 500) {
+				const responseBody = await res.json();
+				console.log("4xx error:", responseBody.message);
+				setFailMessage(responseBody.message);
+				setIsFailed(true);
+			} else {
+				console.error("Error:", await res.text()); // logs error with error message sent to console
+			}
+		} catch (error) {
+			// catches any errors (e.g. Not connected to network)
+			console.error("Request failed:", error instanceof Error ? error.message : String(error));
+		}
+	};
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50" onClick={handleOverlayClick}>
-      <div ref={modalRef} className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md relative">
-        <button onClick={() => {setIsFailed(false);onClose();}} className="absolute text-xl top-0 right-2 text-gray-500 hover:text-gray-700" aria-label="Close modal">
-          ×
-        </button>
-        <h2 className="text-2xl font-bold text-center mb-4">{isLogin ? "Login" : "Sign Up"}</h2>
+	return (
+		<div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50" onClick={handleOverlayClick}>
+			<div ref={modalRef} className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md relative">
+				<button
+					onClick={() => {
+						setIsFailed(false);
+						onClose();
+					}}
+					className="absolute text-xl top-0 right-2 text-neutral-500 hover:text-neutral-700"
+					aria-label="Close modal"
+				>
+					×
+				</button>
+				<h2 className="text-2xl font-bold text-center mb-4">{isLogin ? "Login" : "Sign Up"}</h2>
 
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {!isLogin && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Full Name</label>
-              <input
-                type="text"
-                name="name"
-                className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                required={!isLogin}
-              />
-            </div>
-          )}
-          <div>
-            <label className="block text-sm font-medium text-gray-700">Email</label>
-            <input
-              type="email"
-              name="email"
-              className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              required
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700">Password</label>
-            <input
-              type="password"
-              name="password"
-              className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              required
-            />
-          </div>
-          <div>
-            { isFailed && (
-              <div>
-                <label className="block text-sm font-medium text-red-700">{failMessage}</label>
-              </div>
-            )
-            }
-          </div>
-          <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 transition">
-            {isLogin ? "Login" : "Sign Up"}
-          </button>
-        </form>
+				{/* Form */}
+				<form onSubmit={handleSubmit} className="space-y-4">
+					{!isLogin && (
+						<div>
+							<label className="block text-sm font-medium text-neutral-700">Full Name</label>
+							<input
+								type="text"
+								name="name"
+								className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+								required={!isLogin}
+							/>
+						</div>
+					)}
+					<div>
+						<label className="block text-sm font-medium text-neutral-700">Email</label>
+						<input
+							type="email"
+							name="email"
+							className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+							required
+						/>
+					</div>
+					<div>
+						<label className="block text-sm font-medium text-neutral-700">Password</label>
+						<input
+							type="password"
+							name="password"
+							className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+							required
+						/>
+					</div>
+					<div>
+						{isFailed && (
+							<div>
+								<label className="block text-sm font-medium text-red-700">{failMessage}</label>
+							</div>
+						)}
+					</div>
+					<button type="submit" className="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 transition">
+						{isLogin ? "Login" : "Sign Up"}
+					</button>
+				</form>
 
-        <p className="mt-4 text-center text-sm">
-          {isLogin ? "Need an account?" : "Already have an account?"}{" "}
-          <button onClick={() => setIsLogin(!isLogin)} className="text-blue-600 hover:underline">
-            {isLogin ? "Sign Up" : "Login"}
-          </button>
-        </p>
-      </div>
-    </div>
-  );
+				<p className="mt-4 text-center text-sm">
+					{isLogin ? "Need an account?" : "Already have an account?"}{" "}
+					<button onClick={() => setIsLogin(!isLogin)} className="text-blue-600 hover:underline">
+						{isLogin ? "Sign Up" : "Login"}
+					</button>
+				</p>
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 75b0438..3ee96c8 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,100 +1,101 @@
-import React from "react";
-import { Dispatch, SetStateAction } from "react";
 import Link from "next/link";
+import React, { Dispatch, SetStateAction } from "react";
 import { TbHexagon } from "react-icons/tb";
+
 import Event from "@appTypes/Event";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 
 interface SidebarProps {
-  logTitle: string;
-  logSubtitle: string;
-  recentsTitle: string;
-  events: Event[];
-  selectedEventId: Event["id"];
-  setSelectedEventId: Dispatch<SetStateAction<string>>;
-  hoveredEventId: Event["id"];
-  setHoveredEventId: Dispatch<SetStateAction<string>>;
-  button1Name: string;
-  button2Name: string;
+	logTitle: string;
+	logSubtitle: string;
+	recentsTitle: string;
+	events: Event[];
+	selectedEventId: Event["id"];
+	setSelectedEventId: Dispatch<SetStateAction<string>>;
+	hoveredEventId: Event["id"];
+	setHoveredEventId: Dispatch<SetStateAction<string>>;
+	button1Name: string;
+	button2Name: string;
 }
 
 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
-  // Convert magnitude to string with one decimal place
-  const magnitudeStr = magnitude.toFixed(1);
-  const [whole, decimal] = magnitudeStr.split(".");
+	// Convert magnitude to string with one decimal place
+	const magnitudeStr = magnitude.toFixed(1);
+	const [whole, decimal] = magnitudeStr.split(".");
 
-  // Define color based on magnitude (0-10 scale)
-  return (
-    <div className={`relative`} style={{ color: getMagnitudeColor(magnitude) }}>
-      <TbHexagon size={40} className="drop-shadow-sm" />
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div className="flex items-baseline font-mono font-bold tracking-tight">
-          <span className="text-xl -mr-1">{whole}</span>
-          <span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
-          <span className="text-xs -mr-[1px]">{decimal}</span>
-        </div>
-      </div>
-    </div>
-  );
+	// Define color based on magnitude (0-10 scale)
+	return (
+		<div className={`relative`} style={{ color: getMagnitudeColor(magnitude) }}>
+			<TbHexagon size={40} className="drop-shadow-sm" />
+			<div className="absolute inset-0 flex items-center justify-center">
+				<div className="flex items-baseline font-mono font-bold tracking-tight">
+					<span className="text-xl -mr-1">{whole}</span>
+					<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
+					<span className="text-xs -mr-[1px]">{decimal}</span>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 export default function Sidebar({
-  logTitle,
-  logSubtitle,
-  recentsTitle,
-  events,
-  selectedEventId,
-  setSelectedEventId,
-  hoveredEventId,
-  setHoveredEventId,
-  button1Name,
-  button2Name,
+	logTitle,
+	logSubtitle,
+	recentsTitle,
+	events,
+	selectedEventId,
+	setSelectedEventId,
+	hoveredEventId,
+	setHoveredEventId,
+	button1Name,
+	button2Name,
 }: SidebarProps) {
-  return (
-    <div className="flex flex-col py-6 h-full w-full max-w-xs bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
-      <div className="px-6 pb-8 border-b border-neutral-200">
-        <h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
-        <p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
-        <Link href="/">
-          <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
-            {button1Name}
-          </button>
-        </Link>
-        <Link href="/">
-          <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
-            {button2Name}
-          </button>
-        </Link>
-      </div>
+	return (
+		<div className={`flex flex-col h-full w-80 relative bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg`}>
+			<div className="py-6">
+				<div className="px-6 pb-8 border-b border-neutral-200">
+					<h2 className={`text-2xl font-bold text-neutral-800 mb-2`}>{logTitle}</h2>
+					<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
 
-      <div className="flex-1 px-6 pt-6 overflow-y-auto">
-        <h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
-        <div className="space-y-3">
-          {events.map((event) => (
-            <button
-              key={event.title}
-              className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
-                selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
-              } rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
-              onClick={() => {
-                setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
-              }}
-              onMouseEnter={() => setHoveredEventId(event.id)}
-              onMouseLeave={() => setHoveredEventId("")}
-            >
-              <div className="flex-1">
-                <p className="text-sm font-medium text-neutral-800">{event.title}</p>
-                {/* Uncomment if you want to use text1 */}
-                {/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
-                <p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
-              </div>
-              {
-              (event.magnitude) ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>
-              }
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+					<Link href="/">
+						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
+							{button1Name}
+						</button>
+					</Link>
+					<Link href="/">
+						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
+							{button2Name}
+						</button>
+					</Link>
+				</div>
+
+				<div className="flex-1 px-6 pt-6 overflow-y-auto">
+					<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
+					<div className="space-y-3">
+						{events.map((event) => (
+							<button
+								key={event.title}
+								className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
+									selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
+								} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
+								onClick={() => {
+									setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
+								}}
+								onMouseEnter={() => setHoveredEventId(event.id)}
+								onMouseLeave={() => setHoveredEventId("")}
+							>
+								<div className="flex-1">
+									<p className="text-sm font-medium text-neutral-800">{event.title}</p>
+									{/* Uncomment if you want to use text1 */}
+									{/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
+									<p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
+								</div>
+								{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
+							</button>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 93ac50b..c2ac4c8 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,75 +1,117 @@
 "use client";
-import { useState } from "react";
-
-import AuthModal from "@components/AuthModal";
-import { usePathname } from "next/navigation";
-import Link from "next/link";
 import Image from "next/image";
-import { useMemo } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { FaRegUserCircle } from "react-icons/fa";
 
+import { Currency } from "@appTypes/StoreModel";
+import AuthModal from "@components/AuthModal";
+import { useStoreActions, useStoreState } from "@hooks/store";
+
 function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
-  const pathname = usePathname();
-  const isActive = dropdownItems ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) : pathname === href;
+	const pathname = usePathname();
+	const isActive = dropdownItems
+		? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
+		: pathname === href;
 
-  return (
-    <button className="flex items-center justify-center px-2 py-4 relative group">
-      {dropdownItems ? (
-        <span className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}>{name}</span>
-      ) : (
-        <Link href={href} className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}>
-          {name}
-        </Link>
-      )}
-      {dropdownItems && (
-        <div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
-          <ul>
-            {dropdownItems.map((item) => {
-              const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
-              const isDropdownActive = pathname === itemHref;
-              return (
-                <li key={item}>
-                  <Link href={itemHref} className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}>
-                    {item}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      )}
-    </button>
-  );
+	return (
+		<button className="flex items-center justify-center px-2 py-4 relative group">
+			{dropdownItems ? (
+				<span
+					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
+				>
+					{name}
+				</span>
+			) : (
+				<Link
+					href={href}
+					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
+				>
+					{name}
+				</Link>
+			)}
+			{dropdownItems && (
+				<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
+					<ul>
+						{dropdownItems.map((item) => {
+							const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
+							const isDropdownActive = pathname === itemHref;
+							return (
+								<li key={item}>
+									<Link
+										href={itemHref}
+										className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
+									>
+										{item}
+									</Link>
+								</li>
+							);
+						})}
+					</ul>
+				</div>
+			)}
+		</button>
+	);
 }
 
-export default function Navbar() {
-  const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
-  // const navOptions = useMemo(() => ["Earthquakes"], []);
-  const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
-    // { label: "Our Mission", path: "/our-mission" },
-    // { label: "The Team", path: "/the-team" },
-    // { label: "Contact Us", path: "/contact-us" }]
-  
-  const [isModalOpen, setIsModalOpen] = useState(false);
+export default function Navbar({}: // currencySelector,
+{
+	// currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch<SetStateAction<"GBP" | "USD" | "EUR">> };
+}) {
+	const pathname = usePathname();
+	const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
+	const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
+	const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
+	// const navOptions = useMemo(() => ["Earthquakes"], []);
+	const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
+	// { label: "Our Mission", path: "/our-mission" },
+	// { label: "The Team", path: "/the-team" },
+	// { label: "Contact Us", path: "/contact-us" }]
 
-  return (
-    <div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
-      <div className="my-1 flex aspect-square ml-3 mr-3">
-        <Link href="/" className="rounded-full">
-          <Image height={50} width={50} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
-        </Link>
-      </div>
-      <div className="flex">
-        {navOptions.map((name) => (
-          <NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
-        ))}
-        <NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
-      </div>
-      <div className="flex-grow" />
-      <button className="my-auto mr-4" onClick={() => setIsModalOpen(true)}>
-        <FaRegUserCircle size={22} />
-      </button>
-      <AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
-    </div>
-  );
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const currencies = useStoreState((state) => state.currency.currencies);
+	const currencyTickers = useStoreState((state) => state.currency.tickers);
+
+	return (
+		<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
+			<div className="my-1 flex aspect-square ml-3 mr-3">
+				<Link href="/" className="rounded-full">
+					<Image height={50} width={50} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
+				</Link>
+			</div>
+			<div className="flex">
+				{navOptions.map((name) => (
+					<NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
+				))}
+				<NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
+			</div>
+			<div className="flex-grow" />
+
+			{pathname.includes("shop") && (
+				<button className="flex items-center justify-center mr-3 py-4 relative group">
+					<span className={`px-4 py-1.5 rounded-md transition-colors`}>{selectedCurrency}</span>
+
+					<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-24 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
+						<ul>
+							{currencies.map((item) => {
+								let ticker = currencyTickers[item];
+								return (
+									<li key={item} onClick={() => setSelectedCurrency(item)}>
+										<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>{`${item} (${ticker})`}</div>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				</button>
+			)}
+
+			<button className="my-auto mr-4" onClick={() => setIsModalOpen(true)}>
+				<FaRegUserCircle size={22} />
+			</button>
+			<AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+		</div>
+	);
 }
diff --git a/src/components/sidebar_e.tsx b/src/components/sidebar_e.tsx
index e6efa25..6c1dfe6 100644
--- a/src/components/sidebar_e.tsx
+++ b/src/components/sidebar_e.tsx
@@ -1,44 +1,42 @@
-import React from 'react';
 import Link from "next/link";
+import React from "react";
 
 const Sidebar = () => {
-    return (
-        <div className="flex flex-col h-screen w-64 bg-gray-400 text-white border-l border-gray-700">
-            <div className="flex flex-col p-4 border-b border-gray-700">
-                <h2 className="text-xl font-semibold mb-2">Log an Earthquake</h2>
-                <p className="text-sm text-gray-700">
-                    Record new earthquakes - time/date, location, magnitude, observatory and scientists
-                </p>
-                <button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
-                    <Link href="/">
-                        Log Event
-                    </Link>
-                </button>
-            </div>
+	return (
+		<div className="flex flex-col h-screen w-64 bg-neutral-400 text-white border-l border-neutral-700">
+			<div className="flex flex-col p-4 border-b border-neutral-700">
+				<h2 className="text-xl font-semibold mb-2">Log an Earthquake</h2>
+				<p className="text-sm text-neutral-700">
+					Record new earthquakes - time/date, location, magnitude, observatory and scientists
+				</p>
+				<button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
+					<Link href="/">Log Event</Link>
+				</button>
+			</div>
 
-            {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
-            <div className="flex-1 p-4">
-                <h2 className="text-xl font-semibold mb-2">Recent Events</h2>
-                <ul className="space-y-2">
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Earthquake in California</p>
-                        <p className="text-xs text-gray-300">Magnitude 5.3</p>
-                        <p className="text-xs text-gray-400">2 hours ago</p>
-                    </li>
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Tremor in Japan</p>
-                        <p className="text-xs text-gray-300">Magnitude 4.7</p>
-                        <p className="text-xs text-gray-400">5 hours ago</p>
-                    </li>
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Tremor in Spain</p>
-                        <p className="text-xs text-gray-300">Magnitude 2.1</p>
-                        <p className="text-xs text-gray-400">10 hours ago</p>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
+			{/* Section: Recent Events - Will need to be replaced with a link to the database*/}
+			<div className="flex-1 p-4">
+				<h2 className="text-xl font-semibold mb-2">Recent Events</h2>
+				<ul className="space-y-2">
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Earthquake in California</p>
+						<p className="text-xs text-neutral-300">Magnitude 5.3</p>
+						<p className="text-xs text-neutral-400">2 hours ago</p>
+					</li>
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Tremor in Japan</p>
+						<p className="text-xs text-neutral-300">Magnitude 4.7</p>
+						<p className="text-xs text-neutral-400">5 hours ago</p>
+					</li>
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Tremor in Spain</p>
+						<p className="text-xs text-neutral-300">Magnitude 2.1</p>
+						<p className="text-xs text-neutral-400">10 hours ago</p>
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
 };
 
 export default Sidebar;
diff --git a/src/components/sidebar_o.tsx b/src/components/sidebar_o.tsx
index 7a7859d..2cfd78a 100644
--- a/src/components/sidebar_o.tsx
+++ b/src/components/sidebar_o.tsx
@@ -1,44 +1,40 @@
-import React from 'react';
 import Link from "next/link";
+import React from "react";
 
 const Sidebar = () => {
-    return (
-        <div className="flex flex-col h-screen w-64 bg-gray-400 text-white border-l border-gray-700">
-            <div className="flex flex-col p-4 border-b border-gray-700">
-                <h2 className="text-xl font-semibold mb-2">Observatories</h2>
-                <p className="text-sm text-gray-700">
-                    Observatory events - location, scientists, recent earthquakes
-                </p>
-                <button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
-                    <Link href="/">
-                        Observatory News
-                    </Link>
-                </button>
-            </div>
+	return (
+		<div className="flex flex-col h-screen w-64 bg-neutral-400 text-white border-l border-neutral-700">
+			<div className="flex flex-col p-4 border-b border-neutral-700">
+				<h2 className="text-xl font-semibold mb-2">Observatories</h2>
+				<p className="text-sm text-neutral-700">Observatory events - location, scientists, recent earthquakes</p>
+				<button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
+					<Link href="/">Observatory News</Link>
+				</button>
+			</div>
 
-            {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
-            <div className="flex-1 p-4">
-                <h2 className="text-xl font-semibold mb-2">Recent Observatory Events</h2>
-                <ul className="space-y-2">
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Earthquake in California</p>
-                        <p className="text-xs text-gray-300">Magnitude 5.3</p>
-                        <p className="text-xs text-gray-400">Cali Observatory</p>
-                    </li>
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Tremor in Japan</p>
-                        <p className="text-xs text-gray-300">Magnitude 4.7</p>
-                        <p className="text-xs text-gray-400">Kyoto Observatory</p>
-                    </li>
-                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
-                        <p className="text-sm">Tremor in Spain</p>
-                        <p className="text-xs text-gray-300">Magnitude 2.1</p>
-                        <p className="text-xs text-gray-400">Madrid Observatory</p>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
+			{/* Section: Recent Events - Will need to be replaced with a link to the database*/}
+			<div className="flex-1 p-4">
+				<h2 className="text-xl font-semibold mb-2">Recent Observatory Events</h2>
+				<ul className="space-y-2">
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Earthquake in California</p>
+						<p className="text-xs text-neutral-300">Magnitude 5.3</p>
+						<p className="text-xs text-neutral-400">Cali Observatory</p>
+					</li>
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Tremor in Japan</p>
+						<p className="text-xs text-neutral-300">Magnitude 4.7</p>
+						<p className="text-xs text-neutral-400">Kyoto Observatory</p>
+					</li>
+					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
+						<p className="text-sm">Tremor in Spain</p>
+						<p className="text-xs text-neutral-300">Magnitude 2.1</p>
+						<p className="text-xs text-neutral-400">Madrid Observatory</p>
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
 };
 
 export default Sidebar;
diff --git a/src/hooks/store.ts b/src/hooks/store.ts
new file mode 100644
index 0000000..8d331e6
--- /dev/null
+++ b/src/hooks/store.ts
@@ -0,0 +1,10 @@
+"use client";
+import { createTypedHooks } from "easy-peasy";
+
+import { StoreModel } from "@appTypes/StoreModel";
+
+export const typedHooks = createTypedHooks<StoreModel>();
+
+export const useStoreActions = typedHooks.useStoreActions;
+export const useStoreDispatch = typedHooks.useStoreDispatch;
+export const useStoreState = typedHooks.useStoreState;
diff --git a/src/types/Artifact.ts b/src/types/Artifact.ts
new file mode 100644
index 0000000..0bd3d8c
--- /dev/null
+++ b/src/types/Artifact.ts
@@ -0,0 +1,11 @@
+interface Artifact {
+	// todo change to string
+	id: number;
+	name: string;
+	description: string;
+	location: string;
+	image: string;
+	price: number;
+}
+
+export default Artifact;
diff --git a/src/types/StoreModel.ts b/src/types/StoreModel.ts
new file mode 100644
index 0000000..7fa2929
--- /dev/null
+++ b/src/types/StoreModel.ts
@@ -0,0 +1,17 @@
+import { Action } from "easy-peasy";
+
+type Currency = "GBP" | "USD" | "EUR";
+
+interface CurrencyModel {
+	selectedCurrency: Currency;
+	setSelectedCurrency: Action<CurrencyModel, Currency>;
+	currencies: Currency[];
+	conversionRates: Record<Currency, number>;
+	tickers: Record<Currency, string>;
+}
+
+interface StoreModel {
+	currency: CurrencyModel;
+}
+
+export type { StoreModel, Currency };
diff --git a/tsconfig.json b/tsconfig.json
index a4ead61..67fd71a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,11 +20,11 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-      "@components/*": ["./src/components/*"],
-      "@hooks/*": ["./src/hooks/*"],
-      "@utils/*": ["./src/utils/*"],
-      "@appTypes/*": ["./src/types/*"]
+        "@components/*": ["./src/components/*"],
+        "@hooks/*": ["./src/hooks/*"],
+        "@utils/*": ["./src/utils/*"],
+        "@appTypes/*": ["./src/types/*"],
+        "@/*": ["./src/*"],
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],