diff --git a/src/components/Content.jsx b/src/components/Content.jsx
index 718aa00..a3ea90f 100644
--- a/src/components/Content.jsx
+++ b/src/components/Content.jsx
@@ -1,5 +1,6 @@
 /* ----- Project Imports ----- */
 import Details from "@/components/Details.jsx";
+import Technologies from "@/components/Technologies.jsx";
 import Projects from "@/components/Projects.jsx"
 import "@/styles/content.css";
 
@@ -7,6 +8,7 @@ function Content() {
   return (
     <main className="contentContainer">
     <Details />
+    <Technologies />
     <Projects />
     </main>
   );
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 22c0a66..9813f6e 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -6,6 +6,7 @@ function Details() {
   return (
     <article className="detailsContainer">
     <p>This be some details</p>
+    <a href="#tech">Technologies</a>
     <a href="#projects">Projects</a>
     </article>
   );
diff --git a/src/components/Technologies.jsx b/src/components/Technologies.jsx
new file mode 100644
index 0000000..e9f1e68
--- /dev/null
+++ b/src/components/Technologies.jsx
@@ -0,0 +1,15 @@
+/* ----- Project Imports ----- */
+import "@/styles/technologies.css";
+
+
+function Technologies() {
+  return (
+    <article className="technologiesContainer">
+    <h2 id="tech">This is Tech area title</h2>
+    <p>This be some technologies</p>
+    </article>
+  );
+};
+
+export default Technologies;
+
diff --git a/src/styles/technologies.css b/src/styles/technologies.css
new file mode 100644
index 0000000..2317386
--- /dev/null
+++ b/src/styles/technologies.css
@@ -0,0 +1,4 @@
+.technologiesContainer {
+  min-height: 100vh;
+  padding: 3rem;
+}