diff --git a/src/block.json b/src/block.json
index 00927a1..45021a8 100644
--- a/src/block.json
+++ b/src/block.json
@@ -18,13 +18,19 @@
 		"count": {
 			"type": "number"
 		},
-		"imgId": {
-			"type": "number",
-			"default": 0
+		"imgUrl": {
+			"type": "string",
+			"source": "attribute",
+			"selector": ".img-primary",
+			"attribute": "src",
+			"default": ""
 		},
-		"imgIdHover": {
-			"type": "number",
-			"default": 0
+		"imgUrlHover": {
+			"type": "string",
+			"source": "attribute",
+			"selector": ".img-secondary",
+			"attribute": "src",
+			"default": ""
 		}
 	}
 }
diff --git a/src/edit.js b/src/edit.js
index c6ba9d4..62bba54 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -1,5 +1,5 @@
 import { useSelect, dispatch } from "@wordpress/data";
-import { useState, createElement } from "@wordpress/element";
+import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import {
 	useBlockProps,
@@ -7,7 +7,13 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 } from "@wordpress/block-editor";
-import { __experimentalNumberControl as NumberControl, Button, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components";
+import {
+	__experimentalNumberControl as NumberControl,
+	ToggleControl,
+	Panel,
+	PanelBody,
+	PanelRow,
+} from "@wordpress/components";
 import { getSaveElement, createBlock } from "@wordpress/blocks";
 
 import "./editor.scss";
@@ -19,26 +25,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 		select("core/block-editor").getBlock(clientId)
 	);
 
-	const centralImg = useSelect((select) =>
-		select( "core" ).getEntityRecord( "postType", "attachment", attributes.imgId),
-	);
-	console.log(centralImg);
-	const imgThumbUrl = centralImg ? centralImg?.media_details?.sizes?.thumbnail?.source_url : '';
-
-	const centralImgHover = useSelect((select) =>
-		select( "core" ).getEntityRecord( "postType", "attachment", attributes.imgIdHover),
-	);
-	console.log(centralImgHover);
-	const imgThumbHoverUrl = centralImg ? centralImgHover?.media_details?.sizes?.thumbnail?.source_url : '';
-
 	if (isNaN(parseInt(attributes.count, 10))) {
-		setAttributes({count: innerBlocks.length});
+		setAttributes({ count: innerBlocks.length });
 	}
 
 	const [removedBlocks, setRemovedBlocks] = useState([]);
 	const [isAnimating, setIsAnimating] = useState(false);
 
-	const animatingClass = ' clockwise pulse';
+	const animatingClass = " clockwise pulse";
 
 	const addBlock = () => {
 		const index = innerBlocks.length - 1;
@@ -52,7 +46,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 		}
 
 		dispatch("core/block-editor").insertBlock(block, index, clientId, false);
