diff --git a/.eslintcache b/.eslintcache
deleted file mode 100644
index 80acea3..0000000
--- a/.eslintcache
+++ /dev/null
@@ -1 +0,0 @@
-[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx":"12"},{"size":579,"mtime":1609726036012,"results":"13","hashOfConfig":"14"},{"size":440,"mtime":1609726036016,"results":"15","hashOfConfig":"14"},{"size":384,"mtime":1609726035985,"results":"16","hashOfConfig":"14"},{"size":1336,"mtime":1609807151229,"results":"17","hashOfConfig":"14"},{"size":221,"mtime":1609807151240,"results":"18","hashOfConfig":"14"},{"size":420,"mtime":1609807160871,"results":"19","hashOfConfig":"14"},{"size":142,"mtime":1609726035985,"results":"20","hashOfConfig":"14"},{"size":115,"mtime":1609807173240,"results":"21","hashOfConfig":"14"},{"size":9326,"mtime":1609807151251,"results":"22","hashOfConfig":"14"},{"size":1072,"mtime":1609462531624,"results":"23","hashOfConfig":"14"},{"size":1238,"mtime":1609806284783,"results":"24","hashOfConfig":"14"},{"size":5997,"mtime":1609806409462,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"lcbj9u",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["51","52"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx",["53","54","55","56","57"],{"ruleId":"58","replacedBy":"59"},{"ruleId":"60","replacedBy":"61"},{"ruleId":"62","severity":1,"message":"63","line":8,"column":10,"nodeType":"64","messageId":"65","endLine":8,"endColumn":24},{"ruleId":"62","severity":1,"message":"66","line":8,"column":26,"nodeType":"64","messageId":"65","endLine":8,"endColumn":43},{"ruleId":"62","severity":1,"message":"67","line":9,"column":10,"nodeType":"64","messageId":"65","endLine":9,"endColumn":26},{"ruleId":"62","severity":1,"message":"68","line":9,"column":28,"nodeType":"64","messageId":"65","endLine":9,"endColumn":47},{"ruleId":"69","severity":1,"message":"70","line":115,"column":6,"nodeType":"71","endLine":115,"endColumn":8,"suggestions":"72"},"no-native-reassign",["73"],"no-negated-in-lhs",["74"],"@typescript-eslint/no-unused-vars","'nowPlayingSong' is assigned a value but never used.","Identifier","unusedVar","'setNowPlayingSong' is assigned a value but never used.","'nowPlayingArtist' is assigned a value but never used.","'setNowPlayingArtist' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'UpdateAge'. Either include it or remove the dependency array.","ArrayExpression",["75"],"no-global-assign","no-unsafe-negation",{"desc":"76","fix":"77"},"Update the dependencies array to be: [UpdateAge]",{"range":"78","text":"79"},[2826,2828],"[UpdateAge]"]
\ No newline at end of file
diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss
index f54645c..9a2de41 100644
--- a/src/components/ProjectGrid.scss
+++ b/src/components/ProjectGrid.scss
@@ -1,6 +1,6 @@
 @import "~include-media/dist/_include-media.scss";
 
