diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 88bef1c..5a11552 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -1,7 +1,9 @@
+/* ----- Third Party Imports ----- */
+import { Link } from "react-router-dom";
+
 /* ----- Project Imports ----- */
 import "@/styles/details.css";
 
-
 function Details() {
   return (
     <article className="detailsContainer">
@@ -13,8 +15,8 @@ function Details() {
         <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
         <div className="detailsTextInnerContainer"><p className="detailsComment">Full Stack Developer</p></div>
         <div className="detailsInfoLinksContainer">
-          <a className="detailsInfoLinks" href="#tech">Expertise</a>
-          <a className="detailsInfoLinks" href="#projects">Projects</a>
+          <Link to="/expertise" className="detailsInfoLinks" >Expertise</Link>
+          <Link to="/projects" className="detailsInfoLinks" >Projects</Link>
         </div>
       </section>
       <section className="detailsSocialLinksContainer">
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c7353c2..8e9a44e 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 /* ----- Project Imports ----- */
 import "@/styles/header.css";
 
-
 function Header() {
   return (
     <header className="portfolioHeader">
diff --git a/src/pages/Expertise.jsx b/src/pages/Expertise.jsx
index 03c8a2d..d464b5a 100644
--- a/src/pages/Expertise.jsx
+++ b/src/pages/Expertise.jsx
@@ -2,16 +2,13 @@
 
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
-import Header from "@/components/Header.jsx";
-import Footer from "@/components/Footer.jsx";
-import Content from "@/components/Content.jsx";
+import Technologies from "@/components/Technologies";
 
 export function ExpertisePage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Technologies />
+    </main>
   );
 };
 
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 28ce6b9..587bf1e 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -3,14 +3,12 @@
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
 import Details from "@/components/Details.jsx";
-import "@/styles/content.css";
 
 export function HomePage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Details />
+    </main>
   );
 };
 
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index c3aeca2..6cc0ece 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -2,16 +2,13 @@
 
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
-import Header from "@/components/Header.jsx";
-import Footer from "@/components/Footer.jsx";
-import Content from "@/components/Content.jsx";
+import Projects from "@/components/Projects"
 
 export function ProjectsPage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Projects />
+    </main>
   );
 };
 
diff --git a/src/styles/App.css b/src/styles/App.css
index 5c0a1ab..4915d08 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -27,3 +27,12 @@ a:-webkit-any-link {
   height: 100%;
   width: 100%;
 }
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
+  width: 100%;
+  min-height: 100%;
+}
+
diff --git a/src/styles/content.css b/src/styles/content.css
deleted file mode 100644
index 3237dfd..0000000
--- a/src/styles/content.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.contentContainer {
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
-  width: 100%;
-  min-height: 100%;
-}
diff --git a/src/styles/details.css b/src/styles/details.css
index 972c700..8220fc5 100644
--- a/src/styles/details.css
+++ b/src/styles/details.css
@@ -37,7 +37,7 @@
 
 .detailsInfoLinks {
   color: white;
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
   font-size: 1.5rem;
   text-decoration: none;
 }
diff --git a/src/styles/header.css b/src/styles/header.css
index 297fbf0..447a1be 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -39,6 +39,12 @@ h1 {
   left: 0;
 }
 
+@media screen and (max-width: 750px) {
+  .portfolioSiteLink {
+    display: none;
+  }
+}
+
 .portfolioHeader h1 {
   font-size: 2rem;
 }