diff --git a/src/assets/images/trash.svg b/src/assets/images/trash.svg
new file mode 100644
index 0000000..c25798b
--- /dev/null
+++ b/src/assets/images/trash.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76891 1.24138H4.23033C4.12831 1.24138 4.03048 1.28498 3.95834 1.36258C3.88621 1.44018 3.84568 1.54543 3.84568 1.65517V2.06897H6.15355V1.65517C6.15355 1.54543 6.11303 1.44018 6.04089 1.36258C5.96876 1.28498 5.87092 1.24138 5.76891 1.24138ZM7.30749 2.06897V1.65517C7.30749 1.21619 7.14539 0.795194 6.85685 0.484789C6.56831 0.174384 6.17696 0 5.76891 0H4.23033C3.82227 0 3.43092 0.174384 3.14239 0.484789C2.85385 0.795194 2.69175 1.21619 2.69175 1.65517V2.06897H0.576967C0.423946 2.06897 0.277192 2.13436 0.16899 2.25076C0.0607874 2.36716 0 2.52504 0 2.68966C0 2.85427 0.0607874 3.01215 0.16899 3.12855C0.277192 3.24495 0.423946 3.31034 0.576967 3.31034H0.816986L1.06085 9.62069C1.08566 10.2608 1.33952 10.8658 1.76933 11.3092C2.19915 11.7526 2.77167 12.0001 3.36718 12H6.63282C7.2282 11.9999 7.80052 11.7523 8.23017 11.3089C8.65983 10.8655 8.91357 10.2606 8.93838 9.62069L9.18301 3.31034H9.42303C9.57605 3.31034 9.72281 3.24495 9.83101 3.12855C9.93921 3.01215 10 2.85427 10 2.68966C10 2.52504 9.93921 2.36716 9.83101 2.25076C9.72281 2.13436 9.57605 2.06897 9.42303 2.06897H7.30749ZM8.02754 3.31034H1.97169L2.21402 9.56855C2.22633 9.88867 2.35321 10.1913 2.56813 10.4131C2.78305 10.6349 3.06936 10.7587 3.36718 10.7586H6.63282C6.93051 10.7585 7.21662 10.6346 7.43138 10.4128C7.64613 10.191 7.77291 9.88853 7.78521 9.56855L8.02754 3.31034ZM3.26871 4.96552V9.10345C3.26871 9.26807 3.3295 9.42594 3.4377 9.54234C3.54591 9.65874 3.69266 9.72414 3.84568 9.72414C3.9987 9.72414 4.14546 9.65874 4.25366 9.54234C4.36186 9.42594 4.42265 9.26807 4.42265 9.10345V4.96552C4.42265 4.8009 4.36186 4.64302 4.25366 4.52662C4.14546 4.41022 3.9987 4.34483 3.84568 4.34483C3.69266 4.34483 3.54591 4.41022 3.4377 4.52662C3.3295 4.64302 3.26871 4.8009 3.26871 4.96552ZM6.15355 4.34483C6.30657 4.34483 6.45332 4.41022 6.56153 4.52662C6.66973 4.64302 6.73052 4.8009 6.73052 4.96552V9.10345C6.73052 9.26807 6.66973 9.42594 6.56153 9.54234C6.45332 9.65874 6.30657 9.72414 6.15355 9.72414C6.00053 9.72414 5.85378 9.65874 5.74557 9.54234C5.63737 9.42594 5.57658 9.26807 5.57658 9.10345V4.96552C5.57658 4.8009 5.63737 4.64302 5.74557 4.52662C5.85378 4.41022 6.00053 4.34483 6.15355 4.34483Z" fill="#FF453A"/>
+</svg>
diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue
index ef2427d..5ef8565 100644
--- a/src/views/akopolio/Edit/akopolioEdit.vue
+++ b/src/views/akopolio/Edit/akopolioEdit.vue
@@ -64,56 +64,41 @@
       </div>
     </div>
 
-
-
-
-
-
     <div class="image-upload-container">
       <h2>활동 이미지 업로드</h2>
       <h3>최대 5장까지 가능해요!&nbsp;&nbsp;<span>{{ images.length }} / 5</span></h3>
       <label for="file-upload" class="custom-file-upload">
-
-
-      <i class="fas fa-upload"></i> 파일 선택
+        <i class="fas fa-upload"></i> 파일 선택
       </label>
       <input type="file" id="file-upload" multiple @change="handleFileChange" accept="image/*" />
 
       <div class="image-preview-container" v-if="images.length">
         <div class="image-card" v-for="(image, index) in images" :key="index">
           <div class="image-preview-card">
-            <img :src="image.previewUrl" :alt="image.name" class="image-preview" />
+            <img :src="image.previewUrl" :alt="`Uploaded Image ${index + 1}`" class="image-preview" />
             <button @click="removeImage(index)" class="delete-image-btn">X</button>
           </div>
         </div>
       </div>
+    </div>
 
