diff --git a/.gitignore b/.gitignore
index be34eed2..2f7b2f02 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,7 @@ npm-debug.log
 
 *storybook.log
 config/dev.secret.exs
+
+# Ignore files used by MacOS Finder
+.DS_Store
+*/.DS_Store
\ No newline at end of file
diff --git a/js/components/modal.tsx b/js/components/modal.tsx
index ae0d7cdc..28870edb 100644
--- a/js/components/modal.tsx
+++ b/js/components/modal.tsx
@@ -27,7 +27,7 @@ export const Modal = ({
       <div className='grid grid-cols-[1fr_max-content] grid-rows-[max-content_1fr] [grid-template-areas:"title_close"_"contents_contents"] overflow-scroll'>
         <div className="[grid-area:title]">{title}</div>
         <button className="[grid-area:close]" onClick={onClose}>
-          [x]
+          <img src="/images/close.svg" alt="Close" className="w-4 fill-black hover:bg-gray-300"/>
         </button>
         <div className="[grid-area:contents]">{children}</div>
       </div>
diff --git a/priv/static/images/close.svg b/priv/static/images/close.svg
new file mode 100644
index 00000000..3f341a0f
--- /dev/null
+++ b/priv/static/images/close.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="icon--close" viewBox="0 0 26 27" xmlns="http://www.w3.org/2000/svg">
+  <!-- legacy icon, replace with Sketch/Abstract export when possible -->
+  <path d="M16.324 13.704l9.015 9.076a2.377 2.377 0 0 1 0 3.345 2.339 2.339 0 0 1-3.323 0l-9.015-9.075-9.015 9.075a2.339 2.339 0 0 1-3.323 0 2.377 2.377 0 0 1 0-3.345l9.015-9.076L.663 4.63a2.377 2.377 0 0 1 0-3.345 2.339 2.339 0 0 1 3.323 0l9.015 9.075 9.015-9.075a2.339 2.339 0 0 1 3.323 0 2.377 2.377 0 0 1 0 3.345l-9.015 9.075z"/>
+</svg>
\ No newline at end of file