diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index 79725c38..01e6ada2 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -1,6 +1,9 @@
 #CharacterGrid {
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    margin: auto;
+    max-width: 761px;
 }
 
 #grid_characters {
diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 10daad5c..d4d31ae0 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -6,6 +6,7 @@ import { useSnapshot } from 'valtio'
 import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
+import JobSection from '~components/JobSection'
 import CharacterUnit from '~components/CharacterUnit'
 
 import api from '~utils/api'
@@ -227,22 +228,25 @@ const CharacterGrid = (props: Props) => {
 
     // Render: JSX components
     return (
-        <div id="CharacterGrid">
-            <ul id="grid_characters">
-                {Array.from(Array(numCharacters)).map((x, i) => {
-                    return (
-                        <li key={`grid_unit_${i}`} >
-                            <CharacterUnit 
-                                gridCharacter={grid.characters[i]}
-                                editable={party.editable}
-                                position={i} 
-                                updateObject={receiveCharacterFromSearch}
-                                updateUncap={initiateUncapUpdate}
-                            />
-                        </li>
-                    )
-                })}
-            </ul>
+        <div>
+            <div id="CharacterGrid">
+                <JobSection />
+                <ul id="grid_characters">
+                    {Array.from(Array(numCharacters)).map((x, i) => {
+                        return (
+                            <li key={`grid_unit_${i}`} >
+                                <CharacterUnit 
+                                    gridCharacter={grid.characters[i]}
+                                    editable={party.editable}
+                                    position={i} 
+                                    updateObject={receiveCharacterFromSearch}
+                                    updateUncap={initiateUncapUpdate}
+                                />
+                            </li>
+                        )
+                    })}
+                </ul>
+            </div>
         </div>
     )
 }