-  </div>
-
-
-
-
-
-
-
-
-
-
-    <!-- 저장 버튼 -->
-    <button @click="saveData" class="save-button">저장하기</button>
-    <MainFooter />
-  </div>
+    <div class="button-container">
+        <button @click="saveData" class="save-button">저장하기</button>
+      </div>
+      <MainFooter />
+   </div> 
 </template>
 
 <script src="./edit.js"></script>
 
 <style scoped>
+@import '../../../assets/fonts/fonts.css';
 .container {
   width: 395px;
   max-width: 500px;
   margin: 4rem auto;
   padding: 20px;  
-  background-color: #ffe8d1;
+  background-color: #fae8da;
   min-height: calc(100vh - 120px); /* 헤더와 푸터를 고려한 페이지 높이 조정 */
 }
 
@@ -131,6 +116,7 @@
 
 .activity-name-container {
   margin-bottom: 20px; 
+
 }
 
 
@@ -140,7 +126,7 @@ textarea {
   width: 100%;
   padding: 10px;
   margin-top: 5px;
-  background-color: #fff3e6;
+  background-color: white;
   border-radius: 5px;
   resize: none;
   font-size: 13px;
@@ -149,17 +135,15 @@ textarea {
 .image-upload-container,
 .star-box,
 .pmi-box {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .activity-info{
-  background-color: #fff3e6;
+  background-color: white;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
 }
@@ -178,19 +162,18 @@ button {
   border-radius: 40px;
   background-color: white;
   transition: background-color 0.3s;
+  border: 1px solid #eec092;
 }
 
 button.active {
-  background-color: #F6B87A;
-  color: white;
+  background-color: #f6b87a;
 }
 
 /* 분야 설정 박스 */
 .category-box {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 15px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .category-label {
@@ -201,41 +184,81 @@ button.active {
 .tag-badge {
   display: inline-block;
   margin-left: 10px;
-  background-color: #F6B87A;
-  color: white;
+  background-color: #f6b87a;
+  color: black;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 13px;
 }
 
-/* 저장 버튼 */
+.button-container {
+  display: flex;
+  justify-content: center;       
+}
+
 .save-button {
-  width: 100%;
-  padding: 15px;
+  width: 160px;
+  margin-top: 20px;
+  padding-left: 16px;  
+  padding-right: 16px; 
+  padding-top: 8px;    
+  padding-bottom: 8px; 
   background-color: #F6B87A;
-  color: white;
-  border: none;
-  border-radius: 10px;
-  font-size: 16px;
-  cursor: pointer;
-  ;
+  color: black;
+  font-size: 0.875rem;  
+  font-weight: 500;  
+  border-radius: 9999px; 
+  transition: background-color 0.3s ease;
+  margin-bottom: 20px;
 }
 
 .save-button:hover {
-  background-color: #f4c08c;
+  background-color: #e5a769;
 }
 
-h3 {
-  font-size: 15px; 
-  color: #FF7F00;
+.experience-container h3,
+.pmi-container h3 {
+  font-size: 15px;
+  color: #ff7f00;
+  margin-bottom: 10px;
   margin-top: 10px;
+  white-space: nowrap;
+  padding: 0;
+}
+
+h3{
+  font-size: 15px;
+  color: #ff7f00;
+  margin: 0;
+  white-space: nowrap;
+  padding: 0;
+
 }
 
 h2 {
+  font-size: 16px;
+  color: #ff7f00;
+  margin-bottom: 10px;
+  padding: 0;
+}
+
+.category-box h2{
   margin: 0;
-  font-size: 15px;  
 }
 
+p {
+  margin:0;
+  font-size: 14px;
+  word-break: break-word;
+  padding: 0;
+}
+
+.experience-container p,
+.pmi-container p {
+  margin-bottom: 15px;
+}
+
+
 label {
   font-size: 15px;  
 }
@@ -285,18 +308,19 @@ input[type="file"] {
 
 /* 커스텀 버튼 스타일 */
 .custom-file-upload {
-  background-color: white; /* 배경색 */
-  color: #f3ab62; /* 글자색 */
-  padding: 10px 128px; /* 버튼 크기 */
-  font-size: 13px; /* 글자 크기 */
+  background-color: #faf5f0; 
+  color: #f3ab62;
+  padding: 10px 128px; 
+  font-size: 13px;
   border-radius: 5px; 
   cursor: pointer; 
+  margin-top: 10px;
+  transition: background-color 0.3s ease; 
   margin-bottom: 10px;
-  transition: background-color 0.3s ease; /* 마우스 오버 시 부드럽게 색상 변화 */
 }
 
 .custom-file-upload:hover {
-  background-color: #f6e3d2; /* 마우스를 올렸을 때 배경색 변경 */
+  background-color: #f5eadf; 
 }
 
 
diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js
index ed143c8..308ebb3 100644
--- a/src/views/akopolio/Edit/edit.js
+++ b/src/views/akopolio/Edit/edit.js
@@ -1,8 +1,8 @@
 import MainHeader from '../../../components/layout/Header.vue';
 import MainFooter from '../../../components/layout/Footer.vue';
-import { ref, computed, onMounted } from 'vue'; // onMounted 추가
-import { useRoute } from 'vue-router'; // useRoute 추가
-
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import axios from 'axios';
 
 export default {
   components: {
@@ -11,7 +11,7 @@ export default {
   },
   setup() {
     const route = useRoute();
-    const portfolioId = route.params.id; // URL에서 포트폴리오 ID 가져오기
+    const portfolioId = route.params.id;
     const activityName = ref('');
     const activityDate = ref('');
     const selectedTags = ref([]);
@@ -20,8 +20,9 @@ export default {
       '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트',
       '연구', '학생회', '기타',
     ]);
-    const images = ref([]); // 기존 이미지 배열
-    const newImages = ref([]); // 새로 추가된 이미지 파일
+    const images = ref([
+      { previewUrl: "https://via.placeholder.com/150" } // 예시 이미지
+    ]);
     const star = ref({
       situation: '',
       task: '',
@@ -35,7 +36,7 @@ export default {
     });
     const isDropdownOpen = ref(false);
 
-     // 드롭다운 토글
+    // 드롭다운 토글
     const toggleDropdown = () => {
       isDropdownOpen.value = !isDropdownOpen.value;
     };
@@ -74,80 +75,99 @@ export default {
         selectedTags.value = data.selectedTags || [];
         star.value = data.star || { situation: '', task: '', action: '', result: '' };
         pmi.value = data.pmi || { plus: '', minus: '', interesting: '' };
-        images.value = data.images || []; 
+        images.value = data.images || [];
       } catch (error) {
         console.error('Error fetching portfolio:', error);
         alert('포트폴리오를 불러오는 중 오류가 발생했습니다.');
       }
     };
 
-     // 이미지 삭제
-     const deleteImage = async (imageUrl) => {
-      try {
-        const response = await fetch(
-          `${process.env.VUE_APP_BE_API_URL}/api/images`, // 예시: 백엔드에서 이미지 삭제 엔드포인트
-          {
-            method: 'DELETE',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ imageUrl }),
-          }
+    const handleFileChange = (event) => {
+      const selectedFiles = Array.from(event.target.files);
+      if (images.value.length + selectedFiles.length > 5) {
+        alert('최대 5개의 이미지만 업로드할 수 있습니다.');
+        return;
+      }
+    
+      const newImagesPromises = selectedFiles.map((file) => {
+        const previewUrl = URL.createObjectURL(file);
+        const imageElement = new Image();
+        imageElement.src = previewUrl;
+    
+        return new Promise((resolve) => {
+          imageElement.onload = () => {
+            const aspectRatio = imageElement.width / imageElement.height;
+            let containerWidth, containerHeight;
+    
+            if (aspectRatio > 1) {
+              containerWidth = '300px';
+              containerHeight = `${300 / aspectRatio}px`;
+            } else {
+              containerWidth = `${300 * aspectRatio}px`;
+              containerHeight = '300px';
+            }
+    
+            resolve({
+              file,
+              name: file.name,
+              size: file.size,
+              previewUrl,
+              containerWidth,
+              containerHeight,
+            });
+          };
+        });
+      });
+    
+      Promise.all(newImagesPromises).then((newImages) => {
+        const uniqueNewImages = newImages.filter(
+          (newImage) =>
+            !images.value.some(
+              (existingImage) => existingImage.previewUrl === newImage.previewUrl
+            )
         );
     
-        if (!response.ok) {
-          throw new Error(`Failed to delete image: ${response.statusText}`);
+        if (uniqueNewImages.length === 0) {
+          alert('이미 선택된 이미지입니다.');
+          return;
         }
     
-        images.value = images.value.filter((image) => image !== imageUrl);
-        alert('이미지가 삭제되었습니다.');
-      } catch (error) {
-        console.error('Error deleting image:', error);
-        alert('이미지 삭제 중 오류가 발생했습니다.');
-      }
+        images.value = [...images.value, ...uniqueNewImages];
+      });
     };
     
-
-    // 새 이미지 추가
-    const addImage = async (file) => {
-      try {
-        // 프리사인드 URL 요청
-        const response = await fetch(
-          `${process.env.VUE_APP_BE_API_URL}/api/upload`,
-          {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ fileName: file.name }),
-          }
-        );
-
-        if (!response.ok) {
-          throw new Error(`Failed to get presigned URL: ${response.statusText}`);
+    const removeImage = (index) => {
+      URL.revokeObjectURL(images.value[index].previewUrl);
+      images.value.splice(index, 1);
+    };
+    
+    const uploadImages = async () => {
+      const uploadedUrls = [];
+      for (const image of images.value) {
+        try {
+          const { data } = await axios.post(
+            `${process.env.VUE_APP_BE_API_URL}/api/get-presigned-url`,
+            {
+              fileName: image.name,
+              fileType: image.file.type,
+            }
+          );
+    
+          await axios.put(data.url, image.file, {
+            headers: { 'Content-Type': image.file.type },
+          });
+    
+          const uploadedUrl = data.url.split('?')[0];
+          uploadedUrls.push(uploadedUrl);
+        } catch (error) {
+          console.error('Error uploading image:', error);
+          alert('이미지 업로드 중 오류가 발생했습니다.');
         }
-
-        const { uploadUrl, fileUrl } = await response.json();
-
-        // 이미지 업로드
-        await fetch(uploadUrl, {
-          method: 'PUT',
-          headers: {
-            'Content-Type': file.type,
-          },
-          body: file,
-        });
-
-        // 업로드된 이미지 URL 추가
-        images.value.push(fileUrl);
-        alert('이미지가 성공적으로 추가되었습니다.');
-      } catch (error) {
-        console.error('Error adding image:', error);
-        alert('이미지 추가 중 오류가 발생했습니다.');
       }
     };
+    
 
-
+    // 저장 버튼 클릭 시 서버에 반영
     const saveData = async () => {
       if (!isFormComplete.value) {
         alert('모든 필드를 입력해주세요.');
@@ -155,11 +175,11 @@ export default {
       }
 
       try {
-        // 백엔드 API 호출
+        // 수정된 포트폴리오 데이터와 이미지 URL을 서버에 전송
         const response = await fetch(
-          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`, // 백엔드 URL
+          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`,
           {
-            method: 'PUT', // 수정이므로 PUT 메서드 사용
+            method: 'PUT',
             headers: {
               'Content-Type': 'application/json',
             },
@@ -169,7 +189,7 @@ export default {
               selectedTags: selectedTags.value,
               star: star.value,
               pmi: pmi.value,
-              images: images.value,
+              images: images.value.map(image => image.name), // 서버에 전달할 이미지 파일 이름만 전달
             }),
           }
         );
@@ -195,10 +215,10 @@ export default {
       );
     });
 
-      // 컴포넌트 마운트 시 데이터 가져오기
-      onMounted(() => {
-        fetchPortfolioById();
-      });
+    // 컴포넌트 마운트 시 데이터 가져오기
+    onMounted(() => {
+      fetchPortfolioById();
+    });
 
     return {
       activityName,
@@ -209,12 +229,12 @@ export default {
       star,
       pmi,
       images,
-      newImages,
       toggleDropdown,
       toggleTag,
       autoResize,
-      deleteImage,
-      addImage,
+      handleFileChange, 
+      removeImage,      
+      uploadImages,     
       saveData,
       isFormComplete
     };
diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue
index 4c170c8..f9b80b4 100644
--- a/src/views/akopolio/create/akopolioCreate.vue
+++ b/src/views/akopolio/create/akopolioCreate.vue
@@ -109,24 +109,25 @@
           </div>
         </div>
       </div>
-
-  </div>
-
-    <!-- Save Button -->
-    <button @click="saveData" class="save-button">저장하기</button>
-    <MainFooter />
-  </div>
+    </div>  
+    
+    <div class="button-container">
+        <button @click="saveData" class="save-button">저장하기</button>
+      </div>
+      <MainFooter />
+   </div> 
 </template>
 
 <script src="./create.js"></script>
 
 <style scoped>
+@import '../../../assets/fonts/fonts.css';
 .container {
   width: 395px;
   max-width: 500px;
   margin: 4rem auto;
   padding: 20px;  
-  background-color: #ffe8d1;
+  background-color: #fae8da;
   min-height: calc(100vh - 120px); /* 헤더와 푸터를 고려한 페이지 높이 조정 */
 }
 
@@ -153,7 +154,7 @@ textarea {
   width: 100%;
   padding: 10px;
   margin-top: 5px;
-  background-color: #fff3e6;
+  background-color: white;
   border-radius: 5px;
   resize: none;
   font-size: 13px;
@@ -162,17 +163,15 @@ textarea {
 .image-upload-container,
 .star-box,
 .pmi-box {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .activity-info{
-  background-color: #fff3e6;
+  background-color: white;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
 }
@@ -191,19 +190,18 @@ button {
   border-radius: 40px;
   background-color: white;
   transition: background-color 0.3s;
+  border: 1px solid #eec092;
 }
 
 button.active {
-  background-color: #F6B87A;
-  color: white;
+  background-color: #f6b87a;
 }
 
 /* 분야 설정 박스 */
 .category-box {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 15px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .category-label {
@@ -214,27 +212,36 @@ button.active {
 .tag-badge {
   display: inline-block;
   margin-left: 10px;
-  background-color: #F6B87A;
-  color: white;
+  background-color: #f6b87a;
+  color: black;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 13px;
 }
 
+.button-container {
+  display: flex;
+  justify-content: center;       
+}
+
 .save-button {
-  width: 100%;
-  padding: 15px;
+  width: 160px;
+  margin-top: 20px;
+  padding-left: 16px;  
+  padding-right: 16px; 
+  padding-top: 8px;    
+  padding-bottom: 8px; 
   background-color: #F6B87A;
-  color: white;
-  border: none;
-  border-radius: 10px;
-  font-size: 16px;
-  cursor: pointer;
-  ;
+  color: black;
+  font-size: 0.875rem;  
+  font-weight: 500;  
+  border-radius: 9999px; 
+  transition: background-color 0.3s ease;
+  margin-bottom: 20px;
 }
 
 .save-button:hover {
-  background-color: #f4c08c;
+  background-color: #e5a769;
 }
 
 h3 {
@@ -245,7 +252,8 @@ h3 {
 
 h2 {
   margin: 0;
-  font-size: 15px;  
+  color: #FF7F00;
+  font-size: 16px;  
 }
 
 label {
@@ -296,18 +304,19 @@ input[type="file"] {
 
 /* 커스텀 버튼 스타일 */
 .custom-file-upload {
-  background-color: white; /* 배경색 */
-  color: #f3ab62; /* 글자색 */
-  padding: 10px 128px; /* 버튼 크기 */
-  font-size: 13px; /* 글자 크기 */
+  background-color: #faf5f0; 
+  color: #f3ab62;
+  padding: 10px 128px; 
+  font-size: 13px;
   border-radius: 5px; 
   cursor: pointer; 
+  margin-top: 10px;
+  transition: background-color 0.3s ease; 
   margin-bottom: 10px;
-  transition: background-color 0.3s ease; /* 마우스 오버 시 부드럽게 색상 변화 */
 }
 
 .custom-file-upload:hover {
-  background-color: #f6e3d2; /* 마우스를 올렸을 때 배경색 변경 */
+  background-color: #f5eadf; 
 }
 
 </style>
\ No newline at end of file
diff --git a/src/views/akopolio/detail/akopolioDetail.vue b/src/views/akopolio/detail/akopolioDetail.vue
index b331910..d267656 100644
--- a/src/views/akopolio/detail/akopolioDetail.vue
+++ b/src/views/akopolio/detail/akopolioDetail.vue
@@ -5,23 +5,26 @@
       <div class="header-content">
         <div class="action-buttons">
           <button class="edit-button" @click="editPortfolio">수정하기</button>
-          <button class="delete-button" @click="handleDeletePortfolio">삭제하기</button>
+          <button class="delete-button" @click="handleDeletePortfolio">
+            삭제하기
+            <img src="@/assets/images/trash.svg" alt="Delete File" class="delete-file-icon" />
+          </button>
         </div>
       </div>
     </div>
 
     <!-- 포트폴리오 정보 표시 -->
     <div class="activity-info">
-      <div class="row">
-        <h3>활동명</h3>
+      <div class="row activity-box">
+        <h2>활동명</h2>
         <p>{{ portfolio ? portfolio.title : '' }}</p>
       </div>
-      <div class="row">
-        <h3>활동일</h3>
-        <p>{{ portfolio ? portfolio.createdDate : '' }}</p>
-      </div>
-      <div class="row">
-        <h3>분야 설정</h3>
+    <div class="row activity-box activity-date">
+      <h2>활동일</h2>
+      <p>{{ portfolio ? portfolio.createdDate : '' }}</p>
+    </div>
+      <div class="row activity-box">
+        <h2>분야 설정</h2>
         <div class="tags">
           <span v-for="(tag, index) in (portfolio ? portfolio.tags : [])" :key="index" class="tag-badge">
             {{ tag }}
@@ -67,11 +70,13 @@
       <p>{{ portfolio && portfolio.pmi ? portfolio.pmi.interesting : '내용이 없습니다.' }}</p>
     </div>
 
-    <div class="image-preview-container" v-if="images.length">
+    <div class="image-upload-container">
       <h2>활동 이미지</h2>
-      <div class="image-card" v-for="(image, index) in images" :key="index">
-        <div class="image-preview-card">
-          <img :src="image.presignedUrl" :alt="'Image ' + (index + 1)" class="image-preview" />
+      <div class="image-preview-container" v-if="images.length">
+        <div class="image-card" v-for="(image, index) in images" :key="index">
+          <div class="image-preview-card">
+            <img :src="image" :alt="`Uploaded Image ${index + 1}`" class="image-preview" />
+          </div>
         </div>
       </div>
     </div>
@@ -83,11 +88,12 @@
 <script src="./detail.js"></script>
 
 <style scoped>
+@import '../../../assets/fonts/fonts.css';
 .akopolio-detail {
   width: 395px;
   margin: 4rem auto;
   padding: 20px;
-  background-color: #ffe8d1;
+  background-color: #fae8da;
   min-height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
@@ -109,91 +115,123 @@
 
 .action-buttons {
   display: flex;
-  gap: 10px;
+  gap: 5px;
   margin-left: auto;
 }
 
 .edit-button,
 .delete-button {
-  padding: 6px 10px;
+  display: flex;
+  padding: 5px 10px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
-  font-size: 11px;
+  font-size: 10px;
+  gap: 4px;
 }
 
 .edit-button {
-  background-color: #f6b87a;
-  color: white;
+  background-color: white;
+  color: black;
 }
 
 .delete-button {
-  background-color: #ff4d4d;
-  color: white;
+  background-color: white;
+  color: red;
 }
 
+.image-upload-container,
 .experience-container,
-.pmi-container,
-.image-preview-container {
-  background-color: #fff3e6;
+.pmi-container {
+  background-color: white;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
 }
 
 .activity-info {
-  background-color: #fff3e6;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   gap: 15px;
+  justify-content: center; 
+  align-items: center; 
+}
+
+.activity-box {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column; 
+  gap: 10px;
+  width: 100%; 
 }
 
 .row {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start; 
   align-items: center;
   gap: 10px;
-  white-space: nowrap;
+  width: 100%; 
 }
 
+
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
+  padding: 0;
 }
 
 .tag-badge {
+  display: inline-block;
   background-color: #f6b87a;
-  color: white;
+  color: black;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 13px;
 }
 
-h3 {
+.experience-container h3,
+.pmi-container h3 {
+  font-size: 15px;
+  color: #ff7f00;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  white-space: nowrap;
+  padding: 0;
+}
+
+h3{
   font-size: 15px;
   color: #ff7f00;
   margin: 0;
   white-space: nowrap;
+  padding: 0;
+
 }
 
 h2 {
-  font-size: 15px;
+  font-size: 16px;
   color: #ff7f00;
   margin-bottom: 10px;
+  padding: 0;
+
 }
 
 p {
-  margin: 5px 0;
+  margin:0;
   font-size: 14px;
   word-break: break-word;
+  padding: 0;
+}
+
+.experience-container p,
+.pmi-container p {
+  margin-bottom: 15px;
 }
 
 .image-preview-container {
@@ -201,7 +239,6 @@ p {
   flex-wrap: wrap;
   gap: 10px;
   width: 100%;
-  margin-bottom: 20px;
 }
 
 .image-preview-card {
diff --git a/src/views/akopolio/detail/detail.js b/src/views/akopolio/detail/detail.js
index b878b51..5a59665 100644
--- a/src/views/akopolio/detail/detail.js
+++ b/src/views/akopolio/detail/detail.js
@@ -9,12 +9,34 @@ export default {
     MainFooter,
   },
   setup() {
+    const defaultPortfolio = {
+      title: '예시 활동명',
+      createdDate: '2023-11-27',
+      tags: ['전공', '프로젝트'],
+      star: {
+        situation: '이 프로젝트는 동아리 활동의 일환으로 시작되었습니다.',
+        task: '팀원들과 함께 웹사이트 개발을 진행해야 했습니다.',
+        action: 'Vue.js와 Firebase를 활용해 프로젝트를 완성했습니다.',
+        result: '사용자 수가 200명 이상 증가했습니다.',
+      },
+      pmi: {
+        plus: '새로운 기술을 배워서 유익했습니다.',
+        minus: '일정 관리가 어려웠습니다.',
+        interesting: '사용자 피드백이 매우 흥미로웠습니다.',
+      },
+      images: [
+        'https://via.placeholder.com/300.png?text=Image+1',
+        'https://via.placeholder.com/300.png?text=Image+2',
+      ],      
+    };
+  
     const portfolio = ref(null); // 포트폴리오 데이터 저장
     const images = ref([]); // 업로드된 이미지 또는 미리보기 저장
+  
     const route = useRoute(); // route 사용
     const router = useRouter(); // router 사용
     const portfolioId = route.params.id; // route에서 id 값 가져오기
-
+  
     // 포트폴리오 데이터 가져오기
     const fetchPortfolioById = async (id) => {
       try {
@@ -22,24 +44,27 @@ export default {
         const response = await fetch(
           `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`
         );
-        
+  
         if (!response.ok) {
           throw new Error(`Failed to fetch portfolio: ${response.statusText}`);
         }
-
-        portfolio.value = await response.json();
+  
+        const data = await response.json();
+        portfolio.value = data || defaultPortfolio; // 데이터가 없으면 예시 데이터 사용
         images.value = portfolio.value.images || [];
       } catch (error) {
         console.error('Error fetching portfolio:', error);
-        alert('포트폴리오를 가져오는 중 오류가 발생했습니다.');
+        alert('포트폴리오를 가져오는 중 오류가 발생했습니다. 예시 데이터를 표시합니다.');
+        portfolio.value = defaultPortfolio; // 오류 시 예시 데이터 사용
+        images.value = defaultPortfolio.images;
       }
     };
-
+  
     // 수정 페이지로 이동
     const editPortfolio = () => {
       router.push(`/akopolio/edit/${portfolioId}`);
     };
-
+  
     // 포트폴리오 삭제
     const handleDeletePortfolio = async () => {
       if (confirm('정말 삭제하시겠습니까?')) {
@@ -49,11 +74,11 @@ export default {
             `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`,
             { method: 'DELETE' }
           );
-          
+  
           if (!response.ok) {
             throw new Error(`Failed to delete portfolio: ${response.statusText}`);
           }
-
+  
           alert('삭제되었습니다.');
           router.push('/akopolio/main');
         } catch (error) {
@@ -62,12 +87,12 @@ export default {
         }
       }
     };
-
+  
     // 컴포넌트 마운트 시 데이터 가져오기
     onMounted(() => {
       fetchPortfolioById(portfolioId);
     });
-
+  
     return {
       portfolio,
       images,
diff --git a/src/views/akopolio/main/akopolioMain.vue b/src/views/akopolio/main/akopolioMain.vue
index 7002724..6f49fde 100644
--- a/src/views/akopolio/main/akopolioMain.vue
+++ b/src/views/akopolio/main/akopolioMain.vue
@@ -54,13 +54,13 @@
       >
         <div class="portfolio-content">
           <h3 class="portfolio-title">{{ item.title }}</h3>
-          <p class="created-date">작성일: {{ item.createdDate }}</p>
-        </div>
-        <div class="portfolio-tags">
-          <span v-for="tag in item.tags" :key="tag" class="portfolio-tag">
-            {{ tag }}
-          </span>
+          <div class="portfolio-tags">
+            <span v-for="tag in item.tags" :key="tag" class="portfolio-tag">
+              {{ tag }}
+            </span>
+          </div>
         </div>
+        <p class="created-date">활동일: {{ item.createdDate }}</p>
       </div>
     </div>
 
@@ -88,20 +88,23 @@
 <script src="./main.js"></script>
 
 <style scoped>
+@import '../../../assets/fonts/fonts.css';
+
 .akopolio-page {
   width: 395px;
   max-width: 500px;
   margin: 4rem auto;
   padding: 20px;
-  background-color: #ffe8d1;
+  background-color: #fae8da;
   min-height: calc(100vh - 120px);
   position: relative;
 }
 
 h3 {
   font-size: 15px;
-  color: #ff7f00;
+  color: black;
   margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 h2 {
@@ -109,14 +112,24 @@ h2 {
   font-size: 15px;
 }
 
+.no-data {
+  text-align: center; 
+  padding: 50px 0;
+}
+
+.no-data h2 {
+  font-size: 0.7rem; 
+  color: #777; 
+}
+
 input[type='text'],
 input[type='date'] {
-  background-color: #ffe8d1;
+  background-color: white;
   border: 1px solid #eec092;
   border-radius: 10px;
   padding: 5px;
   width: 100%;
-  font-size: 15px;
+  font-size: 14px;
 }
 
 .date-picker input[type='date'] {
@@ -141,27 +154,25 @@ button {
   border-radius: 40px;
   background-color: white;
   transition: background-color 0.3s;
+  border: 1px solid #eec092;
 }
 
 button.active {
   background-color: #f6b87a;
-  color: white;
 }
 
 .filter-container {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 15px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin-top: 10px;
   margin-bottom: 10px;
   width: 100%;
 }
 .category-box {
-  background-color: #fff3e6;
+  background-color: white;
   padding: 15px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin-top: 0px;
   margin-bottom: 40px;
   width: 100%;
@@ -176,7 +187,7 @@ button.active {
   display: inline-block;
   margin-left: 10px;
   background-color: #f6b87a;
-  color: white;
+  color: black;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 13px;
@@ -192,18 +203,17 @@ button.active {
   background-color: white;
   border: 1px solid #f0f0f0;
   border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: transform 0.2s;
+  position: relative; 
   
 }
 
 .portfolio-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
   cursor: pointer;
 }
 
@@ -214,14 +224,16 @@ button.active {
 }
 
 .portfolio-title {
-  font-size: 18px;
-  font-weight: bold;
+  font-size: 16px;
   margin: 0;
 }
 
 .created-date {
-  font-size: 14px;
+  font-size: 13px;
   color: #666;
+  text-align: right;
+  align-self: flex-end; 
+  margin: 0;
 }
 
 .portfolio-tags {
@@ -232,10 +244,11 @@ button.active {
 
 .portfolio-tag {
   background-color: #ffc68d;
-  color: white;
+  color: black;
   padding: 5px 10px;
   border-radius: 20px;
-  font-size: 14px;
+  font-size: 13px;
+  margin-top: 5px;
 }
 
 .header {
@@ -261,18 +274,18 @@ button.active {
 
 .reset-btn {
   margin-left: 10px; /* 오른쪽 여백 */
-  background-color: #ff8c42;
-  color: white;
+  background-color: #f4b28c;
+  color: black;
   border: none;
   padding: 6px 11px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 13px;
   border-radius: 8px;
 }
 
 .reset-btn:hover {
-  background-color: #ffa768;
+  background-color: #f2a579;
 }
 
 .floating-btn {
@@ -287,10 +300,14 @@ button.active {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.floating-btn:hover {
+  cursor: pointer;
+  background-color: #eaa279;
+}
+
 
 .floating-btn img {
   width: 30px;
diff --git a/src/views/akopolio/main/main.js b/src/views/akopolio/main/main.js
index b53f91f..1d5520f 100644
--- a/src/views/akopolio/main/main.js
+++ b/src/views/akopolio/main/main.js
@@ -1,3 +1,4 @@
+import axios from 'axios'; 
 import PaginationNav from '../paginationNav.vue';
 import MainHeader from '../../../components/layout/Header.vue';
 import MainFooter from '../../../components/layout/Footer.vue';
@@ -23,13 +24,22 @@ export default {
         '학생회', '기타'
       ],
       isDropdownOpen: false,
-      portfolioList: [
-        // 백엔드 API로 받아오는 데이터로 대체 필요
-        { id: 1, title: '융합프로그래밍', createdDate: '2024-11-01', tags: ['전공'] },
-        { id: 2, title: '오픈소스소프트웨어 실습', createdDate: '2024-10-15', tags: ['전공', '프로젝트'] },
-        { id: 3, title: '성남시 IT 서비스 스터디', createdDate: '2024-09-10', tags: ['스터디'] },
-        // 여기에 더 많은 포트폴리오 데이터가 추가될 수 있음
-      ]
+      portfolioList: [], // 초기 포트폴리오는 빈 배열로 설정
+      defaultPortfolioList: [
+        {
+          id: 1,
+          title: '예시 포트폴리오 1',
+          createdDate: '2023-01-01',
+          tags: ['전공', '프로젝트'],
+        },
+        {
+          id: 2,
+          title: '예시 포트폴리오 2',
+          createdDate: '2023-02-15',
+          tags: ['스터디', '연구'],
+        },
+        // 추가 예시 데이터
+      ],
     };
   },
   computed: {
@@ -51,13 +61,19 @@ export default {
       }
 
       // 날짜 필터 적용
-      if (this.startDate && this.endDate) {
+      if (this.startDate || this.endDate) {
         filteredList = filteredList.filter(item => {
           const itemDate = new Date(item.createdDate);
-          return (
-            itemDate >= new Date(this.startDate) &&
-            itemDate <= new Date(this.endDate)
-          );
+          if (this.startDate && !this.endDate) {
+            return itemDate >= new Date(this.startDate);
+          } else if (!this.startDate && this.endDate) {
+            return itemDate <= new Date(this.endDate);
+          } else {
+            return (
+              itemDate >= new Date(this.startDate) &&
+              itemDate <= new Date(this.endDate)
+            );
+          }
         });
       }
 
@@ -68,18 +84,8 @@ export default {
     },
 
     totalPages() {
-      const totalFilteredItems = this.portfolioList.filter(item => {
-        return (
-          (!this.searchQuery || item.title.includes(this.searchQuery)) &&
-          (this.selectedTags.length === 0 || 
-            this.selectedTags.every(tag => item.tags.includes(tag))) &&
-          (!this.startDate || !this.endDate ||
-            (new Date(item.createdDate) >= new Date(this.startDate) &&
-             new Date(item.createdDate) <= new Date(this.endDate)))
-        );
-      }).length;
-      return Math.ceil(totalFilteredItems / this.itemsPerPage);
-    }
+      return Math.ceil(this.portfolioList.length / this.itemsPerPage);
+    },
   },
   methods: {
     toggleDropdown() {
@@ -93,11 +99,11 @@ export default {
       } else {
         this.selectedTags.push(tag);
       }
-      this.applyFilters(); // 태그 변경 시 필터 적용
+      this.applyFilters();
     },
 
     applyFilters() {
-      this.currentPage = 1; // 필터 적용 시 첫 페이지로 초기화
+      this.currentPage = 1;
     },
 
     handlePageChanged(newPage) {
@@ -117,17 +123,21 @@ export default {
     },
 
     goToDetailPage(id) {
-      this.$router.push(`/akopolio/detail/${id}`); // ID를 포함하여 상세 페이지로 이동
+      this.$router.push(`/akopolio/detail/${id}`);
     },
 
-    // API에서 포트폴리오 데이터 받아오는 함수 (백엔드 연결 필요)
-    // async fetchPortfolios() {
-    //   try {
-    //     const response = await axios.get('/api/portfolios');
-    //     this.portfolioList = response.data;
-    //   } catch (error) {
-    //     console.error('Error fetching portfolios:', error);
-    //   }
-    // }
+    async fetchPortfolios() {
+      try {
+        const response = await axios.get(`${process.env.VUE_APP_BE_API_URL}/api/portfolios`);
+        this.portfolioList = response.data.length ? response.data : this.defaultPortfolioList; // 데이터가 없으면 예시 데이터 사용
+      } catch (error) {
+        console.error('Error fetching portfolios:', error);
+        this.portfolioList = this.defaultPortfolioList; // 오류 시 예시 데이터 사용
+      }
+    },
+  },
+
+  mounted() {
+    this.fetchPortfolios();
   }
 };