diff --git a/public/github.webp b/public/github.webp
new file mode 100644
index 0000000..269e414
Binary files /dev/null and b/public/github.webp differ
diff --git a/public/linkedin.webp b/public/linkedin.webp
new file mode 100644
index 0000000..51aec92
Binary files /dev/null and b/public/linkedin.webp differ
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 9813f6e..d7b7af7 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -5,9 +5,11 @@ import "@/styles/details.css";
 function Details() {
   return (
     <article className="detailsContainer">
-    <p>This be some details</p>
-    <a href="#tech">Technologies</a>
-    <a href="#projects">Projects</a>
+    <h1 className="detailsTitle">Paul Hughes</h1>
+    <a className="detailsLinks" href="#tech">Technologies</a>
+    <a className="detailsLinks" href="#projects">Projects</a>
+  <a href="https://github.com/II-Paulus-II" ><img className="detailsSocialLinks" src="/github.webp" alt="github" /></a>
+    <a href="https://www.linkedin.com/in/paul-andrew-hughes/" ><img className="detailsSocialLinks" src="/linkedin.webp" alt="linkedin" /></a>
     </article>
   );
 };
diff --git a/src/data/techdata.js b/src/data/techdata.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/details.css b/src/styles/details.css
index 5b4f80b..d2d0d3e 100644
--- a/src/styles/details.css
+++ b/src/styles/details.css
@@ -2,3 +2,20 @@
   padding: 3rem;
   min-height: 100vh;
 }
+
+.detailsTitle {
+
+
+}
+
+.detailsProfileImage {
+  
+}
+
+.detailsLinks {
+  
+}
+
+.detailsSocialLinks {
+
+}