-		setAttributes({count: parseInt(attributes.count, 10) + 1});
+		setAttributes({ count: parseInt(attributes.count, 10) + 1 });
 	};
 
 	const removeBlock = () => {
@@ -65,7 +59,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 		removedBlocksUpdate.push(block);
 		setRemovedBlocks(removedBlocksUpdate);
 
-		setAttributes({count: parseInt(attributes.count, 10) - 1});
+		setAttributes({ count: parseInt(attributes.count, 10) - 1 });
 	};
 
 	const onCountChange = (value) => {
@@ -106,65 +100,67 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 			<InspectorControls key="setting">
 				<div id="red-orbital-controls">
 					<Panel>
-						<PanelBody title="Settings" initialOpen={ true }>
-
+						<PanelBody title="Settings" initialOpen={true}>
 							<PanelRow>
-							<legend className="blocks-base-control__label">
-									{ __( 'Orbital count', 'red-orbital' ) }
-							</legend>
-							<NumberControl
-								value={innerBlocks.length}
-								min={1}
-								max={12}
-								onChange={onCountChange}
-							/>
-							</PanelRow>
-
-							<PanelRow>
-								<MediaPlaceholder
-									onSelect = {
-										( img ) => {
-											setAttributes( { imgId: img.id } );
-										}
-									}
-									allowedTypes = { [ 'image' ] }
-									multiple = { false }
-									labels = { { title: 'Central Image' } }
-									value = {attributes.imgId}
-									mediaPreview = {imgThumbUrl ? (
-										<img src={imgThumbUrl} alt="" />
-									) : <p>No image selected.</p>}
+								<legend className="blocks-base-control__label">
+									{__("Orbital count", "red-orbital")}
+								</legend>
+								<NumberControl
+									value={innerBlocks.length}
+									min={1}
+									max={12}
+									onChange={onCountChange}
 								/>
 							</PanelRow>
 
 							<PanelRow>
 								<MediaPlaceholder
-									onSelect = {
-										( img ) => {
-											setAttributes( { imgIdHover: img.id } );
-										}
+									onSelect={(img) => {
+										console.log("onSelect", img);
+										setAttributes({ imgUrl: img.url });
+									}}
+									allowedTypes={["image"]}
+									multiple={false}
+									labels={{ title: "Central Image" }}
+									mediaPreview={
+										attributes.imgUrl !== "" ? (
+											<img src={attributes.imgUrl} alt="" />
+										) : (
+											<p>No image selected.</p>
+										)
 									}
-									allowedTypes = { [ 'image' ] }
-									multiple = { false }
-									labels = { { title: 'Central Image On Hover' } }
-									value = {attributes.imgIdHover}
-									mediaPreview = {imgThumbHoverUrl ? (
-										<img src={imgThumbHoverUrl} alt="" />
-									) : <p>No image selected.</p>}
 								/>
 							</PanelRow>
 
+							<PanelRow>
+								<MediaPlaceholder
+									onSelect={(img) => {
+										console.log("onSelect", img);
+										setAttributes({ imgUrlHover: img.url });
+									}}
+									allowedTypes={["image"]}
+									multiple={false}
+									labels={{ title: "Central Image On Hover" }}
+									mediaPreview={
+										attributes.imgUrlHover !== "" ? (
+											<img src={attributes.imgUrlHover} alt="" />
+										) : (
+											<p>No image selected.</p>
+										)
+									}
+								/>
+							</PanelRow>
 						</PanelBody>
 					</Panel>
 					<Panel>
-						<PanelBody title="View Controls" initialOpen={ true }>
+						<PanelBody title="View Controls" initialOpen={true}>
 							<PanelRow>
 								<ToggleControl
 									label="Play"
-									checked={ isAnimating }
-									onChange={ () => {
-										setIsAnimating( ( state ) => ! state );
-									} }
+									checked={isAnimating}
+									onChange={() => {
+										setIsAnimating((state) => !state);
+									}}
 								/>
 							</PanelRow>
 						</PanelBody>
@@ -174,18 +170,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 
 			<div {...useBlockProps()}>
 				<div className="orbital-view">
-					<ul className={`orbiters count-${innerBlocks.length}${isAnimating ? animatingClass : ''}`}>{viewList}</ul>
+					<ul
+						className={`orbiters count-${innerBlocks.length}${
+							isAnimating ? animatingClass : ""
+						}`}
+					>
+						{viewList}
+					</ul>
 
 					<div className="inner-content">
 						<div className="image-hover">
-							<img
-								className="img"
-								src="https://via.placeholder.com/256x256/999/333"
-							/>
-							<img
-								className="img"
-								src="https://via.placeholder.com/256x256/666/ccc"
-							/>
+							<img className="img" src={attributes.imgUrl} />
+							<img className="img" src={attributes.imgUrlHover} />
 						</div>
 					</div>
 				</div>
diff --git a/src/save.js b/src/save.js
index 2936b77..7dc1b11 100644
--- a/src/save.js
+++ b/src/save.js
@@ -31,14 +31,8 @@ export default function save({ attributes }) {
 
 			<div className="inner-content">
 				<div className="image-hover">
-					<img
-						className="img"
-						src="https://via.placeholder.com/256x256/999/333"
-					/>
-					<img
-						className="img"
-						src="https://via.placeholder.com/256x256/666/ccc"
-					/>
+					<img className="img img-primary" src={attributes.imgUrl} />
+					<img className="img img-secondary" src={attributes.imgUrlHover} />
 				</div>
 			</div>
 		</div>