diff --git a/client/src/App.css b/client/src/App.css
index b9d355d..32f7dcb 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0.5rem;
   text-align: center;
 }
 
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3dc915b..3260d35 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -13,6 +13,7 @@ import SplitRegion from './Pages/Build/SplitRegion'
 import Combined from './Pages/Build/Combined'
 import NARegion from './Pages/Build/NARegion'
 import APACRegion from './Pages/Build/APACRegion'
+import CommunityRankings from './Pages/CommunityRankings'
 
 
 const router = createBrowserRouter(
@@ -28,6 +29,7 @@ const router = createBrowserRouter(
         <Route path='login' element={<Login />} />
         <Route path='register' element={<Register />} />
       </Route>
+      <Route path="community-rankings" element={<CommunityRankings />} />
     </Route>
   )
 )
diff --git a/client/src/Components/Css/Forms.css b/client/src/Components/Css/Forms.css
index bc2f583..3c9f298 100644
--- a/client/src/Components/Css/Forms.css
+++ b/client/src/Components/Css/Forms.css
@@ -11,6 +11,8 @@
     border-radius: 10px;
     border: none;
     margin-bottom: 10px;
+    width: 300px;
+    font-size: 18px;
 }
 .basic-form .switch {
     font-size: 14px;
diff --git a/client/src/Components/Css/TeamCard.css b/client/src/Components/Css/TeamCard.css
index 64ac633..c4ae993 100644
--- a/client/src/Components/Css/TeamCard.css
+++ b/client/src/Components/Css/TeamCard.css
@@ -1,10 +1,13 @@
 .team-card {
     background-color: darkgray;
     border-radius: 15px;
-    width: 320px;
-    height: 48px;
-    margin: 10px auto;
+    /* width: 320px;
+    height: 48px; */
+    width: 240px;
+    height: 36px;
+    margin: -2px auto -2px auto;
     cursor: grab;
+    background-size: contain;
 }
 
 .team-card:active {
diff --git a/client/src/Components/Css/TeamStyles.css b/client/src/Components/Css/TeamStyles.css
index e155773..b3f2787 100644
--- a/client/src/Components/Css/TeamStyles.css
+++ b/client/src/Components/Css/TeamStyles.css
@@ -24,7 +24,7 @@
     background-image: url('../../assets/cards/was.png');
 }
 .vegaseternal {
-    background-color: rgb(15, 15, 15);
+    background-color: #000;
     background-image: url('../../assets/cards/vegas.png');
 }
 .torontodefiant {
diff --git a/client/src/Components/Css/TierBreak.css b/client/src/Components/Css/TierBreak.css
new file mode 100644
index 0000000..da8d985
--- /dev/null
+++ b/client/src/Components/Css/TierBreak.css
@@ -0,0 +1,32 @@
+.triangle-right {
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 16px solid grey;
+    border-bottom: 8px solid transparent;
+    margin: 0px 0px 0px -8px;
+    opacity: 0;
+}
+.triangle-right:hover {
+    cursor: pointer;
+    opacity: 1;
+}
+.triangle-right.active {
+    cursor: pointer;
+    border-left-color: yellow;
+    opacity: 1;
+}
+.break-line {
+    display: none;
+    width: 175px;
+    float: left;
+    margin-top: -9px;
+    border: 1px solid yellow;
+}
+.break-line.active {
+    display:inline;
+    width: 175px;
+    float: left;
+    margin-top: -9px;
+    border: 1px solid yellow;
+}
\ No newline at end of file
diff --git a/client/src/Components/TeamCard.tsx b/client/src/Components/TeamCard.tsx
index 61dffd0..c449072 100644
--- a/client/src/Components/TeamCard.tsx
+++ b/client/src/Components/TeamCard.tsx
@@ -2,6 +2,7 @@ import './Css/TeamCard.css'
 import './Css/TeamStyles.css'
 import { useSortable } from '@dnd-kit/sortable'
 import {CSS} from '@dnd-kit/utilities'
+import TierBreak from './TierBreak'
 
 // TODO figure out how to make transitions work smoothly
 
@@ -23,8 +24,11 @@ export default function TeamCard(props: {id: string}) {
         opacity: isDragging ? 0.5 : 1
       };
     return (
+      <>
         <div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
             <h3>{props.id}</h3>
         </div>
+        <TierBreak />
+      </>
     )
 }
\ No newline at end of file
diff --git a/client/src/Components/TierBreak.tsx b/client/src/Components/TierBreak.tsx
new file mode 100644
index 0000000..c95f057
--- /dev/null
+++ b/client/src/Components/TierBreak.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import './Css/TierBreak.css'
+
+export default function TierBreak() {
+    const [isActive, setActive] = useState(false);
+    return (
+        <div className='tier-break'>
+            <div 
+                className={'triangle-right' + (isActive ? ' active' : '')}
+                onClick={() => setActive(!isActive)}
+            >
+            </div>
+            <hr className={'break-line' + (isActive ? ' active' : '')}/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/Pages/Build/Combined.tsx b/client/src/Pages/Build/Combined.tsx
index a37835a..84a16ba 100644
--- a/client/src/Pages/Build/Combined.tsx
+++ b/client/src/Pages/Build/Combined.tsx
@@ -49,14 +49,15 @@ export default function Combined() {
           })
         )
     return (
-        <div style={{
-            display: 'flex',
-            width: '600px',
-            height: '700px',
-            flexDirection: 'column',
-            flexWrap: 'wrap',
-            alignContent: 'space-between',
-            }}>
+        <div 
+            // style={{
+            // display: 'flex',
+            // flexDirection: 'column',
+            // flexWrap: 'wrap',
+            // height: '600px',
+            // width: '700px',
+            // }}
+        >
            <DndContext
                 sensors={sensors}
                 collisionDetection={closestCenter}
diff --git a/client/src/Pages/Build/SplitRegion.tsx b/client/src/Pages/Build/SplitRegion.tsx
index b28ce58..1a1f0e5 100644
--- a/client/src/Pages/Build/SplitRegion.tsx
+++ b/client/src/Pages/Build/SplitRegion.tsx
@@ -53,8 +53,9 @@ export default function SplitRegion() {
     return (
         <div style={{
             display: 'flex',
-            width: '800px',
-            justifyContent: 'space-between',
+            width: '500px',
+            gap: '30px',
+            margin: 'auto',
             }}>
             <DndContext
                 sensors={sensors}
diff --git a/client/src/Pages/CommunityRankings.tsx b/client/src/Pages/CommunityRankings.tsx
new file mode 100644
index 0000000..4f1f8be
--- /dev/null
+++ b/client/src/Pages/CommunityRankings.tsx
@@ -0,0 +1,12 @@
+import Nav from "../Components/Nav";
+
+export default function CommunityRanking() {
+    return (
+        <div className="page-content">
+        <div className="left-menus">
+        </div>
+        <h2>Community Rankings</h2>
+        <Nav current='community'/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/Pages/Css/Main.css b/client/src/Pages/Css/Main.css
index eed763a..71e5659 100644
--- a/client/src/Pages/Css/Main.css
+++ b/client/src/Pages/Css/Main.css
@@ -4,9 +4,9 @@
     justify-content: space-between;
 }
 
-.no-w {
+/* .no-w {
     width: auto;
-}
+} */
 
 .full-container {
     height: 900px;
diff --git a/client/src/Pages/Login.tsx b/client/src/Pages/Login.tsx
index 5e6e37f..79d18da 100644
--- a/client/src/Pages/Login.tsx
+++ b/client/src/Pages/Login.tsx
@@ -4,6 +4,8 @@ import Nav from '../Components/Nav'
 export default function Login() {
     return (
         <div className="page-content no-w">
+        <div className="left-menus">
+        </div>
         <LoginForm />
         <Nav current='login'/>
         </div>
diff --git a/client/src/Pages/Register.tsx b/client/src/Pages/Register.tsx
index 7432300..70b0ef2 100644
--- a/client/src/Pages/Register.tsx
+++ b/client/src/Pages/Register.tsx
@@ -4,6 +4,8 @@ import Nav from '../Components/Nav'
 export default function Login() {
     return (
         <div className="page-content no-w">
+        <div className="left-menus">
+        </div>
         <RegisterForm />
         <Nav current='login'/>
         </div>