diff --git a/src/info/pages/index.js b/src/info/pages/index.js
index 4ffddea..68d5d1c 100644
--- a/src/info/pages/index.js
+++ b/src/info/pages/index.js
@@ -10,149 +10,172 @@ export default function Home() {
       card_title="Hi! I'm Alexis Werefox!"
     >
       <WCard>
-        <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
-          <IDButton
-            extraClasses=""
-            imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
-            innerText="26"
-            url=""
-          />
-          <IDButton
-            extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
-            imageObj={[
-              {
-                src: "/emoji/transgender_flag.svg",
-                alt: "Transgender flag",
-              },
-              {
-                src: "/emoji/female_symbol.svg",
-                alt: "Female symbol",
-              },
-            ]}
-            innerText="Trans-femme"
-            url="/identities/gender"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/speech_bubble_left.svg",
-              alt: "",
-            }}
-            innerText="She/her"
-            url="/identities/pronouns"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/polyamory_flag.svg",
-              alt: "Polyamory flag",
-            }}
-            innerText="Polyam"
-            url="/identities/sexuality"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/pansexual_flag.svg",
-              alt: "Pansexual flag",
-            }}
-            innerText="Pansexual"
-            url="/identities/sexuality"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/lesbian_flag.svg",
-              alt: "Lesbian flag",
-            }}
-            innerText="Lesbian"
-            url="/identities/sexuality"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/blue_heart.svg",
-              alt: "Blue heart",
-            }}
-            innerText="Single"
-            url="/identities/partners"
-          />
-          <IDButton
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/neurodiversity.svg",
-              alt: "Neurodiversity symbol",
-            }}
-            innerText="ADHD"
-            url="/identities/neuro"
-          />
-          <IDButton
-            extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
-            imageObj={[
-              {
-                src: "/emoji/fox.svg",
-                alt: "Fox",
-              },
-              {
-                src: "/emoji/magic_wand.svg",
-                alt: "Magic wand",
-              },
-            ]}
-            innerText="Fox witch"
-            url="/identities/fursona"
-          />
+        <div className="p-2 space-y-2">
+          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            <p className="p-2 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              <p>Basic Info</p>
+            </p>
+          </div>
+          <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
+            <IDButton
+              extraClasses=""
+              imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
+              innerText="26"
+              url=""
+            />
+            <IDButton
+              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
+              imageObj={[
+                {
+                  src: "/emoji/transgender_flag.svg",
+                  alt: "Transgender flag",
+                },
+                {
+                  src: "/emoji/female_symbol.svg",
+                  alt: "Female symbol",
+                },
+              ]}
+              innerText="Trans-femme"
+              url="/identities/gender"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/speech_bubble_left.svg",
+                alt: "",
+              }}
+              innerText="She/her"
+              url="/identities/pronouns"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/polyamory_flag.svg",
+                alt: "Polyamory flag",
+              }}
+              innerText="Polyam"
+              url="/identities/sexuality"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/pansexual_flag.svg",
+                alt: "Pansexual flag",
+              }}
+              innerText="Pansexual"
+              url="/identities/sexuality"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/lesbian_flag.svg",
+                alt: "Lesbian flag",
+              }}
+              innerText="Lesbian"
+              url="/identities/sexuality"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/blue_heart.svg",
+                alt: "Blue heart",
+              }}
+              innerText="Single"
+              url="/identities/partners"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/neurodiversity.svg",
+                alt: "Neurodiversity symbol",
+              }}
+              innerText="ADHD"
+              url="/identities/neuro"
+            />
+            <IDButton
+              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
+              imageObj={[
+                {
+                  src: "/emoji/fox.svg",
+                  alt: "Fox",
+                },
+                {
+                  src: "/emoji/magic_wand.svg",
+                  alt: "Magic wand",
+                },
+              ]}
+              innerText="Fox witch"
+              url="/identities/fursona"
+            />
+          </div>
         </div>
       </WCard>
       <WCard>
-        <p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          Welcome to my little info site!
-        </p>
-        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          I'd describe myself as somewhere between a hot date and a hot mess.
-          Just a witchy foxxo programmer trying to make it in the world tbh.
-        </p>
-        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          Feel free to click/tap any of the neat buttons above this to learn
-          more about my different aspects of personality.
-        </p>
-        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          Down below, I've got some more neat little pages and useful info you
-          can look at.
-        </p>
-        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          Please do look around and enjoy your stay!~ 💙
-        </p>
+        <div className="p-2 space-y-2">
+          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            <p className="p-2 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              <p>Welcome to my little info site!</p>
+            </p>
+          </div>
+          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            <p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              I'd describe myself as somewhere between a hot date and a hot
+              mess. Just a witchy foxxo programmer trying to make it in the
+              world tbh.
+            </p>
+            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              Feel free to click/tap any of the neat buttons above this to learn
+              more about my different aspects of personality.
+            </p>
+            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              Down below, I've got some more neat little pages and useful info
+              you can look at.
+            </p>
+            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              Please do look around and enjoy your stay!~ 💙
+            </p>
+          </div>
+        </div>
+      </WCard>
+      <WCard>
+        <div className="p-2 space-y-2">
+          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            <p className="p-2 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+              <p>Useful Pages! (hopefully!)</p>
+            </p>
+          </div>
+          <WCard
+            isCardButton="true"
+            extraClasses=""
+            imageObj={{
+              src: "/emoji/trans_heart.png",
+              alt: "Transgender heart",
+            }}
+            innerText="HRT Tracker!"
+            url="/hrt"
+          />
+          <WCard
+            isCardButton="true"
+            extraClasses=""
+            imageObj={{
+              src: "/emoji/awoo.svg",
+              alt: "Testimonials",
+            }}
+            innerText="See Testimonials!"
+            url="/testimonials"
+          />
+          <WCard
+            isCardButton="true"
+            extraClasses=""
+            imageObj={{
+              src: "/emoji/red_question_mark.svg",
+              alt: "Frequently Asked Question",
+            }}
+            innerText="FAQ"
+            url="/faq"
+          />
+        </div>
       </WCard>
-      <WCard
-        isCardButton="true"
-        extraClasses=""
-        imageObj={{
-          src: "/emoji/trans_heart.png",
-          alt: "Transgender heart",
-        }}
-        innerText="HRT Tracker!"
-        url="/hrt"
-      />
-      <WCard
-        isCardButton="true"
-        extraClasses=""
-        imageObj={{
-          src: "/emoji/awoo.svg",
-          alt: "Testimonials",
-        }}
-        innerText="See Testimonials!"
-        url="/testimonials"
-      />
-      <WCard
-        isCardButton="true"
-        extraClasses=""
-        imageObj={{
-          src: "/emoji/red_question_mark.svg",
-          alt: "Frequently Asked Question",
-        }}
-        innerText="FAQ"
-        url="/faq"
-      />
     </BasicPage>
   );
 }