diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 90815f3..b2fdb45 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -41,3 +41,13 @@ a {
     color-scheme: dark;
   }
 }
+::-webkit-scrollbar {
+  width: 8px; /* vertical */
+  height: 8px; /* horizontal */
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: #34384c;
+}
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index 43b1626..fcbbab2 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -1,8 +1,12 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
+import variableStyles from "./variableStyles.module.css";
 const AddServices = () => {
+  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
+
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -70,24 +74,272 @@ const AddServices = () => {
                   </div>
                 </div>
               </div>
-              <div className={styles.resource}></div>
-              <div className={styles.additionalDetails}>
-                <div>
+              <div className={styles.resource}>
+                <div className={styles.projectDetailsHeader}>
+                  <p>Resource</p>
+                </div>
+                <div className={styles.resourceFields}>
                   <div>
-                    <div className={styles.header}>
-                      <p>Auto Scaling</p>
-                      <div></div>
+                    <div>
+                      <p>CPU Request (MB)</p>
+                      <input type="text" placeholder="100" />
                     </div>
                     <div>
-                      <div></div>
+                      <p>CPU Limit (MB)</p>
+                      <input type="text" placeholder="250" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Memory Request (MB)</p>
+                      <input type="text" placeholder="250" />
+                    </div>
+                    <div>
+                      <p>Memory Limit (MB)</p>
+                      <input type="text" placeholder="500" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.additionalDetails}>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Auto Scaling</p>
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Name</p>
+                            <input
+                              type="text"
+                              placeholder="Enter service name"
+                            />
+                          </div>
+                          <div>
+                            <p>Version</p>
+                            <input type="text" placeholder="Service version" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Readiness</p>
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Readiness Path</p>
+                            <input
+                              type="text"
+                              placeholder="Enter Readiness path"
+                            />
+                          </div>
+                          <div>
+                            <p>Readiness Port</p>
+                            <input
+                              type="text"
+                              placeholder="Enter Readiness port"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Liveness</p>
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Liveness Path</p>
+                            <input
+                              type="text"
+                              placeholder="Enter liveness path"
+                            />
+                          </div>
+                          <div>
+                            <p>Liveness Port</p>
+                            <input
+                              type="text"
+                              placeholder="Enter liveness port"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className={variableStyles.variables}>
+              <div className={variableStyles.variablesHeader}>
+                <div>
+                  <div className={variableStyles.searchContainer}>
+                    <div className={variableStyles.searchInputGroup}>
+                      <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <g clipPath="url(#clip0)">
+                          <path
+                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                          <path
+                            d="M18.7051 18.7061L14.0176 14.0186"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </g>
+                      </svg>
+                      <input type="text" placeholder="Search" />
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesHeaderDropDown}>
+                    <div
+                      className={variableStyles.variableHeaderDropdownButton}
+                      onClick={() =>
+                        setTriggerVariableDropDown(!triggerVariableDropDown)
+                      }
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                      >
+                        <path
+                          d="M12 5.29199V18.7087"
+                          stroke="white"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M5.29102 12H18.7077"
+                          stroke="white"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </div>
+                    {triggerVariableDropDown && (
+                      <div className={variableStyles.dropDownContainer}>
+                        <div>
+                          <p>Environment Variables</p>
+                        </div>
+                        <div>
+                          <p>Volumes</p>
+                        </div>
+                        <div>
+                          <p>Config Maps</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className={variableStyles.variablesContentContainer}>
+                <div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Environment Variables</p>
+                      </div>
+                      <div className={variableStyles.envVariablesHeader}>
+                        <div>
+                          <p>Key</p>
+                          <p>Value</p>
+                        </div>
+                      </div>
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No Environment Variables added</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Volumes</p>
+                      </div>
+                      <div className={variableStyles.envVariablesHeader}>
+                        <div>
+                          <p>Name</p>
+                          <p>Path</p>
+                          <p>Size/Type</p>
+                          <p>Access Mode</p>
+                          <p>Storage Class</p>
+                        </div>
+                      </div>
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No volume added</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Config maps</p>
+                      </div>
+
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No config map added</p>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div></div>
-                <div></div>
               </div>
             </div>
-            <div className={styles.variables}></div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
index 1cbad83..56bed09 100644
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -8,7 +8,7 @@
   display: flex;
   padding-top: 36px;
   flex-direction: column;
-
+  width: 550px;
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
@@ -46,7 +46,22 @@
   gap: 16px;
   align-self: stretch;
 }
-.fieldsCreateNew > div {
+.resource {
+  display: flex;
+  padding: 0 36px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.resourceFields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.fieldsCreateNew > div,
+.resourceFields > div {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,7 +76,8 @@
   gap: 4px;
   align-self: stretch;
 }
-.fieldsCreateNew > div > div {
+.fieldsCreateNew > div > div,
+.resourceFields > div > div {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -69,7 +85,8 @@
   gap: 12px;
   flex: 1 0 0;
 }
-.fieldsCreateNew > div > div p {
+.fieldsCreateNew > div > div p,
+.resourceFields > div > div p {
   color: #d2d3e1;
   font-size: 16px;
   font-style: normal;
@@ -77,11 +94,14 @@
   line-height: normal;
   letter-spacing: 0.16px;
 }
-.fieldsCreateNew > div > div p > span {
+.fieldsCreateNew > div > div p > span,
+.resourceFields > div > div p > span {
   color: #85869b;
 }
 .fieldsCreateNew > div > div input,
-.fieldsCreateNew > div > div select {
+.fieldsCreateNew > div > div select,
+.resourceFields > div > div input,
+.resourceFields > div > div select {
   display: flex;
   padding: 12px;
   flex-direction: column;
@@ -98,7 +118,8 @@
   line-height: normal;
   letter-spacing: 0.16px;
 }
-.fieldsCreateNew > div > div input::placeholder {
+.fieldsCreateNew > div > div input::placeholder,
+.resourceFields > div > div input::placeholder {
   color: #85869b;
 }
 .repositoryForm {
@@ -118,4 +139,113 @@
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.repositoryForm:hover {
+  background: rgba(83, 89, 242, 0.1);
+}
+.additionalDetails {
+  display: flex;
+  padding: 0 36px 50px 36px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetails > div {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+}
+.additionalDetails > div > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.additionalDetailsHeader div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+
+.additionalDetailsHeader p {
+  color: #d2d3e1;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.2px;
+}
+.additionalDetailsFields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+.additionalDetailsFields p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.additionalDetailsFields input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: 10px;
+  align-self: stretch;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  color: white;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.additionalDetailsFields input::placeholder {
+  color: #85869b;
 }
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
new file mode 100644
index 0000000..fa6f5c1
--- /dev/null
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -0,0 +1,232 @@
+.variables {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  background: #161720;
+}
+.variablesHeader {
+  display: flex;
+  padding: 8px 14px 8px 8px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: #161720;
+}
+.variablesHeader > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+.searchContainer > div {
+  display: flex;
+  width: 310px;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 9px;
+}
+.searchInputGroup {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.searchInputGroup input {
+  color: white;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  outline: none;
+  background-color: transparent;
+  border: none;
+}
+.searchInputGroup input::placeholder {
+  color: #85869b;
+}
+.variablesHeaderDropDown {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+  gap: 6px;
+}
+.variableHeaderDropdownButton {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  background: #5359f2;
+  border: 1px solid #5358f200;
+}
+.variableHeaderDropdownButton:hover {
+  border-radius: 6px;
+  border: 1px solid #5359f2;
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.dropDownContainer {
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  border-radius: 6px;
+  background: #2d3144;
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.dropDownContainer > div {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  text-wrap: nowrap;
+  width: 100%;
+}
+.dropDownContainer > div:hover {
+  background: #3c4159;
+}
+.dropDownContainer > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.variablesContentContainer {
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.variablesContentContainer > div {
+  display: flex;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  height: calc(100vh - 242px);
+  overflow: auto;
+  flex: 1 0 0;
+}
+.variablesContent {
+  display: flex;
+  padding-bottom: 50px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 4px;
+  background: #1d1e2a;
+}
+.environmentVariablesContainer {
+  display: flex;
+  padding-bottom: 50px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.environmentVariablesHeader {
+  display: flex;
+  padding: 12px 16px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.environmentVariablesHeader p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+  color: #fff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.envVariablesHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.envVariablesHeader > div {
+  display: flex;
+  padding: 12px 16px;
+  align-items: flex-start;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2e3f;
+}
+.envVariablesHeader > div p {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.variableList {
+  display: flex;
+  padding: 24px 16px 0 16px;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.emptyVariableList {
+  display: flex;
+  padding-bottom: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+}
+.emptyVariableList > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+.emptyVariableList > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+  color: #85869b;
+  text-align: center;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}