diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 633c980..22c0a66 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -1,11 +1,12 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/details.css";
 
 
 function Details() {
   return (
     <article className="detailsContainer">
     <p>This be some details</p>
+    <a href="#projects">Projects</a>
     </article>
   );
 };
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 8c86380..3ea49f7 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -1,10 +1,11 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/projects.css";
 
 
 function Projects() {
   return (
     <article className="projectsContainer">
+    <h2 id="projects">This is projects area title</h2>
     <p>This be some projects</p>
     </article>
   );
diff --git a/src/styles/content.css b/src/styles/content.css
index 7576729..b00d321 100644
--- a/src/styles/content.css
+++ b/src/styles/content.css
@@ -1,5 +1,6 @@
 .contentContainer {
   display: flex;
+  flex-direction: column;
   background: linear-gradient(109.6deg, rgb(0, 0, 0) 11.2%, rgb(11, 132, 145) 91.1%);
   min-height: 100%;
 }
diff --git a/src/styles/details.css b/src/styles/details.css
new file mode 100644
index 0000000..5b4f80b
--- /dev/null
+++ b/src/styles/details.css
@@ -0,0 +1,4 @@
+.detailsContainer {
+  padding: 3rem;
+  min-height: 100vh;
+}
diff --git a/src/styles/projects.css b/src/styles/projects.css
new file mode 100644
index 0000000..657b45d
--- /dev/null
+++ b/src/styles/projects.css
@@ -0,0 +1,4 @@
+.projectsContainer {
+  min-height: 100vh;
+  padding: 3rem;
+}