diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 27f5c22..c5baa1d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,124 +1,128 @@
 import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { TbHexagon } from "react-icons/tb";
-import GeologicalEvent from "@appTypes/Event";
+import GeologicalEvent from "@appTypes/GeologicalEvent";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 interface SidebarProps {
-    logTitle: string;
-    logSubtitle: string;
-    recentsTitle: string;
-    events: GeologicalEvent[];
-    selectedEventId: GeologicalEvent["id"];
-    setSelectedEventId: Dispatch<SetStateAction<string>>;
-    hoveredEventId: GeologicalEvent["id"];
-    setHoveredEventId: Dispatch<SetStateAction<string>>;
-    button1Name: string;
-    button2Name: string;
-    onButton2Click?: () => void;
-    onButton1Click?: () => void;
-    button1Disabled?: boolean; 
+	logTitle: string;
+	logSubtitle: string;
+	recentsTitle: string;
+	events: GeologicalEvent[];
+	selectedEventId: GeologicalEvent["id"];
+	setSelectedEventId: Dispatch<SetStateAction<string>>;
+	hoveredEventId: GeologicalEvent["id"];
+	setHoveredEventId: Dispatch<SetStateAction<string>>;
+	button1Name: string;
+	button2Name: string;
+	onButton2Click?: () => void;
+	onButton1Click?: () => void;
+	button1Disabled?: boolean;
 }
 
 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
-    const magnitudeStr = magnitude.toFixed(1);
-    const [whole, decimal] = magnitudeStr.split(".");
-    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>
-    );
+	const magnitudeStr = magnitude.toFixed(1);
+	const [whole, decimal] = magnitudeStr.split(".");
+	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,
-    onButton2Click,
-    onButton1Click,
-    button1Disabled = false, 
+	logTitle,
+	logSubtitle,
+	recentsTitle,
+	events,
+	selectedEventId,
+	setSelectedEventId,
+	hoveredEventId,
+	setHoveredEventId,
+	button1Name,
+	button2Name,
+	onButton2Click,
+	onButton1Click,
+	button1Disabled = false,
 }: SidebarProps) {
-    const eventsContainerRef = useRef<HTMLDivElement>(null);
-    useEffect(() => {
-        if (selectedEventId && eventsContainerRef.current) {
-            const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
-            if (selectedEventElement) {
-                selectedEventElement.scrollIntoView({
-                    block: "center",
-                    behavior: "smooth",
-                });
-            }
-        }
-    }, [selectedEventId]);
+	const eventsContainerRef = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (selectedEventId && eventsContainerRef.current) {
+			const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
+			if (selectedEventElement) {
+				selectedEventElement.scrollIntoView({
+					block: "center",
+					behavior: "smooth",
+				});
+			}
+		}
+	}, [selectedEventId]);
 
-    return (
-        <div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
-            <div className="py-6 flex flex-col h-full">
-                <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>
-                    <button
-                        className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
-                            ${button1Disabled
-                                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
-                                : "bg-blue-600 hover:bg-blue-700 text-white"
-                            }`}
-                        onClick={onButton1Click}
-                        type="button"
-                        
-                        tabIndex={button1Disabled ? -1 : 0}
-                        aria-disabled={button1Disabled ? "true" : "false"}
-                    >
-                        {button1Name}
-                    </button>
-                    <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"
-                        onClick={onButton2Click}
-                        type="button"
-                    >
-                        {button2Name}
-                    </button>
-                </div>
-                <div className="px-6 pt-6">
-                    <h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
-                </div>
-                <div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
-                    <div className="space-y-3">
-                        {events.map((event) => (
-                            <button
-                                key={event.id}
-                                data-event-id={event.id}
-                                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 line-clamp-1">{event.title}</p>
-                                    <p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
-                                </div>
-                                {event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+	return (
+		<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
+			<div className="py-6 flex flex-col h-full">
+				<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>
+					<button
+						className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
+                            ${
+															button1Disabled
+																? "bg-gray-300 text-gray-500 cursor-not-allowed"
+																: "bg-blue-600 hover:bg-blue-700 text-white"
+														}`}
+						onClick={onButton1Click}
+						type="button"
+						tabIndex={button1Disabled ? -1 : 0}
+						aria-disabled={button1Disabled ? "true" : "false"}
+					>
+						{button1Name}
+					</button>
+					<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"
+						onClick={onButton2Click}
+						type="button"
+					>
+						{button2Name}
+					</button>
+				</div>
+				<div className="px-6 pt-6">
+					<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
+				</div>
+				<div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
+					<div className="space-y-3">
+						{events.map((event) => (
+							<button
+								key={event.id}
+								data-event-id={event.id}
+								className={`w-full border ${
+									selectedEventId === event.id
+										? "border-neutral-500 border-2 shadow-md"
+										: hoveredEventId === event.id
+										? "bg-neutral-100 shadow-sm"
+										: "bg-white border-neutral-200 shadow-sm"
+								} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150  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 line-clamp-1">{event.title}</p>
+									<p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
+								</div>
+								{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
+							</button>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}