diff --git a/src/App.js b/src/App.js
index bf2ffe1..ae89efd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
 import Shop from "./pages/Shop";
+import Socials from "./pages/Socials";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
@@ -24,6 +25,8 @@ function App() {
           <Route path="/" exact element={<Home />} />
           
           <Route path="/shop" exact element={<Shop />} />
+
+          <Route path="/socials" exact element={<Socials />} />
           
           <Route path="/about" exact element={<About />} />
          
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 3a88a1d..c6f2e89 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -17,14 +17,14 @@ function Navbar() {
             <img src={Logo} />
             <div className='hiddenLinks'>        
             <NavLink to="/"> Home </NavLink>
-            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
             <NavLink to="/contact"> Contact </NavLink>
             </div>
         </div>
         <div className='rightSide'>
             <NavLink to="/"> Home </NavLink>
-            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
             <NavLink to="/contact"> Contact </NavLink>
           <button onClick={toggleNavbar}>
diff --git a/src/pages/Socials.js b/src/pages/Socials.js
new file mode 100644
index 0000000..6b4747c
--- /dev/null
+++ b/src/pages/Socials.js
@@ -0,0 +1,37 @@
+import React from "react";
+import "../styles/Socials.css";
+
+function Socials() {
+  return (
+    <div className="socialBody">
+        <div className="social1">
+        
+        <h1> Just A Test </h1>
+        <p> Test Paragraph</p>  
+        
+        <div className="socialButton1">
+
+            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank">Join the Cord!</a>
+
+        </div>
+
+        </div>
+        
+        <div className="social2">
+
+            <h1> Just A Test 2</h1>
+            <p> Test Paragraph 2</p>
+
+            <div className="socialButton2">
+
+            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank">Join the Cord2!</a>
+            
+            </div>
+
+        </div>
+
+        </div>
+  );
+}
+
+export default Socials;
\ No newline at end of file
diff --git a/src/styles/Socials.css b/src/styles/Socials.css
new file mode 100644
index 0000000..46618b5
--- /dev/null
+++ b/src/styles/Socials.css
@@ -0,0 +1,25 @@
+.socialBody {
+    width: 100svw;
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    padding-left: 150px;
+    flex-direction: column;
+    background-color: gray;
+}
+
+.social1 {
+    border-radius: 15px;
+    height: auto;
+    width: 100px;
+    padding: 16px;
+    background-color: rgba(255, 0, 0, 0.16);
+}
+
+.social2 {
+    border-radius: 15px;
+    height: auto;
+    width: 100px;
+    padding: 16px;
+    background-color: rgba(255, 0, 0, 0.16);
+}
\ No newline at end of file