diff --git a/src/app/page.jsx b/src/app/page.jsx
index 825c68b..783fe14 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -43,6 +43,10 @@ const _88x31s = {
     "tom1212": tom1212
 };
 
+function CustomIcon({src, name}) {
+    return <Image src={src} alt={name} title={name} width={32} height={32} className="icon"/>
+}
+
 
 export default function Index() {
   const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
@@ -58,69 +62,69 @@ export default function Index() {
           <div className={styles.array}>
               <div>
                   <h3>Languages</h3>
-                  <div>
-                      <Image src={pythonColor} alt="Python" title="Python" width={32} height={32} className="icon"/>
-                      <Image src={javascriptColor} alt="JavaScript" title="JavaScript" width={32} height={32} className="icon"/>
-                      <Image src={gnubashColor} alt="Bash" title="Bash" width={32} height={32} className="icon"/>
+                  <div className={styles.imageSpaced}>
+                      <CustomIcon src={pythonColor} alt="Python" title="Python" width={32} height={32} className="icon"/>
+                      <CustomIcon src={javascriptColor} alt="JavaScript" title="JavaScript" width={32} height={32} className="icon"/>
+                      <CustomIcon src={gnubashColor} alt="Bash" title="Bash" width={32} height={32} className="icon"/>
                   </div>
               </div>
               <div>
                   <h3>Operating Systems</h3>
-                  <div>
-                      <Image src={fedoraColor} alt="Fedora" title="Fedora" width={32} height={32} className="icon"/>
-                      <Image src={ubuntuColor} alt="Ubuntu" title="Ubuntu (Server)" width={32} height={32} className="icon"/>
-                      <Image src={windowsColor} alt="Windows" title="Windows" width={32} height={32} className="icon"/>
-                      <Image src={appleColor} alt="iOS" title="iOS" width={32} height={32} className="icon"/>
+                  <div className={styles.imageSpaced}>
+                      <CustomIcon src={fedoraColor} alt="Fedora" title="Fedora" width={32} height={32} className="icon"/>
+                      <CustomIcon src={ubuntuColor} alt="Ubuntu" title="Ubuntu (Server)" width={32} height={32} className="icon"/>
+                      <CustomIcon src={windowsColor} alt="Windows" title="Windows" width={32} height={32} className="icon"/>
+                      <CustomIcon src={appleColor} alt="iOS" title="iOS" width={32} height={32} className="icon"/>
                   </div>
               </div>
               <div>
                   <h3>
                     Communication Platforms
                   </h3>
-                  <div>
+                  <div className={styles.imageSpaced}>
                       <a href="https://matrix.to/#/@nex:nexy7574.co.uk" rel="noopener noreferrer" target="_blank" className="icon">
-                          <Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
+                          <CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
                       </a>
                       <a href="https://signal.me/#eu/j24vT8zDzquI0us48k7eiNJcpJjEw4TYUz1gtvo_0HtEfq4C2MZG1YFs5POF98Sb" rel="noopener" target="_blank" className="icon">
-                          <Image src={signalColor} alt="Signal" title="Signal" width={32} height={32} className="icon"/>
+                          <CustomIcon src={signalColor} alt="Signal" title="Signal" width={32} height={32} className="icon"/>
                       </a>
                       <a style={{cursor: "default"}} href="#" className="icon">
-                        <Image src={imessageColor} alt="iMessage" title="iMessage" width={32} height={32} className="icon"/>
+                        <CustomIcon src={imessageColor} alt="iMessage" title="iMessage" width={32} height={32} className="icon"/>
                       </a>
                       <a href="https://discord.gg/TveBeG7" rel="noopener" target="_blank" className="icon">
-                          <Image src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
+                          <CustomIcon src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
                       </a>
                       <a rel="noopener" target="_blank" className="icon" href="img/email.png">
-                          <Image src={gmailColor} alt="Email" title="Email (very slow)" width={32} height={32} className="icon"/>
+                          <CustomIcon src={gmailColor} alt="Email" title="Email (very slow)" width={32} height={32} className="icon"/>
                       </a>
                   </div>
               </div>
               <div>
                   <h3>Learning</h3>
-                  <div>
-                      <Image src={csharpColor} alt="C#" title="C#" width={32} height={32} className="icon"/>
-                      <Image src={goColor} alt="Go" title="Go" width={32} height={32} className="icon"/>
+                  <div className={styles.imageSpaced}>
+                      <CustomIcon src={csharpColor} alt="C#" title="C#" width={32} height={32} className="icon"/>
+                      <CustomIcon src={goColor} alt="Go" title="Go" width={32} height={32} className="icon"/>
                   </div>
               </div>
               <div>
                   <h3>Tools</h3>
-                  <div>
-                      <Image src={dockerColor} alt="Docker" title="Docker" width={32} height={32} className="icon"/>
-                      <Image src={gitColor} alt="Git" title="Git" width={32} height={32} className="icon"/>
-                      <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
-                      <Image src={linode} alt="Linode" title="Linode (cloud hosting)" width={32} height={32} className="icon"/>
-                      <Image src={postgresqlColor} alt="Postgres" title="Postgres" width={32} height={32} className="icon"/>
-                      <Image src={ollama} alt="Ollama" title="Ollama (web hosting)" width={32} height={32} className="icon"/>
-                      <Image src={openaiColor} alt="OpenAI/ChatGPT" title="OpenAI/ChatGPT" width={32} height={32} className="icon"/>
+                  <div className={styles.imageSpaced}>
+                      <CustomIcon src={dockerColor} alt="Docker" title="Docker" width={32} height={32} className="icon"/>
+                      <CustomIcon src={gitColor} alt="Git" title="Git" width={32} height={32} className="icon"/>
+                      <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                      <CustomIcon src={linode} alt="Linode" title="Linode (cloud hosting)" width={32} height={32} className="icon"/>
+                      <CustomIcon src={postgresqlColor} alt="Postgres" title="Postgres" width={32} height={32} className="icon"/>
+                      <CustomIcon src={ollama} alt="Ollama" title="Ollama (web hosting)" width={32} height={32} className="icon"/>
+                      <CustomIcon src={openaiColor} alt="OpenAI/ChatGPT" title="OpenAI/ChatGPT" width={32} height={32} className="icon"/>
                   </div>
               </div>
               <div>
                   <h3>Frameworks & Libraries</h3>
-                  <div>
-                      <Image src={nextdotjs} alt="Next.js" title="Next.js" width={32} height={32} className="icon"/>
-                      <Image src={fastapiColor} alt="FastAPI" title="FastAPI" width={32} height={32} className="icon"/>
-                      <Image src={discordpy} alt="Discord.py" title="Discord.py" width={32} height={32} className="icon"/>
-                      <Image src={pycord} alt="py-cord" title="py-cord" width={32} height={32} className="icon"/>
+                  <div className={styles.imageSpaced}>
+                      <CustomIcon src={nextdotjs} alt="Next.js" title="Next.js" width={32} height={32} className="icon"/>
+                      <CustomIcon src={fastapiColor} alt="FastAPI" title="FastAPI" width={32} height={32} className="icon"/>
+                      <CustomIcon src={discordpy} alt="Discord.py" title="Discord.py" width={32} height={32} className="icon"/>
+                      <CustomIcon src={pycord} alt="py-cord" title="py-cord" width={32} height={32} className="icon"/>
                   </div>
               </div>
           </div>
@@ -141,12 +145,12 @@ export default function Index() {
                           <td>A bot framework for the matrix ecosystem</td>
                           <td>
                               <a href="https://github.com/nexy7574/nio-bot" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                           <td>
                               <a href="https://matrix.to/#/#bots:nexy7574.co.uk" rel="opopener" target="_blank" className="icon">
-                                  <Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -155,7 +159,7 @@ export default function Index() {
                           <td>A command line interface for interacting with the Dendrite homeserver.</td>
                           <td>
                               <a href="https://github.com/nexy7574/dendritecli" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                           <td></td>
@@ -165,7 +169,7 @@ export default function Index() {
                           <td>A CLI mod manager for minecraft servers.</td>
                           <td>
                               <a href="https://github.com/nexy7574/modman" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                           <td></td>
@@ -175,10 +179,10 @@ export default function Index() {
                           <td>Specialised chat bot in discord for my college server.</td>
                           <td>
                               <a href="https://git.i-am.nexus/nex/college-bot-v2" rel="noopener" target="_blank" className="icon">
-                                  <Image src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
                               </a>
                               [<a href="https://github.com/nexy7574/college-bot-v2" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>]
                           </td>
                           <td></td>
@@ -188,12 +192,12 @@ export default function Index() {
                           <td>A drop-in proxy URL preview server for Matrix</td>
                           <td>
                               <a href="https://git.i-am.nexus/nex/drop-in-url-previews" rel="noopener" target="_blank" className="icon">
-                                  <Image src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                           <td>
                               <a href="https://matrix.nexy7574.co.uk/_matrix/media/r0/preview_url?url=nexy7574.co.uk" rel="noopener" target="_blank" className="icon">
-                                  <Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -213,7 +217,7 @@ export default function Index() {
                           </td>
                           <td>
                               <a href="https://discord.com/api/oauth2/authorize?client_id=722000000000000000&permissions=8&scope=bot" rel="noopener" target="_blank" className="icon">
-                                  <Image src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -223,7 +227,7 @@ export default function Index() {
                           <td><i>proprietary</i></td>
                           <td>
                               <a href="https://top.gg/bot/619328560141697036" rel="noopener noreferrer" target="_blank" className="icon">
-                                  <Image src={topdotgg} alt="top.gg" title="top.gg" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={topdotgg} alt="top.gg" title="top.gg" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -236,7 +240,7 @@ export default function Index() {
                           </td>
                           <td>
                               <a href="https://github.com/nexy7574/top.py" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                           <td></td>
@@ -262,7 +266,7 @@ export default function Index() {
                           <td>&quot;Pycord, a maintained fork of discord.py, is a python wrapper for the Discord API&quot;</td>
                           <td>
                               <a href="https://github.com/Pycord-Development/pycord" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -271,7 +275,7 @@ export default function Index() {
                           <td>&quot;A Python Matrix client library, designed according to sans I/O principles&quot;</td>
                           <td>
                               <a href="https://github.com/matrix-nio/matrix-nio" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
@@ -280,7 +284,7 @@ export default function Index() {
                           <td>&quot;An API wrapper for Discord written in Python&quot;</td>
                           <td>
                               <a href="https://github.com/Rapptz/discord.py" rel="noopener" target="_blank" className="icon">
-                                  <Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
+                                  <CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
                               </a>
                           </td>
                       </tr>
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 6b7deb9..39adf33 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -12,3 +12,7 @@
   color: var(--text-normal);
   font-weight: bold;
 }
+
+.imageSpaced * {
+  padding: 4px;
+}