-$breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
+$breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
 
 // Override Sass min()
 @function min($numbers...) {
@@ -45,13 +45,13 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
   //padding: 10px;
 
   @include media("<=x-small") {
-    .GridSizer, .OneWide, .FourByOne {
+    .GridSizer, .OneWide, .FourByOne .Medium {
       width: 100%;
     }
   }
 
   @include media(">x-small", "<small") {
-    .GridSizer, .OneWide {
+    .GridSizer, .OneWide .Medium {
       width: 49%;
     }
     .FourByOne {
@@ -60,7 +60,7 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 
   @include media(">=small", "<medium") {
-    .GridSizer, .OneWide {
+    .GridSizer, .OneWide .Medium {
       width: 33%;
     }
     .FourByOne {
@@ -72,6 +72,9 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
     .GridSizer, .OneWide {
       width: 24.9%;
     }
+    .Medium {
+      width: 49.8%;
+    }
     .FourByOne {
       width: 74.6%;
     }
@@ -82,6 +85,10 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
       max-width: 300px;
       width: 19.9%;
     }
+    .Medium {
+      max-width: 600px;
+      width: 39.8%;
+    }
     .FourByOne {
       width: 59.5%;
       max-width: 900px;
@@ -92,6 +99,9 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
     .GridSizer, .OneWide {
       width: 300px;
     }
+    .Medium {
+      width: 600px;
+    }
     .FourByOne {
       width: 900px;
     }
@@ -129,6 +139,7 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
 
   p {
     font-family: "Montserrat", sans-serif;
+    font-size: 16px;
     color: black;
     margin-bottom: 0;
   }
@@ -145,6 +156,55 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 }
 
+.Medium {
+  img {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+
+  @include media("<medium") {
+    display: flex;
+    flex-direction: column;
+    width: available;
+
+    img {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+  }
+
+  @include media(">=medium") {
+    // Two column sort of layout
+    .image {
+      float: left;
+      width: 50%;
+      shape-outside: inset(0);
+
+      img {
+        margin-bottom: 0;
+      }
+    }
+
+    .description {
+      display: inline;
+
+      p {
+        text-align: justify;
+      }
+
+      h2 h3 {
+        display: inline;
+      }
+    }
+  }
+
+  @include media(">x-large") {
+    .image {
+      width: 40%;
+    }
+  }
+}
+
 .FourByOne {
   .GridElementInternal {
     display: flex;
diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx
index 1f4e77a..99a6203 100644
--- a/src/components/ProjectGrid.tsx
+++ b/src/components/ProjectGrid.tsx
@@ -36,7 +36,7 @@ type GridElementProps = {
   org?: string;
 };
 
-function OneWide({ title, text, link, org }: GridElementProps) {
+function SmallElement({ title, text, link, org }: GridElementProps) {
   if (link === undefined) {
     return (
       <div className={"OneWide GridElement"}>
@@ -53,12 +53,17 @@ function OneWide({ title, text, link, org }: GridElementProps) {
     );
   }
   return (
-    <a className={"OneWide GridElement Link"} href={link} rel={"noreferrer"} target={"_blank"}>
+    <a
+      className={"OneWide GridElement Link"}
+      href={link}
+      rel={"noreferrer"}
+      target={"_blank"}
+    >
       <div className={"GridElementInternal"}>
         <div className={"title"}>
           <h2>{title}</h2>
           {org && <h3>{org}</h3>}
-          <LinkOutlined className={"LinkIcon"}/>
+          <LinkOutlined className={"LinkIcon"} />
         </div>
         <div className={"description"}>
           <p>{text}</p>
@@ -66,9 +71,16 @@ function OneWide({ title, text, link, org }: GridElementProps) {
       </div>
     </a>
   );
-};
+}
 
-function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
+function SmallElementPic({
+  image_url,
+  image_alt,
+  title,
+  text,
+  link,
+  org,
+}: GridElementImageProps) {
   if (link === undefined) {
     return (
       <div className={"OneWide Pic GridElement"}>
@@ -108,7 +120,60 @@ function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElemen
   );
 }
 
-function FourByOneGridElement({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
+function MediumElement({
+  image_url,
+  image_alt,
+  title,
+  text,
+  link,
+  org,
+}: GridElementImageProps) {
+  if (link === undefined) {
+    return (
+        <div className={"Medium GridElement"}>
+          <div className={"GridElementInternal"}>
+            <div className={"image"}>
+              <img src={image_url} alt={image_alt} />
+            </div>
+            <div className={"description"}>
+              <h2>{title}</h2>
+              {org && <h3>{org}</h3>}
+              <p>{text}</p>
+            </div>
+          </div>
+        </div>
+    );
+  }
+  return (
+      <a
+          className={"Medium GridElement Link"}
+          href={link}
+          target={"_blank"}
+          rel={"noreferrer"}
+      >
+        <div className={"GridElementInternal"}>
+          <div className={"image"}>
+            <img src={image_url} alt={image_alt} />
+            <LinkOutlined className={"LinkIcon"} />
+          </div>
+          <div className={"description"}>
+            <h2>{title}</h2>
+            {org && <h3>{org}</h3>}
+            <p>{text}</p>
+          </div>
+        </div>
+      </a>
+  );
+}
+
+function LargeElementPic({
+  image_url,
+  image_alt,
+  title,
+  text,
+  link,
+  org,
+}: GridElementImageProps) {
   if (link === undefined) {
     return (
       <div className={"FourByOne GridElement"}>
@@ -177,7 +242,7 @@ export function ProjectGrid() {
         </div>
         <div id={"project-grid"}>
           <div className={"GridSizer"} />
-          <OneWide
+          <SmallElement
             title={"ElaticMatch"}
             org={"CodeDay"}
             text={
@@ -185,7 +250,7 @@ export function ProjectGrid() {
             }
             link={"https://github.com/codeday/labs-elastic-match"}
           />
-          <OneWide
+          <SmallElement
             title={"John Peter"}
             org={"CodeDay"}
             text={
@@ -193,7 +258,7 @@ export function ProjectGrid() {
             }
             link={"https://github.com/codeday/johnpeter-discord"}
           />
-          <OneWide
+          <SmallElement
             title={"CopyMoji"}
             org={"BetterDiscord"}
             text={
@@ -203,7 +268,7 @@ export function ProjectGrid() {
               "https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"
             }
           />
-          <OneWidePic
+          <SmallElementPic
             image_url={CodeDaySD}
             image_alt={"CodeDay San Diego Logo"}
             org={"CodeDay"}
@@ -213,7 +278,7 @@ export function ProjectGrid() {
             }
             link={"https://event.codeday.org/sandiego"}
           />
-          <FourByOneGridElement
+          <LargeElementPic
             image_url={Foresight}
             image_alt={"Foresight Sports Logo"}
             title={"Foresight Sports"}
@@ -221,7 +286,7 @@ export function ProjectGrid() {
               "Foresight Sports creates advanced augmented reality sports experiences. I created multiple games using Unity that took data from their launch monitor technology and translated it into a seamless experience."
             }
           />
-          <OneWidePic
+          <SmallElementPic
             image_url={Distest}
             image_alt={"Distest Logo"}
             title={"Distest"}
@@ -231,7 +296,7 @@ export function ProjectGrid() {
             }
             link={"https://github.com/JakeCover/distest"}
           />
-          <OneWidePic
+          <SmallElementPic
             image_url={Scoresaver}
             image_alt={"Scoresaver Logo"}
             title={"ScoreSaver"}
@@ -241,27 +306,37 @@ export function ProjectGrid() {
             }
             link={"https://github.com/JakeCover/ScoreSaverExtention"}
           />
-          <OneWide
-            title={"Personal Website"}
-            org={"Random Projects"}
-            text={
-              "You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, but I didn't know React before starting on this so I'm pretty proud of it."
-            }
-            link={"https://github.com/JakeCover/PersonalWebsite_Static"}
-          />
-          <OneWidePic
+
+          <MediumElement
             image_url={Hashicorp}
             image_alt={"HashiCorp Logo"}
             title={"Hashicorp Stack Sysadmin"}
             org={"CodeDay, Random Projects"}
             text={
-              "I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay, where it runs almost every service we have, as well as at home, where I use it to run a number of assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that complex to get started with!"
+              "I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay, where it runs almost every service we have, as well as at home, where I use it to run a number of assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that complex to get started with at any scale, from one personal server to large corporate backends."
             }
           />
-          <OneWide
-            title={"CodeDay"}
+          <SmallElement
+              title={"Personal Website"}
+              org={"Random Projects"}
+              text={
+                "You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, but I didn't know React before starting on this so I'm pretty proud of it."
+              }
+              link={"https://github.com/JakeCover/PersonalWebsite_Static"}
+          />
+          <SmallElement
+            title={"Nomad Job Templates Tool"}
+            link={"https://github.com/JakeCover/NomadJobTemplatesTool"}
+            org={"Random Projects"}
+            text={
+              "A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help centralize the definition of service traefik tags. This mainly makes it easier to update and change networking configuration across many jobs easily."
+            }
+          />
+          <SmallElement
+            title={"Assorted Discord Bots"}
+            org={"Random Projects"}
             text={
-              "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+              "I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply functionality to Discord years before they finally implemented it first-party, have been obsoleted nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been lost to time and past me's lack of understanding of the importance of backup. I digress, however I really do love writing these sorts of applications!"
             }
           />
         </div>