diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000..dd84ea78
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md
new file mode 100644
index 00000000..48d5f81f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/custom.md
@@ -0,0 +1,10 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000..bbcbbe7d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/README.md b/README.md
index 26875245..0f761958 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,10 @@
 # guam_community_client
 
+![Dart](https://img.shields.io/badge/Dart-2.16.0-brightgreen.svg)
+![Flutter](https://img.shields.io/badge/flutter-2.10.0-blue.svg)
+![Provider](https://img.shields.io/badge/provider-5.0.0-yellowgreen.svg)
+
+
 - **We Connect Developers**
 
 - We develop Guam using Flutter framework based on Dart language.
diff --git a/android/app/build.gradle b/android/app/build.gradle
index fa89f965..6240f001 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -13,20 +13,27 @@ if (flutterRoot == null) {
 
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
 if (flutterVersionCode == null) {
-    flutterVersionCode = '1'
+    flutterVersionCode = '5'
 }
 
 def flutterVersionName = localProperties.getProperty('flutter.versionName')
 if (flutterVersionName == null) {
-    flutterVersionName = '1.0'
+    flutterVersionName = '5'
+}
+
+def keystoreProperties = new Properties()
+def keystorePropertiesFile = rootProject.file('key.properties')
+if (keystorePropertiesFile.exists()) {
+    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
 }
 
 apply plugin: 'com.android.application'
 apply plugin: 'kotlin-android'
+apply plugin: 'com.google.gms.google-services'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 30
+    compileSdkVersion 31
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -34,18 +41,35 @@ android {
 
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
-        applicationId "com.wafflestudio.guam.guam_community_client"
-        minSdkVersion 16
+        applicationId "com.wafflestudio.guam_community"
+        minSdkVersion 19
         targetSdkVersion 30
+        multiDexEnabled true
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
 
+    signingConfigs {
+        release {
+            // https://stackoverflow.com/questions/54457245/a-problem-occurred-evaluating-project-app-path-may-not-be-null-or-empty-st
+            // https://itwise.tistory.com/47
+            keyAlias keystoreProperties['keyAlias']
+            keyPassword keystoreProperties['keyPassword']
+            storeFile file(keystoreProperties['storeFile'])
+            storePassword keystoreProperties['storePassword']
+        }
+    }
+
     buildTypes {
         release {
-            // TODO: Add your own signing config for the release build.
-            // Signing with the debug keys for now, so `flutter run --release` works.
-            signingConfig signingConfigs.debug
+            signingConfig signingConfigs.release
+
+            /// https://flutter-ko.dev/docs/deployment/android
+            minifyEnabled true
+            useProguard true
+
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+
         }
     }
 }
@@ -55,5 +79,9 @@ flutter {
 }
 
 dependencies {
+    // kotlin version dependency issue:
+    // https://stackoverflow.com/questions/64822045/could-not-find-com-google-firebasefirebase-analytics-ktx-required-by-project
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.google.firebase:firebase-analytics-ktx:21.0.0'
+    implementation 'com.google.firebase:firebase-auth-ktx:21.0.4'
 }
diff --git a/android/app/google-services.json b/android/app/google-services.json
new file mode 100644
index 00000000..1ec475de
--- /dev/null
+++ b/android/app/google-services.json
@@ -0,0 +1,90 @@
+{
+  "project_info": {
+    "project_number": "648780047414",
+    "project_id": "waffle-guam",
+    "storage_bucket": "waffle-guam.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:648780047414:android:f3e6e071c18e0e8721a497",
+        "android_client_info": {
+          "package_name": "com.wafflestudio.guam_community"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "648780047414-d2fbe0qcdiugckgq8stcqvgef89ie6a9.apps.googleusercontent.com",
+          "client_type": 1,
+          "android_info": {
+            "package_name": "com.wafflestudio.guam_community",
+            "certificate_hash": "e53cba4c1facd94625b7c877a80a183694acaf05"
+          }
+        },
+        {
+          "client_id": "648780047414-9sscdi6fbqrfnme42cvub06b9sgl9ojm.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyAYoZLtqIgtE8eLeyNgCoLYIa3f3UYmXDs"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "648780047414-9sscdi6fbqrfnme42cvub06b9sgl9ojm.apps.googleusercontent.com",
+              "client_type": 3
+            },
+            {
+              "client_id": "648780047414-erb4hojdlnk09dk8nvcjjgdps2q3cc8n.apps.googleusercontent.com",
+              "client_type": 2,
+              "ios_info": {
+                "bundle_id": "com.wafflestudio.guam_community"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:648780047414:android:3fc58c8364ffee5c21a497",
+        "android_client_info": {
+          "package_name": "com.wafflestudio.guam_community"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "648780047414-9sscdi6fbqrfnme42cvub06b9sgl9ojm.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyAYoZLtqIgtE8eLeyNgCoLYIa3f3UYmXDs"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "648780047414-9sscdi6fbqrfnme42cvub06b9sgl9ojm.apps.googleusercontent.com",
+              "client_type": 3
+            },
+            {
+              "client_id": "648780047414-erb4hojdlnk09dk8nvcjjgdps2q3cc8n.apps.googleusercontent.com",
+              "client_type": 2,
+              "ios_info": {
+                "bundle_id": "com.wafflestudio.guam_community"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}
\ No newline at end of file
diff --git a/android/app/proguard-rules.pro b/android/app/proguard-rules.pro
new file mode 100644
index 00000000..d24d7f10
--- /dev/null
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,8 @@
+## Flutter wrapper
+-keep class io.flutter.app.** { *; }
+-keep class io.flutter.plugin.**  { *; }
+-keep class io.flutter.util.**  { *; }
+-keep class io.flutter.view.**  { *; }
+-keep class io.flutter.**  { *; }
+-keep class io.flutter.plugins.**  { *; }
+-dontwarn io.flutter.embedding.**
\ No newline at end of file
diff --git a/android/app/src/debug/AndroidManifest.xml b/android/app/src/debug/AndroidManifest.xml
index c512e48a..ab650831 100644
--- a/android/app/src/debug/AndroidManifest.xml
+++ b/android/app/src/debug/AndroidManifest.xml
@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.wafflestudio.guam.guam_community_client">
+    package="com.wafflestudio.guam_community">
     <!-- Flutter needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index e269dc1d..548a7bb3 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.wafflestudio.guam.guam_community_client">
+    package="com.wafflestudio.guam_community">
    <application
-        android:label="guam_community_client"
+        android:label="Guam"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"
@@ -13,7 +13,7 @@
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
                  while the Flutter UI initializes. After that, this theme continues
-                 to determine the Window background behind the Flutter UI. -->
+                 to determine the Window backgrounds behind the Flutter UI. -->
             <meta-data
               android:name="io.flutter.embedding.android.NormalTheme"
               android:resource="@style/NormalTheme"
@@ -32,8 +32,17 @@
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
-        <!-- Don't delete the meta-data below.
-             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
+       <activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
+           <intent-filter android:label="flutter_web_auth">
+               <action android:name="android.intent.action.VIEW" />
+               <category android:name="android.intent.category.DEFAULT" />
+               <category android:name="android.intent.category.BROWSABLE" />
+               <data android:scheme="kakao367d8cf339e2ba59376ba647c7135dd2" android:host="oauth"/>
+           </intent-filter>
+       </activity>
+
+       <!-- Don't delete the meta-data below.
+            This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
diff --git a/android/app/src/main/kotlin/com/wafflestudio/guam/guam_community_client/MainActivity.kt b/android/app/src/main/kotlin/com/wafflestudio/guam/guam_community_client/MainActivity.kt
index af9a6f44..1376155c 100644
--- a/android/app/src/main/kotlin/com/wafflestudio/guam/guam_community_client/MainActivity.kt
+++ b/android/app/src/main/kotlin/com/wafflestudio/guam/guam_community_client/MainActivity.kt
@@ -1,4 +1,4 @@
-package com.wafflestudio.guam.guam_community_client
+package com.wafflestudio.guam_community
 
 import io.flutter.embedding.android.FlutterActivity
 
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index db77bb4b..79e08d03 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index 17987b79..269b6a6d 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index 09d43914..4d34a35f 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index d5f1c8d3..09fee5f6 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 4d6372ee..21d31aca 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/profile/AndroidManifest.xml b/android/app/src/profile/AndroidManifest.xml
index c512e48a..ab650831 100644
--- a/android/app/src/profile/AndroidManifest.xml
+++ b/android/app/src/profile/AndroidManifest.xml
@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.wafflestudio.guam.guam_community_client">
+    package="com.wafflestudio.guam_community">
     <!-- Flutter needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
diff --git a/android/build.gradle b/android/build.gradle
index 9b6ed06e..d268d4cd 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.6.10'
     repositories {
         google()
         jcenter()
@@ -8,6 +8,7 @@ buildscript {
     dependencies {
         classpath 'com.android.tools.build:gradle:4.1.0'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        classpath 'com.google.gms:google-services:4.3.10'
     }
 }
 
diff --git a/assets/backgrounds/back_0.75x.png b/assets/backgrounds/back_0.75x.png
new file mode 100644
index 00000000..7d08c169
Binary files /dev/null and b/assets/backgrounds/back_0.75x.png differ
diff --git a/assets/backgrounds/back_1x.png b/assets/backgrounds/back_1x.png
new file mode 100644
index 00000000..1555e944
Binary files /dev/null and b/assets/backgrounds/back_1x.png differ
diff --git a/assets/backgrounds/back_2x.png b/assets/backgrounds/back_2x.png
new file mode 100644
index 00000000..2dfca89e
Binary files /dev/null and b/assets/backgrounds/back_2x.png differ
diff --git a/assets/backgrounds/front_0.75x.png b/assets/backgrounds/front_0.75x.png
new file mode 100644
index 00000000..35ceedd0
Binary files /dev/null and b/assets/backgrounds/front_0.75x.png differ
diff --git a/assets/backgrounds/front_1x.png b/assets/backgrounds/front_1x.png
new file mode 100644
index 00000000..0b2ed5bc
Binary files /dev/null and b/assets/backgrounds/front_1x.png differ
diff --git a/assets/backgrounds/front_2x.png b/assets/backgrounds/front_2x.png
new file mode 100644
index 00000000..02a1e39c
Binary files /dev/null and b/assets/backgrounds/front_2x.png differ
diff --git a/assets/backgrounds/splash/star_splash.svg b/assets/backgrounds/splash/star_splash.svg
new file mode 100644
index 00000000..cca09bf1
--- /dev/null
+++ b/assets/backgrounds/splash/star_splash.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13C7.1797 13 13 7.1797 13 0C13 7.1797 18.8203 13 26 13C18.8203 13 13 18.8203 13 26C13 18.8203 7.1797 13 0 13Z" fill="#5038E3"/>
+</svg>
diff --git a/assets/fonts/SpoqaHanSansNeo-Medium.ttf b/assets/fonts/SpoqaHanSansNeo-Medium.ttf
new file mode 100644
index 00000000..2208350f
Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Medium.ttf differ
diff --git a/assets/fonts/SpoqaHanSansNeo-Regular.ttf b/assets/fonts/SpoqaHanSansNeo-Regular.ttf
new file mode 100644
index 00000000..64c4af72
Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Regular.ttf differ
diff --git a/assets/gifs/guam_progress_indicator.gif b/assets/gifs/guam_progress_indicator.gif
new file mode 100644
index 00000000..2f0f6673
Binary files /dev/null and b/assets/gifs/guam_progress_indicator.gif differ
diff --git a/assets/icons/back.svg b/assets/icons/back.svg
new file mode 100644
index 00000000..0fadd898
--- /dev/null
+++ b/assets/icons/back.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7167 19.4405C14.6311 19.4418 14.5462 19.4255 14.4672 19.3929C14.3881 19.3602 14.3165 19.3118 14.2567 19.2505L7.18671 12.1805C7.06697 12.0574 7 11.8923 7 11.7205C7 11.5487 7.06697 11.3837 7.18671 11.2605L14.2567 4.19054C14.3787 4.06854 14.5442 4 14.7167 4C14.8892 4 15.0547 4.06854 15.1767 4.19054C15.2987 4.31254 15.3672 4.478 15.3672 4.65054C15.3672 4.82307 15.2987 4.98854 15.1767 5.11053L8.56671 11.7205L15.1767 18.3305C15.2965 18.4537 15.3634 18.6188 15.3634 18.7905C15.3634 18.9623 15.2965 19.1273 15.1767 19.2505C15.117 19.3118 15.0454 19.3602 14.9663 19.3929C14.8872 19.4255 14.8023 19.4418 14.7167 19.4405Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/baloon.svg b/assets/icons/baloon.svg
new file mode 100644
index 00000000..a065269c
--- /dev/null
+++ b/assets/icons/baloon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8714 19.0534C22.4689 17.0441 23.337 14.552 23.3337 11.985C23.3303 9.41808 22.4556 6.92834 20.8527 4.92331C19.2499 2.91828 17.0138 1.51674 14.5106 0.948169C12.0074 0.3796 9.38534 0.67766 7.07361 1.79355C4.76188 2.90943 2.89745 4.77704 1.7855 7.09067C0.673552 9.40429 0.379966 12.0269 0.952799 14.5291C1.52563 17.0313 2.93095 19.265 4.9387 20.8644C6.94646 22.4639 9.43773 23.3343 12.0047 23.3333H20.6714C20.9392 23.3391 21.2038 23.2734 21.4378 23.1429C21.6718 23.0124 21.8668 22.8219 22.0026 22.591C22.1384 22.36 22.2103 22.097 22.2106 21.8291C22.211 21.5612 22.1399 21.298 22.0047 21.0667L20.8714 19.0534Z" fill="#6951FF"/>
+</svg>
diff --git a/assets/icons/blog.svg b/assets/icons/blog.svg
new file mode 100644
index 00000000..e8002f8c
--- /dev/null
+++ b/assets/icons/blog.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15:2035)">
+<path d="M14.9334 9.25334C14.9334 8.81131 14.7578 8.38739 14.4452 8.07483C14.1327 7.76227 13.7088 7.58667 13.2667 7.58667H8.62671V10.92H13.2934C13.7308 10.913 14.1479 10.7343 14.4547 10.4225C14.7615 10.1107 14.9334 9.69078 14.9334 9.25334Z" fill="#4E4E4E"/>
+<path d="M14.9067 12.92H8.62671V16.2534H14.9067C15.3487 16.2534 15.7726 16.0778 16.0852 15.7652C16.3978 15.4527 16.5734 15.0287 16.5734 14.5867C16.5734 14.1447 16.3978 13.7208 16.0852 13.4082C15.7726 13.0956 15.3487 12.92 14.9067 12.92Z" fill="#4E4E4E"/>
+<path d="M11.96 0C9.58658 0 7.26651 0.703803 5.29313 2.02238C3.31974 3.34096 1.78166 5.21508 0.873406 7.4078C-0.0348454 9.60051 -0.272478 12.0133 0.190545 14.3411C0.653568 16.6688 1.79645 18.807 3.47468 20.4853C5.15291 22.1635 7.29112 23.3064 9.61889 23.7694C11.9467 24.2324 14.3594 23.9948 16.5522 23.0865C18.7449 22.1783 20.619 20.6402 21.9376 18.6668C23.2562 16.6934 23.96 14.3734 23.96 12C23.96 8.8174 22.6957 5.76517 20.4452 3.51473C18.1948 1.26429 15.1426 0 11.96 0ZM14.8666 18.2533H7.58662C7.32248 18.2499 7.07013 18.1434 6.88333 17.9566C6.69654 17.7698 6.59008 17.5175 6.58662 17.2533V6.58667C6.58662 6.32145 6.69197 6.06709 6.87951 5.87956C7.06705 5.69202 7.32141 5.58667 7.58662 5.58667H13.2933C13.9507 5.58328 14.5969 5.75736 15.1637 6.09058C15.7305 6.42379 16.1968 6.9038 16.5135 7.47994C16.8303 8.05608 16.9857 8.70701 16.9633 9.3641C16.941 10.0212 16.7418 10.66 16.3866 11.2133C17.0419 11.5018 17.5997 11.9738 17.9925 12.5725C18.3852 13.1711 18.5963 13.8707 18.6 14.5867C18.6 15.0704 18.5042 15.5494 18.3183 15.996C18.1324 16.4426 17.8599 16.8481 17.5166 17.1889C17.1733 17.5297 16.7659 17.7992 16.318 17.9819C15.87 18.1646 15.3904 18.2569 14.9066 18.2533H14.8666Z" fill="#4E4E4E"/>
+</g>
+<defs>
+<clipPath id="clip0_15:2035">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/camera.svg b/assets/icons/camera.svg
new file mode 100644
index 00000000..61e1bef1
--- /dev/null
+++ b/assets/icons/camera.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.15 16C13.8621 16 15.25 14.6121 15.25 12.9C15.25 11.188 13.8621 9.80005 12.15 9.80005C10.438 9.80005 9.05005 11.188 9.05005 12.9C9.05005 14.6121 10.438 16 12.15 16Z" fill="#4E4E4E"/>
+<path d="M20.65 7H16.15L15.3 4.44C15.2546 4.31169 15.1707 4.20053 15.0597 4.12177C14.9487 4.043 14.8161 4.00047 14.68 4H9.68C9.5439 4.00047 9.41128 4.043 9.30029 4.12177C9.18929 4.20053 9.10537 4.31169 9.06001 4.44L8.15 7H3.65C3.47761 7 3.31228 7.06847 3.19038 7.19037C3.06849 7.31227 3 7.4776 3 7.64999V18.65C3 18.7354 3.01681 18.8199 3.04948 18.8987C3.08214 18.9776 3.13003 19.0493 3.19038 19.1096C3.25074 19.17 3.3224 19.2179 3.40126 19.2505C3.48012 19.2832 3.56464 19.3 3.65 19.3H20.65C20.8224 19.3 20.9877 19.2315 21.1096 19.1096C21.2315 18.9877 21.3 18.8224 21.3 18.65V7.64999C21.3 7.4776 21.2315 7.31227 21.1096 7.19037C20.9877 7.06847 20.8224 7 20.65 7ZM12.15 17.3C11.2798 17.3 10.4291 17.042 9.70549 16.5585C8.98191 16.075 8.41796 15.3878 8.08493 14.5838C7.7519 13.7798 7.66477 12.8951 7.83455 12.0416C8.00432 11.1881 8.42338 10.4041 9.03873 9.78873C9.65409 9.17338 10.4381 8.75431 11.2916 8.58453C12.1451 8.41476 13.0298 8.5019 13.8338 8.83493C14.6378 9.16796 15.325 9.7319 15.8085 10.4555C16.2919 11.1791 16.55 12.0298 16.55 12.9C16.55 14.0669 16.0864 15.1861 15.2613 16.0113C14.4361 16.8364 13.317 17.3 12.15 17.3Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/cancel_filled.svg b/assets/icons/cancel_filled.svg
new file mode 100644
index 00000000..17fe9c9b
--- /dev/null
+++ b/assets/icons/cancel_filled.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="#4E4E4E"/>
+<path d="M15.5 16.15C15.4146 16.1501 15.3301 16.1334 15.2511 16.1008C15.1722 16.0682 15.1005 16.0204 15.04 15.96L8.04004 8.96002C7.91804 8.83802 7.84949 8.67256 7.84949 8.50003C7.84949 8.3275 7.91804 8.16204 8.04004 8.04004C8.16204 7.91804 8.3275 7.84949 8.50003 7.84949C8.67256 7.84949 8.83802 7.91804 8.96002 8.04004L15.96 15.04C16.0217 15.0997 16.0708 15.1712 16.1043 15.2502C16.1378 15.3292 16.1551 15.4142 16.1551 15.5C16.1551 15.5859 16.1378 15.6708 16.1043 15.7498C16.0708 15.8289 16.0217 15.9003 15.96 15.96C15.9006 16.0218 15.8291 16.0705 15.7499 16.1032C15.6708 16.1359 15.5857 16.1518 15.5 16.15Z" fill="white"/>
+<path d="M8.5 16.15C8.4146 16.1501 8.33003 16.1334 8.2511 16.1008C8.17217 16.0682 8.10044 16.0203 8.04001 15.96C7.92028 15.8368 7.85327 15.6718 7.85327 15.5C7.85327 15.3282 7.92028 15.1632 8.04001 15.04L15.04 8.04001C15.1632 7.92028 15.3282 7.85327 15.5 7.85327C15.6718 7.85327 15.8368 7.92028 15.96 8.04001C16.0217 8.09969 16.0707 8.17116 16.1042 8.25018C16.1378 8.32921 16.155 8.41417 16.155 8.5C16.155 8.58583 16.1378 8.67079 16.1042 8.74982C16.0707 8.82884 16.0217 8.90031 15.96 8.95999L8.95999 15.96C8.9006 16.0217 8.82908 16.0705 8.74991 16.1032C8.67074 16.1359 8.58564 16.1518 8.5 16.15Z" fill="white"/>
+</svg>
diff --git a/assets/icons/cancel_filled_x_transparent.svg b/assets/icons/cancel_filled_x_transparent.svg
new file mode 100644
index 00000000..cca24136
--- /dev/null
+++ b/assets/icons/cancel_filled_x_transparent.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z M17,15.59L15.59,17L12,13.41L8.41,17L7,15.59 L10.59,12L7,8.41L8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59z"/></svg>
\ No newline at end of file
diff --git a/assets/icons/cancel_outlined.svg b/assets/icons/cancel_outlined.svg
new file mode 100644
index 00000000..399572b3
--- /dev/null
+++ b/assets/icons/cancel_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.1204 20.8933L17.0804 15.8533L22.1204 10.8133C22.2831 10.6507 22.3744 10.43 22.3744 10.2C22.3744 9.96994 22.2831 9.74933 22.1204 9.58666C21.9577 9.42399 21.7371 9.33261 21.5071 9.33261C21.277 9.33261 21.0564 9.42399 20.8937 9.58666L15.8537 14.6267L10.8137 9.58666C10.6511 9.42399 10.4304 9.33261 10.2004 9.33261C9.97035 9.33261 9.74974 9.42399 9.58708 9.58666C9.42441 9.74933 9.33301 9.96994 9.33301 10.2C9.33301 10.43 9.42441 10.6507 9.58708 10.8133L14.6271 15.8533L9.65373 20.8933C9.49106 21.056 9.39966 21.2766 9.39966 21.5067C9.39966 21.7367 9.49106 21.9573 9.65373 22.12C9.81639 22.2826 10.037 22.374 10.267 22.374C10.4971 22.374 10.7177 22.2826 10.8804 22.12L15.9204 17.08L20.9604 22.12C21.041 22.2005 21.1365 22.2644 21.2418 22.308C21.347 22.3516 21.4598 22.374 21.5737 22.374C21.6876 22.374 21.8004 22.3516 21.9057 22.308C22.0109 22.2644 22.1065 22.2005 22.1871 22.12C22.2676 22.0394 22.3315 21.9438 22.3751 21.8386C22.4187 21.7334 22.4411 21.6206 22.4411 21.5067C22.4411 21.3928 22.4187 21.2799 22.3751 21.1747C22.3315 21.0695 22.2676 20.9739 22.1871 20.8933H22.1204Z" fill="white"/>
+</svg>
diff --git a/assets/icons/check.svg b/assets/icons/check.svg
new file mode 100644
index 00000000..82a1e3e0
--- /dev/null
+++ b/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.72224 11.4659C5.40919 11.4624 5.10133 11.3855 4.82343 11.2413C4.54553 11.0972 4.30538 10.8898 4.12226 10.6359L0.87226 6.08588C0.822341 6.01718 0.786589 5.93924 0.767096 5.85658C0.747603 5.77393 0.744743 5.68823 0.758704 5.60446C0.772665 5.5207 0.803149 5.44055 0.848395 5.36868C0.893641 5.29682 0.952753 5.23468 1.02225 5.18588C1.09175 5.1357 1.1705 5.09976 1.25394 5.08014C1.33739 5.06051 1.42388 5.05759 1.50846 5.07153C1.59304 5.08548 1.67401 5.11601 1.74674 5.16138C1.81947 5.20675 1.88254 5.26605 1.93226 5.33588L5.17225 9.87589C5.23556 9.96791 5.32087 10.0426 5.42042 10.0933C5.51997 10.1439 5.6306 10.1689 5.74225 10.1659C5.8546 10.1622 5.96433 10.1311 6.06193 10.0753C6.15952 10.0196 6.24204 9.94081 6.30225 9.84589L12.0223 0.895875C12.0643 0.816371 12.1225 0.746476 12.193 0.690598C12.2635 0.63472 12.3448 0.594084 12.4318 0.571259C12.5188 0.548435 12.6096 0.543919 12.6985 0.557999C12.7873 0.57208 12.8723 0.604452 12.9479 0.653062C13.0236 0.701671 13.0884 0.765457 13.1382 0.840394C13.188 0.915331 13.2216 0.999789 13.2371 1.08841C13.2525 1.17703 13.2494 1.26789 13.2279 1.35524C13.2064 1.44259 13.167 1.52454 13.1123 1.59589L7.39225 10.5959C7.21714 10.8692 6.97814 11.0957 6.6959 11.256C6.41366 11.4163 6.09667 11.5055 5.77225 11.5159L5.72224 11.4659Z" fill="#6951FF"/>
+</svg>
diff --git a/assets/icons/comment.svg b/assets/icons/comment.svg
new file mode 100644
index 00000000..b0901346
--- /dev/null
+++ b/assets/icons/comment.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 5H4C3.73478 5 3.48044 5.10536 3.29291 5.29289C3.10537 5.48043 3 5.73478 3 6V16C3 16.2652 3.10537 16.5196 3.29291 16.7071C3.48044 16.8946 3.73478 17 4 17H12.54L13.9 19.41C13.9872 19.5639 14.1137 19.6919 14.2665 19.781C14.4194 19.87 14.5931 19.9169 14.77 19.9169C14.9469 19.9169 15.1206 19.87 15.2735 19.781C15.4263 19.6919 15.5528 19.5639 15.64 19.41L17 17H20C20.2652 17 20.5196 16.8946 20.7071 16.7071C20.8946 16.5196 21 16.2652 21 16V6C21 5.73478 20.8946 5.48043 20.7071 5.29289C20.5196 5.10536 20.2652 5 20 5ZM19.7 15.7H17C16.7699 15.6992 16.5438 15.76 16.3451 15.8761C16.1464 15.9921 15.9824 16.1592 15.87 16.36L14.77 18.3L13.67 16.36C13.5568 16.1599 13.3926 15.9934 13.1941 15.8774C12.9956 15.7615 12.7699 15.7003 12.54 15.7H4.29999V6.3H19.7V15.7Z" fill="#4E4E4E"/>
+<path d="M8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z" fill="#4E4E4E"/>
+<path d="M12 12C12.5523 12 13 11.5523 13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11C11 11.5523 11.4477 12 12 12Z" fill="#4E4E4E"/>
+<path d="M16 12C16.5523 12 17 11.5523 17 11C17 10.4477 16.5523 10 16 10C15.4477 10 15 10.4477 15 11C15 11.5523 15.4477 12 16 12Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/delete_outlined.svg b/assets/icons/delete_outlined.svg
new file mode 100644
index 00000000..d6d96af7
--- /dev/null
+++ b/assets/icons/delete_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.6 12.8C5.81217 12.8 6.01566 12.7157 6.16568 12.5657C6.31571 12.4157 6.4 12.2122 6.4 12V7.2C6.4 6.98783 6.31571 6.78434 6.16568 6.63431C6.01566 6.48429 5.81217 6.4 5.6 6.4C5.38783 6.4 5.18434 6.48429 5.03431 6.63431C4.88428 6.78434 4.8 6.98783 4.8 7.2V12C4.8 12.2122 4.88428 12.4157 5.03431 12.5657C5.18434 12.7157 5.38783 12.8 5.6 12.8ZM13.6 3.2H10.4V2.4C10.4 1.76348 10.1471 1.15303 9.69706 0.702944C9.24697 0.252857 8.63652 0 8 0H6.4C5.76348 0 5.15303 0.252857 4.70294 0.702944C4.25286 1.15303 4 1.76348 4 2.4V3.2H0.8C0.587827 3.2 0.384344 3.28429 0.234315 3.43431C0.0842854 3.58434 0 3.78783 0 4C0 4.21217 0.0842854 4.41566 0.234315 4.56569C0.384344 4.71571 0.587827 4.8 0.8 4.8H1.6V13.6C1.6 14.2365 1.85286 14.847 2.30294 15.2971C2.75303 15.7471 3.36348 16 4 16H10.4C11.0365 16 11.647 15.7471 12.0971 15.2971C12.5471 14.847 12.8 14.2365 12.8 13.6V4.8H13.6C13.8122 4.8 14.0157 4.71571 14.1657 4.56569C14.3157 4.41566 14.4 4.21217 14.4 4C14.4 3.78783 14.3157 3.58434 14.1657 3.43431C14.0157 3.28429 13.8122 3.2 13.6 3.2ZM5.6 2.4C5.6 2.18783 5.68429 1.98434 5.83431 1.83431C5.98434 1.68429 6.18783 1.6 6.4 1.6H8C8.21217 1.6 8.41566 1.68429 8.56569 1.83431C8.71571 1.98434 8.8 2.18783 8.8 2.4V3.2H5.6V2.4ZM11.2 13.6C11.2 13.8122 11.1157 14.0157 10.9657 14.1657C10.8157 14.3157 10.6122 14.4 10.4 14.4H4C3.78783 14.4 3.58434 14.3157 3.43431 14.1657C3.28429 14.0157 3.2 13.8122 3.2 13.6V4.8H11.2V13.6ZM8.8 12.8C9.01217 12.8 9.21566 12.7157 9.36568 12.5657C9.51571 12.4157 9.6 12.2122 9.6 12V7.2C9.6 6.98783 9.51571 6.78434 9.36568 6.63431C9.21566 6.48429 9.01217 6.4 8.8 6.4C8.58783 6.4 8.38434 6.48429 8.23431 6.63431C8.08428 6.78434 8 6.98783 8 7.2V12C8 12.2122 8.08428 12.4157 8.23431 12.5657C8.38434 12.7157 8.58783 12.8 8.8 12.8Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/down.svg b/assets/icons/down.svg
new file mode 100644
index 00000000..8eab77d5
--- /dev/null
+++ b/assets/icons/down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.46327 8.18723C4.46204 8.27278 4.47826 8.35768 4.51093 8.43677C4.54359 8.51585 4.59203 8.58746 4.65327 8.64722L11.7233 15.7172C11.8465 15.837 12.0115 15.9039 12.1833 15.9039C12.3551 15.9039 12.5201 15.837 12.6433 15.7172L19.7133 8.64722C19.8353 8.52522 19.9038 8.35976 19.9038 8.18723C19.9038 8.01469 19.8353 7.8492 19.7133 7.7272C19.5913 7.6052 19.4258 7.53668 19.2533 7.53668C19.0807 7.53668 18.9153 7.6052 18.7933 7.7272L12.1833 14.3372L5.57327 7.7272C5.45008 7.60747 5.28506 7.5405 5.11327 7.5405C4.94148 7.5405 4.77646 7.60747 4.65327 7.7272C4.59203 7.78696 4.54359 7.85857 4.51093 7.93765C4.47826 8.01674 4.46204 8.10167 4.46327 8.18723Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/github.svg b/assets/icons/github.svg
new file mode 100644
index 00000000..f89f3392
--- /dev/null
+++ b/assets/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5807 20.2772 21.0497 21.7437 19.0074C23.2101 16.965 23.9993 14.5143 24 12C24 5.37 18.63 0 12 0Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/home_filled.svg b/assets/icons/home_filled.svg
new file mode 100644
index 00000000..6fc11d0f
--- /dev/null
+++ b/assets/icons/home_filled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6008 9.82869L12.6193 4.21777C12.4386 4.07673 12.215 4 11.9846 4C11.7543 4 11.5307 4.07673 11.35 4.21777L4.36852 9.82869C4.25429 9.92265 4.16214 10.0401 4.0985 10.1727C4.03486 10.3054 4.00125 10.4502 4 10.597V19.989C4 20.2572 4.10785 20.5143 4.29983 20.7039C4.4918 20.8935 4.75218 21 5.02367 21H18.9763C19.2478 21 19.5082 20.8935 19.7002 20.7039C19.8921 20.5143 20 20.2572 20 19.989V10.597C19.995 10.4478 19.9567 10.3015 19.8876 10.1687C19.8186 10.0358 19.7206 9.91969 19.6008 9.82869Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/home_outlined.svg b/assets/icons/home_outlined.svg
new file mode 100644
index 00000000..2e290d61
--- /dev/null
+++ b/assets/icons/home_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9949 5.40761L18.6573 10.7638V19.6941H5.33248V10.7739L11.9949 5.41774V5.40761ZM11.9949 4.01035C11.7637 4.01168 11.5397 4.09018 11.3594 4.23311L4.36899 9.85252C4.25592 9.94552 4.16443 10.0615 4.10076 10.1925C4.03709 10.3235 4.00272 10.4666 4 10.6119V20.0181C4 20.2866 4.10799 20.5442 4.30021 20.734C4.49243 20.9239 4.75314 21.0306 5.02498 21.0306H18.9955C19.2674 21.0306 19.5281 20.9239 19.7203 20.734C19.9125 20.5442 20.0205 20.2866 20.0205 20.0181V10.5815C20.0178 10.4362 19.9834 10.2932 19.9197 10.1621C19.8561 10.0311 19.7646 9.91514 19.6515 9.82214L12.6611 4.20273C12.4808 4.0598 12.2568 3.98131 12.0256 3.97998L11.9949 4.01035Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/like_filled.svg b/assets/icons/like_filled.svg
new file mode 100644
index 00000000..2819643b
--- /dev/null
+++ b/assets/icons/like_filled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5099 5.52195C18.7309 4.87669 17.7514 4.52308 16.7399 4.52195C16.1075 4.52248 15.4815 4.64825 14.8979 4.89197C14.3143 5.13569 13.7848 5.49254 13.3399 5.94196L12.0799 7.23197L10.6699 5.82197C10.2254 5.3764 9.69247 5.02901 9.10539 4.80225C8.51831 4.57549 7.89019 4.4744 7.26161 4.5055C6.63303 4.5366 6.01797 4.69919 5.45614 4.98279C4.89432 5.2664 4.39822 5.66469 3.9999 6.15195C3.30172 7.05454 2.96062 8.18277 3.04179 9.32099C3.12296 10.4592 3.62071 11.5276 4.43991 12.322L5.71991 13.602L11.3699 19.252C11.4629 19.3457 11.5735 19.4201 11.6953 19.4709C11.8172 19.5216 11.9479 19.5478 12.0799 19.5478C12.2119 19.5478 12.3426 19.5216 12.4645 19.4709C12.5863 19.4201 12.6969 19.3457 12.7899 19.252L18.4399 13.602L19.8599 12.182C20.3027 11.7363 20.6472 11.2028 20.8713 10.6159C21.0954 10.0291 21.1942 9.40175 21.1612 8.77439C21.1282 8.14703 20.9643 7.53352 20.6799 6.97336C20.3955 6.4132 19.9969 5.91878 19.5099 5.52195Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/like_outlined.svg b/assets/icons/like_outlined.svg
new file mode 100644
index 00000000..d85a30e2
--- /dev/null
+++ b/assets/icons/like_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.51 5.5216C18.7336 4.87186 17.7524 4.51764 16.74 4.5216C15.4649 4.52441 14.2428 5.03126 13.34 5.9316L12.08 7.23161L10.67 5.8216C10.2254 5.37687 9.69277 5.03 9.10623 4.80329C8.5197 4.57658 7.89223 4.47505 7.26413 4.50518C6.63603 4.53532 6.02117 4.69646 5.45903 4.97828C4.89689 5.2601 4.3999 5.65634 3.99996 6.1416C3.30109 7.04577 2.95964 8.17566 3.0408 9.31556C3.12196 10.4555 3.62004 11.5256 4.43996 12.3216L5.71996 13.5916L11.37 19.2516C11.4629 19.3453 11.5735 19.4197 11.6954 19.4705C11.8172 19.5213 11.948 19.5474 12.08 19.5474C12.212 19.5474 12.3427 19.5213 12.4645 19.4705C12.5864 19.4197 12.697 19.3453 12.79 19.2516L18.44 13.5916L19.86 12.1816C20.3027 11.7359 20.6472 11.2024 20.8714 10.6156C21.0955 10.0287 21.1942 9.40137 21.1613 8.77401C21.1283 8.14665 20.9643 7.53316 20.6799 6.973C20.3955 6.41284 19.997 5.91843 19.51 5.5216ZM18.92 11.2616L17.51 12.6716L12.08 18.1216L6.63996 12.6716L5.35996 11.4016C4.76644 10.8358 4.40252 10.071 4.33794 9.25352C4.27335 8.43608 4.51264 7.62355 5.00996 6.9716C5.29371 6.62656 5.64634 6.34456 6.04531 6.14361C6.44428 5.94266 6.88081 5.82719 7.32695 5.80461C7.7731 5.78202 8.21905 5.85279 8.63628 6.01241C9.0535 6.17204 9.43282 6.417 9.74996 6.73161L11.16 8.15161C11.4065 8.3917 11.7359 8.52775 12.08 8.5316C12.2508 8.5318 12.4199 8.49835 12.5778 8.43315C12.7356 8.36794 12.8791 8.27227 13 8.15161L14.28 6.87161C14.9429 6.22503 15.8339 5.86574 16.76 5.87161C17.4665 5.86272 18.1536 6.10353 18.7 6.5516C19.0463 6.83445 19.3296 7.18674 19.5314 7.58578C19.7332 7.98482 19.8492 8.42173 19.8718 8.86834C19.8944 9.31495 19.8232 9.76134 19.6627 10.1787C19.5022 10.5961 19.256 10.9752 18.94 11.2916L18.92 11.2616Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/message.svg b/assets/icons/message.svg
new file mode 100644
index 00000000..8021fbb6
--- /dev/null
+++ b/assets/icons/message.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5C0 2.23858 2.23858 0 5 0H31C33.7614 0 36 2.23858 36 5V31C36 33.7614 33.7614 36 31 36H5C2.23858 36 0 33.7614 0 31V5Z" fill="#4E4E4E"/>
+<path d="M16.4342 17.7497H12.0003L10.5176 11.8511C10.5081 11.8168 10.5023 11.7816 10.5003 11.7461C10.4838 11.2053 11.0793 10.8304 11.5953 11.0779L25.5 17.7497L11.5953 24.4216C11.0853 24.6668 10.4973 24.3023 10.5003 23.7713C10.5019 23.7239 10.5102 23.6769 10.5251 23.6318L11.6253 19.9997" stroke="#F2F2F2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/icons/message_default.svg b/assets/icons/message_default.svg
new file mode 100644
index 00000000..3a5e3dc0
--- /dev/null
+++ b/assets/icons/message_default.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.03 16.31L16.42 14.74L17.79 13.42C17.9513 13.2666 18.0797 13.082 18.1674 12.8775C18.2551 12.6729 18.3002 12.4526 18.3 12.23V4.64999C18.3 4.21239 18.1261 3.7927 17.8167 3.48326C17.5073 3.17383 17.0876 3 16.65 3H6.64999C6.21239 3 5.79271 3.17383 5.48328 3.48326C5.17384 3.7927 5 4.21239 5 4.64999V12.18C5.01905 12.4542 5.09254 12.7219 5.21616 12.9674C5.33977 13.2129 5.51105 13.4314 5.72 13.61L7.10001 14.96L5.44998 16.53C5.30597 16.6646 5.19091 16.8271 5.11182 17.0076C5.03273 17.1881 4.99128 17.3829 4.98999 17.58C4.99166 17.7785 5.03325 17.9746 5.11227 18.1567C5.1913 18.3388 5.30614 18.5032 5.44998 18.64L7.89999 20.97C8.18602 21.2413 8.56574 21.3918 8.95999 21.39C9.35463 21.3939 9.73512 21.2431 10.02 20.97L11.66 19.41L13.24 20.95C13.5343 21.2329 13.9267 21.391 14.335 21.391C14.7433 21.391 15.1357 21.2329 15.43 20.95L17.99 18.45C18.1366 18.309 18.2529 18.1396 18.332 17.9523C18.4111 17.7649 18.4512 17.5634 18.45 17.36C18.4534 16.9684 18.3025 16.5912 18.03 16.31ZM9.16998 20.07C9.12436 20.1101 9.06573 20.1322 9.005 20.1322C8.94428 20.1322 8.88562 20.1101 8.84 20.07L6.37 17.74C6.35137 17.726 6.33625 17.7079 6.32584 17.6871C6.31542 17.6662 6.31 17.6433 6.31 17.62C6.31077 17.5983 6.31658 17.577 6.327 17.5579C6.33741 17.5388 6.35214 17.5224 6.37 17.51L8.07001 15.93L10.77 18.57L9.16998 20.07ZM17.12 17.56L14.56 20.06C14.5099 20.1071 14.4438 20.1333 14.375 20.1333C14.3062 20.1333 14.2401 20.1071 14.19 20.06L12.19 18.06L8.81 14.77L6.75 12.77C6.7219 12.7318 6.68818 12.6981 6.64999 12.67C6.49172 12.5469 6.37909 12.3744 6.32999 12.18V4.64999C6.32999 4.55717 6.36686 4.46815 6.4325 4.40251C6.49813 4.33687 6.58717 4.29999 6.67999 4.29999H16.68C16.726 4.29999 16.7715 4.30904 16.8139 4.32663C16.8564 4.34422 16.895 4.37001 16.9275 4.40251C16.96 4.43501 16.9858 4.47359 17.0034 4.51605C17.0209 4.55852 17.03 4.60403 17.03 4.64999V12.23C17.0276 12.3245 16.9881 12.4143 16.92 12.48L15.07 14.27C15.0068 14.3298 14.9564 14.4019 14.9219 14.4818C14.8875 14.5618 14.8698 14.6479 14.8698 14.735C14.8698 14.822 14.8875 14.9082 14.9219 14.9881C14.9564 15.0681 15.0068 15.1402 15.07 15.2L17.15 17.2C17.1725 17.2201 17.1903 17.2448 17.2024 17.2724C17.2145 17.3 17.2205 17.3299 17.22 17.36C17.2227 17.3992 17.2149 17.4385 17.1973 17.4736C17.1797 17.5088 17.153 17.5386 17.12 17.56Z" fill="#4E4E4E"/>
+<path d="M13.73 6.60999L12.54 7.55C12.4045 7.65816 12.317 7.8153 12.2964 7.98745C12.2758 8.1596 12.3238 8.33293 12.43 8.46999C12.4915 8.54571 12.5693 8.60661 12.6576 8.64816C12.7459 8.6897 12.8424 8.71084 12.94 8.71C13.0891 8.71415 13.2346 8.66445 13.35 8.57L14.53 7.63C14.6131 7.58438 14.6853 7.52113 14.7414 7.44468C14.7975 7.36823 14.8361 7.28042 14.8547 7.18743C14.8733 7.09444 14.8713 6.99853 14.8488 6.90639C14.8264 6.81426 14.7841 6.72815 14.7249 6.65411C14.6656 6.58006 14.5909 6.51987 14.506 6.47776C14.421 6.43565 14.3278 6.41264 14.233 6.41035C14.1382 6.40805 14.0441 6.42653 13.9572 6.46447C13.8703 6.50241 13.7927 6.55891 13.73 6.63V6.60999Z" fill="#4E4E4E"/>
+<path d="M9.91 9.64998L8.76999 10.55C8.63515 10.6563 8.54789 10.8118 8.52728 10.9823C8.50667 11.1528 8.55439 11.3245 8.66 11.46C8.72104 11.537 8.79849 11.5994 8.88672 11.6426C8.97495 11.6859 9.07172 11.7089 9.16998 11.71C9.31802 11.7078 9.46156 11.6588 9.57999 11.57L10.71 10.66C10.8426 10.5539 10.9276 10.3995 10.9464 10.2307C10.9651 10.0619 10.9161 9.89258 10.81 9.75998C10.7039 9.62737 10.5495 9.54233 10.3807 9.52357C10.2119 9.50482 10.0426 9.55388 9.91 9.65997V9.64998Z" fill="#4E4E4E"/>
+<path d="M9.58001 6.60997C9.51667 6.54169 9.43939 6.48782 9.35342 6.45201C9.26744 6.4162 9.17477 6.39928 9.08169 6.4024C8.9886 6.40553 8.89728 6.42861 8.8139 6.47011C8.73051 6.5116 8.657 6.57054 8.59838 6.64291C8.53976 6.71529 8.49739 6.7994 8.47411 6.88959C8.45084 6.97977 8.44722 7.07391 8.46349 7.16562C8.47977 7.25732 8.51556 7.34446 8.56844 7.42113C8.62133 7.49779 8.69006 7.56219 8.77001 7.60997L9.95 8.54997C10.0662 8.64288 10.2112 8.69239 10.36 8.68997C10.4576 8.69081 10.5541 8.66967 10.6424 8.62813C10.7307 8.58658 10.8085 8.5257 10.87 8.44998C10.9762 8.31292 11.0242 8.13959 11.0036 7.96744C10.983 7.79529 10.8955 7.63815 10.76 7.52998L9.58001 6.60997Z" fill="#4E4E4E"/>
+<path d="M13.37 9.65002C13.3066 9.58174 13.2293 9.52786 13.1434 9.49205C13.0574 9.45624 12.9647 9.43932 12.8716 9.44244C12.7785 9.44557 12.6872 9.46865 12.6038 9.51015C12.5205 9.55164 12.447 9.61058 12.3883 9.68295C12.3297 9.75533 12.2873 9.83946 12.264 9.92964C12.2408 10.0198 12.2371 10.114 12.2534 10.2057C12.2697 10.2974 12.3055 10.3845 12.3584 10.4612C12.4113 10.5378 12.48 10.6022 12.56 10.65L13.6999 11.56C13.8139 11.6501 13.9547 11.6994 14.1 11.7C14.1982 11.6989 14.295 11.6759 14.3832 11.6327C14.4715 11.5894 14.5489 11.527 14.6099 11.45C14.6635 11.3835 14.7033 11.3069 14.7268 11.2248C14.7503 11.1426 14.7571 11.0566 14.7468 10.9718C14.7366 10.887 14.7095 10.8051 14.6671 10.731C14.6247 10.6568 14.5679 10.5919 14.5 10.54L13.37 9.65002Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/message_new.svg b/assets/icons/message_new.svg
new file mode 100644
index 00000000..5b84695c
--- /dev/null
+++ b/assets/icons/message_new.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4:5582)">
+<path d="M16.42 14.31L17.79 12.99C17.9513 12.8366 18.0797 12.652 18.1674 12.4475C18.2551 12.2429 18.3002 12.0226 18.3 11.8V8.41C17.993 8.46567 17.682 8.49577 17.37 8.5C17.24 8.5 17.12 8.5 17 8.5V11.84C16.9976 11.9345 16.9581 12.0243 16.89 12.09L15.04 13.88C14.9768 13.9398 14.9264 14.0119 14.8919 14.0919C14.8575 14.1718 14.8398 14.2579 14.8398 14.345C14.8398 14.4321 14.8575 14.5182 14.8919 14.5981C14.9264 14.6781 14.9768 14.7502 15.04 14.81L17.12 16.81C17.1425 16.8301 17.1603 16.8548 17.1724 16.8824C17.1845 16.91 17.1905 16.9399 17.19 16.97C17.1899 17 17.1836 17.0297 17.1715 17.0573C17.1595 17.0848 17.142 17.1095 17.12 17.13L14.56 19.63C14.5099 19.6771 14.4438 19.7033 14.375 19.7033C14.3062 19.7033 14.2401 19.6771 14.19 19.63L12.19 17.63L8.81 14.34L6.75 12.34C6.7219 12.3018 6.68818 12.2681 6.64999 12.24C6.49172 12.1169 6.37909 11.9444 6.32999 11.75V4.22C6.32999 4.17404 6.33904 4.12852 6.35663 4.08606C6.37422 4.0436 6.39999 4.00502 6.4325 3.97252C6.465 3.94002 6.50359 3.91423 6.54605 3.89664C6.58851 3.87905 6.63403 3.87 6.67999 3.87H12.37C12.37 3.74 12.37 3.63 12.37 3.5C12.3742 3.18804 12.4043 2.87698 12.46 2.57001H6.64999C6.21239 2.57001 5.79271 2.74383 5.48328 3.05327C5.17384 3.3627 5 3.78239 5 4.22V11.75C5.01905 12.0242 5.09254 12.2919 5.21616 12.5374C5.33977 12.783 5.51105 13.0014 5.72 13.18L7.10001 14.53L5.44998 16.1C5.30597 16.2346 5.19091 16.3971 5.11182 16.5776C5.03273 16.7581 4.99128 16.9529 4.98999 17.15C4.99166 17.3485 5.03325 17.5446 5.11227 17.7267C5.1913 17.9088 5.30614 18.0732 5.44998 18.21L7.89999 20.54C8.18602 20.8113 8.56574 20.9618 8.95999 20.96C9.35463 20.9639 9.73512 20.8131 10.02 20.54L11.66 18.98L13.24 20.52C13.5343 20.8029 13.9267 20.961 14.335 20.961C14.7433 20.961 15.1357 20.8029 15.43 20.52L17.99 18.02C18.1366 17.879 18.2529 17.7096 18.332 17.5223C18.4111 17.3349 18.4512 17.1334 18.45 16.93C18.4518 16.7265 18.4119 16.5249 18.3328 16.3374C18.2537 16.1499 18.137 15.9806 17.99 15.84L16.42 14.31ZM9.16998 19.64C9.12436 19.6801 9.06573 19.7022 9.005 19.7022C8.94428 19.7022 8.88562 19.6801 8.84 19.64L6.37 17.31C6.35137 17.296 6.33625 17.2779 6.32584 17.2571C6.31542 17.2363 6.31 17.2133 6.31 17.19C6.31077 17.1683 6.31658 17.147 6.327 17.1279C6.33741 17.1088 6.35214 17.0924 6.37 17.08L8.07001 15.5L10.77 18.14L9.16998 19.64Z" fill="#4E4E4E"/>
+<path d="M9.91 9.21998L8.76999 10.12C8.63515 10.2264 8.54789 10.3818 8.52728 10.5523C8.50667 10.7228 8.55439 10.8945 8.66 11.03C8.72104 11.107 8.79849 11.1694 8.88672 11.2126C8.97495 11.2559 9.07172 11.2789 9.16998 11.28C9.31802 11.2778 9.46156 11.2288 9.57999 11.14L10.71 10.23C10.7757 10.1774 10.8303 10.1125 10.8709 10.0388C10.9114 9.96518 10.9371 9.88426 10.9464 9.80068C10.9557 9.71711 10.9484 9.63253 10.925 9.55177C10.9016 9.471 10.8625 9.39564 10.81 9.32998C10.7575 9.26432 10.6925 9.20965 10.6189 9.16909C10.5452 9.12853 10.4643 9.10286 10.3807 9.09358C10.2971 9.08429 10.2125 9.09157 10.1318 9.11497C10.051 9.13837 9.97566 9.17744 9.91 9.22997V9.21998Z" fill="#4E4E4E"/>
+<path d="M9.58001 6.17998C9.51667 6.11169 9.43939 6.05783 9.35342 6.02202C9.26744 5.9862 9.17477 5.96929 9.08169 5.97241C8.9886 5.97553 8.89728 5.99862 8.8139 6.04011C8.73051 6.08161 8.657 6.14055 8.59838 6.21292C8.53976 6.2853 8.49739 6.36941 8.47411 6.45959C8.45084 6.54978 8.44722 6.64392 8.46349 6.73563C8.47977 6.82733 8.51556 6.91447 8.56844 6.99113C8.62133 7.0678 8.69006 7.13219 8.77001 7.17998L9.95 8.11998C10.0662 8.21289 10.2112 8.2624 10.36 8.25998C10.4576 8.26082 10.5541 8.23968 10.6424 8.19813C10.7307 8.15659 10.8085 8.09571 10.87 8.01999C10.9762 7.88293 11.0242 7.70959 11.0036 7.53744C10.983 7.36529 10.8955 7.20815 10.76 7.09999L9.58001 6.17998Z" fill="#4E4E4E"/>
+<path d="M13.37 9.22003C13.3066 9.15175 13.2293 9.09787 13.1434 9.06206C13.0574 9.02624 12.9647 9.00933 12.8716 9.01245C12.7785 9.01557 12.6872 9.03866 12.6038 9.08015C12.5205 9.12165 12.447 9.18059 12.3883 9.25296C12.3297 9.32533 12.2873 9.40947 12.264 9.49965C12.2408 9.58983 12.2371 9.68396 12.2534 9.77566C12.2697 9.86737 12.3055 9.95451 12.3584 10.0312C12.4113 10.1078 12.48 10.1722 12.56 10.22L13.6999 11.13C13.8139 11.2201 13.9547 11.2694 14.1 11.27C14.1982 11.269 14.295 11.2459 14.3832 11.2027C14.4715 11.1594 14.5489 11.097 14.6099 11.02C14.6635 10.9535 14.7033 10.8769 14.7268 10.7948C14.7503 10.7126 14.7571 10.6266 14.7468 10.5418C14.7366 10.457 14.7095 10.3751 14.6671 10.301C14.6247 10.2268 14.5679 10.1619 14.5 10.11L13.37 9.22003Z" fill="#4E4E4E"/>
+<path d="M13.37 6.5L12.54 7.14999C12.4045 7.25816 12.317 7.4153 12.2964 7.58745C12.2758 7.7596 12.3238 7.93295 12.43 8.07001C12.4915 8.14573 12.5693 8.20661 12.6576 8.24815C12.7459 8.2897 12.8424 8.31084 12.94 8.31C13.0891 8.31415 13.2346 8.26445 13.35 8.17L14.28 7.42999C13.9375 7.16095 13.6315 6.84831 13.37 6.5Z" fill="#4E4E4E"/>
+<path d="M17.37 7C19.303 7 20.87 5.433 20.87 3.5C20.87 1.567 19.303 0 17.37 0C15.437 0 13.87 1.567 13.87 3.5C13.87 5.433 15.437 7 17.37 7Z" fill="#F37462"/>
+</g>
+<defs>
+<clipPath id="clip0_4:5582">
+<rect width="15.87" height="21" fill="white" transform="translate(5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/more.svg b/assets/icons/more.svg
new file mode 100644
index 00000000..aab4d84c
--- /dev/null
+++ b/assets/icons/more.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="6" r="1.5" fill="#4E4E4E"/>
+<circle cx="12" cy="12" r="1.5" fill="#4E4E4E"/>
+<circle cx="12" cy="18" r="1.5" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/notification_filled_default.svg b/assets/icons/notification_filled_default.svg
new file mode 100644
index 00000000..1c9401fb
--- /dev/null
+++ b/assets/icons/notification_filled_default.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9701 14V10C17.9701 8.4087 17.338 6.88257 16.2128 5.75735C15.0875 4.63214 13.5614 4 11.9701 4C10.3788 4 8.85269 4.63214 7.72747 5.75735C6.60225 6.88257 5.97011 8.4087 5.97011 10V14C5.3999 14.0199 4.86094 14.2655 4.4718 14.6827C4.08266 15.1 3.87522 15.6548 3.89511 16.225C3.915 16.7952 4.16059 17.3342 4.57786 17.7233C4.99513 18.1125 5.5499 18.3199 6.12011 18.3H17.8201C18.3903 18.3199 18.9451 18.1125 19.3624 17.7233C19.7796 17.3342 20.0252 16.7952 20.0451 16.225C20.065 15.6548 19.8576 15.1 19.4684 14.6827C19.0793 14.2655 18.5403 14.0199 17.9701 14Z" fill="#4E4E4E"/>
+<path d="M13.9101 18.59H10.0601C9.93729 18.5916 9.81729 18.627 9.71324 18.6923C9.60919 18.7575 9.52507 18.8501 9.47009 18.96C9.4196 19.0737 9.4013 19.1991 9.41717 19.3226C9.43304 19.446 9.48249 19.5627 9.5601 19.66C9.85569 20.0165 10.2262 20.3035 10.6454 20.5004C11.0646 20.6974 11.522 20.7995 11.9851 20.7995C12.4482 20.7995 12.9056 20.6974 13.3248 20.5004C13.7439 20.3035 14.1145 20.0165 14.4101 19.66C14.4898 19.5638 14.5406 19.4469 14.5565 19.323C14.5724 19.1991 14.5529 19.0732 14.5001 18.96C14.4451 18.8501 14.361 18.7575 14.2569 18.6923C14.1529 18.627 14.0329 18.5916 13.9101 18.59Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/notification_filled_new.svg b/assets/icons/notification_filled_new.svg
new file mode 100644
index 00000000..f0f13d3d
--- /dev/null
+++ b/assets/icons/notification_filled_new.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.91 19.4H10.06C9.93668 19.3994 9.81573 19.4338 9.71126 19.4994C9.60679 19.5649 9.52311 19.6587 9.46999 19.77C9.41924 19.882 9.40078 20.0059 9.41668 20.1279C9.43258 20.2498 9.48221 20.3648 9.55999 20.46C9.85557 20.8166 10.2261 21.1035 10.6453 21.3005C11.0644 21.4975 11.5219 21.5996 11.985 21.5996C12.4481 21.5996 12.9055 21.4975 13.3247 21.3005C13.7438 21.1035 14.1144 20.8166 14.41 20.46C14.49 20.366 14.541 20.2508 14.557 20.1283C14.5729 20.0059 14.5531 19.8815 14.5 19.77C14.4469 19.6587 14.3632 19.5649 14.2587 19.4994C14.1542 19.4338 14.0333 19.3994 13.91 19.4Z" fill="#4E4E4E"/>
+<path d="M17.2 10C19.1329 10 20.7 8.433 20.7 6.5C20.7 4.567 19.1329 3 17.2 3C15.267 3 13.7 4.567 13.7 6.5C13.7 8.433 15.267 10 17.2 10Z" fill="#F37462"/>
+<path d="M17.97 14.81V11.43C17.715 11.4691 17.4578 11.4925 17.2 11.5C15.8739 11.5 14.6021 10.9732 13.6644 10.0355C12.7267 9.09783 12.2 7.82607 12.2 6.49999C12.2042 5.92942 12.3092 5.36407 12.51 4.82998C12.3368 4.82002 12.1632 4.82002 11.99 4.82998C10.3987 4.82998 8.87253 5.46213 7.74732 6.58735C6.6221 7.71257 5.98996 9.23868 5.98996 10.83V14.83C5.44394 14.8812 4.93812 15.1392 4.57602 15.551C4.21393 15.9629 4.02292 16.4976 4.04209 17.0457C4.06125 17.5938 4.28915 18.1138 4.67912 18.4994C5.0691 18.885 5.59169 19.107 6.13996 19.12H17.81C18.3582 19.107 18.8808 18.885 19.2708 18.4994C19.6608 18.1138 19.8887 17.5938 19.9078 17.0457C19.927 16.4976 19.736 15.9629 19.3739 15.551C19.0118 15.1392 18.506 14.8812 17.96 14.83L17.97 14.81Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/notification_outlined_default.svg b/assets/icons/notification_outlined_default.svg
new file mode 100644
index 00000000..e5294605
--- /dev/null
+++ b/assets/icons/notification_outlined_default.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9701 14V10C17.9701 8.40871 17.338 6.88258 16.2128 5.75736C15.0875 4.63214 13.5614 4 11.9701 4C10.3788 4 8.85269 4.63214 7.72747 5.75736C6.60225 6.88258 5.97011 8.40871 5.97011 10V14C5.3999 14.0199 4.86094 14.2655 4.4718 14.6828C4.08266 15.1 3.87522 15.6548 3.89511 16.225C3.915 16.7952 4.16059 17.3342 4.57786 17.7233C4.99513 18.1125 5.5499 18.3199 6.12011 18.3H8.88011C9.03121 19.0047 9.4194 19.6363 9.97992 20.0894C10.5404 20.5425 11.2394 20.7896 11.9601 20.7896C12.6808 20.7896 13.3798 20.5425 13.9403 20.0894C14.5008 19.6363 14.889 19.0047 15.0401 18.3H17.8201C18.3903 18.3199 18.9451 18.1125 19.3624 17.7233C19.7796 17.3342 20.0252 16.7952 20.0451 16.225C20.065 15.6548 19.8576 15.1 19.4684 14.6828C19.0793 14.2655 18.5403 14.0199 17.9701 14ZM11.9701 19.5C11.5939 19.4996 11.2268 19.3845 10.9178 19.1701C10.6087 18.9557 10.3723 18.6522 10.2401 18.3H13.6901C13.561 18.6482 13.3295 18.9492 13.026 19.1634C12.7226 19.3776 12.3615 19.4949 11.9901 19.5H11.9701ZM17.8001 17H6.15011C5.92468 17 5.70848 16.9105 5.54907 16.751C5.38966 16.5916 5.30011 16.3754 5.30011 16.15C5.30011 15.9246 5.38966 15.7084 5.54907 15.549C5.70848 15.3896 5.92468 15.3 6.15011 15.3H7.30011V9.98C7.35581 8.77491 7.87372 7.63762 8.74623 6.8045C9.61874 5.97138 10.7787 5.50651 11.9851 5.50651C13.1915 5.50651 14.3515 5.97138 15.224 6.8045C16.0965 7.63762 16.6144 8.77491 16.6701 9.98V15.3H17.8201C18.0455 15.3 18.2617 15.3896 18.4212 15.549C18.5806 15.7084 18.6701 15.9246 18.6701 16.15C18.6701 16.3754 18.5806 16.5916 18.4212 16.751C18.2617 16.9105 18.0455 17 17.8201 17H17.8001Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/notification_outlined_new.svg b/assets/icons/notification_outlined_new.svg
new file mode 100644
index 00000000..d35ca1f4
--- /dev/null
+++ b/assets/icons/notification_outlined_new.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.29 10C19.223 10 20.79 8.433 20.79 6.5C20.79 4.567 19.223 3 17.29 3C15.357 3 13.79 4.567 13.79 6.5C13.79 8.433 15.357 10 17.29 10Z" fill="#F37462"/>
+<path d="M17.97 14.23V11.43C17.7485 11.4687 17.5246 11.4921 17.3 11.5C17.08 11.5 16.88 11.5 16.67 11.44V15.52H17.82C18.0454 15.52 18.2616 15.6096 18.421 15.769C18.5804 15.9284 18.67 16.1446 18.67 16.37C18.67 16.5955 18.5804 16.8117 18.421 16.9711C18.2616 17.1305 18.0454 17.22 17.82 17.22H6.14997C5.92453 17.22 5.70833 17.1305 5.54892 16.9711C5.38952 16.8117 5.29996 16.5955 5.29996 16.37C5.29996 16.1446 5.38952 15.9284 5.54892 15.769C5.70833 15.6096 5.92453 15.52 6.14997 15.52H7.29996V10.2C7.30261 8.95789 7.7979 7.76753 8.67716 6.89014C9.55642 6.01276 10.7478 5.52001 11.99 5.52001C12.13 5.52001 12.26 5.52001 12.39 5.52001C12.482 5.07831 12.6334 4.65111 12.84 4.25002C11.9902 4.11803 11.1219 4.17242 10.2953 4.40945C9.46864 4.64647 8.70346 5.06045 8.05277 5.62267C7.40207 6.1849 6.88143 6.88192 6.52696 7.66541C6.1725 8.4489 5.99267 9.3001 5.99996 10.16V14.16C5.45393 14.2112 4.94813 14.4692 4.58603 14.8811C4.22394 15.293 4.03293 15.8277 4.0521 16.3757C4.07126 16.9238 4.29914 17.4439 4.68912 17.8295C5.0791 18.2151 5.6017 18.4371 6.14997 18.45H8.90996C9.06106 19.1547 9.44925 19.7863 10.0098 20.2394C10.5703 20.6925 11.2692 20.9396 11.99 20.9396C12.7107 20.9396 13.4096 20.6925 13.9702 20.2394C14.5307 19.7863 14.9189 19.1547 15.07 18.45H17.82C18.3682 18.4371 18.8908 18.2151 19.2808 17.8295C19.6708 17.4439 19.8987 16.9238 19.9178 16.3757C19.937 15.8277 19.746 15.293 19.3839 14.8811C19.0218 14.4692 18.516 14.2112 17.97 14.16V14.23ZM11.97 19.72C11.5941 19.7182 11.2276 19.6026 10.9188 19.3884C10.61 19.1741 10.3733 18.8714 10.24 18.52H13.69C13.5608 18.8682 13.3293 19.1692 13.0259 19.3834C12.7225 19.5976 12.3613 19.7149 11.99 19.72H11.97Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/picture.svg b/assets/icons/picture.svg
new file mode 100644
index 00000000..925442d3
--- /dev/null
+++ b/assets/icons/picture.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.65 3.96002H3.65002C3.47844 3.9626 3.31458 4.03192 3.19324 4.15326C3.07189 4.2746 3.00258 4.43843 3 4.61002V18.61C3.00258 18.7816 3.07189 18.9454 3.19324 19.0668C3.31458 19.1881 3.47844 19.2574 3.65002 19.26H19.65C19.8233 19.26 19.9897 19.1919 20.1132 19.0703C20.2367 18.9486 20.3074 18.7833 20.31 18.61V4.61002C20.3074 4.43671 20.2367 4.2714 20.1132 4.14978C19.9897 4.02816 19.8233 3.96 19.65 3.96002ZM8.52002 7.48001C8.81669 7.48001 9.10669 7.568 9.35336 7.73282C9.60004 7.89764 9.79229 8.13192 9.90582 8.40601C10.0194 8.6801 10.0491 8.98167 9.99118 9.27264C9.9333 9.56362 9.79044 9.8309 9.58066 10.0407C9.37088 10.2505 9.10362 10.3933 8.81265 10.4512C8.52168 10.5091 8.22007 10.4794 7.94598 10.3658C7.67189 10.2523 7.43762 10.0601 7.2728 9.81339C7.10797 9.56671 7.02002 9.27668 7.02002 8.98001C7.03045 8.58916 7.19305 8.21784 7.47324 7.94513C7.75342 7.67242 8.12903 7.51988 8.52002 7.52002V7.48001ZM18.38 17.61H5.26001C5.15692 17.6074 5.05665 17.5758 4.97064 17.5189C4.88464 17.462 4.81637 17.3821 4.77362 17.2882C4.73087 17.1944 4.71534 17.0904 4.72885 16.9882C4.74236 16.8859 4.78435 16.7895 4.85001 16.71L7.69 13.43C7.79214 13.3181 7.91648 13.2288 8.05508 13.1676C8.19369 13.1065 8.34354 13.0749 8.49503 13.0749C8.64652 13.0749 8.79633 13.1065 8.93494 13.1676C9.07354 13.2288 9.19788 13.3181 9.30002 13.43L10.73 14.96L13 12.33C13.1021 12.2181 13.2265 12.1288 13.3651 12.0676C13.5037 12.0065 13.6535 11.9749 13.805 11.9749C13.9565 11.9749 14.1063 12.0065 14.2449 12.0676C14.3835 12.1288 14.5079 12.2181 14.61 12.33L18.78 16.78C18.8404 16.8581 18.8784 16.9512 18.8896 17.0493C18.9008 17.1473 18.885 17.2466 18.8437 17.3363C18.8025 17.426 18.7375 17.5026 18.6557 17.5579C18.5739 17.6132 18.4786 17.6451 18.38 17.65V17.61Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg
new file mode 100644
index 00000000..d39c3fc1
--- /dev/null
+++ b/assets/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.65 11H12.3V5.64999C12.3 5.4776 12.2315 5.31227 12.1096 5.19037C11.9877 5.06847 11.8224 5 11.65 5C11.4776 5 11.3123 5.06847 11.1904 5.19037C11.0685 5.31227 11 5.4776 11 5.64999V11H5.64999C5.4776 11 5.31228 11.0685 5.19038 11.1904C5.06849 11.3123 5 11.4776 5 11.65C5 11.8224 5.06849 11.9877 5.19038 12.1096C5.31228 12.2315 5.4776 12.3 5.64999 12.3H11V17.65C11 17.8224 11.0685 17.9877 11.1904 18.1096C11.3123 18.2315 11.4776 18.3 11.65 18.3C11.8224 18.3 11.9877 18.2315 12.1096 18.1096C12.2315 17.9877 12.3 17.8224 12.3 17.65V12.3H17.65C17.8224 12.3 17.9877 12.2315 18.1096 12.1096C18.2315 11.9877 18.3 11.8224 18.3 11.65C18.3 11.4776 18.2315 11.3123 18.1096 11.1904C17.9877 11.0685 17.8224 11 17.65 11Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/profile_filled.svg b/assets/icons/profile_filled.svg
new file mode 100644
index 00000000..185cef09
--- /dev/null
+++ b/assets/icons/profile_filled.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1001 12C14.3092 12 16.1001 10.2091 16.1001 8C16.1001 5.79086 14.3092 4 12.1001 4C9.89096 4 8.1001 5.79086 8.1001 8C8.1001 10.2091 9.89096 12 12.1001 12Z" fill="#4E4E4E"/>
+<path d="M20.1899 19.26C19.9488 17.2841 18.9929 15.4648 17.5026 14.1452C16.0122 12.8257 14.0905 12.0972 12.0999 12.0972C10.1094 12.0972 8.18761 12.8257 6.69726 14.1452C5.20692 15.4648 4.25103 17.2841 4.00993 19.26C3.98592 19.4663 4.00556 19.6752 4.06758 19.8733C4.1296 20.0715 4.23262 20.2543 4.36993 20.41C4.50484 20.5637 4.67093 20.6869 4.85715 20.7714C5.04336 20.8559 5.24545 20.8997 5.44993 20.9H18.7499C18.9544 20.8997 19.1565 20.8559 19.3427 20.7714C19.5289 20.6869 19.695 20.5637 19.8299 20.41C19.9672 20.2543 20.0703 20.0715 20.1323 19.8733C20.1943 19.6752 20.2139 19.4663 20.1899 19.26Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/profile_image.svg b/assets/icons/profile_image.svg
new file mode 100644
index 00000000..2a5b79f9
--- /dev/null
+++ b/assets/icons/profile_image.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F9F8FF"/>
+<path d="M12 11.32C14.0545 11.32 15.72 9.6545 15.72 7.6C15.72 5.54551 14.0545 3.88 12 3.88C9.94553 3.88 8.28003 5.54551 8.28003 7.6C8.28003 9.6545 9.94553 11.32 12 11.32Z" fill="#E5E1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.80999 19C5.70383 18.9979 5.59928 18.9737 5.50308 18.9287C5.40687 18.8838 5.32113 18.8192 5.25141 18.7392C5.18169 18.6591 5.12954 18.5653 5.09829 18.4638C5.06704 18.3623 5.05741 18.2554 5.07 18.15C5.30776 16.4814 6.13957 14.9546 7.41264 13.8501C8.68571 12.7456 10.3146 12.1375 12 12.1375C13.6854 12.1375 15.3143 12.7456 16.5874 13.8501C17.8604 14.9546 18.6922 16.4814 18.93 18.15C18.9426 18.2554 18.9329 18.3623 18.9017 18.4638C18.8704 18.5653 18.8183 18.6591 18.7486 18.7392C18.6789 18.8192 18.5931 18.8838 18.4969 18.9287C18.4007 18.9737 18.2962 18.9979 18.19 19H5.80999Z" fill="#E5E1FF"/>
+</svg>
diff --git a/assets/icons/profile_outlined.svg b/assets/icons/profile_outlined.svg
new file mode 100644
index 00000000..2858ee05
--- /dev/null
+++ b/assets/icons/profile_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1001 5.3C12.6341 5.3 13.1561 5.45836 13.6001 5.75504C14.0442 6.05172 14.3902 6.47339 14.5946 6.96675C14.7989 7.46011 14.8524 8.003 14.7482 8.52675C14.644 9.0505 14.3869 9.53159 14.0093 9.90919C13.6317 10.2868 13.1506 10.5439 12.6268 10.6481C12.1031 10.7523 11.5602 10.6988 11.0668 10.4945C10.5735 10.2901 10.1518 9.94406 9.85513 9.50005C9.55845 9.05603 9.4001 8.53401 9.4001 8C9.4001 7.28392 9.68455 6.59716 10.1909 6.09081C10.6973 5.58446 11.384 5.3 12.1001 5.3ZM12.1001 4C11.309 4 10.5356 4.23459 9.87782 4.67412C9.22003 5.11364 8.70734 5.73836 8.40459 6.46927C8.10184 7.20017 8.02262 8.00444 8.17696 8.78036C8.3313 9.55629 8.71226 10.269 9.27167 10.8284C9.83108 11.3878 10.5438 11.7688 11.3197 11.9231C12.0957 12.0775 12.8999 11.9983 13.6308 11.6955C14.3617 11.3928 14.9865 10.8801 15.426 10.2223C15.8655 9.56448 16.1001 8.79113 16.1001 8C16.1001 6.93913 15.6787 5.92172 14.9285 5.17157C14.1784 4.42142 13.161 4 12.1001 4Z" fill="#4E4E4E"/>
+<path d="M18.7501 20.9H5.45013C5.24564 20.8997 5.04356 20.8558 4.85734 20.7713C4.67112 20.6868 4.50503 20.5637 4.37012 20.41C4.23173 20.255 4.12802 20.0722 4.06594 19.8739C4.00386 19.6755 3.98483 19.4662 4.01012 19.26C4.25122 17.2841 5.20711 15.4647 6.69746 14.1452C8.1878 12.8256 10.1096 12.0971 12.1001 12.0971C14.0907 12.0971 16.0124 12.8256 17.5028 14.1452C18.9931 15.4647 19.949 17.2841 20.1901 19.26C20.2154 19.4662 20.1964 19.6755 20.1343 19.8739C20.0722 20.0722 19.9685 20.255 19.8301 20.41C19.6952 20.5637 19.5291 20.6868 19.3429 20.7713C19.1567 20.8558 18.9546 20.8997 18.7501 20.9ZM12.1001 13.4C10.4301 13.3993 8.81732 14.0087 7.56507 15.1136C6.31282 16.2185 5.50735 17.7429 5.30012 19.4C5.29102 19.4204 5.28632 19.4426 5.28632 19.465C5.28632 19.4874 5.29102 19.5095 5.30012 19.53C5.33563 19.543 5.3746 19.543 5.41012 19.53H18.7101C18.7456 19.543 18.7846 19.543 18.8201 19.53C18.8292 19.5095 18.8339 19.4874 18.8339 19.465C18.8339 19.4426 18.8292 19.4204 18.8201 19.4C18.6147 17.7564 17.8207 16.243 16.5852 15.1399C15.3497 14.0367 13.7563 13.4186 12.1001 13.4Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/right.svg b/assets/icons/right.svg
new file mode 100644
index 00000000..dad56da5
--- /dev/null
+++ b/assets/icons/right.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.65048 19.4405C8.73604 19.4418 8.82094 19.4255 8.90002 19.3929C8.97911 19.3602 9.05072 19.3118 9.11047 19.2505L16.1805 12.1805C16.3002 12.0574 16.3672 11.8923 16.3672 11.7205C16.3672 11.5487 16.3002 11.3837 16.1805 11.2605L9.11047 4.19054C8.98847 4.06854 8.82302 4 8.65048 4C8.47795 4 8.31246 4.06854 8.19046 4.19054C8.06846 4.31254 7.99994 4.478 7.99994 4.65054C7.99994 4.82307 8.06846 4.98854 8.19046 5.11053L14.8005 11.7205L8.19046 18.3305C8.07073 18.4537 8.00375 18.6188 8.00375 18.7905C8.00375 18.9623 8.07073 19.1273 8.19046 19.2505C8.25021 19.3118 8.32182 19.3602 8.40091 19.3929C8.48 19.4255 8.56492 19.4418 8.65048 19.4405Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/scrap_filled.svg b/assets/icons/scrap_filled.svg
new file mode 100644
index 00000000..57e1afad
--- /dev/null
+++ b/assets/icons/scrap_filled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.65 4H6.64999C6.21239 4 5.79271 4.17384 5.48328 4.48328C5.17384 4.79271 5 5.21239 5 5.64999V18.58C5.00215 18.7981 5.06574 19.0112 5.1835 19.1948C5.30126 19.3784 5.4684 19.5251 5.66574 19.618C5.86308 19.7109 6.08262 19.7463 6.29916 19.7202C6.51571 19.694 6.72048 19.6073 6.88998 19.47L11.65 15.47L16.41 19.47C16.621 19.6364 16.8813 19.7279 17.15 19.73C17.3197 19.732 17.4874 19.6943 17.64 19.62C17.8327 19.5319 17.9967 19.3915 18.1134 19.2147C18.2301 19.0378 18.2948 18.8318 18.3 18.62V5.64999C18.3 5.21239 18.1261 4.79271 17.8167 4.48328C17.5073 4.17384 17.0876 4 16.65 4Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/scrap_outlined.svg b/assets/icons/scrap_outlined.svg
new file mode 100644
index 00000000..b2bd4736
--- /dev/null
+++ b/assets/icons/scrap_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.15 19.73C5.98033 19.732 5.81255 19.6943 5.66 19.62C5.46731 19.5319 5.30325 19.3915 5.18655 19.2147C5.06985 19.0379 5.00521 18.8318 5 18.62V5.64999C5 5.21239 5.17384 4.7927 5.48328 4.48326C5.79271 4.17383 6.21239 4 6.65 4H16.65C16.8667 4 17.0812 4.04267 17.2814 4.1256C17.4816 4.20852 17.6635 4.33004 17.8167 4.48326C17.97 4.63648 18.0915 4.81838 18.1744 5.01857C18.2573 5.21876 18.3 5.43331 18.3 5.64999V18.58C18.2978 18.7981 18.2342 19.0112 18.1165 19.1948C17.9987 19.3784 17.8316 19.5251 17.6343 19.618C17.4369 19.7109 17.2174 19.7463 17.0008 19.7202C16.7843 19.694 16.5795 19.6073 16.41 19.47L11.65 15.47L6.89 19.47C6.6798 19.6378 6.41896 19.7294 6.15 19.73ZM6.65 5.29999C6.55718 5.29999 6.46815 5.33687 6.40251 5.40251C6.33687 5.46815 6.3 5.55717 6.3 5.64999V18.26L11.65 13.8L17 18.26V5.64999C17 5.55717 16.9631 5.46815 16.8975 5.40251C16.8318 5.33687 16.7428 5.29999 16.65 5.29999H6.65Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
new file mode 100644
index 00000000..ce5af060
--- /dev/null
+++ b/assets/icons/search.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.46 18.57L15.59 14.7C16.4837 13.3487 16.8243 11.7057 16.5415 10.1105C16.2587 8.51523 15.3741 7.0895 14.0703 6.12773C12.7666 5.16596 11.1432 4.74161 9.5356 4.94232C7.92796 5.14303 6.45879 5.95346 5.4315 7.20625C4.40421 8.45904 3.89726 10.0585 4.01536 11.6743C4.13346 13.2901 4.86757 14.7989 6.06609 15.889C7.26462 16.9791 8.83602 17.5673 10.4558 17.5321C12.0755 17.497 13.6199 16.8411 14.77 15.7L18.54 19.5C18.6003 19.5605 18.672 19.6084 18.751 19.6412C18.8299 19.6739 18.9145 19.6908 19 19.6908C19.0854 19.6908 19.17 19.6739 19.2489 19.6412C19.3279 19.6084 19.3996 19.5605 19.46 19.5C19.5827 19.3764 19.6516 19.2092 19.6516 19.035C19.6516 18.8608 19.5827 18.6936 19.46 18.57ZM10.29 16.28C9.30105 16.28 8.33435 15.9867 7.5121 15.4373C6.68986 14.8879 6.04899 14.107 5.67056 13.1934C5.29212 12.2798 5.1931 11.2744 5.38603 10.3045C5.57895 9.33464 6.05516 8.44372 6.75442 7.74446C7.45368 7.0452 8.3446 6.56899 9.3145 6.37607C10.2844 6.18314 11.2897 6.28215 12.2034 6.66059C13.117 7.03903 13.8979 7.6799 14.4473 8.50214C14.9967 9.32439 15.29 10.2911 15.29 11.28C15.29 12.6061 14.7632 13.8778 13.8255 14.8155C12.8878 15.7532 11.616 16.28 10.29 16.28Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/setting.svg b/assets/icons/setting.svg
new file mode 100644
index 00000000..a25def0d
--- /dev/null
+++ b/assets/icons/setting.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.65 7.18001H7.15C7.27429 7.4261 7.46441 7.63288 7.69922 7.77735C7.93403 7.92181 8.20431 7.99831 8.48 7.99831C8.75569 7.99831 9.02598 7.92181 9.26079 7.77735C9.4956 7.63288 9.68572 7.4261 9.81001 7.18001H19.65C19.8224 7.18001 19.9877 7.11154 20.1096 6.98964C20.2315 6.86774 20.3 6.70241 20.3 6.53002C20.3 6.35763 20.2315 6.19229 20.1096 6.07039C19.9877 5.94849 19.8224 5.88002 19.65 5.88002H9.81001C9.69338 5.61703 9.50262 5.39372 9.26109 5.23743C9.01955 5.08114 8.73769 4.99864 8.45 5.00002C8.16286 5.00114 7.88208 5.08466 7.641 5.24065C7.39992 5.39664 7.20869 5.61855 7.09 5.88002H4.65C4.47761 5.88002 4.31228 5.94849 4.19038 6.07039C4.06849 6.19229 4 6.35763 4 6.53002C4 6.70241 4.06849 6.86774 4.19038 6.98964C4.31228 7.11154 4.47761 7.18001 4.65 7.18001Z" fill="#4E4E4E"/>
+<path d="M19.65 11.88H17.81C17.6934 11.617 17.5026 11.3937 17.2611 11.2374C17.0195 11.0811 16.7377 10.9986 16.45 11C16.1629 11.0011 15.8821 11.0847 15.641 11.2406C15.3999 11.3966 15.2087 11.6186 15.09 11.88H4.65C4.47761 11.88 4.31228 11.9485 4.19038 12.0704C4.06849 12.1923 4 12.3576 4 12.53C4 12.7024 4.06849 12.8677 4.19038 12.9896C4.31228 13.1115 4.47761 13.18 4.65 13.18H15.15C15.2743 13.4261 15.4644 13.6329 15.6992 13.7773C15.934 13.9218 16.2043 13.9983 16.48 13.9983C16.7557 13.9983 17.026 13.9218 17.2608 13.7773C17.4956 13.6329 17.6857 13.4261 17.81 13.18H19.65C19.8224 13.18 19.9877 13.1115 20.1096 12.9896C20.2315 12.8677 20.3 12.7024 20.3 12.53C20.3 12.3576 20.2315 12.1923 20.1096 12.0704C19.9877 11.9485 19.8224 11.88 19.65 11.88Z" fill="#4E4E4E"/>
+<path d="M19.65 17.88H13.51C13.3925 17.6175 13.2016 17.3946 12.9603 17.2383C12.719 17.0819 12.4376 16.9987 12.15 16.9987C11.8624 16.9987 11.581 17.0819 11.3397 17.2383C11.0984 17.3946 10.9075 17.6175 10.79 17.88H4.65C4.47761 17.88 4.31228 17.9484 4.19038 18.0703C4.06849 18.1922 4 18.3576 4 18.53C4 18.7024 4.06849 18.8677 4.19038 18.9896C4.31228 19.1115 4.47761 19.18 4.65 19.18H10.82C10.9443 19.426 11.1344 19.6328 11.3692 19.7773C11.604 19.9218 11.8743 19.9983 12.15 19.9983C12.4257 19.9983 12.696 19.9218 12.9308 19.7773C13.1656 19.6328 13.3557 19.426 13.48 19.18H19.65C19.8224 19.18 19.9877 19.1115 20.1096 18.9896C20.2315 18.8677 20.3 18.7024 20.3 18.53C20.3 18.3576 20.2315 18.1922 20.1096 18.0703C19.9877 17.9484 19.8224 17.88 19.65 17.88Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/icons/write.svg b/assets/icons/write.svg
new file mode 100644
index 00000000..7085e676
--- /dev/null
+++ b/assets/icons/write.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.97 5.35002L18.29 7.67002L7.88996 18.07L5.33998 18.31L5.56997 15.75L15.97 5.35002ZM15.97 4.01003C15.6579 4.01235 15.3595 4.13819 15.14 4.36002L4.61997 14.87C4.42084 15.0633 4.2998 15.3232 4.27996 15.6L3.99996 18.6C3.99175 18.7284 4.00999 18.8571 4.05354 18.9782C4.09709 19.0993 4.16502 19.2101 4.25314 19.3038C4.34126 19.3976 4.44768 19.4722 4.56582 19.5232C4.68396 19.5741 4.81131 19.6003 4.93997 19.6H5.02996L8.02996 19.32C8.30728 19.3021 8.56778 19.1807 8.75997 18.98L19.28 8.47002C19.3897 8.36043 19.4768 8.23028 19.5362 8.087C19.5956 7.94372 19.6262 7.79013 19.6262 7.63503C19.6262 7.47992 19.5956 7.32634 19.5362 7.18306C19.4768 7.03978 19.3897 6.90962 19.28 6.80003L16.78 4.31002C16.5605 4.08819 16.262 3.96234 15.95 3.96002L15.97 4.01003Z" fill="#4E4E4E"/>
+</svg>
diff --git a/assets/images/profile_image.png b/assets/images/profile_image.png
new file mode 100644
index 00000000..9a3c2125
Binary files /dev/null and b/assets/images/profile_image.png differ
diff --git a/assets/logos/google_logo.svg b/assets/logos/google_logo.svg
new file mode 100644
index 00000000..c54974f6
--- /dev/null
+++ b/assets/logos/google_logo.svg
@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 14.5231C26 13.6545 25.9215 12.8205 25.7773 12.0187H14.2451V16.7553H20.8355C20.5517 18.2861 19.6888 19.5827 18.3922 20.4513V23.5233H22.3501C24.6642 21.3915 26 18.2526 26 14.5231Z" fill="#3E82F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2455 26.4903C17.5516 26.4903 20.3236 25.3932 22.3493 23.5233L18.3914 20.4514C17.2944 21.1862 15.8928 21.6199 14.2443 21.6199C11.0547 21.6199 8.35537 19.4662 7.39214 16.5719H3.30273V19.7442C5.31802 23.7459 9.45818 26.4903 14.2455 26.4903Z" fill="#32A753"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.39293 16.5719C7.14838 15.8371 7.0088 15.0526 7.0088 14.2451C7.0088 13.4376 7.14838 12.6532 7.39293 11.9184V8.74606H3.30238C2.47296 10.3991 2 12.2691 2 14.2451C2 16.2212 2.47296 18.0911 3.30238 19.7442L7.39293 16.5719Z" fill="#F9BB00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2455 6.87037C16.0427 6.87037 17.6577 7.48868 18.9267 8.70108L22.4393 5.18846C20.3179 3.21355 17.5458 2 14.2455 2C9.45818 2 5.31802 4.74434 3.30273 8.74607L7.39329 11.9184C8.35652 9.02408 11.0559 6.87037 14.2455 6.87037Z" fill="#E74133"/>
+</svg>
diff --git a/assets/logos/kakao_logo.svg b/assets/logos/kakao_logo.svg
new file mode 100644
index 00000000..ec683b08
--- /dev/null
+++ b/assets/logos/kakao_logo.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3116 22.6337H9V2.52076L11.3116 2V22.6337ZM17.4896 8.0372L19.2986 9.39057L14.8507 15.1674L20 21.5679L18.2173 23L12.1387 15.2976L17.4896 8.0372Z" fill="#391B1B"/>
+</svg>
diff --git a/ios/.gitignore b/ios/.gitignore
index 151026b9..7a7f9873 100644
--- a/ios/.gitignore
+++ b/ios/.gitignore
@@ -1,3 +1,4 @@
+**/dgph
 *.mode1v3
 *.mode2v3
 *.moved-aside
diff --git a/ios/Flutter/AppFrameworkInfo.plist b/ios/Flutter/AppFrameworkInfo.plist
index 9367d483..8d4492f9 100644
--- a/ios/Flutter/AppFrameworkInfo.plist
+++ b/ios/Flutter/AppFrameworkInfo.plist
@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>9.0</string>
 </dict>
 </plist>
diff --git a/ios/Flutter/Debug.xcconfig b/ios/Flutter/Debug.xcconfig
index 592ceee8..ec97fc6f 100644
--- a/ios/Flutter/Debug.xcconfig
+++ b/ios/Flutter/Debug.xcconfig
@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "Generated.xcconfig"
diff --git a/ios/Flutter/Release.xcconfig b/ios/Flutter/Release.xcconfig
index 592ceee8..f4df79c3 100644
--- a/ios/Flutter/Release.xcconfig
+++ b/ios/Flutter/Release.xcconfig
@@ -1 +1,3 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
+#include "Pods/Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"
 #include "Generated.xcconfig"
diff --git a/ios/Podfile b/ios/Podfile
new file mode 100644
index 00000000..0e5527f5
--- /dev/null
+++ b/ios/Podfile
@@ -0,0 +1,49 @@
+# Uncomment this line to define a global platform for your project
+# Exact version of ios platform should be used according to the highest version from 'Pods/Local Podspecs/.'
+# https://stackoverflow.com/questions/52398435/cocoapods-could-not-find-compatible-versions-for-pod-firebase-core-cloud-fir
+platform :ios, '11.0'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_ios_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+  use_modular_headers!
+
+  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+  # https://velog.io/@tykan/Flutter-v1-프로젝트에서-v2로-갈아타기-Flutter.h-Not-Found-error
+  flutter_additional_ios_build_settings(target)
+    # https://kth496.tistory.com/9
+    target.build_configurations.each do |config|
+      config.build_settings['ENABLE_BITCODE'] = 'NO'
+        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
+    end
+  end
+end
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
new file mode 100644
index 00000000..ce1e9775
--- /dev/null
+++ b/ios/Podfile.lock
@@ -0,0 +1,938 @@
+PODS:
+  - abseil/algorithm (1.20211102.0):
+    - abseil/algorithm/algorithm (= 1.20211102.0)
+    - abseil/algorithm/container (= 1.20211102.0)
+  - abseil/algorithm/algorithm (1.20211102.0):
+    - abseil/base/config
+  - abseil/algorithm/container (1.20211102.0):
+    - abseil/algorithm/algorithm
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+  - abseil/base (1.20211102.0):
+    - abseil/base/atomic_hook (= 1.20211102.0)
+    - abseil/base/base (= 1.20211102.0)
+    - abseil/base/base_internal (= 1.20211102.0)
+    - abseil/base/config (= 1.20211102.0)
+    - abseil/base/core_headers (= 1.20211102.0)
+    - abseil/base/dynamic_annotations (= 1.20211102.0)
+    - abseil/base/endian (= 1.20211102.0)
+    - abseil/base/errno_saver (= 1.20211102.0)
+    - abseil/base/fast_type_id (= 1.20211102.0)
+    - abseil/base/log_severity (= 1.20211102.0)
+    - abseil/base/malloc_internal (= 1.20211102.0)
+    - abseil/base/pretty_function (= 1.20211102.0)
+    - abseil/base/raw_logging_internal (= 1.20211102.0)
+    - abseil/base/spinlock_wait (= 1.20211102.0)
+    - abseil/base/strerror (= 1.20211102.0)
+    - abseil/base/throw_delegate (= 1.20211102.0)
+  - abseil/base/atomic_hook (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/base/base (1.20211102.0):
+    - abseil/base/atomic_hook
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/log_severity
+    - abseil/base/raw_logging_internal
+    - abseil/base/spinlock_wait
+    - abseil/meta/type_traits
+  - abseil/base/base_internal (1.20211102.0):
+    - abseil/base/config
+    - abseil/meta/type_traits
+  - abseil/base/config (1.20211102.0)
+  - abseil/base/core_headers (1.20211102.0):
+    - abseil/base/config
+  - abseil/base/dynamic_annotations (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/base/endian (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/base/errno_saver (1.20211102.0):
+    - abseil/base/config
+  - abseil/base/fast_type_id (1.20211102.0):
+    - abseil/base/config
+  - abseil/base/log_severity (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/base/malloc_internal (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/raw_logging_internal
+  - abseil/base/pretty_function (1.20211102.0)
+  - abseil/base/raw_logging_internal (1.20211102.0):
+    - abseil/base/atomic_hook
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/log_severity
+  - abseil/base/spinlock_wait (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/core_headers
+    - abseil/base/errno_saver
+  - abseil/base/strerror (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/errno_saver
+  - abseil/base/throw_delegate (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/raw_logging_internal
+  - abseil/container/common (1.20211102.0):
+    - abseil/meta/type_traits
+    - abseil/types/optional
+  - abseil/container/compressed_tuple (1.20211102.0):
+    - abseil/utility/utility
+  - abseil/container/container_memory (1.20211102.0):
+    - abseil/base/config
+    - abseil/memory/memory
+    - abseil/meta/type_traits
+    - abseil/utility/utility
+  - abseil/container/fixed_array (1.20211102.0):
+    - abseil/algorithm/algorithm
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/throw_delegate
+    - abseil/container/compressed_tuple
+    - abseil/memory/memory
+  - abseil/container/flat_hash_map (1.20211102.0):
+    - abseil/algorithm/container
+    - abseil/container/container_memory
+    - abseil/container/hash_function_defaults
+    - abseil/container/raw_hash_map
+    - abseil/memory/memory
+  - abseil/container/hash_function_defaults (1.20211102.0):
+    - abseil/base/config
+    - abseil/hash/hash
+    - abseil/strings/cord
+    - abseil/strings/strings
+  - abseil/container/hash_policy_traits (1.20211102.0):
+    - abseil/meta/type_traits
+  - abseil/container/hashtable_debug_hooks (1.20211102.0):
+    - abseil/base/config
+  - abseil/container/hashtablez_sampler (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/core_headers
+    - abseil/container/have_sse
+    - abseil/debugging/stacktrace
+    - abseil/memory/memory
+    - abseil/profiling/exponential_biased
+    - abseil/profiling/sample_recorder
+    - abseil/synchronization/synchronization
+    - abseil/utility/utility
+  - abseil/container/have_sse (1.20211102.0)
+  - abseil/container/inlined_vector (1.20211102.0):
+    - abseil/algorithm/algorithm
+    - abseil/base/core_headers
+    - abseil/base/throw_delegate
+    - abseil/container/inlined_vector_internal
+    - abseil/memory/memory
+  - abseil/container/inlined_vector_internal (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/container/compressed_tuple
+    - abseil/memory/memory
+    - abseil/meta/type_traits
+    - abseil/types/span
+  - abseil/container/layout (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+    - abseil/strings/strings
+    - abseil/types/span
+    - abseil/utility/utility
+  - abseil/container/raw_hash_map (1.20211102.0):
+    - abseil/base/throw_delegate
+    - abseil/container/container_memory
+    - abseil/container/raw_hash_set
+  - abseil/container/raw_hash_set (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/container/common
+    - abseil/container/compressed_tuple
+    - abseil/container/container_memory
+    - abseil/container/hash_policy_traits
+    - abseil/container/hashtable_debug_hooks
+    - abseil/container/hashtablez_sampler
+    - abseil/container/have_sse
+    - abseil/memory/memory
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/utility/utility
+  - abseil/debugging/debugging_internal (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/errno_saver
+    - abseil/base/raw_logging_internal
+  - abseil/debugging/demangle_internal (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/debugging/stacktrace (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/debugging/debugging_internal
+  - abseil/debugging/symbolize (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/malloc_internal
+    - abseil/base/raw_logging_internal
+    - abseil/debugging/debugging_internal
+    - abseil/debugging/demangle_internal
+    - abseil/strings/strings
+  - abseil/functional/bind_front (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/container/compressed_tuple
+    - abseil/meta/type_traits
+    - abseil/utility/utility
+  - abseil/functional/function_ref (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+  - abseil/hash/city (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+  - abseil/hash/hash (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/container/fixed_array
+    - abseil/hash/city
+    - abseil/hash/low_level_hash
+    - abseil/meta/type_traits
+    - abseil/numeric/int128
+    - abseil/strings/strings
+    - abseil/types/optional
+    - abseil/types/variant
+    - abseil/utility/utility
+  - abseil/hash/low_level_hash (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/endian
+    - abseil/numeric/bits
+    - abseil/numeric/int128
+  - abseil/memory (1.20211102.0):
+    - abseil/memory/memory (= 1.20211102.0)
+  - abseil/memory/memory (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+  - abseil/meta (1.20211102.0):
+    - abseil/meta/type_traits (= 1.20211102.0)
+  - abseil/meta/type_traits (1.20211102.0):
+    - abseil/base/config
+  - abseil/numeric/bits (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/numeric/int128 (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/numeric/bits
+  - abseil/numeric/representation (1.20211102.0):
+    - abseil/base/config
+  - abseil/profiling/exponential_biased (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+  - abseil/profiling/sample_recorder (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/synchronization/synchronization
+    - abseil/time/time
+  - abseil/random/distributions (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/random/internal/distribution_caller
+    - abseil/random/internal/fast_uniform_bits
+    - abseil/random/internal/fastmath
+    - abseil/random/internal/generate_real
+    - abseil/random/internal/iostream_state_saver
+    - abseil/random/internal/traits
+    - abseil/random/internal/uniform_helper
+    - abseil/random/internal/wide_multiply
+    - abseil/strings/strings
+  - abseil/random/internal/distribution_caller (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/fast_type_id
+    - abseil/utility/utility
+  - abseil/random/internal/fast_uniform_bits (1.20211102.0):
+    - abseil/base/config
+    - abseil/meta/type_traits
+  - abseil/random/internal/fastmath (1.20211102.0):
+    - abseil/numeric/bits
+  - abseil/random/internal/generate_real (1.20211102.0):
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/random/internal/fastmath
+    - abseil/random/internal/traits
+  - abseil/random/internal/iostream_state_saver (1.20211102.0):
+    - abseil/meta/type_traits
+    - abseil/numeric/int128
+  - abseil/random/internal/nonsecure_base (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+    - abseil/random/internal/pool_urbg
+    - abseil/random/internal/salted_seed_seq
+    - abseil/random/internal/seed_material
+    - abseil/types/optional
+    - abseil/types/span
+  - abseil/random/internal/pcg_engine (1.20211102.0):
+    - abseil/base/config
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/numeric/int128
+    - abseil/random/internal/fastmath
+    - abseil/random/internal/iostream_state_saver
+  - abseil/random/internal/platform (1.20211102.0):
+    - abseil/base/config
+  - abseil/random/internal/pool_urbg (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/base/raw_logging_internal
+    - abseil/random/internal/randen
+    - abseil/random/internal/seed_material
+    - abseil/random/internal/traits
+    - abseil/random/seed_gen_exception
+    - abseil/types/span
+  - abseil/random/internal/randen (1.20211102.0):
+    - abseil/base/raw_logging_internal
+    - abseil/random/internal/platform
+    - abseil/random/internal/randen_hwaes
+    - abseil/random/internal/randen_slow
+  - abseil/random/internal/randen_engine (1.20211102.0):
+    - abseil/base/endian
+    - abseil/meta/type_traits
+    - abseil/random/internal/iostream_state_saver
+    - abseil/random/internal/randen
+  - abseil/random/internal/randen_hwaes (1.20211102.0):
+    - abseil/base/config
+    - abseil/random/internal/platform
+    - abseil/random/internal/randen_hwaes_impl
+  - abseil/random/internal/randen_hwaes_impl (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/numeric/int128
+    - abseil/random/internal/platform
+  - abseil/random/internal/randen_slow (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/numeric/int128
+    - abseil/random/internal/platform
+  - abseil/random/internal/salted_seed_seq (1.20211102.0):
+    - abseil/container/inlined_vector
+    - abseil/meta/type_traits
+    - abseil/random/internal/seed_material
+    - abseil/types/optional
+    - abseil/types/span
+  - abseil/random/internal/seed_material (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/raw_logging_internal
+    - abseil/random/internal/fast_uniform_bits
+    - abseil/strings/strings
+    - abseil/types/optional
+    - abseil/types/span
+  - abseil/random/internal/traits (1.20211102.0):
+    - abseil/base/config
+  - abseil/random/internal/uniform_helper (1.20211102.0):
+    - abseil/base/config
+    - abseil/meta/type_traits
+    - abseil/random/internal/traits
+  - abseil/random/internal/wide_multiply (1.20211102.0):
+    - abseil/base/config
+    - abseil/numeric/bits
+    - abseil/numeric/int128
+    - abseil/random/internal/traits
+  - abseil/random/random (1.20211102.0):
+    - abseil/random/distributions
+    - abseil/random/internal/nonsecure_base
+    - abseil/random/internal/pcg_engine
+    - abseil/random/internal/pool_urbg
+    - abseil/random/internal/randen_engine
+    - abseil/random/seed_sequences
+  - abseil/random/seed_gen_exception (1.20211102.0):
+    - abseil/base/config
+  - abseil/random/seed_sequences (1.20211102.0):
+    - abseil/container/inlined_vector
+    - abseil/random/internal/nonsecure_base
+    - abseil/random/internal/pool_urbg
+    - abseil/random/internal/salted_seed_seq
+    - abseil/random/internal/seed_material
+    - abseil/random/seed_gen_exception
+    - abseil/types/span
+  - abseil/status/status (1.20211102.0):
+    - abseil/base/atomic_hook
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/container/inlined_vector
+    - abseil/debugging/stacktrace
+    - abseil/debugging/symbolize
+    - abseil/functional/function_ref
+    - abseil/strings/cord
+    - abseil/strings/str_format
+    - abseil/strings/strings
+    - abseil/types/optional
+  - abseil/status/statusor (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/meta/type_traits
+    - abseil/status/status
+    - abseil/strings/strings
+    - abseil/types/variant
+    - abseil/utility/utility
+  - abseil/strings/cord (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/base/raw_logging_internal
+    - abseil/container/fixed_array
+    - abseil/container/inlined_vector
+    - abseil/functional/function_ref
+    - abseil/meta/type_traits
+    - abseil/strings/cord_internal
+    - abseil/strings/cordz_functions
+    - abseil/strings/cordz_info
+    - abseil/strings/cordz_statistics
+    - abseil/strings/cordz_update_scope
+    - abseil/strings/cordz_update_tracker
+    - abseil/strings/internal
+    - abseil/strings/str_format
+    - abseil/strings/strings
+    - abseil/types/optional
+  - abseil/strings/cord_internal (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/base/raw_logging_internal
+    - abseil/base/throw_delegate
+    - abseil/container/compressed_tuple
+    - abseil/container/inlined_vector
+    - abseil/container/layout
+    - abseil/functional/function_ref
+    - abseil/meta/type_traits
+    - abseil/strings/strings
+    - abseil/types/span
+  - abseil/strings/cordz_functions (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/profiling/exponential_biased
+  - abseil/strings/cordz_handle (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/raw_logging_internal
+    - abseil/synchronization/synchronization
+  - abseil/strings/cordz_info (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/container/inlined_vector
+    - abseil/debugging/stacktrace
+    - abseil/strings/cord_internal
+    - abseil/strings/cordz_functions
+    - abseil/strings/cordz_handle
+    - abseil/strings/cordz_statistics
+    - abseil/strings/cordz_update_tracker
+    - abseil/synchronization/synchronization
+    - abseil/types/span
+  - abseil/strings/cordz_statistics (1.20211102.0):
+    - abseil/base/config
+    - abseil/strings/cordz_update_tracker
+  - abseil/strings/cordz_update_scope (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/strings/cord_internal
+    - abseil/strings/cordz_info
+    - abseil/strings/cordz_update_tracker
+  - abseil/strings/cordz_update_tracker (1.20211102.0):
+    - abseil/base/config
+  - abseil/strings/internal (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/base/raw_logging_internal
+    - abseil/meta/type_traits
+  - abseil/strings/str_format (1.20211102.0):
+    - abseil/strings/str_format_internal
+  - abseil/strings/str_format_internal (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/functional/function_ref
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/numeric/int128
+    - abseil/numeric/representation
+    - abseil/strings/strings
+    - abseil/types/optional
+    - abseil/types/span
+  - abseil/strings/strings (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/endian
+    - abseil/base/raw_logging_internal
+    - abseil/base/throw_delegate
+    - abseil/memory/memory
+    - abseil/meta/type_traits
+    - abseil/numeric/bits
+    - abseil/numeric/int128
+    - abseil/strings/internal
+  - abseil/synchronization/graphcycles_internal (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/malloc_internal
+    - abseil/base/raw_logging_internal
+  - abseil/synchronization/kernel_timeout_internal (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/time/time
+  - abseil/synchronization/synchronization (1.20211102.0):
+    - abseil/base/atomic_hook
+    - abseil/base/base
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/dynamic_annotations
+    - abseil/base/malloc_internal
+    - abseil/base/raw_logging_internal
+    - abseil/debugging/stacktrace
+    - abseil/debugging/symbolize
+    - abseil/synchronization/graphcycles_internal
+    - abseil/synchronization/kernel_timeout_internal
+    - abseil/time/time
+  - abseil/time (1.20211102.0):
+    - abseil/time/internal (= 1.20211102.0)
+    - abseil/time/time (= 1.20211102.0)
+  - abseil/time/internal (1.20211102.0):
+    - abseil/time/internal/cctz (= 1.20211102.0)
+  - abseil/time/internal/cctz (1.20211102.0):
+    - abseil/time/internal/cctz/civil_time (= 1.20211102.0)
+    - abseil/time/internal/cctz/time_zone (= 1.20211102.0)
+  - abseil/time/internal/cctz/civil_time (1.20211102.0):
+    - abseil/base/config
+  - abseil/time/internal/cctz/time_zone (1.20211102.0):
+    - abseil/base/config
+    - abseil/time/internal/cctz/civil_time
+  - abseil/time/time (1.20211102.0):
+    - abseil/base/base
+    - abseil/base/core_headers
+    - abseil/base/raw_logging_internal
+    - abseil/numeric/int128
+    - abseil/strings/strings
+    - abseil/time/internal/cctz/civil_time
+    - abseil/time/internal/cctz/time_zone
+  - abseil/types (1.20211102.0):
+    - abseil/types/any (= 1.20211102.0)
+    - abseil/types/bad_any_cast (= 1.20211102.0)
+    - abseil/types/bad_any_cast_impl (= 1.20211102.0)
+    - abseil/types/bad_optional_access (= 1.20211102.0)
+    - abseil/types/bad_variant_access (= 1.20211102.0)
+    - abseil/types/compare (= 1.20211102.0)
+    - abseil/types/optional (= 1.20211102.0)
+    - abseil/types/span (= 1.20211102.0)
+    - abseil/types/variant (= 1.20211102.0)
+  - abseil/types/any (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/base/fast_type_id
+    - abseil/meta/type_traits
+    - abseil/types/bad_any_cast
+    - abseil/utility/utility
+  - abseil/types/bad_any_cast (1.20211102.0):
+    - abseil/base/config
+    - abseil/types/bad_any_cast_impl
+  - abseil/types/bad_any_cast_impl (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/raw_logging_internal
+  - abseil/types/bad_optional_access (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/raw_logging_internal
+  - abseil/types/bad_variant_access (1.20211102.0):
+    - abseil/base/config
+    - abseil/base/raw_logging_internal
+  - abseil/types/compare (1.20211102.0):
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+  - abseil/types/optional (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/memory/memory
+    - abseil/meta/type_traits
+    - abseil/types/bad_optional_access
+    - abseil/utility/utility
+  - abseil/types/span (1.20211102.0):
+    - abseil/algorithm/algorithm
+    - abseil/base/core_headers
+    - abseil/base/throw_delegate
+    - abseil/meta/type_traits
+  - abseil/types/variant (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/base/core_headers
+    - abseil/meta/type_traits
+    - abseil/types/bad_variant_access
+    - abseil/utility/utility
+  - abseil/utility/utility (1.20211102.0):
+    - abseil/base/base_internal
+    - abseil/base/config
+    - abseil/meta/type_traits
+  - BoringSSL-GRPC (0.0.24):
+    - BoringSSL-GRPC/Implementation (= 0.0.24)
+    - BoringSSL-GRPC/Interface (= 0.0.24)
+  - BoringSSL-GRPC/Implementation (0.0.24):
+    - BoringSSL-GRPC/Interface (= 0.0.24)
+  - BoringSSL-GRPC/Interface (0.0.24)
+  - cloud_firestore (3.1.17):
+    - Firebase/Firestore (= 8.15.0)
+    - firebase_core
+    - Flutter
+  - Firebase/Analytics (8.15.0):
+    - Firebase/Core
+  - Firebase/Auth (8.15.0):
+    - Firebase/CoreOnly
+    - FirebaseAuth (~> 8.15.0)
+  - Firebase/Core (8.15.0):
+    - Firebase/CoreOnly
+    - FirebaseAnalytics (~> 8.15.0)
+  - Firebase/CoreOnly (8.15.0):
+    - FirebaseCore (= 8.15.0)
+  - Firebase/Firestore (8.15.0):
+    - Firebase/CoreOnly
+    - FirebaseFirestore (~> 8.15.0)
+  - Firebase/Messaging (8.15.0):
+    - Firebase/CoreOnly
+    - FirebaseMessaging (~> 8.15.0)
+  - firebase_analytics (9.1.9):
+    - Firebase/Analytics (= 8.15.0)
+    - firebase_core
+    - Flutter
+  - firebase_auth (3.3.19):
+    - Firebase/Auth (= 8.15.0)
+    - firebase_core
+    - Flutter
+  - firebase_core (1.17.1):
+    - Firebase/CoreOnly (= 8.15.0)
+    - Flutter
+  - firebase_messaging (11.4.1):
+    - Firebase/Messaging (= 8.15.0)
+    - firebase_core
+    - Flutter
+  - FirebaseAnalytics (8.15.0):
+    - FirebaseAnalytics/AdIdSupport (= 8.15.0)
+    - FirebaseCore (~> 8.0)
+    - FirebaseInstallations (~> 8.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/MethodSwizzler (~> 7.7)
+    - GoogleUtilities/Network (~> 7.7)
+    - "GoogleUtilities/NSData+zlib (~> 7.7)"
+    - nanopb (~> 2.30908.0)
+  - FirebaseAnalytics/AdIdSupport (8.15.0):
+    - FirebaseCore (~> 8.0)
+    - FirebaseInstallations (~> 8.0)
+    - GoogleAppMeasurement (= 8.15.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/MethodSwizzler (~> 7.7)
+    - GoogleUtilities/Network (~> 7.7)
+    - "GoogleUtilities/NSData+zlib (~> 7.7)"
+    - nanopb (~> 2.30908.0)
+  - FirebaseAuth (8.15.0):
+    - FirebaseCore (~> 8.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/Environment (~> 7.7)
+    - GTMSessionFetcher/Core (~> 1.5)
+  - FirebaseCore (8.15.0):
+    - FirebaseCoreDiagnostics (~> 8.0)
+    - GoogleUtilities/Environment (~> 7.7)
+    - GoogleUtilities/Logger (~> 7.7)
+  - FirebaseCoreDiagnostics (8.15.0):
+    - GoogleDataTransport (~> 9.1)
+    - GoogleUtilities/Environment (~> 7.7)
+    - GoogleUtilities/Logger (~> 7.7)
+    - nanopb (~> 2.30908.0)
+  - FirebaseFirestore (8.15.0):
+    - abseil/algorithm (~> 1.20211102.0)
+    - abseil/base (~> 1.20211102.0)
+    - abseil/container/flat_hash_map (~> 1.20211102.0)
+    - abseil/memory (~> 1.20211102.0)
+    - abseil/meta (~> 1.20211102.0)
+    - abseil/strings/strings (~> 1.20211102.0)
+    - abseil/time (~> 1.20211102.0)
+    - abseil/types (~> 1.20211102.0)
+    - FirebaseCore (~> 8.0)
+    - "gRPC-C++ (~> 1.44.0)"
+    - leveldb-library (~> 1.22)
+    - nanopb (~> 2.30908.0)
+  - FirebaseInstallations (8.15.0):
+    - FirebaseCore (~> 8.0)
+    - GoogleUtilities/Environment (~> 7.7)
+    - GoogleUtilities/UserDefaults (~> 7.7)
+    - PromisesObjC (< 3.0, >= 1.2)
+  - FirebaseMessaging (8.15.0):
+    - FirebaseCore (~> 8.0)
+    - FirebaseInstallations (~> 8.0)
+    - GoogleDataTransport (~> 9.1)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/Environment (~> 7.7)
+    - GoogleUtilities/Reachability (~> 7.7)
+    - GoogleUtilities/UserDefaults (~> 7.7)
+    - nanopb (~> 2.30908.0)
+  - Flutter (1.0.0)
+  - flutter_secure_storage (3.3.1):
+    - Flutter
+  - GoogleAppMeasurement (8.15.0):
+    - GoogleAppMeasurement/AdIdSupport (= 8.15.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/MethodSwizzler (~> 7.7)
+    - GoogleUtilities/Network (~> 7.7)
+    - "GoogleUtilities/NSData+zlib (~> 7.7)"
+    - nanopb (~> 2.30908.0)
+  - GoogleAppMeasurement/AdIdSupport (8.15.0):
+    - GoogleAppMeasurement/WithoutAdIdSupport (= 8.15.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/MethodSwizzler (~> 7.7)
+    - GoogleUtilities/Network (~> 7.7)
+    - "GoogleUtilities/NSData+zlib (~> 7.7)"
+    - nanopb (~> 2.30908.0)
+  - GoogleAppMeasurement/WithoutAdIdSupport (8.15.0):
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.7)
+    - GoogleUtilities/MethodSwizzler (~> 7.7)
+    - GoogleUtilities/Network (~> 7.7)
+    - "GoogleUtilities/NSData+zlib (~> 7.7)"
+    - nanopb (~> 2.30908.0)
+  - GoogleDataTransport (9.1.4):
+    - GoogleUtilities/Environment (~> 7.7)
+    - nanopb (< 2.30910.0, >= 2.30908.0)
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleUtilities/AppDelegateSwizzler (7.7.0):
+    - GoogleUtilities/Environment
+    - GoogleUtilities/Logger
+    - GoogleUtilities/Network
+  - GoogleUtilities/Environment (7.7.0):
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleUtilities/Logger (7.7.0):
+    - GoogleUtilities/Environment
+  - GoogleUtilities/MethodSwizzler (7.7.0):
+    - GoogleUtilities/Logger
+  - GoogleUtilities/Network (7.7.0):
+    - GoogleUtilities/Logger
+    - "GoogleUtilities/NSData+zlib"
+    - GoogleUtilities/Reachability
+  - "GoogleUtilities/NSData+zlib (7.7.0)"
+  - GoogleUtilities/Reachability (7.7.0):
+    - GoogleUtilities/Logger
+  - GoogleUtilities/UserDefaults (7.7.0):
+    - GoogleUtilities/Logger
+  - "gRPC-C++ (1.44.0)":
+    - "gRPC-C++/Implementation (= 1.44.0)"
+    - "gRPC-C++/Interface (= 1.44.0)"
+  - "gRPC-C++/Implementation (1.44.0)":
+    - abseil/base/base (= 1.20211102.0)
+    - abseil/base/core_headers (= 1.20211102.0)
+    - abseil/container/flat_hash_map (= 1.20211102.0)
+    - abseil/container/inlined_vector (= 1.20211102.0)
+    - abseil/functional/bind_front (= 1.20211102.0)
+    - abseil/hash/hash (= 1.20211102.0)
+    - abseil/memory/memory (= 1.20211102.0)
+    - abseil/random/random (= 1.20211102.0)
+    - abseil/status/status (= 1.20211102.0)
+    - abseil/status/statusor (= 1.20211102.0)
+    - abseil/strings/cord (= 1.20211102.0)
+    - abseil/strings/str_format (= 1.20211102.0)
+    - abseil/strings/strings (= 1.20211102.0)
+    - abseil/synchronization/synchronization (= 1.20211102.0)
+    - abseil/time/time (= 1.20211102.0)
+    - abseil/types/optional (= 1.20211102.0)
+    - abseil/types/variant (= 1.20211102.0)
+    - abseil/utility/utility (= 1.20211102.0)
+    - "gRPC-C++/Interface (= 1.44.0)"
+    - gRPC-Core (= 1.44.0)
+  - "gRPC-C++/Interface (1.44.0)"
+  - gRPC-Core (1.44.0):
+    - gRPC-Core/Implementation (= 1.44.0)
+    - gRPC-Core/Interface (= 1.44.0)
+  - gRPC-Core/Implementation (1.44.0):
+    - abseil/base/base (= 1.20211102.0)
+    - abseil/base/core_headers (= 1.20211102.0)
+    - abseil/container/flat_hash_map (= 1.20211102.0)
+    - abseil/container/inlined_vector (= 1.20211102.0)
+    - abseil/functional/bind_front (= 1.20211102.0)
+    - abseil/hash/hash (= 1.20211102.0)
+    - abseil/memory/memory (= 1.20211102.0)
+    - abseil/random/random (= 1.20211102.0)
+    - abseil/status/status (= 1.20211102.0)
+    - abseil/status/statusor (= 1.20211102.0)
+    - abseil/strings/cord (= 1.20211102.0)
+    - abseil/strings/str_format (= 1.20211102.0)
+    - abseil/strings/strings (= 1.20211102.0)
+    - abseil/synchronization/synchronization (= 1.20211102.0)
+    - abseil/time/time (= 1.20211102.0)
+    - abseil/types/optional (= 1.20211102.0)
+    - abseil/types/variant (= 1.20211102.0)
+    - abseil/utility/utility (= 1.20211102.0)
+    - BoringSSL-GRPC (= 0.0.24)
+    - gRPC-Core/Interface (= 1.44.0)
+    - Libuv-gRPC (= 0.0.10)
+  - gRPC-Core/Interface (1.44.0)
+  - GTMSessionFetcher/Core (1.7.2)
+  - hexcolor (0.0.1):
+    - Flutter
+  - image_picker (0.0.1):
+    - Flutter
+  - kakao_flutter_sdk (0.9.0):
+    - Flutter
+  - leveldb-library (1.22.1)
+  - Libuv-gRPC (0.0.10):
+    - Libuv-gRPC/Implementation (= 0.0.10)
+    - Libuv-gRPC/Interface (= 0.0.10)
+  - Libuv-gRPC/Implementation (0.0.10):
+    - Libuv-gRPC/Interface (= 0.0.10)
+  - Libuv-gRPC/Interface (0.0.10)
+  - nanopb (2.30908.0):
+    - nanopb/decode (= 2.30908.0)
+    - nanopb/encode (= 2.30908.0)
+  - nanopb/decode (2.30908.0)
+  - nanopb/encode (2.30908.0)
+  - package_info (0.0.1):
+    - Flutter
+  - package_info_plus (0.4.5):
+    - Flutter
+  - path_provider_ios (0.0.1):
+    - Flutter
+  - PromisesObjC (2.1.0)
+  - shared_preferences_ios (0.0.1):
+    - Flutter
+  - url_launcher_ios (0.0.1):
+    - Flutter
+
+DEPENDENCIES:
+  - cloud_firestore (from `.symlinks/plugins/cloud_firestore/ios`)
+  - firebase_analytics (from `.symlinks/plugins/firebase_analytics/ios`)
+  - firebase_auth (from `.symlinks/plugins/firebase_auth/ios`)
+  - firebase_core (from `.symlinks/plugins/firebase_core/ios`)
+  - firebase_messaging (from `.symlinks/plugins/firebase_messaging/ios`)
+  - Flutter (from `Flutter`)
+  - flutter_secure_storage (from `.symlinks/plugins/flutter_secure_storage/ios`)
+  - hexcolor (from `.symlinks/plugins/hexcolor/ios`)
+  - image_picker (from `.symlinks/plugins/image_picker/ios`)
+  - kakao_flutter_sdk (from `.symlinks/plugins/kakao_flutter_sdk/ios`)
+  - package_info (from `.symlinks/plugins/package_info/ios`)
+  - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
+  - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
+  - shared_preferences_ios (from `.symlinks/plugins/shared_preferences_ios/ios`)
+  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
+
+SPEC REPOS:
+  trunk:
+    - abseil
+    - BoringSSL-GRPC
+    - Firebase
+    - FirebaseAnalytics
+    - FirebaseAuth
+    - FirebaseCore
+    - FirebaseCoreDiagnostics
+    - FirebaseFirestore
+    - FirebaseInstallations
+    - FirebaseMessaging
+    - GoogleAppMeasurement
+    - GoogleDataTransport
+    - GoogleUtilities
+    - "gRPC-C++"
+    - gRPC-Core
+    - GTMSessionFetcher
+    - leveldb-library
+    - Libuv-gRPC
+    - nanopb
+    - PromisesObjC
+
+EXTERNAL SOURCES:
+  cloud_firestore:
+    :path: ".symlinks/plugins/cloud_firestore/ios"
+  firebase_analytics:
+    :path: ".symlinks/plugins/firebase_analytics/ios"
+  firebase_auth:
+    :path: ".symlinks/plugins/firebase_auth/ios"
+  firebase_core:
+    :path: ".symlinks/plugins/firebase_core/ios"
+  firebase_messaging:
+    :path: ".symlinks/plugins/firebase_messaging/ios"
+  Flutter:
+    :path: Flutter
+  flutter_secure_storage:
+    :path: ".symlinks/plugins/flutter_secure_storage/ios"
+  hexcolor:
+    :path: ".symlinks/plugins/hexcolor/ios"
+  image_picker:
+    :path: ".symlinks/plugins/image_picker/ios"
+  kakao_flutter_sdk:
+    :path: ".symlinks/plugins/kakao_flutter_sdk/ios"
+  package_info:
+    :path: ".symlinks/plugins/package_info/ios"
+  package_info_plus:
+    :path: ".symlinks/plugins/package_info_plus/ios"
+  path_provider_ios:
+    :path: ".symlinks/plugins/path_provider_ios/ios"
+  shared_preferences_ios:
+    :path: ".symlinks/plugins/shared_preferences_ios/ios"
+  url_launcher_ios:
+    :path: ".symlinks/plugins/url_launcher_ios/ios"
+
+SPEC CHECKSUMS:
+  abseil: ebe5b5529fb05d93a8bdb7951607be08b7fa71bc
+  BoringSSL-GRPC: 3175b25143e648463a56daeaaa499c6cb86dad33
+  cloud_firestore: 936969669b510f2affd43583582d7b117c5f08d1
+  Firebase: 5f8193dff4b5b7c5d5ef72ae54bb76c08e2b841d
+  firebase_analytics: 99eefffcacf3ab694db7926dd1291833e1300853
+  firebase_auth: a6470a6974d42f83117932c913aecb926182f907
+  firebase_core: 318de541b0e61d3f24262982a3f0b54afe72439b
+  firebase_messaging: 943cfe65e0b3f457240489ce67655e40da1d270c
+  FirebaseAnalytics: 7761cbadb00a717d8d0939363eb46041526474fa
+  FirebaseAuth: 3e73bf8abf4fbb40f8b421f361f4cc48ee57388c
+  FirebaseCore: 5743c5785c074a794d35f2fff7ecc254a91e08b1
+  FirebaseCoreDiagnostics: 92e07a649aeb66352b319d43bdd2ee3942af84cb
+  FirebaseFirestore: d7023faff8e1b4fd69d0adbcf18e65129bc03842
+  FirebaseInstallations: 40bd9054049b2eae9a2c38ef1c3dd213df3605cd
+  FirebaseMessaging: 5e5118a2383b3531e730d974680954c679ca0a13
+  Flutter: 50d75fe2f02b26cc09d224853bb45737f8b3214a
+  flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
+  GoogleAppMeasurement: 4c19f031220c72464d460c9daa1fb5d1acce958e
+  GoogleDataTransport: 5fffe35792f8b96ec8d6775f5eccd83c998d5a3b
+  GoogleUtilities: e0913149f6b0625b553d70dae12b49fc62914fd1
+  "gRPC-C++": 9675f953ace2b3de7c506039d77be1f2e77a8db2
+  gRPC-Core: 943e491cb0d45598b0b0eb9e910c88080369290b
+  GTMSessionFetcher: 5595ec75acf5be50814f81e9189490412bad82ba
+  hexcolor: fdfb9c4258ad96e949c2dbcdf790a62194b8aa89
+  image_picker: 50e7c7ff960e5f58faa4d1f4af84a771c671bc4a
+  kakao_flutter_sdk: bb7397452b15fb550037aea8e6d347143488af71
+  leveldb-library: 50c7b45cbd7bf543c81a468fe557a16ae3db8729
+  Libuv-gRPC: 55e51798e14ef436ad9bc45d12d43b77b49df378
+  nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
+  package_info: 873975fc26034f0b863a300ad47e7f1ac6c7ec62
+  package_info_plus: 6c92f08e1f853dc01228d6f553146438dafcd14e
+  path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
+  PromisesObjC: 99b6f43f9e1044bd87a95a60beff28c2c44ddb72
+  shared_preferences_ios: 548a61f8053b9b8a49ac19c1ffbc8b92c50d68ad
+  url_launcher_ios: 839c58cdb4279282219f5e248c3321761ff3c4de
+
+PODFILE CHECKSUM: 609cb5a2bf46ec2075f2ca694021109a66497419
+
+COCOAPODS: 1.11.3
diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj
index 6b34e871..8babac84 100644
--- a/ios/Runner.xcodeproj/project.pbxproj
+++ b/ios/Runner.xcodeproj/project.pbxproj
@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 46;
+	objectVersion = 51;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -13,6 +13,7 @@
 		97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; };
 		97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; };
 		97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; };
+		A9564A82D9B725FB560C7225 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 2F974F64635BDDE42ED5AD49 /* Pods_Runner.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -31,9 +32,12 @@
 /* Begin PBXFileReference section */
 		1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = "<group>"; };
 		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
+		2F974F64635BDDE42ED5AD49 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = "<group>"; };
+		3D4A3F80E9F85E4D3A9283F8 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
 		74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = "<group>"; };
 		74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		79A8568BC35A9C9F3C0563C4 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = "<group>"; };
 		9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = "<group>"; };
@@ -42,6 +46,7 @@
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		E06153A184AAE1222449B181 /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -49,6 +54,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				A9564A82D9B725FB560C7225 /* Pods_Runner.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -72,6 +78,8 @@
 				9740EEB11CF90186004384FC /* Flutter */,
 				97C146F01CF9000F007C117D /* Runner */,
 				97C146EF1CF9000F007C117D /* Products */,
+				AB2B218DD76E850EA9A72872 /* Pods */,
+				A04CEE233E526F9434E1E075 /* Frameworks */,
 			);
 			sourceTree = "<group>";
 		};
@@ -98,6 +106,24 @@
 			path = Runner;
 			sourceTree = "<group>";
 		};
+		A04CEE233E526F9434E1E075 /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				2F974F64635BDDE42ED5AD49 /* Pods_Runner.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		AB2B218DD76E850EA9A72872 /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				3D4A3F80E9F85E4D3A9283F8 /* Pods-Runner.debug.xcconfig */,
+				E06153A184AAE1222449B181 /* Pods-Runner.release.xcconfig */,
+				79A8568BC35A9C9F3C0563C4 /* Pods-Runner.profile.xcconfig */,
+			);
+			path = Pods;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -105,12 +131,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */;
 			buildPhases = (
+				91D6F0AA168A36CBA4D8FFE7 /* [CP] Check Pods Manifest.lock */,
 				9740EEB61CF901F6004384FC /* Run Script */,
 				97C146EA1CF9000F007C117D /* Sources */,
 				97C146EB1CF9000F007C117D /* Frameworks */,
 				97C146EC1CF9000F007C117D /* Resources */,
 				9705A1C41CF9048500538489 /* Embed Frameworks */,
 				3B06AD1E1E4923F5004D2608 /* Thin Binary */,
+				736DE4A2813BDCF7D1E2DC30 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -127,7 +155,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1020;
+				LastUpgradeCheck = 1300;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
@@ -183,6 +211,45 @@
 			shellPath = /bin/sh;
 			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin";
 		};
+		736DE4A2813BDCF7D1E2DC30 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		91D6F0AA168A36CBA4D8FFE7 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Runner-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
 		9740EEB61CF901F6004384FC /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -283,15 +350,20 @@
 		};
 		249021D4217E4FDB00AE95B9 /* Profile */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
+			baseConfigurationReference = 79A8568BC35A9C9F3C0563C4 /* Pods-Runner.profile.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = ZP42A55SVA;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.wafflestudio.guam.guamCommunityClient;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0.4;
+				PRODUCT_BUNDLE_IDENTIFIER = "com.wafflestudio.guam-community";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
@@ -399,7 +471,8 @@
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;
-				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VALIDATE_PRODUCT = YES;
 			};
@@ -407,15 +480,20 @@
 		};
 		97C147061CF9000F007C117D /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */;
+			baseConfigurationReference = 3D4A3F80E9F85E4D3A9283F8 /* Pods-Runner.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = ZP42A55SVA;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.wafflestudio.guam.guamCommunityClient;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0.4;
+				PRODUCT_BUNDLE_IDENTIFIER = "com.wafflestudio.guam-community";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -426,15 +504,20 @@
 		};
 		97C147071CF9000F007C117D /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
+			baseConfigurationReference = E06153A184AAE1222449B181 /* Pods-Runner.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = ZP42A55SVA;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.wafflestudio.guam.guamCommunityClient;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0.4;
+				PRODUCT_BUNDLE_IDENTIFIER = "com.wafflestudio.guam-community";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
diff --git a/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index a28140cf..c87d15a3 100644
--- a/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1020"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -27,8 +27,6 @@
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-      </Testables>
       <MacroExpansion>
          <BuildableReference
             BuildableIdentifier = "primary"
@@ -38,8 +36,8 @@
             ReferencedContainer = "container:Runner.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
+      <Testables>
+      </Testables>
    </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"
@@ -61,8 +59,6 @@
             ReferencedContainer = "container:Runner.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Profile"
diff --git a/ios/Runner.xcworkspace/contents.xcworkspacedata b/ios/Runner.xcworkspace/contents.xcworkspacedata
index 1d526a16..21a3cc14 100644
--- a/ios/Runner.xcworkspace/contents.xcworkspacedata
+++ b/ios/Runner.xcworkspace/contents.xcworkspacedata
@@ -4,4 +4,7 @@
    <FileRef
       location = "group:Runner.xcodeproj">
    </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
 </Workspace>
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/100.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/100.png
new file mode 100644
index 00000000..2987e12a
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/100.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/1024.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/1024.png
new file mode 100644
index 00000000..bf496252
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/1024.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/114.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/114.png
new file mode 100644
index 00000000..928d6640
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/114.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/120.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/120.png
new file mode 100644
index 00000000..02f18693
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/120.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/128.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/128.png
new file mode 100644
index 00000000..989feffb
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/128.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/144.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/144.png
new file mode 100644
index 00000000..edd7c0cc
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/144.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/152.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/152.png
new file mode 100644
index 00000000..6bcd6554
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/152.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/16.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/16.png
new file mode 100644
index 00000000..15644b76
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/16.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/167.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/167.png
new file mode 100644
index 00000000..55f99660
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/167.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/172.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/172.png
new file mode 100644
index 00000000..d426ecee
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/172.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/180.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/180.png
new file mode 100644
index 00000000..f1eec470
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/180.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/196.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/196.png
new file mode 100644
index 00000000..eb276391
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/196.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/20.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/20.png
new file mode 100644
index 00000000..03883d22
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/20.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/216.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/216.png
new file mode 100644
index 00000000..d1c54640
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/216.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/256.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/256.png
new file mode 100644
index 00000000..73a25993
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/256.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/29.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/29.png
new file mode 100644
index 00000000..9a8bce41
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/29.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/32.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/32.png
new file mode 100644
index 00000000..1a37925c
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/32.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/40.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/40.png
new file mode 100644
index 00000000..6bb7e369
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/40.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/48.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/48.png
new file mode 100644
index 00000000..ffa79786
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/48.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/50.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/50.png
new file mode 100644
index 00000000..7549a9c3
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/50.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/512.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/512.png
new file mode 100644
index 00000000..3c3b53c8
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/512.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/55.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/55.png
new file mode 100644
index 00000000..0f68246e
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/55.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/57.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/57.png
new file mode 100644
index 00000000..49f758b6
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/57.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/58.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/58.png
new file mode 100644
index 00000000..095434b4
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/58.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/60.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/60.png
new file mode 100644
index 00000000..37751e6c
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/60.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/64.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/64.png
new file mode 100644
index 00000000..75fe4a5a
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/64.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/72.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/72.png
new file mode 100644
index 00000000..94ec2409
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/72.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/76.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/76.png
new file mode 100644
index 00000000..f94120bf
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/76.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/80.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/80.png
new file mode 100644
index 00000000..8908ee5f
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/80.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/87.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/87.png
new file mode 100644
index 00000000..27d78204
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/87.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/88.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/88.png
new file mode 100644
index 00000000..5e0bd6ce
Binary files /dev/null and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/88.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
index d36b1fab..04de9d48 100644
--- a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,122 +1,330 @@
 {
   "images" : [
     {
-      "size" : "20x20",
+      "filename" : "40.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-20x20@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "size" : "20x20",
+      "filename" : "60.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-20x20@3x.png",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
-      "size" : "29x29",
+      "filename" : "29.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@1x.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
+      "filename" : "58.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
+      "filename" : "87.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@3x.png",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
-      "size" : "40x40",
+      "filename" : "80.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-40x40@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "size" : "40x40",
+      "filename" : "120.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "57.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-40x40@3x.png",
-      "scale" : "3x"
+      "scale" : "1x",
+      "size" : "57x57"
     },
     {
-      "size" : "60x60",
+      "filename" : "114.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-60x60@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "57x57"
     },
     {
-      "size" : "60x60",
+      "filename" : "120.png",
       "idiom" : "iphone",
-      "filename" : "Icon-App-60x60@3x.png",
-      "scale" : "3x"
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
-      "size" : "20x20",
+      "filename" : "180.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "20.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-20x20@1x.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "20x20"
     },
     {
-      "size" : "20x20",
+      "filename" : "40.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-20x20@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "size" : "29x29",
+      "filename" : "29.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-29x29@1x.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
+      "filename" : "58.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-29x29@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "size" : "40x40",
+      "filename" : "40.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-40x40@1x.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "40x40"
     },
     {
-      "size" : "40x40",
+      "filename" : "80.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "50.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "50x50"
+    },
+    {
+      "filename" : "100.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "50x50"
+    },
+    {
+      "filename" : "72.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-40x40@2x.png",
-      "scale" : "2x"
+      "scale" : "1x",
+      "size" : "72x72"
     },
     {
-      "size" : "76x76",
+      "filename" : "144.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-76x76@1x.png",
-      "scale" : "1x"
+      "scale" : "2x",
+      "size" : "72x72"
     },
     {
-      "size" : "76x76",
+      "filename" : "76.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-76x76@2x.png",
-      "scale" : "2x"
+      "scale" : "1x",
+      "size" : "76x76"
     },
     {
-      "size" : "83.5x83.5",
+      "filename" : "152.png",
       "idiom" : "ipad",
-      "filename" : "Icon-App-83.5x83.5@2x.png",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "76x76"
     },
     {
-      "size" : "1024x1024",
+      "filename" : "167.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
+    {
+      "filename" : "1024.png",
       "idiom" : "ios-marketing",
-      "filename" : "Icon-App-1024x1024@1x.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "1024x1024"
+    },
+    {
+      "filename" : "48.png",
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "24x24",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "55.png",
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "27.5x27.5",
+      "subtype" : "42mm"
+    },
+    {
+      "filename" : "58.png",
+      "idiom" : "watch",
+      "role" : "companionSettings",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "87.png",
+      "idiom" : "watch",
+      "role" : "companionSettings",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "33x33",
+      "subtype" : "45mm"
+    },
+    {
+      "filename" : "80.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "40x40",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "88.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "44x44",
+      "subtype" : "40mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "46x46",
+      "subtype" : "41mm"
+    },
+    {
+      "filename" : "100.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "50x50",
+      "subtype" : "44mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "51x51",
+      "subtype" : "45mm"
+    },
+    {
+      "filename" : "172.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "86x86",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "196.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "98x98",
+      "subtype" : "42mm"
+    },
+    {
+      "filename" : "216.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "108x108",
+      "subtype" : "44mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "117x117",
+      "subtype" : "45mm"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "watch-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
+    },
+    {
+      "filename" : "16.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "64.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "128.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "512x512"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "512x512"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
deleted file mode 100644
index dc9ada47..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
deleted file mode 100644
index 28c6bf03..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
deleted file mode 100644
index 2ccbfd96..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
deleted file mode 100644
index f091b6b0..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
deleted file mode 100644
index 4cde1211..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
deleted file mode 100644
index d0ef06e7..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
deleted file mode 100644
index dcdc2306..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
deleted file mode 100644
index 2ccbfd96..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
deleted file mode 100644
index c8f9ed8f..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
deleted file mode 100644
index a6d6b860..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
deleted file mode 100644
index a6d6b860..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
deleted file mode 100644
index 75b2d164..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
deleted file mode 100644
index c4df70d3..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
deleted file mode 100644
index 6a84f41e..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png and /dev/null differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
deleted file mode 100644
index d0e1f585..00000000
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png and /dev/null differ
diff --git a/ios/Runner/Base.lproj/Main.storyboard b/ios/Runner/Base.lproj/Main.storyboard
index f3c28516..61851a1f 100644
--- a/ios/Runner/Base.lproj/Main.storyboard
+++ b/ios/Runner/Base.lproj/Main.storyboard
@@ -1,8 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--Flutter View Controller-->
@@ -14,13 +15,14 @@
                         <viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
                     </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
-                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
             </objects>
+            <point key="canvasLocation" x="-16" y="-6"/>
         </scene>
     </scenes>
 </document>
diff --git a/ios/Runner/GoogleService-Info.plist b/ios/Runner/GoogleService-Info.plist
new file mode 100644
index 00000000..b2d127f4
--- /dev/null
+++ b/ios/Runner/GoogleService-Info.plist
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CLIENT_ID</key>
+	<string>648780047414-erb4hojdlnk09dk8nvcjjgdps2q3cc8n.apps.googleusercontent.com</string>
+	<key>REVERSED_CLIENT_ID</key>
+	<string>com.googleusercontent.apps.648780047414-erb4hojdlnk09dk8nvcjjgdps2q3cc8n</string>
+	<key>ANDROID_CLIENT_ID</key>
+	<string>648780047414-d2fbe0qcdiugckgq8stcqvgef89ie6a9.apps.googleusercontent.com</string>
+	<key>API_KEY</key>
+	<string>AIzaSyCkeKrJihj2WMWtlqWxfzL2aQTtNr-ytTg</string>
+	<key>GCM_SENDER_ID</key>
+	<string>648780047414</string>
+	<key>PLIST_VERSION</key>
+	<string>1</string>
+	<key>BUNDLE_ID</key>
+	<string>com.wafflestudio.guam-community</string>
+	<key>PROJECT_ID</key>
+	<string>waffle-guam</string>
+	<key>STORAGE_BUCKET</key>
+	<string>waffle-guam.appspot.com</string>
+	<key>IS_ADS_ENABLED</key>
+	<false></false>
+	<key>IS_ANALYTICS_ENABLED</key>
+	<false></false>
+	<key>IS_APPINVITE_ENABLED</key>
+	<true></true>
+	<key>IS_GCM_ENABLED</key>
+	<true></true>
+	<key>IS_SIGNIN_ENABLED</key>
+	<true></true>
+	<key>GOOGLE_APP_ID</key>
+	<string>1:648780047414:ios:054210930e5e474921a497</string>
+</dict>
+</plist>
\ No newline at end of file
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 12d96fc9..10004a8a 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -4,6 +4,8 @@
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
+	<key>CFBundleDisplayName</key>
+	<string>GUAM</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -15,13 +17,30 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
+	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
+    <key>CFBundleURLTypes</key>
+    <array>
+        <dict>
+            <key>CFBundleTypeRole</key>
+            <string>Editor</string>
+            <key>CFBundleURLSchemes</key>
+            <array>
+                <string>kakao367d8cf339e2ba59376ba647c7135dd2</string>
+            </array>
+        </dict>
+    </array>
 	<key>CFBundleVersion</key>
-	<string>$(FLUTTER_BUILD_NUMBER)</string>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+    <key>NSCameraUsageDescription</key>
+    <string>To take an avatar photo</string>
+    <key>NSMicrophoneUsageDescription</key>
+    <string>To upload an image</string>
+    <key>NSPhotoLibraryUsageDescription</key>
+    <string>To choose an avatar</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
diff --git a/lib/commons/back.dart b/lib/commons/back.dart
new file mode 100644
index 00000000..29c6b5fb
--- /dev/null
+++ b/lib/commons/back.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class Back extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 0,
+      color: GuamColorFamily.grayscaleWhite,
+      margin: EdgeInsets.zero,
+      child: IconButton(
+        icon: SvgPicture.asset('assets/icons/back.svg'),
+        onPressed: () => Navigator.maybePop(context)
+      ),
+    );
+  }
+}
diff --git a/lib/commons/bottom_modal/bottom_modal_default.dart b/lib/commons/bottom_modal/bottom_modal_default.dart
new file mode 100644
index 00000000..49d83db9
--- /dev/null
+++ b/lib/commons/bottom_modal/bottom_modal_default.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class BottomModalDefault extends StatelessWidget {
+  final Function onPressed;
+  final String text;
+
+  const BottomModalDefault({this.onPressed, this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: onPressed,
+      child: Container(
+        child: Text(
+          text,
+          style: TextStyle(
+            fontSize: 16,
+            color: GuamColorFamily.grayscaleGray1,
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+          ),
+        ),
+      )
+    );
+  }
+}
diff --git a/lib/commons/bottom_modal/bottom_modal_with_alert.dart b/lib/commons/bottom_modal/bottom_modal_with_alert.dart
new file mode 100644
index 00000000..d648641b
--- /dev/null
+++ b/lib/commons/bottom_modal/bottom_modal_with_alert.dart
@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+
+import '../custom_divider.dart';
+import 'bottom_modal_default.dart';
+
+class BottomModalWithAlert extends StatelessWidget {
+  final String funcName;
+  final String title;
+  final String body;
+  final Function func;
+
+  BottomModalWithAlert({this.funcName, this.title, this.body, this.func});
+
+  @override
+  Widget build(BuildContext context) {
+    return BottomModalDefault(
+      text: funcName,
+      onPressed: () => showMaterialModalBottomSheet(
+        context: context,
+        useRootNavigator: true,
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(20),
+            topRight: Radius.circular(20),
+          ),
+        ),
+        builder: (context) => SingleChildScrollView(
+          child: Container(
+            padding: EdgeInsets.only(left: 24, top: 24, right: 18, bottom: 14),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(
+                      title,
+                      style: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray2),
+                    ),
+                    TextButton(
+                      child: Text(
+                        '취소',
+                        style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore,
+                        ),
+                      ),
+                      style: TextButton.styleFrom(
+                        padding: EdgeInsets.zero,
+                        minimumSize: Size(30, 26),
+                        alignment: Alignment.centerRight,
+                      ),
+                      onPressed: () => Navigator.of(context).pop(),
+                    ),
+                  ],
+                ),
+                CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                Padding(
+                  padding: EdgeInsets.symmetric(vertical: 20),
+                  child: Text(
+                    body,
+                    style: TextStyle(fontSize: 14, height: 1.6, fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular),
+                  ),
+                ),
+                Center(
+                  child: TextButton(
+                    onPressed: func,
+                    child: Text(
+                      funcName,
+                      style: TextStyle(fontSize: 16, color: GuamColorFamily.redCore),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/commons/bottom_modal/bottom_modal_with_choice.dart b/lib/commons/bottom_modal/bottom_modal_with_choice.dart
new file mode 100644
index 00000000..fca1c6ac
--- /dev/null
+++ b/lib/commons/bottom_modal/bottom_modal_with_choice.dart
@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import '../custom_divider.dart';
+
+class BottomModalWithChoice extends StatelessWidget {
+  final String title;
+  final String back;
+  final String body;
+  final String alert;
+  final String confirm;
+  final List<Widget> children;
+
+  BottomModalWithChoice({this.title, this.back, this.body, this.alert, this.confirm, this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        padding: EdgeInsets.only(left: 24, top: 24, right: 18, bottom: 10),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  title,
+                  style: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray2),
+                ),
+                TextButton(
+                  child: Text(
+                    back,
+                    style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore),
+                  ),
+                  style: TextButton.styleFrom(
+                    padding: EdgeInsets.zero,
+                    minimumSize: Size(30, 26),
+                    alignment: Alignment.centerRight,
+                  ),
+                  onPressed: () => Navigator.of(context).pop(),
+                ),
+              ],
+            ),
+            CustomDivider(color: GuamColorFamily.grayscaleGray7),
+            if (body != null)
+              Padding(
+                padding: EdgeInsets.only(top: 20, bottom: 10),
+                child: Text(
+                  body,
+                  style: TextStyle(fontSize: 14, height: 1.6, fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular),
+                ),
+              ),
+            Container(
+              padding: EdgeInsets.only(top: 10, bottom: 20),
+              child: Column(
+                children: children,
+              ),
+            ),
+            if (alert != null)
+              Padding(
+                padding: EdgeInsets.only(bottom: 10),
+                child: Container(
+                  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
+                  decoration: BoxDecoration(
+                    border: Border.all(color: GuamColorFamily.grayscaleGray6),
+                    borderRadius: BorderRadius.all(Radius.circular(5)),
+                  ),
+                  child: Text(
+                    alert,
+                    style: TextStyle(
+                      fontSize: 14,
+                      height: 1.6,
+                      color: GuamColorFamily.grayscaleGray2,
+                      fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    ),
+                  ),
+                ),
+              ),
+            if (confirm != null)
+              Center(
+                child: TextButton(
+                  onPressed: () {},
+                  child: Text(
+                    confirm,
+                    style: TextStyle(fontSize: 16, color: GuamColorFamily.redCore),
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/commons/bottom_modal/bottom_modal_with_message.dart b/lib/commons/bottom_modal/bottom_modal_with_message.dart
new file mode 100644
index 00000000..4a40ed43
--- /dev/null
+++ b/lib/commons/bottom_modal/bottom_modal_with_message.dart
@@ -0,0 +1,120 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/screens/messages/message_bottom_modal.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+
+import '../../providers/messages/messages.dart';
+
+class BottomModalWithMessage extends StatefulWidget {
+  final String funcName;
+  final String title;
+  final Profile profile;
+  final Function func;
+
+  BottomModalWithMessage({this.funcName, this.title, this.profile, this.func});
+
+  @override
+  State<BottomModalWithMessage> createState() => _BottomModalWithMessageState();
+}
+
+class _BottomModalWithMessageState extends State<BottomModalWithMessage> with Toast {
+  @override
+  Widget build(BuildContext context) {
+    final msgProvider = context.read<Messages>();
+    Map input = {'text': '', 'image': []}; // image
+    bool sending = false;
+
+    void toggleSending() {
+      setState(() => sending = !sending);
+    }
+
+    Future sendMessage({List<File> files}) async {
+      toggleSending();
+      try {
+        await msgProvider.sendMessage(
+          fields: {
+            'to': widget.profile.id.toString(),
+            'text': input['text'] == '' && files.isNotEmpty ? '사진' : input['text'],
+            // 서버 수정 전까지 사진만 달랑 보내는 경우 텍스트를 '사진'으로 지정하여 전송.
+          },
+          files: files,
+        ).then((successful) {
+          toggleSending();
+          if (successful) {
+            Navigator.maybePop(context);
+          } else {
+            print("Error!");
+            // showToast(success: false, msg: '쪽지를 발송할 수 없습니다.');
+          }
+        });
+      } catch (e) {
+        print(e);
+      }
+    }
+
+    return Container(
+      padding: EdgeInsets.only(left: 24, top: 24, right: 18, bottom: 14),
+      decoration: BoxDecoration(
+        color: GuamColorFamily.grayscaleWhite,
+        borderRadius: BorderRadius.all(Radius.circular(20)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                widget.title,
+                style: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray2),
+              ),
+              TextButton(
+                child: Text(
+                  '취소',
+                  style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore,
+                  ),
+                ),
+                style: TextButton.styleFrom(
+                  padding: EdgeInsets.zero,
+                  minimumSize: Size(30, 26),
+                  alignment: Alignment.centerRight,
+                ),
+                onPressed: () => Navigator.of(context).pop(),
+              ),
+            ],
+          ),
+          Padding(padding: EdgeInsets.only(bottom: 14)),
+          MessageBottomModal(input),
+          Padding(padding: EdgeInsets.only(bottom: 14)),
+          !sending ? Center(
+            child: TextButton(
+              onPressed: !sending
+                  ? () async => await sendMessage(
+                    files: input['image'] != []
+                        ? [...input['image'].map((e) => File(e.path))]
+                        : [])
+                  : null,
+              child: Text(
+                widget.funcName,
+                style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore),
+              ),
+            ),
+          ) : Center(
+              child: Container(
+                width: 20,
+                height: 20,
+                margin: EdgeInsets.only(top: 13, bottom: 15),
+                child: CircularProgressIndicator(
+                  color: GuamColorFamily.purpleLight1,
+                ),
+              ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/commons/button_size_circular_progress_indicator.dart b/lib/commons/button_size_circular_progress_indicator.dart
new file mode 100644
index 00000000..52abe552
--- /dev/null
+++ b/lib/commons/button_size_circular_progress_indicator.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class ButtonSizeCircularProgressIndicator extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 18),
+      child: SizedBox (
+        width: 20,
+        height: 20,
+        child: CircularProgressIndicator(color: GuamColorFamily.purpleCore),
+      ),
+    );
+  }
+}
diff --git a/lib/commons/color_of_category.dart b/lib/commons/color_of_category.dart
new file mode 100644
index 00000000..c6442cc0
--- /dev/null
+++ b/lib/commons/color_of_category.dart
@@ -0,0 +1,16 @@
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+colorOfCategory(String category) {
+  HexColor textColor;
+
+  switch (category) {
+    case '개발': textColor = GuamColorFamily.purpleCore; break;
+    case '데이터분석': textColor = GuamColorFamily.greenCore; break;
+    case '디자인': textColor = GuamColorFamily.pinkCore; break;
+    case '기획/마케팅': textColor = GuamColorFamily.blueCore; break;
+    case '기타': textColor = GuamColorFamily.orangeCore; break;
+    default: textColor = GuamColorFamily.grayscaleGray1; break;
+  }
+  return textColor;
+}
diff --git a/lib/commons/common_confirm_dialog.dart b/lib/commons/common_confirm_dialog.dart
new file mode 100644
index 00000000..8766340a
--- /dev/null
+++ b/lib/commons/common_confirm_dialog.dart
@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+class CommonConfirmDialog extends StatelessWidget {
+  final String dialogText;
+  final String confirmText;
+  final String declineText;
+  final Function onPressConfirm;
+  final Function onPressDecline;
+
+  CommonConfirmDialog({@required this.dialogText, confirmText = "확인",
+    declineText = "취소", this.onPressConfirm, this.onPressDecline})
+      : this.confirmText = confirmText, this.declineText = declineText;
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10))
+      ),
+      titlePadding: EdgeInsets.all(0),
+      title: Container(
+        padding: EdgeInsets.all(10),
+        child: Row(
+          children: [
+            Icon(Icons.notifications_none, size: 16),
+            Text(" 알림", style: TextStyle(fontSize: 12))
+          ]
+        )
+      ),
+      contentPadding: EdgeInsets.all(10),
+      content: Text(
+        dialogText,
+        textAlign: TextAlign.center,
+        style: TextStyle(fontSize: 14, color: Colors.black)
+      ),
+      actions: [
+        TextButton(
+          child: Text(
+            confirmText,
+            style: TextStyle(
+              fontSize: 14,
+              color: Color.fromRGBO(85, 88, 255, 1),
+            )
+          ),
+          onPressed: () {
+            // 일단은 dialog 2개 연달아 띄우는 tutorial을 위해 순서 유지
+            Navigator.of(context).pop();
+            if (onPressConfirm != null) onPressConfirm();
+          },
+        ),
+        TextButton(
+          child: Text(
+            declineText,
+            style: TextStyle(fontSize: 14, color: Colors.red)
+          ),
+          onPressed: () {
+            // 일단은 dialog 2개 연달아 띄우는 tutorial을 위해 순서 유지
+            Navigator.of(context).pop();
+            if (onPressDecline != null) onPressDecline();
+          },
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/commons/common_icon_button.dart b/lib/commons/common_icon_button.dart
new file mode 100644
index 00000000..0810a667
--- /dev/null
+++ b/lib/commons/common_icon_button.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class CommonIconButton extends StatelessWidget {
+  final IconData icon;
+  final Function onPressed;
+  final Color iconColor;
+
+  CommonIconButton({@required this.icon, @required this.onPressed, this.iconColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      icon: Icon(icon, color: iconColor),
+      padding: EdgeInsets.zero,
+      constraints: BoxConstraints(
+          maxWidth: 24, maxHeight: 24
+      ),
+      onPressed: onPressed
+    );
+  }
+}
diff --git a/lib/commons/common_img_nickname.dart b/lib/commons/common_img_nickname.dart
new file mode 100644
index 00000000..7477abe9
--- /dev/null
+++ b/lib/commons/common_img_nickname.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/screens/profiles/profiles_app.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class CommonImgNickname extends StatelessWidget {
+  final int userId;
+  final double fontSize;
+  final double imageSize;
+  final String imgUrl;
+  final String nickname;
+  final HexColor nicknameColor;
+  final bool profileClickable;
+
+  CommonImgNickname({this.userId, this.fontSize=12, this.imageSize=24, this.imgUrl, this.nickname, this.nicknameColor, this.profileClickable=true});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: profileClickable
+          ? () => Navigator.of(context, rootNavigator: true).push(
+        MaterialPageRoute(builder: (_) => ProfilesApp(userId: userId)),
+      )
+          : null,
+      child: Row(
+        children: [
+          Container(
+            height: imageSize,
+            width: imageSize,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              image: DecorationImage(
+                fit: BoxFit.cover,
+                image: imgUrl != null
+                    ? NetworkImage(HttpRequest().s3BaseAuthority + imgUrl)
+                    : SvgProvider('assets/icons/profile_image.svg')
+              ),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(left: 8),
+            child: Text(
+              nickname ?? "",
+              style: TextStyle(
+                fontSize: fontSize,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                color: nicknameColor,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/commons/common_text_button.dart b/lib/commons/common_text_button.dart
new file mode 100644
index 00000000..24fd0400
--- /dev/null
+++ b/lib/commons/common_text_button.dart
@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class CommonTextButton extends StatelessWidget {
+  final double fontSize;
+  final String text;
+  final Function onPressed;
+  final HexColor textColor;
+  final String fontFamily;
+
+  CommonTextButton({this.text, this.fontSize, this.fontFamily, this.textColor, this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      child: Text(
+        text,
+        style: TextStyle(
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            color: textColor
+        ),
+      ),
+      style: TextButton.styleFrom(
+        minimumSize: Size.zero,
+        alignment: Alignment.centerLeft,
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      ),
+      onPressed: onPressed,
+    );
+  }
+}
diff --git a/lib/commons/common_text_field.dart b/lib/commons/common_text_field.dart
new file mode 100644
index 00000000..d06d8d96
--- /dev/null
+++ b/lib/commons/common_text_field.dart
@@ -0,0 +1,291 @@
+import 'dart:io';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_mentions/flutter_mentions.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:provider/provider.dart';
+import '../helpers/pick_image.dart';
+import '../providers/messages/messages.dart';
+import 'common_img_nickname.dart';
+import 'image/image_thumbnail.dart';
+import 'button_size_circular_progress_indicator.dart';
+
+class CommonTextField extends StatefulWidget {
+  final int messageTo;
+  final String sendButton;
+  final Function onTap;
+  final Function addImage;
+  final Function removeImage;
+  final dynamic editTarget;
+  final List<Map<String, dynamic>> mentionList;
+
+  CommonTextField({this.sendButton='등록', @required this.onTap, this.messageTo, this.addImage, this.removeImage, this.editTarget, this.mentionList});
+
+  @override
+  State<StatefulWidget> createState() => _CommonTextFieldState();
+}
+
+class _CommonTextFieldState extends State<CommonTextField> {
+  final double maxImgSize = 80;
+  final double imgSheetHeight = 96;
+  double mentionTargetHeight = 160;
+  double bottomSheetHeight = 56;
+  String content = '';
+  bool sending = false;
+  bool activeMention = false;
+  List<PickedFile> imageFileList = [];
+  List<int> mentionTargetIds = [];
+  RegExp mentionRegexp = new RegExp(r"@\[__(.*?)__\]"); /// mention할 Id를 마크다운에서 추출하는 정규식
+
+  GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();
+
+  @override
+  void dispose() {
+    imageFileList.clear();
+    super.dispose();
+  }
+
+  void setContent(){
+    setState(() => content = key.currentState.controller.text);
+  }
+
+  void setImageFile(PickedFile val) {
+    setState(() {
+      if (val != null) imageFileList.add(val);
+    });
+  }
+
+  void deleteImageFile(int idx) {
+    setState(() => imageFileList.removeAt(idx));
+  }
+
+  void toggleSending() {
+    setState(() => sending = !sending);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    bool isEdit = widget.editTarget != null;
+
+    Future<void> send() async {
+      toggleSending();
+      try {
+        /// 멘션 리스트 중복 제거
+        Iterable<RegExpMatch> matches = mentionRegexp
+            .allMatches(key.currentState.controller.markupText);
+        if (matches.length > 0)
+          matches.forEach((match) {
+            int mentionId = int.parse(match.group(1));
+            if (!mentionTargetIds.contains(mentionId))
+              mentionTargetIds.add(mentionId);
+          });
+        if (widget.messageTo != null) {
+          /// 쪽지함에서 쪽지 작성
+          await widget.onTap(
+            files: [...imageFileList.map((e) => File(e.path))],
+            fields: {
+              'to': widget.messageTo.toString(),
+              'text': content == '' && imageFileList.isNotEmpty ? '사진' : content,
+              // 서버 수정 전까지 사진만 달랑 보내는 경우 텍스트를 '사진'으로 지정하여 전송.
+            },
+          ).then((successful) {
+            /// successful == msgSended bool from MessageDetail Widget
+            if (successful) {
+              imageFileList.clear();
+              mentionTargetIds.clear();
+              key.currentState.controller.text = '';
+              FocusScope.of(context).unfocus();
+            }
+          });
+        } else {
+          /// 게시글 or 댓글 작성
+          if (isEdit && content != '') {
+            await widget.onTap(
+              id: widget.editTarget.id,
+              fields: {
+                "mentionIds": mentionTargetIds.join(','),
+                "content": content,
+              },
+            ).then((successful) {
+              if (successful) {
+                key.currentState.controller.text = '';
+                FocusScope.of(context).unfocus();
+              }
+            });
+          } else {
+            if (content != '' || imageFileList.isNotEmpty)
+              await widget.onTap(
+                files: [...imageFileList.map((e) => File(e.path))],
+                fields: {
+                  "mentionIds": mentionTargetIds.join(','),
+                  "content": content,
+                },
+              ).then((successful) {
+                if (successful) {
+                  imageFileList.clear();
+                  mentionTargetIds.clear();
+                  key.currentState.controller.text = '';
+                  FocusScope.of(context).unfocus();
+                }
+              });
+          }
+        }
+      } catch (e) {
+        print(e);
+      } finally {
+        toggleSending();
+      }
+    }
+
+    return SizedBox(
+      height: imageFileList.isNotEmpty
+          ? imgSheetHeight + bottomSheetHeight
+          : bottomSheetHeight, // 56 .. 73 .. 90 .. 107
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: GuamColorFamily.grayscaleWhite,
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.1),
+              blurRadius: 4,
+              offset: Offset(0, -2), // changes position of shadow
+            ),
+          ],
+        ),
+        child: Column(
+          children: [
+            Stack(
+              alignment: Alignment.bottomCenter,
+              children: [
+                imageFileList.isNotEmpty
+                    ? Container(
+                        color: GuamColorFamily.grayscaleGray1.withOpacity(0.4),
+                        padding: EdgeInsets.only(left: 23, top: 8, bottom: 8),
+                        constraints: BoxConstraints(maxHeight: maxImgSize + 15),
+                        child: ListView.builder(
+                          scrollDirection: Axis.horizontal,
+                          itemCount: imageFileList.length,
+                          itemBuilder: (_, idx) => Stack(
+                            children: [
+                              Container(
+                                padding: EdgeInsets.only(right: 14.87),
+                                child: ImageThumbnail(
+                                  width: maxImgSize,
+                                  height: maxImgSize,
+                                  image: Image(
+                                    image: FileImage(File(imageFileList[idx].path)),
+                                    fit: BoxFit.fill,
+                                  ),
+                                ),
+                              ),
+                              Positioned(
+                                top: 2,
+                                right: 14,
+                                child: IconButton(
+                                  iconSize: 23,
+                                  padding: EdgeInsets.zero,
+                                  constraints: BoxConstraints(),
+                                  icon: SvgPicture.asset('assets/icons/cancel_filled.svg'),
+                                  onPressed: () {
+                                    deleteImageFile(idx);
+                                    if (imageFileList.isEmpty) widget.removeImage();
+                                  },
+                                ),
+                              )
+                            ],
+                          ),
+                        ),
+                      )
+                    : Container(),
+              ],
+            ),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 16),
+                  child: IconButton(
+                    iconSize: 24,
+                    padding: EdgeInsets.zero,
+                    constraints: BoxConstraints(),
+                    icon: SvgPicture.asset('assets/icons/camera.svg'),
+                    onPressed: !sending
+                        ? () => pickImage(type: 'gallery').then((img) {
+                          setImageFile(img);
+                          widget.addImage();
+                        })
+                        : null,
+                  ),
+                ),
+                Expanded(
+                  child: FlutterMentions(
+                    key: key,
+                    suggestionPosition: SuggestionPosition.Top,
+                    style: TextStyle(fontSize: 14),
+                    onChanged: (e) => setContent(),
+                    cursorColor: GuamColorFamily.purpleCore,
+                    decoration: InputDecoration(
+                      hintText: "댓글을 남겨주세요.",
+                      hintStyle: TextStyle(fontSize: 14, color: GuamColorFamily.grayscaleGray5),
+                      border: InputBorder.none,
+                      focusedBorder: InputBorder.none,
+                      enabledBorder: InputBorder.none,
+                      errorBorder: InputBorder.none,
+                      disabledBorder: InputBorder.none,
+                      contentPadding: EdgeInsets.only(top: 18, bottom: 18),
+                    ),
+                    mentions: [
+                      Mention(
+                        trigger: "@",
+                        style: TextStyle(color: GuamColorFamily.purpleLight1),
+                        data: widget.mentionList,
+                        suggestionBuilder: (data) => SingleChildScrollView(
+                          dragStartBehavior: DragStartBehavior.start,
+                          child: Column(
+                            children: [
+                              Container(
+                                height: 53,
+                                padding: EdgeInsets.only(left: 10),
+                                color: GuamColorFamily.purpleLight3,
+                                child: CommonImgNickname(
+                                  fontSize: 13,
+                                  imageSize: 41,
+                                  profileClickable: false,
+                                  nickname: data['display'],
+                                  imgUrl: data['photo'] ?? null,
+                                ),
+                              ),
+                              CustomDivider(thickness: 0.5),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                !sending ? TextButton(
+                  onPressed: !sending ? send : null,
+                  style: TextButton.styleFrom(
+                    padding: EdgeInsets.only(right: 6),
+                    minimumSize: Size(30, 26),
+                    alignment: Alignment.center,
+                  ),
+                  child: Text(
+                    widget.sendButton,
+                    style: TextStyle(
+                      color: GuamColorFamily.purpleCore,
+                      fontSize: 16,
+                    ),
+                  ),
+                ) : ButtonSizeCircularProgressIndicator(),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/commons/custom_app_bar.dart b/lib/commons/custom_app_bar.dart
new file mode 100644
index 00000000..1fc8849f
--- /dev/null
+++ b/lib/commons/custom_app_bar.dart
@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
+  final String title;
+  final dynamic leading;
+  final dynamic trailing;
+  final dynamic bottom;
+  final Color backgroundColor;
+
+  CustomAppBar({this.title, this.leading, this.trailing, this.bottom, this.backgroundColor});
+
+  @override
+  Size get preferredSize => Size.fromHeight(AppBar().preferredSize.height);
+
+  @override
+  Widget build(BuildContext context) {
+    var textColor = GuamColorFamily.grayscaleGray1;
+    var iconColor = GuamColorFamily.grayscaleGray1;
+    return AppBar(
+      centerTitle: true,
+      elevation: 0.7,
+      title: Text(
+        title ?? "",
+        style: TextStyle(color: textColor),
+      ),
+      leading: leading != null
+          ? Material(color: Colors.transparent, child: leading)
+          : null,
+      automaticallyImplyLeading: false,
+      bottom: bottom,
+      actions: trailing == null
+          ? []
+          : [Material(color: Colors.transparent, child: trailing)],
+      backgroundColor: backgroundColor ?? GuamColorFamily.grayscaleWhite,
+      iconTheme: IconThemeData(
+        color: iconColor,
+      ),
+    );
+  }
+}
diff --git a/lib/commons/custom_divider.dart b/lib/commons/custom_divider.dart
new file mode 100644
index 00000000..323b6386
--- /dev/null
+++ b/lib/commons/custom_divider.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class CustomDivider extends StatelessWidget {
+  final double height;
+  final double thickness;
+  final HexColor color;
+
+  CustomDivider({
+    this.height = 1,
+    this.thickness = 1,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Divider(
+      height: height,
+      thickness: thickness,
+      color: color,
+    );
+  }
+}
diff --git a/lib/commons/functions_category_boardType.dart b/lib/commons/functions_category_boardType.dart
new file mode 100644
index 00000000..94e141e1
--- /dev/null
+++ b/lib/commons/functions_category_boardType.dart
@@ -0,0 +1,66 @@
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+// dummy data의 boardType이 enum으로 잘 담겨져 오면 지울 함수
+transferBoardId(int boardId) {
+  String boardType;
+  switch (boardId) {
+    case 1: boardType = '익명'; break;
+    case 2: boardType = '자유'; break;
+    case 3: boardType = '구인'; break;
+    case 4: boardType = '정보공유'; break;
+    case 5: boardType = '홍보'; break;
+    default: boardType = '자유'; break;
+  }
+  return boardType;
+}
+
+transferBoardType(String boardType) {
+  int boardId;
+  switch (boardType) {
+    case '익명': boardId = 1; break;
+    case '자유': boardId = 2; break;
+    case '구인': boardId = 3; break;
+    case '정보공유': boardId = 4; break;
+    case '홍보': boardId = 5; break;
+  }
+  return boardId;
+}
+
+transferCategoryId(int categoryId) {
+  String category;
+  switch (categoryId) {
+    case 1: category = '개발'; break;
+    case 2: category = '데이터분석'; break;
+    case 3: category = '디자인'; break;
+    case 4: category = '기획/마케팅'; break;
+    case 5: category = '기타'; break;
+  }
+  return category;
+}
+
+transferCategory(String category) {
+  int categoryId;
+  switch (category) {
+    case '개발': categoryId = 1; break;
+    case '데이터분석': categoryId = 2; break;
+    case '디자인': categoryId = 3; break;
+    case '기획/마케팅': categoryId = 4; break;
+    case '기타': categoryId = 5; break;
+  }
+  return categoryId;
+}
+
+colorOfCategory(String category) {
+  HexColor textColor;
+
+  switch (category) {
+    case '개발': textColor = GuamColorFamily.purpleCore; break;
+    case '데이터분석': textColor = GuamColorFamily.greenCore; break;
+    case '디자인': textColor = GuamColorFamily.pinkCore; break;
+    case '기획/마케팅': textColor = GuamColorFamily.blueCore; break;
+    case '기타': textColor = GuamColorFamily.orangeCore; break;
+    default: textColor = GuamColorFamily.grayscaleGray2; break;
+  }
+  return textColor;
+}
diff --git a/lib/commons/guam_progress_indicator.dart b/lib/commons/guam_progress_indicator.dart
new file mode 100644
index 00000000..1585fa3a
--- /dev/null
+++ b/lib/commons/guam_progress_indicator.dart
@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+Widget guamProgressIndicator({double size=80}){
+  return Image.asset(
+    "assets/gifs/guam_progress_indicator.gif",
+    height: size,
+    width: size,
+  );
+}
\ No newline at end of file
diff --git a/lib/commons/icon_text.dart b/lib/commons/icon_text.dart
new file mode 100644
index 00000000..11b0c4ae
--- /dev/null
+++ b/lib/commons/icon_text.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class IconText extends StatelessWidget {
+  final double iconSize;
+  final double fontSize;
+  final double paddingBtw;
+  final String text;
+  final String iconPath;
+  final Function onPressed;
+  final HexColor iconColor;
+  final HexColor textColor;
+
+  IconText({this.iconSize=20, this.fontSize=12, this.paddingBtw=10, this.text="", this.iconPath, this.onPressed, this.iconColor, this.textColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton.icon(
+      onPressed: onPressed,
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.only(right: paddingBtw),
+        minimumSize: Size.zero,
+        alignment: Alignment.centerLeft,
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      ),
+      label: Text(
+        text,
+        style: TextStyle(
+          color: textColor,
+          fontSize: fontSize,
+          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+        ),
+      ),
+      icon: iconPath != null ? SvgPicture.asset(
+        iconPath,
+        color: iconColor,
+        width: iconSize,
+        height: iconSize,
+      ) : null,
+    );
+  }
+}
diff --git a/lib/commons/image/closable_image_expanded.dart b/lib/commons/image/closable_image_expanded.dart
new file mode 100644
index 00000000..b1915edd
--- /dev/null
+++ b/lib/commons/image/closable_image_expanded.dart
@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../custom_app_bar.dart';
+import 'image_expanded.dart';
+
+class ClosableImageExpanded extends StatelessWidget {
+  final Widget image;
+  final String imagePath;
+
+  ClosableImageExpanded({this.image, this.imagePath});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(
+        backgroundColor: Colors.black,
+        trailing: IconButton(
+          padding: EdgeInsets.only(right: 12),
+          constraints: BoxConstraints(),
+          onPressed: () => Navigator.of(context).pop(),
+          icon: SvgPicture.asset(
+            'assets/icons/cancel_outlined.svg',
+            color: GuamColorFamily.grayscaleWhite,
+            width: 32,
+            height: 32,
+          ),
+        ),
+      ),
+      body: ImageExpanded(
+        image: image ?? null,
+        imagePath: imagePath ?? null,
+      ),
+    );
+  }
+}
diff --git a/lib/commons/image/image_carousel.dart b/lib/commons/image/image_carousel.dart
new file mode 100644
index 00000000..3ce09a6e
--- /dev/null
+++ b/lib/commons/image/image_carousel.dart
@@ -0,0 +1,139 @@
+import 'package:flutter/material.dart';
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../custom_app_bar.dart';
+import 'image_expanded.dart';
+import 'dart:math';
+
+class ImageCarousel extends StatefulWidget {
+  final List<dynamic> pictures; /// 서버 수정 후 List<Picture> 로...
+  final int initialPage;
+  final bool showImageCount;
+
+  // Actions for trailing
+  final bool showImageActions;
+  final Function deleteFunc;
+
+  ImageCarousel({@required this.pictures, this.initialPage, this.showImageCount=true,
+    @required this.showImageActions, this.deleteFunc,});
+
+  @override
+  State<StatefulWidget> createState() => ImageCarouselState();
+}
+
+class ImageCarouselState extends State<ImageCarousel> {
+  List<dynamic> picturesState; /// 서버 수정 후 List<Picture> 로...
+  int currPage;
+
+  @override
+  void initState() {
+    super.initState();
+    picturesState = widget.pictures;
+    currPage = widget.initialPage ?? 0;
+  }
+
+  void afterDelete() {
+    setState(() {
+      picturesState.removeAt(currPage);
+      currPage = max(currPage - 1, 0);
+      if (picturesState.isEmpty) Navigator.of(context).pop(); // pop when delete last image
+    });
+  }
+
+  void switchPage(int idx) => setState(() {currPage = idx;});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(
+        backgroundColor: Colors.black,
+        trailing: IconButton(
+          padding: EdgeInsets.only(right: 12),
+          constraints: BoxConstraints(),
+          onPressed: () => Navigator.of(context).pop(),
+          icon: SvgPicture.asset(
+            'assets/icons/cancel_outlined.svg',
+            color: GuamColorFamily.grayscaleWhite,
+            width: 32,
+            height: 32,
+          ),
+        ),
+        // trailing: widget.showImageActions ? IconButton(
+        //   icon: Icon(Icons.more_vert),
+        //   color: Colors.grey,
+        //   onPressed: () {
+        //     if (Platform.isAndroid) {
+        //       showMaterialModalBottomSheet(
+        //           context: context,
+        //           builder: (_) => BottomModalContent(
+        //               deleteText: "이미지 삭제",
+        //               deleteFunc: () async {
+        //                 await widget.deleteFunc(imageId: picturesState[currPage].id)
+        //                     .then((successful) {
+        //                   if (successful) {
+        //                     Navigator.of(context).pop(); // pop Modal Bottom Content
+        //                     afterDelete();
+        //                   }
+        //                 });
+        //               }
+        //           )
+        //       );
+        //     } else {
+        //       showCupertinoModalBottomSheet(
+        //           context: context,
+        //           builder: (_) => BottomModalContent(
+        //               deleteText: "이미지 삭제",
+        //               deleteFunc: () async {
+        //                 await widget.deleteFunc(imageId: picturesState[currPage].id)
+        //                     .then((successful) {
+        //                   if (successful) {
+        //                     Navigator.of(context).pop(); // pop Modal Bottom Content
+        //                     afterDelete();
+        //                   }
+        //                 });
+        //               }
+        //           )
+        //       );
+        //     }
+        //   },
+        // ) : null,
+      ),
+      body: Stack(
+        children: [
+          CarouselSlider(
+            options: CarouselOptions(
+              height: double.infinity,
+              viewportFraction: 1,
+              enableInfiniteScroll: false,
+              scrollPhysics: ClampingScrollPhysics(),
+              initialPage: currPage,
+              onPageChanged: (idx, _) => switchPage(idx)
+            ),
+            /// 서버 수정 후 e가 아니라 e.urlPath 로...
+            items: [...picturesState.map((e) => ImageExpanded(imagePath: e))]
+          ),
+          if (widget.showImageCount)
+          Center(
+            child: Padding(
+              padding: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.65),
+              child: Container(
+                width: 49,
+                height: 25,
+                decoration: BoxDecoration(
+                  color: GuamColorFamily.grayscaleGray3,
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                padding: EdgeInsets.only(left: 12, top: 5, right: 12, bottom: 2),
+                child: Text(
+                  '${currPage+1} / ${picturesState.length}',
+                  style: TextStyle(color: Colors.white, fontSize: 12),
+                ),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/commons/image/image_container.dart b/lib/commons/image/image_container.dart
new file mode 100644
index 00000000..ee3a631c
--- /dev/null
+++ b/lib/commons/image/image_container.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:transparent_image/transparent_image.dart';
+import 'closable_image_expanded.dart';
+
+class ImageThumbnail extends StatelessWidget {
+  /*
+  * image: for uploaded native image file via ImagePicker, etc.,
+  * imagePath: for network image path (S3)
+  * IMPORTANT: only 1 of above should be passed to parameter
+  * */
+  final Widget image;
+  final String imagePath;
+  final double height;
+  final double width;
+
+  ImageThumbnail({this.image, this.imagePath, this.height, this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: Container(
+        height: height,
+        width: width,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: image ?? FadeInImage(
+            placeholder: MemoryImage(kTransparentImage),
+            image: NetworkImage(HttpRequest().s3BaseAuthority + imagePath),
+            fit: BoxFit.cover,
+          ),
+        ),
+      ),
+      onTap: () => Navigator.of(context, rootNavigator: true).push(
+        MaterialPageRoute(
+          builder: (_) => ClosableImageExpanded(
+            image: image ?? null,
+            imagePath: imagePath ?? null
+          )
+        )
+      )
+    );
+  }
+}
diff --git a/lib/commons/image/image_expanded.dart b/lib/commons/image/image_expanded.dart
new file mode 100644
index 00000000..1eebe8cf
--- /dev/null
+++ b/lib/commons/image/image_expanded.dart
@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:transparent_image/transparent_image.dart';
+import '../../helpers/http_request.dart';
+
+class ImageExpanded extends StatelessWidget{
+  final Widget image;
+  final String imagePath;
+
+  ImageExpanded({this.image, this.imagePath});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(bottom: 72),
+      height: MediaQuery.of(context).size.height,
+      color: Colors.black,
+      child: Center(
+        child: Container(
+          width: double.infinity,
+          child: InteractiveViewer(
+            child: image ?? FadeInImage(
+              placeholder: MemoryImage(kTransparentImage),
+              image: NetworkImage(HttpRequest().s3BaseAuthority + imagePath),
+              fit: BoxFit.fitWidth,
+            )
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/commons/image/image_thumbnail.dart b/lib/commons/image/image_thumbnail.dart
new file mode 100644
index 00000000..578f307d
--- /dev/null
+++ b/lib/commons/image/image_thumbnail.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:transparent_image/transparent_image.dart';
+import '../../helpers/http_request.dart';
+import 'closable_image_expanded.dart';
+
+class ImageThumbnail extends StatelessWidget {
+  /*
+  * image: for uploaded native image file via ImagePicker, etc.,
+  * imagePath: for network image path (S3)
+  * IMPORTANT: only 1 of above should be passed to parameter
+  * */
+  final Widget image;
+  final String imagePath;
+  final double height;
+  final double width;
+
+  ImageThumbnail({this.image, this.imagePath, this.height, this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: Container(
+        height: height,
+        width: width,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: image ?? FadeInImage(
+            placeholder: MemoryImage(kTransparentImage),
+            image: NetworkImage(HttpRequest().s3BaseAuthority + imagePath),
+            fit: BoxFit.cover,
+          ),
+        ),
+      ),
+      onTap: () => Navigator.of(context, rootNavigator: true).push(
+        MaterialPageRoute(
+          builder: (_) => ClosableImageExpanded(
+            image: image ?? null,
+            imagePath: imagePath ?? null
+          )
+        )
+      )
+    );
+  }
+}
diff --git a/lib/commons/next.dart b/lib/commons/next.dart
new file mode 100644
index 00000000..e3d31dd1
--- /dev/null
+++ b/lib/commons/next.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class Next extends StatelessWidget {
+  final Function onPressed;
+
+  Next({@required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      icon: SvgPicture.asset('assets/icons/right.svg'),
+      onPressed: onPressed,
+      color: GuamColorFamily.grayscaleGray5,
+    );
+  }
+}
diff --git a/lib/commons/next_button.dart b/lib/commons/next_button.dart
new file mode 100644
index 00000000..70c7ef41
--- /dev/null
+++ b/lib/commons/next_button.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class NextButton extends StatelessWidget {
+  final String label;
+  final Function onTap;
+
+  NextButton({
+    @required this.label,
+    @required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(5, 60, 5, 20),
+      child: InkWell(
+        onTap: onTap,
+        child: Container(
+          alignment: Alignment.center,
+          height: 56,
+          width: MediaQuery.of(context).size.width * 0.9,
+          decoration: BoxDecoration(
+            color: GuamColorFamily.purpleCore,
+            borderRadius: BorderRadius.all(Radius.circular(16)),
+          ),
+          child: Text(
+            label,
+            style: TextStyle(
+              color: GuamColorFamily.grayscaleWhite,
+              fontSize: 16,
+            ),
+          ),
+        )
+      )
+    );
+  }
+}
+
diff --git a/lib/commons/sub_headings.dart b/lib/commons/sub_headings.dart
new file mode 100644
index 00000000..39ee7783
--- /dev/null
+++ b/lib/commons/sub_headings.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class SubHeadings extends StatelessWidget {
+  final String subheading;
+  final double fontSize;
+  final Color fontColor;
+  final String fontFamily;
+
+  SubHeadings(this.subheading, {this.fontSize = 16, this.fontColor = Colors.black, this.fontFamily = GuamFontFamily.SpoqaHanSansNeoRegular});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: Alignment.centerLeft,
+      child: Text(
+        subheading,
+        style: TextStyle(
+          fontSize: fontSize,
+          color: fontColor,
+          fontFamily: fontFamily,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/firebase_options.dart b/lib/firebase_options.dart
new file mode 100644
index 00000000..70240890
--- /dev/null
+++ b/lib/firebase_options.dart
@@ -0,0 +1,61 @@
+// File generated by FlutterFire CLI.
+// ignore_for_file: lines_longer_than_80_chars
+import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
+import 'package:flutter/foundation.dart'
+    show defaultTargetPlatform, kIsWeb, TargetPlatform;
+
+/// Default [FirebaseOptions] for use with your Firebase apps.
+///
+/// Example:
+/// ```dart
+/// import 'firebase_options.dart';
+/// // ...
+/// await Firebase.initializeApp(
+///   options: DefaultFirebaseOptions.currentPlatform,
+/// );
+/// ```
+class DefaultFirebaseOptions {
+  static FirebaseOptions get currentPlatform {
+    if (kIsWeb) {
+      throw UnsupportedError(
+        'DefaultFirebaseOptions have not been configured for web - '
+        'you can reconfigure this by running the FlutterFire CLI again.',
+      );
+    }
+    // ignore: missing_enum_constant_in_switch
+    switch (defaultTargetPlatform) {
+      case TargetPlatform.android:
+        return android;
+      case TargetPlatform.iOS:
+        return ios;
+      case TargetPlatform.macOS:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for macos - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+    }
+
+    throw UnsupportedError(
+      'DefaultFirebaseOptions are not supported for this platform.',
+    );
+  }
+
+  static const FirebaseOptions android = FirebaseOptions(
+    apiKey: 'AIzaSyAYoZLtqIgtE8eLeyNgCoLYIa3f3UYmXDs',
+    appId: '1:648780047414:android:3fc58c8364ffee5c21a497',
+    messagingSenderId: '648780047414',
+    projectId: 'waffle-guam',
+    storageBucket: 'waffle-guam.appspot.com',
+  );
+
+  static const FirebaseOptions ios = FirebaseOptions(
+    apiKey: 'AIzaSyCkeKrJihj2WMWtlqWxfzL2aQTtNr-ytTg',
+    appId: '1:648780047414:ios:054210930e5e474921a497',
+    messagingSenderId: '648780047414',
+    projectId: 'waffle-guam',
+    storageBucket: 'waffle-guam.appspot.com',
+    androidClientId: '648780047414-d2fbe0qcdiugckgq8stcqvgef89ie6a9.apps.googleusercontent.com',
+    iosClientId: '648780047414-erb4hojdlnk09dk8nvcjjgdps2q3cc8n.apps.googleusercontent.com',
+    iosBundleId: 'com.wafflestudio.guam-community',
+  );
+}
diff --git a/lib/helpers/decode_ko.dart b/lib/helpers/decode_ko.dart
new file mode 100644
index 00000000..986c3e04
--- /dev/null
+++ b/lib/helpers/decode_ko.dart
@@ -0,0 +1,4 @@
+import 'dart:convert';
+
+// Translate json response to utf-8 json
+String decodeKo(dynamic json) => utf8.decode(json.bodyBytes);
diff --git a/lib/helpers/http_request.dart b/lib/helpers/http_request.dart
new file mode 100644
index 00000000..5ad8814e
--- /dev/null
+++ b/lib/helpers/http_request.dart
@@ -0,0 +1,147 @@
+import 'dart:convert';
+import 'dart:io' show File;
+import 'package:http/http.dart' as http;
+import 'package:http_parser/http_parser.dart';
+import 'package:path/path.dart' as p;
+import '../mixins/toast.dart';
+
+class HttpRequest with Toast {
+  // TODO: Remove immigrationAuthority & @isHttps param after immigrationAuthority is merged to gateway
+
+  final String gatewayAuthority = "guam.jon-snow-korea.com";
+  final String immigrationAuthority = "guam-immigration.jon-snow-korea.com";
+  final String s3BaseAuthority = "https://guam.s3.ap-northeast-2.amazonaws.com/";
+
+  Future get({bool isHttps = true, String authority, String path, dynamic queryParams, String authToken}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path, queryParams)
+          : Uri.http(authority ?? gatewayAuthority, path, queryParams);
+
+      final response = await http.get(
+        uri,
+        headers: {'Content-Type': "application/json", 'Authorization': 'Bearer $authToken'},
+      );
+
+      return response;
+    } catch (e) {
+      print("Error on GET request: $e");
+      showToast(success: false, msg: e);
+    }
+  }
+
+  Future post({bool isHttps = true, String authority, String path, String authToken, dynamic queryParams, dynamic body}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path, queryParams)
+          : Uri.http(authority ?? gatewayAuthority, path, queryParams);
+
+      final response = await http.post(
+        uri,
+        headers: {'Content-Type': "application/json", 'Authorization': 'Bearer $authToken'},
+        body: jsonEncode(body),
+      );
+
+      return response;
+    } catch (e) {
+      print("Error on POST request: $e");
+      showToast(success: false, msg: e);
+    }
+  }
+
+  // pluralImage boolean 으로 "images" or "image" 구분.
+  Future postMultipart({bool isHttps = true, String authority, String path, String authToken, Map<String, dynamic> fields, List<File> files, bool pluralImages=true}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path)
+          : Uri.http(authority ?? gatewayAuthority, path);
+
+      http.MultipartRequest request = http.MultipartRequest("POST", uri);
+      request.headers['Authorization'] = 'Bearer $authToken';
+      fields.entries.forEach((e) => request.fields[e.key] = e.value);
+
+      if (files != null)
+        files.forEach((e) async {
+          final multipartFile = http.MultipartFile(
+              pluralImages ? "images" : "image",
+              e.readAsBytes().asStream(),
+              e.lengthSync(),
+              filename: e.path.split("/").last,
+              contentType: MediaType("image", "${p.extension(e.path)}")
+          );
+          request.files.add(multipartFile);
+        });
+      http.Response response = await http.Response.fromStream(await request.send());
+      return response;
+    } catch (e) {
+      print("Error on POST Multipart request: $e");
+      showToast(success: false, msg: e);
+    }
+  }
+
+  Future patch({bool isHttps = true, String authority, String path, String authToken, dynamic body}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path)
+          : Uri.http(authority ?? gatewayAuthority, path);
+
+      final response = await http.patch(
+        uri,
+        headers: {'Content-Type': "application/json", 'Authorization': 'Bearer $authToken'},
+        body: jsonEncode(body),
+      );
+
+      return response;
+    } catch (e) {
+      print("Error on PUT request: $e");
+      showToast(success: false, msg: e);
+    }
+  }
+
+  Future patchMultipart({bool isHttps = true, String authority, String path, String authToken, Map<String, dynamic> fields, List<File> files}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path)
+          : Uri.http(authority ?? gatewayAuthority, path);
+
+      http.MultipartRequest request = http.MultipartRequest("PATCH", uri);
+      request.headers['Authorization'] = 'Bearer $authToken';
+      fields.entries.forEach((e) => request.fields[e.key] = e.value);
+
+      if (files != null)
+        files.forEach((e) async {
+          final multipartFile = http.MultipartFile(
+            "profileImage",
+            e.readAsBytes().asStream(),
+            e.lengthSync(),
+            filename: e.path.split("/").last,
+            contentType: MediaType("image", "${p.extension(e.path)}"),
+          );
+          request.files.add(multipartFile);
+        });
+      http.Response response = await http.Response.fromStream(await request.send());
+      return response;
+    } catch (e) {
+      print("Error on PATCH Multipart request: ${e.toString()}");
+      showToast(success: false, msg: e.toString());
+    }
+  }
+
+  Future delete({bool isHttps = true, String authority, String path, dynamic queryParams, String authToken}) async {
+    try {
+      final uri = isHttps
+          ? Uri.https(authority ?? gatewayAuthority, path, queryParams)
+          : Uri.http(authority ?? gatewayAuthority, path, queryParams);
+
+      final response = await http.delete(
+        uri,
+        headers: {'Content-Type': "application/json", 'Authorization': 'Bearer $authToken'},
+      );
+
+      return response;
+    } catch (e) {
+      print("Error on DELETE request: $e");
+      showToast(success: false, msg: e);
+    }
+  }
+}
diff --git a/lib/helpers/pick_image.dart b/lib/helpers/pick_image.dart
new file mode 100644
index 00000000..f156e0b7
--- /dev/null
+++ b/lib/helpers/pick_image.dart
@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:image_picker/image_picker.dart';
+
+Future<PickedFile> pickImage({@required type}) async {
+  final ImagePicker picker = ImagePicker();
+  switch (type) {
+    case 'gallery':
+      return await picker.getImage(source: ImageSource.gallery, imageQuality: 30);
+      break;
+    case 'camera':
+      return await picker.getImage(source: ImageSource.camera, imageQuality: 30);
+      break;
+    default:
+      print("We can pick images from either gallery or camera.");
+      return null;
+  }
+}
diff --git a/lib/helpers/svg_provider.dart b/lib/helpers/svg_provider.dart
new file mode 100644
index 00000000..6f614520
--- /dev/null
+++ b/lib/helpers/svg_provider.dart
@@ -0,0 +1,145 @@
+import 'dart:async';
+import 'dart:io';
+import 'dart:ui' as ui show Image, Picture;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart' show rootBundle;
+import 'package:flutter_svg/flutter_svg.dart';
+
+/// Rasterizes given svg picture for displaying in [Image] widget:
+///
+/// ```dart
+/// Image(
+///   width: 32,
+///   height: 32,
+///   image: Svg('assets/my_icon.svg'),
+/// )
+/// ```
+class SvgProvider extends ImageProvider<SvgImageKey> {
+  /// Path to svg file or asset
+  final String path;
+
+  /// Size in logical pixels to render.
+  /// Useful for [DecorationImage].
+  /// If not specified, will use size from [Image].
+  /// If [Image] not specifies size too, will use default size 100x100.
+  final Size size; // nullable
+
+  /// Color to tint the SVG
+  final Color color;
+
+  /// Defines if the SVG is loaded from assets or read from a file.
+  final bool isAsset;
+
+  /// Width and height can also be specified from [Image] constrictor.
+  /// Default size is 100x100 logical pixels.
+  /// Different size can be specified in [Image] parameters
+  const SvgProvider(this.path, {this.size, this.color, this.isAsset: true});
+
+  @override
+  Future<SvgImageKey> obtainKey(ImageConfiguration configuration) {
+    final double logicWidth = size?.width ?? configuration.size?.width ?? 100;
+    final double logicHeight = size?.height ?? configuration.size?.width ?? 100;
+    final double scale = configuration.devicePixelRatio ?? 1.0;
+    final Color color = this.color ?? Colors.transparent;
+
+    return SynchronousFuture<SvgImageKey>(
+      SvgImageKey(
+          assetName: path,
+          pixelWidth: (logicWidth * scale).round(),
+          pixelHeight: (logicHeight * scale).round(),
+          scale: scale,
+          color: color),
+    );
+  }
+
+  @override
+  ImageStreamCompleter load(SvgImageKey key, nil) {
+    return OneFrameImageStreamCompleter(
+      _loadAsync(key, isAsset),
+    );
+  }
+
+  static Future<ImageInfo> _loadAsync(SvgImageKey key, bool isAsset) async {
+    String rawSvg = (isAsset)
+        ? await rootBundle.loadString(key.assetName)
+        : await File(key.assetName).readAsString();
+
+    final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, key.assetName);
+    final ui.Picture picture = svgRoot.toPicture(
+      size: Size(
+        key.pixelWidth.toDouble(),
+        key.pixelHeight.toDouble(),
+      ),
+      clipToViewBox: false,
+      colorFilter:
+      ColorFilter.mode(key.color ?? Colors.transparent, BlendMode.srcATop),
+    );
+    final ui.Image image = await picture.toImage(
+      key.pixelWidth,
+      key.pixelHeight,
+    );
+    return ImageInfo(
+      image: image,
+      scale: key.scale,
+    );
+  }
+
+  // Note: == and hashCode not overrided as changes in properties
+  // (width, height and scale) are not observable from the here.
+  // [SvgImageKey] instances will be compared instead.
+
+  @override
+  String toString() => '$runtimeType(${describeIdentity(path)})';
+}
+
+@immutable
+class SvgImageKey {
+  const SvgImageKey({
+    @required this.assetName,
+    @required this.pixelWidth,
+    @required this.pixelHeight,
+    @required this.scale,
+    this.color,
+  });
+
+  /// Path to svg asset.
+  final String assetName;
+
+  /// Width in physical pixels.
+  /// Used when raterizing.
+  final int pixelWidth;
+
+  /// Height in physical pixels.
+  /// Used when raterizing.
+  final int pixelHeight;
+
+  /// Color to tint the SVG
+  final Color color;
+
+  /// Used to calculate logical size from physical, i.e.
+  /// logicalWidth = [pixelWidth] / [scale],
+  /// logicalHeight = [pixelHeight] / [scale].
+  /// Should be equal to [MediaQueryData.devicePixelRatio].
+  final double scale;
+
+  @override
+  bool operator ==(Object other) {
+    if (other.runtimeType != runtimeType) {
+      return false;
+    }
+    return other is SvgImageKey &&
+        other.assetName == assetName &&
+        other.pixelWidth == pixelWidth &&
+        other.pixelHeight == pixelHeight &&
+        other.scale == scale;
+  }
+
+  @override
+  int get hashCode => hashValues(assetName, pixelWidth, pixelHeight, scale);
+
+  @override
+  String toString() => '${objectRuntimeType(this, 'SvgImageKey')}'
+      '(assetName: "$assetName", pixelWidth: $pixelWidth, pixelHeight: $pixelHeight, scale: $scale)';
+}
diff --git a/lib/main.dart b/lib/main.dart
index b9bfc389..ba7e04c6 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,113 +1,72 @@
+import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/material.dart';
+import 'package:guam_community_client/screens/app/splash/splash_screen.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import 'providers/user_auth/authenticate.dart';
+import 'package:firebase_core/firebase_core.dart';
+import 'firebase_options.dart';
+import './screens/user_auth/auth.dart';
+
+void main() async {
+  // Returns an instance of the WidgetsBinding, creating and initializing it if necessary.
+  // WidgetsBinding provides interaction w/ Flutter Engine.
+  WidgetsFlutterBinding.ensureInitialized();
+
+  // Use platform channels to call native code to initialize Firebase.
+  // Thus, 'async' main() and placed next to ensureInitialized()
+  await Firebase.initializeApp(
+    options: DefaultFirebaseOptions.currentPlatform,
+  );
 
-void main() {
   runApp(MyApp());
 }
 
 class MyApp extends StatelessWidget {
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
-        primarySwatch: Colors.blue,
-      ),
-      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    return FutureBuilder(
+      // future: Future.delayed(Duration(milliseconds: 1500)),
+      // 개발시에 주석처리하면 hot reload 시 초기화 안시킬 수 있음.
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return MaterialApp(
+            initialRoute: '/',
+            debugShowCheckedModeBanner: false,
+            routes: {
+              '/': (context) => SplashScreen(),
+            },
+          ); // 초기 로딩 시 Splash Screen
+        } else if (snapshot.hasError) {
+          return MaterialApp(home: ErrorScreen()); // 초기 로딩 에러 시 Error Screen
+        } else {
+          return MultiProvider(
+            providers: [
+              ChangeNotifierProvider<Authenticate>(create: (_) => Authenticate()),
+            ],
+            child: MaterialApp(
+              initialRoute: '/',
+              routes: {
+                '/': (context) => Auth(),
+              },
+              builder: BotToastInit(),
+              debugShowCheckedModeBanner: false,
+              theme: ThemeData(
+                primaryColor: GuamColorFamily.purpleCore,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+              ),
+            ),
+          );
+        }
+      },
     );
   }
 }
 
-class MyHomePage extends StatefulWidget {
-  MyHomePage({Key? key, required this.title}) : super(key: key);
-
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
-
-  @override
-  _MyHomePageState createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
-
+class ErrorScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
-    // by the _incrementCounter method above.
-    //
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    return Scaffold(
-      appBar: AppBar(
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Invoke "debug painting" (press "p" in the console, choose the
-          // "Toggle Debug Paint" action from the Flutter Inspector in Android
-          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
-          // to see the wireframe for each widget.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
-    );
+    return Text("Error Page");
   }
 }
diff --git a/lib/mixins/toast.dart b/lib/mixins/toast.dart
new file mode 100644
index 00000000..5fd791b2
--- /dev/null
+++ b/lib/mixins/toast.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:bot_toast/bot_toast.dart';
+
+mixin Toast {
+  void showToast ({@required bool success, @required String msg}) {
+    BotToast.showText(
+      text: msg ?? (success ? "완료되었습니다" : "오류가 발생했습니다"),
+      contentColor: success
+          ? Color.fromRGBO(85, 88, 255, 1)
+          : Color.fromRGBO(235, 87, 87, 1),
+      borderRadius: BorderRadius.circular(30),
+      textStyle: TextStyle(
+        fontSize: 14,
+        color: Colors.white
+      )
+    );
+  }
+}
diff --git a/lib/models/boards/category.dart b/lib/models/boards/category.dart
new file mode 100644
index 00000000..7d4a3488
--- /dev/null
+++ b/lib/models/boards/category.dart
@@ -0,0 +1,16 @@
+/// category.title 은 게시글 수정 시 non-final 로 정의
+class Category {
+  final int postId;
+  final int categoryId;
+  String title;
+
+  Category({this.postId, this.categoryId, this.title});
+
+  factory Category.fromJson(dynamic json) {
+    return Category(
+      postId: json['postId'],
+      categoryId: json['categoryId'],
+      title: json['title'],
+    );
+  }
+}
diff --git a/lib/models/boards/comment.dart b/lib/models/boards/comment.dart
new file mode 100644
index 00000000..479b7c54
--- /dev/null
+++ b/lib/models/boards/comment.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+
+class Comment extends ChangeNotifier {
+  final int id;
+  final int postId;
+  final Profile profile;
+  final String content;
+  final bool isMine;
+  final bool isLiked;
+  final List<dynamic> imagePaths; /// 임시 방편 (추후 pictures 활용 예정)
+  final int likeCount;
+  final String createdAt;
+
+  Comment({
+    this.id,
+    this.postId,
+    this.profile,
+    this.content,
+    this.isMine,
+    this.isLiked,
+    this.imagePaths,
+    this.likeCount,
+    this.createdAt,
+  });
+
+  factory Comment.fromJson(Map<String, dynamic> json) {
+    Profile profile;
+
+    if (json['user'] != null) {
+      profile = Profile.fromJson(json['user']);
+    }
+
+    return Comment(
+      id: json['id'],
+      postId: json['postId'],
+      profile: profile,
+      content: json['content'],
+      isMine: json['isMine'],
+      isLiked: json['isLiked'],
+      imagePaths: json['imagePaths'],
+      likeCount: json['likeCount'],
+      createdAt: json['createdAt'],
+    );
+  }
+}
diff --git a/lib/models/boards/post.dart b/lib/models/boards/post.dart
new file mode 100644
index 00000000..c0d4f733
--- /dev/null
+++ b/lib/models/boards/post.dart
@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/commons/functions_category_boardType.dart';
+import 'package:guam_community_client/models/boards/category.dart' as Category;
+import 'package:guam_community_client/models/boards/comment.dart';
+import '../profiles/profile.dart';
+
+/// title, content, boardType, category는 게시글 수정 시 non-final로 정의
+class Post extends ChangeNotifier {
+  final int id;
+  final int boardId;
+  String boardType; // ex) 익명, 홍보, 정보공유 게시판
+  final Profile profile;
+  String title;
+  String content;
+  Category.Category category; // ex) 데이터분석, 개발, 디자인
+  final List<dynamic> imagePaths; // 서버 수정 전까지 쓰이는 임시방편 속성
+  final List<Comment> comments;
+  final int likeCount;
+  final int commentCount;
+  final int scrapCount;
+  final bool isMine;
+  final bool isLiked;
+  final bool isScrapped;
+  final String createdAt;
+
+  Post({
+    this.id,
+    this.profile,
+    this.boardId,
+    this.boardType,
+    this.title,
+    this.content,
+    this.category,
+    this.imagePaths,
+    this.comments,
+    this.likeCount,
+    this.commentCount,
+    this.scrapCount,
+    this.isMine,
+    this.isLiked,
+    this.isScrapped,
+    this.createdAt,
+  });
+
+  /// Json Encoding for filter value comparison in search tab
+  Map<String, dynamic> toJson() {
+    return {
+      'id': this.id,
+      'like': this.likeCount,
+      'createdAt': this.createdAt,
+    };
+  }
+
+  factory Post.fromJson(Map<String, dynamic> json) {
+    Profile profile;
+    Category.Category category;
+    List<Comment> comments;
+
+    /**
+     * Server에서 profile 대신 user라는 이름으로 주고 있는데,
+     * 클라를 다 user로 고치든 서버에서 profile로 받아오든 할 것.
+    **/
+    if (json['user'] != null) {
+      profile = Profile.fromJson(json['user']);
+    }
+
+    if (json['category'] != null) {
+      category = Category.Category.fromJson(json['category']);
+    }
+
+    if (json['comments'] != null) {
+      comments = [...json['comments'].map((comment) => Comment.fromJson({
+        'id': comment['id'],
+        'user': comment['user'],
+        'content': comment['content'],
+        'imagePaths': json['imagePaths'],
+        'isLiked': comment['isLiked'],
+        'likeCount': comment['likeCount'],
+        'createdAt': json['createdAt'],
+      }))];
+    }
+
+    return Post(
+      id: json['id'],
+      profile: profile,
+      boardId: json['boardId'],
+      boardType: transferBoardId(json['boardId']),
+      title: json['title'],
+      content: json['content'],
+      category: category,
+      imagePaths: json['imagePaths'],
+      comments: comments,
+      likeCount: json['likeCount'],
+      commentCount: json['commentCount'],
+      scrapCount: json['scrapCount'],
+      isMine: json['isMine'],
+      isLiked: json['isLiked'],
+      isScrapped: json['isScrapped'],
+      createdAt: json['createdAt'],
+    );
+  }
+}
diff --git a/lib/models/filter.dart b/lib/models/filter.dart
new file mode 100644
index 00000000..1b90a1b6
--- /dev/null
+++ b/lib/models/filter.dart
@@ -0,0 +1,6 @@
+class Filter {
+  final String key;
+  final String label;
+
+  Filter({this.key, this.label});
+}
diff --git a/lib/models/messages/message.dart b/lib/models/messages/message.dart
new file mode 100644
index 00000000..f70a2019
--- /dev/null
+++ b/lib/models/messages/message.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+class Message extends ChangeNotifier {
+  final int id;
+  final int sentBy;
+  final int sentTo;
+  final bool isRead;
+  final String text;
+  final String imagePath;
+  final String createdAt;
+
+  Message({
+    this.id,
+    this.sentBy,
+    this.sentTo,
+    this.isRead,
+    this.text,
+    this.imagePath,
+    this.createdAt,
+  });
+
+  factory Message.fromJson(Map<String, dynamic> json) {
+    return Message(
+      id: json['id'],
+      sentBy: json['sentBy'],
+      sentTo: json['sentTo'],
+      isRead: json['isRead'],
+      text: json['text'],
+      imagePath: json['imagePath'],
+      createdAt: json['createdAt'],
+    );
+  }
+}
diff --git a/lib/models/messages/message_box.dart b/lib/models/messages/message_box.dart
new file mode 100644
index 00000000..2dfcfe88
--- /dev/null
+++ b/lib/models/messages/message_box.dart
@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/models/messages/message.dart' as Message;
+import '../profiles/profile.dart';
+
+class MessageBox extends ChangeNotifier {
+  final Profile otherProfile; // 상대방 프로필
+  final Message.Message lastLetter; // 가장 마지막으로 보낸 메시지 (사진만 있는 경우 '사진'으로 보냄)
+
+  MessageBox({
+    this.otherProfile,
+    this.lastLetter,
+  });
+
+  factory MessageBox.fromJson(Map<String, dynamic> json) {
+    Profile otherProfile;
+    Message.Message lastLetter;
+
+    if (json['pair'] != null) {
+      otherProfile = Profile.fromJson(json['pair']);
+    }
+
+    if (json['lastLetter'] != null) {
+      lastLetter = Message.Message.fromJson(json['lastLetter']);
+    }
+
+    return MessageBox(
+      otherProfile: otherProfile,
+      lastLetter: lastLetter,
+    );
+  }
+}
diff --git a/lib/models/notification.dart b/lib/models/notification.dart
new file mode 100644
index 00000000..4b19d4d4
--- /dev/null
+++ b/lib/models/notification.dart
@@ -0,0 +1,42 @@
+import 'package:guam_community_client/models/profiles/profile.dart';
+
+class Notification {
+  final int id;
+  final int userId;
+  final String kind;
+  final String body;
+  final String linkUrl;
+  final Profile writer;
+  final bool isRead;
+  final String createdAt;
+
+  Notification({
+    this.id,
+    this.userId,
+    this.kind,
+    this.body,
+    this.linkUrl,
+    this.writer,
+    this.isRead,
+    this.createdAt,
+  });
+
+  factory Notification.fromJson(dynamic json) {
+    Profile writer;
+
+    if (json['writer'] != null) {
+      writer = Profile.fromJson(json['writer']);
+    }
+
+    return Notification(
+      id: json['id'],
+      userId: json['userId'],
+      kind: json['kind'],
+      body: json['body'],
+      linkUrl: json['linkUrl'],
+      writer: writer,
+      isRead: json['isRead'],
+      createdAt: json['createdAt'],
+    );
+  }
+}
diff --git a/lib/models/picture.dart b/lib/models/picture.dart
new file mode 100644
index 00000000..9607901a
--- /dev/null
+++ b/lib/models/picture.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+class Picture {
+  final int id;
+  final String urlPath;
+
+  Picture({this.id, @required this.urlPath});
+
+  factory Picture.fromJson(dynamic json) {
+    return Picture(
+      id: json['id'],
+      urlPath: json['urlPath'],
+    );
+  }
+}
diff --git a/lib/models/profiles/interest.dart b/lib/models/profiles/interest.dart
new file mode 100644
index 00000000..2654e0a8
--- /dev/null
+++ b/lib/models/profiles/interest.dart
@@ -0,0 +1,5 @@
+class Interest {
+  final String name;
+
+  Interest({this.name});
+}
diff --git a/lib/models/profiles/profile.dart b/lib/models/profiles/profile.dart
new file mode 100644
index 00000000..da11edef
--- /dev/null
+++ b/lib/models/profiles/profile.dart
@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import './interest.dart';
+
+class Profile extends ChangeNotifier {
+  final int id;
+  final String nickname;
+  final String intro;
+  final String email;
+  final String profileImg;
+  final String githubId;
+  final String blogUrl;
+  final bool profileSet;
+  final List<Interest> interests;
+
+  // TODO: Remove from Profile attributes. Directly request at the view.
+  final List<Post> myPosts;
+  final List<Post> scrappedPosts;
+  final List<Comment> myComments;
+
+  Profile({
+    this.id,
+    this.nickname,
+    this.intro,
+    this.email,
+    this.profileImg,
+    this.githubId,
+    this.blogUrl,
+    this.profileSet,
+    this.interests,
+    this.myPosts,
+    this.scrappedPosts,
+    this.myComments,
+  });
+
+  factory Profile.fromJson(Map<String, dynamic> json) {
+    List<Interest> interests;
+    List<Post> myPosts;
+    List<Post> scrappedPosts;
+    List<Comment> myComments;
+
+    if (json["interests"] != null) {
+      interests = [...json['interests'].map((i) => Interest(name: i['name']))];
+    }
+
+    if (json['myPosts'] != null) {
+      myPosts = [...json['myPosts'].map((post) => Post.fromJson({
+        'id': post['id'],
+        'title': post['title'],
+        'content': post['content'],
+        'like': post['like'],
+        'scrap': post['scrap'],
+        'createdAt': post['createdAt'],
+      }))];
+    }
+
+    if (json['scrappedPosts'] != null) {
+      scrappedPosts = [...json['scrappedPosts'].map((post) => Post.fromJson({
+        'id': post['id'],
+        'title': post['title'],
+        'content': post['content'],
+        'like': post['like'],
+        'scrap': post['scrap'],
+        'createdAt': post['createdAt'],
+      }))];
+    }
+
+    if (json['myComments'] != null) {
+      myComments = [...json['myComments'].map((comment) => Comment.fromJson({
+        'id': comment['id'],
+        'comment': comment['comment'],
+        'like': comment['like'],
+        'createdAt': comment['createdAt'],
+      }))];
+    }
+
+    return Profile(
+      id: json['id'],
+      nickname: json['nickname'],
+      intro: json['introduction'],
+      email: json['email'],
+      profileImg: json['profileImage'],
+      githubId: json['githubId'],
+      blogUrl: json['blogUrl'],
+      profileSet: json['profileSet'],
+      interests: interests,
+      myPosts: myPosts,
+      scrappedPosts: scrappedPosts,
+      myComments: myComments,
+    );
+  }
+
+  /// flutter_mentions needs to have data as follows:
+  Map<String, dynamic> toJson() => {
+    'id': id.toString(),
+    'display': nickname,
+    'photo': profileImg ?? null
+  };
+}
diff --git a/lib/providers/home/home_provider.dart b/lib/providers/home/home_provider.dart
new file mode 100644
index 00000000..5eca888d
--- /dev/null
+++ b/lib/providers/home/home_provider.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class HomeProvider with ChangeNotifier {
+  int _idx = 0;
+
+  final List<Map<String, dynamic>> bottomNavItems = [
+    {
+      'label': '홈',
+      'selected_icon': SvgPicture.asset(
+        'assets/icons/home_filled.svg',
+        color: GuamColorFamily.purpleCore,
+      ),
+      'unselected_icon': SvgPicture.asset(
+        'assets/icons/home_outlined.svg',
+        color: GuamColorFamily.grayscaleGray4,
+      ),
+    },
+    {
+      'label': '검색',
+      'selected_icon': SvgPicture.asset(
+        'assets/icons/search.svg',
+        color: GuamColorFamily.purpleCore,
+      ),
+      'unselected_icon': SvgPicture.asset(
+        'assets/icons/search.svg',
+        color: GuamColorFamily.grayscaleGray4,
+      ),
+    },
+    {
+      'label': '알림',
+      'selected_icon': SvgPicture.asset(
+        'assets/icons/notification_filled_default.svg',
+        color: GuamColorFamily.purpleCore,
+      ),
+      'unselected_icon': SvgPicture.asset(
+        'assets/icons/notification_outlined_default.svg',
+        color: GuamColorFamily.grayscaleGray4,
+      ),
+    },
+    {
+      'label': '프로필',
+      'selected_icon': SvgPicture.asset(
+        'assets/icons/profile_filled.svg',
+        color: GuamColorFamily.purpleCore,
+      ),
+      'unselected_icon': SvgPicture.asset(
+        'assets/icons/profile_outlined.svg',
+        color: GuamColorFamily.grayscaleGray4,
+      ),
+    },
+  ];
+
+  get idx => _idx;
+
+  set idx(val) {
+    _idx = val;
+    notifyListeners();
+  }
+
+  Map<String, dynamic> get bottomNavItem => bottomNavItems[_idx];
+}
diff --git a/lib/providers/messages/messages.dart b/lib/providers/messages/messages.dart
new file mode 100644
index 00000000..3bf4a777
--- /dev/null
+++ b/lib/providers/messages/messages.dart
@@ -0,0 +1,170 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/messages/message.dart';
+import 'package:guam_community_client/models/messages/message_box.dart';
+import '../../helpers/decode_ko.dart';
+import '../user_auth/authenticate.dart';
+
+class Messages extends ChangeNotifier with Toast {
+  Authenticate _authProvider;
+  List<MessageBox> _messageBoxes;
+  List<Message> _messages;
+  bool loading = false;
+
+  Messages(Authenticate authProvider) {
+    _authProvider = authProvider;
+    fetchMessageBoxes();
+  }
+
+  List<MessageBox> get messageBoxes => _messageBoxes;
+  List<Message> get messages => _messages;
+
+  Future<List<MessageBox>> fetchMessageBoxes() async {
+    loading = true;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .get(
+          path: "community/api/v1/letters",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final List<dynamic> jsonList = json.decode(jsonUtf8)["letterBoxes"];
+            _messageBoxes = jsonList.map((e) => MessageBox.fromJson(e)).toList();
+            loading = false;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = '메시지를 불러올 수 없습니다.'; break;
+              case 401: msg = '열람 권한이 없습니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return _messageBoxes;
+  }
+
+  Future<bool> deleteMessageBox(int otherProfileId) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/letters/$otherProfileId",
+          authToken: authToken,
+        ).then((response) {
+          if (response.statusCode == 200) {
+            showToast(success: true, msg: '쪽지함을 삭제했습니다.');
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = '삭제 권한이 없습니다.'; break;
+              case 404: msg = '비활성화된 유저입니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<List<Message>> getMessages(int otherProfileId) async {
+    loading = true;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .get(
+          authToken: authToken,
+          path: "community/api/v1/letters/$otherProfileId",
+        ).then((response) {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final List<dynamic> jsonList = json.decode(jsonUtf8)["letters"];
+            _messages = jsonList.map((e) => Message.fromJson(e)).toList();
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = '접근 권한이 없습니다.'; break;
+              case 403: msg = '상대방으로부터 차단되었습니다.'; break;
+              case 404: msg = '존재하지 않는 쪽지함입니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      loading = false;
+      notifyListeners();
+    }
+    return _messages;
+  }
+
+  Future<bool> sendMessage({Map<String, dynamic> fields, dynamic files}) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .postMultipart(
+          pluralImages: false, // pluralImage boolean 으로 "images" or "image" 구분
+          path: "community/api/v1/letters",
+          authToken: authToken,
+          fields: fields,
+          files: files,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            successful = true;
+            loading = false;
+            showToast(success: true, msg: '쪽지를 발송했습니다.');
+          } else {
+            String msg = "알 수 없는 오류가 발생했습니다.";
+            switch (response.statusCode) {
+              case 400: msg = "메시지를 입력해주세요."; break;
+              case 401: msg = "권한이 없습니다."; break;
+              case 403: msg = "쪽지를 보낼 수 없는 상대입니다."; break;
+              case 404: msg = "존재하지 않는 사용자입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+}
diff --git a/lib/providers/notifications/notifications.dart b/lib/providers/notifications/notifications.dart
new file mode 100644
index 00000000..f07f6c85
--- /dev/null
+++ b/lib/providers/notifications/notifications.dart
@@ -0,0 +1,137 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/notification.dart' as Notification;
+
+import '../../helpers/decode_ko.dart';
+import '../user_auth/authenticate.dart';
+
+class Notifications extends ChangeNotifier with Toast {
+  bool loading = false;
+  bool _hasNext;
+  Authenticate _authProvider;
+  List<Notification.Notification> _notifications;
+  List<Notification.Notification> _newNotifications;
+
+  Notifications(Authenticate authProvider) {
+    _authProvider = authProvider;
+    fetchNotifications();
+  }
+
+  bool get hasNext => _hasNext;
+  List<Notification.Notification> get notifications => _notifications;
+  List<Notification.Notification> get newNotifications => _newNotifications;
+
+  Future fetchNotifications({int page=0, int size=20}) async {
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .get(
+          path: "community/api/v1/push",
+          queryParams: {
+            "page": page.toString(),
+            "size": size.toString(),
+          },
+          authToken: await _authProvider.getFirebaseIdToken(),
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+            _hasNext = json.decode(jsonUtf8)["hasNext"];
+            _notifications = jsonList.map((e) => Notification.Notification.fromJson(e)).toList();
+
+            loading = false;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = '정보를 모두 입력해주세요.'; break;
+              case 401: msg = '열람 권한이 없습니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+
+  /// For Pagination in BoardsFeed Widget using _loadMore()
+  Future addNotifications({int page=1, int size=20}) async {
+    loading = true;
+    try {
+      await HttpRequest()
+          .get(
+        path: "community/api/v1/push",
+        queryParams: {
+          "page": page.toString(),
+          "size": size.toString(),
+        },
+        authToken: await _authProvider.getFirebaseIdToken(),
+      ).then((response) async {
+        if (response.statusCode == 200) {
+          final jsonUtf8 = decodeKo(response);
+          final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+          _hasNext = json.decode(jsonUtf8)["hasNext"];
+          _newNotifications = jsonList.map((e) => Notification.Notification.fromJson(e)).toList();
+
+          loading = false;
+        } else {
+          final jsonUtf8 = decodeKo(response);
+          final String err = json.decode(jsonUtf8)["message"];
+          showToast(success: false, msg: '더 이상 알림을 불러올 수 없습니다.');
+        }
+      });
+      loading = false;
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return _newNotifications;
+  }
+
+  Future readNotifications({int userId, List pushEventIds}) async {
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest().post(
+          path: "community/api/v1/push/read",
+          queryParams: {
+            "userId": userId.toString(),
+            "pushEventIds": pushEventIds,
+          },
+          authToken: await _authProvider.getFirebaseIdToken(),
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = '정보를 모두 입력해주세요.'; break;
+              case 401: msg = '열람 권한이 없습니다.'; break;
+              case 404: msg = '존재하지 않는 알림입니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+}
diff --git a/lib/providers/posts/posts.dart b/lib/providers/posts/posts.dart
new file mode 100644
index 00000000..bc84ebe5
--- /dev/null
+++ b/lib/providers/posts/posts.dart
@@ -0,0 +1,580 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/providers/search/search.dart';
+import 'package:flutter/foundation.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import '../../helpers/decode_ko.dart';
+import '../../helpers/http_request.dart';
+import '../../models/boards/post.dart';
+import '../../models/filter.dart';
+import '../user_auth/authenticate.dart';
+
+class Posts extends ChangeNotifier with Toast {
+  Authenticate _authProvider;
+  Post _post;
+  bool _hasNext;
+  List<Post> _posts;
+  List<Post> _newPosts;
+  List<Comment> _comments;
+  int _boardId = 0; // default : 피드게시판
+  int _createdPostId;
+  bool loading = false;
+
+  Posts(Authenticate authProvider) {
+    _authProvider = authProvider;
+    fetchPosts(boardId);
+  }
+
+  Post get post => _post;
+  bool get hasNext => _hasNext;
+  int get boardId => _boardId;
+  int get createdPostId => _createdPostId;
+  List<Post> get posts => _posts;
+  List<Post> get newPosts => _newPosts;
+  List<Comment> get comments => _comments;
+
+  /// ==== Posts ====
+  Future fetchPosts(int boardId) async {
+    print(await _authProvider.getFirebaseIdToken(),);
+    loading = true;
+    try {
+      await HttpRequest()
+          .get(
+        path: "community/api/v1/posts",
+        queryParams: {"boardId": boardId.toString()},
+        authToken: await _authProvider.getFirebaseIdToken(),
+      ).then((response) async {
+        /// 현재 게시판 위치 저장해두기 (게시판 reload 시 사용)
+        _boardId = boardId;
+        if (response.statusCode == 200) {
+          final jsonUtf8 = decodeKo(response);
+          final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+          _hasNext = json.decode(jsonUtf8)["hasNext"];
+          _posts = jsonList.map((e) => Post.fromJson(e)).toList();
+
+          // Default search with first filter
+          sortSearchedPosts(Search.filters.first);
+          loading = false;
+        } else {
+          String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+          switch (response.statusCode) {
+            case 400: msg = '정보를 모두 입력해주세요.'; break;
+            case 401: msg = '열람 권한이 없습니다.'; break;
+            case 404: msg = '존재하지 않는 게시판입니다.'; break;
+          }
+          showToast(success: false, msg: msg);
+        }
+      });
+      loading = false;
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return _posts;
+  }
+
+  /// For Pagination in BoardsFeed Widget using _loadMore()
+  Future addPosts({int boardId, int beforePostId}) async {
+    loading = true;
+    try {
+      await HttpRequest()
+          .get(
+        path: "community/api/v1/posts",
+        queryParams: {
+          "boardId": boardId.toString(),
+          "beforePostId": beforePostId.toString(),
+        },
+        authToken: await _authProvider.getFirebaseIdToken(),
+      ).then((response) async {
+        if (response.statusCode == 200) {
+          final jsonUtf8 = decodeKo(response);
+          final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+          _hasNext = json.decode(jsonUtf8)["hasNext"];
+          _newPosts = jsonList.map((e) => Post.fromJson(e)).toList();
+          loading = false;
+        } else {
+          final jsonUtf8 = decodeKo(response);
+          final String err = json.decode(jsonUtf8)["message"];
+          showToast(success: false, msg: '더 이상 게시글을 불러올 수 없습니다.');
+        }
+      });
+      loading = false;
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return _newPosts;
+  }
+
+  void sortSearchedPosts(Filter f) {
+    _posts.sort((a, b) => b.toJson()[f.key].compareTo(a.toJson()[f.key]));
+    notifyListeners();
+  }
+
+  Future<bool> createPost({Map<String, dynamic> fields, dynamic files}) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .postMultipart(
+          path: "community/api/v1/posts",
+          authToken: authToken,
+          fields: fields,
+          files: files,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final Map<String, dynamic> jsonData = json.decode(jsonUtf8);
+            _createdPostId = jsonData['postId'];
+            successful = true;
+            loading = false;
+            showToast(success: true, msg: '게시글을 작성했습니다.');
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = '정보를 모두 입력해주세요.'; break;
+              case 401: msg = '글쓰기 권한이 없습니다.'; break;
+              case 404: msg = '정보를 모두 입력해주세요.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<Post> getPost(int postId) async {
+    loading = true;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .get(
+          authToken: authToken,
+          path: "community/api/v1/posts/$postId",
+        ).then((response) {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final Map<String, dynamic> jsonData = json.decode(jsonUtf8);
+            _post = Post.fromJson(jsonData);
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = '접근 권한이 없습니다.'; break;
+              case 404: msg = '존재하지 않는 게시글입니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      loading = false;
+      notifyListeners();
+    }
+    return _post;
+  }
+
+  Future<bool> editPost({int postId, Map<String, dynamic> body}) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .patch(
+          path: "community/api/v1/posts/$postId",
+          authToken: authToken,
+          body: body,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            successful = true;
+            loading = false;
+            final jsonUtf8 = decodeKo(response);
+            final Map<String, dynamic> jsonData = json.decode(jsonUtf8);
+            await getPost(jsonData['postId']);
+            showToast(success: true, msg: '게시글을 수정했습니다.');
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = '정보를 모두 입력해주세요.'; break;
+              case 401: msg = '수정 권한이 없습니다.'; break;
+              case 404: msg = '정보를 모두 입력해주세요.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> deletePost(int postId) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/posts/$postId",
+          authToken: authToken,
+        ).then((response) {
+          print(response.statusCode);
+          if (response.statusCode == 200) {
+            showToast(success: true, msg: '게시글을 삭제했습니다.');
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = '삭제 권한이 없습니다.'; break;
+              case 404: msg = '존재하지 않는 게시글입니다.'; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> likePost({int postId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .post(
+          path: "community/api/v1/posts/$postId/likes",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 게시글입니다."; break;
+              case 409: msg = "이미 '좋아요'한 글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> unlikePost({int postId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/posts/$postId/likes",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 게시글입니다."; break;
+              case 409: msg = "이미 '좋아요' 취소한 글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> scrapPost({int postId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .post(
+          path: "community/api/v1/posts/$postId/scraps",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 게시글입니다."; break;
+              case 409: msg = "이미 스크랩한 글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> unscrapPost({int postId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/posts/$postId/scraps",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 게시글입니다."; break;
+              case 409: msg = "이미 스크랩 취소한 글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  /// ==== Comments ====
+  Future fetchComments(int postId) async {
+    List<Comment> comments;
+    try {
+      loading = true;
+      await HttpRequest()
+          .get(
+        path: "community/api/v1/posts/$postId/comments",
+        authToken: await _authProvider.getFirebaseIdToken(),
+      ).then((response) async {
+        if (response.statusCode == 200) {
+          final jsonUtf8 = decodeKo(response);
+          final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+          comments = jsonList.map((e) => Comment.fromJson(e)).toList();
+          loading = false;
+        } else {
+          final jsonUtf8 = decodeKo(response);
+          final String err = json.decode(jsonUtf8)["message"];
+          showToast(success: false, msg: err);
+        }
+      });
+      loading = false;
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return comments;
+  }
+
+  Future<bool> createComment({int postId, Map<String, dynamic> fields, dynamic files}) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .postMultipart(
+          path: "community/api/v1/posts/$postId/comments",
+          authToken: authToken,
+          fields: fields,
+          files: files,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            successful = true;
+            loading = false;
+            showToast(success: true, msg: '댓글을 작성했습니다.');
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 400: msg = "빈 댓글은 입력할 수 없습니다."; break;
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> deleteComment({int postId, int commentId}) async {
+    bool successful = false;
+    loading = true;
+
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/posts/$postId/comments/$commentId",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            fetchComments(postId);
+            showToast(success: true, msg: '댓글을 삭제했습니다.');
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 댓글입니다."; break;
+              case 409: msg = "이미 삭제된 댓글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> likeComment({int postId, int commentId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .post(
+          path: "community/api/v1/posts/$postId/comments/$commentId/likes",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 댓글입니다."; break;
+              case 409: msg = "이미 '좋아요'한 댓글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<bool> unlikeComment({int postId, int commentId}) async {
+    loading = true;
+    bool successful = false;
+    try {
+      String authToken = await _authProvider.getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest()
+            .delete(
+          path: "community/api/v1/posts/$postId/comments/$commentId/likes",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            loading = false;
+            successful = true;
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 댓글입니다."; break;
+              case 409: msg = "이미 '좋아요' 취소한 댓글입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+        loading = false;
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return successful;
+  }
+}
diff --git a/lib/providers/search/search.dart b/lib/providers/search/search.dart
new file mode 100644
index 00000000..5760ae46
--- /dev/null
+++ b/lib/providers/search/search.dart
@@ -0,0 +1,109 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/filter.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import '../../helpers/decode_ko.dart';
+import '../../helpers/http_request.dart';
+import '../user_auth/authenticate.dart';
+import '../../models/boards/post.dart';
+
+class Search extends ChangeNotifier with Toast {
+  Authenticate _authProvider;
+  List<Post> searchedPosts = [];
+
+  List<String> history = [];  // Recently searched word is at the back
+  static const String searchHistoryKey = 'search-history';
+  static const int maxNHistory = 5;
+
+  static List<Filter> filters = [
+    Filter(
+      key: 'createdAt',
+      label: '시간순',
+    ),
+    Filter(
+      key: 'like',
+      label: '추천순',
+    ),
+  ];
+
+  Search(Authenticate authProvider) {
+    _authProvider = authProvider;
+    getHistory();
+  }
+
+  bool loading = false;
+
+  bool historyFull() => history.length >= maxNHistory;
+
+  Future getHistory() async {
+    await SharedPreferences.getInstance()
+        .then((storage) => history = storage.getStringList(searchHistoryKey) ?? []);
+  }
+
+  Future saveHistory(String word) async {
+    try {
+      if (word.trim() == '') return;
+      if (historyFull()) history.removeAt(0);
+      if (!history.contains(word)) history.add(word);
+      await SharedPreferences.getInstance()
+          .then((storage) => storage.setStringList(searchHistoryKey, history));
+    } catch(e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+
+  Future removeHistory(String word) async {
+    try {
+      history.remove(word);
+      await SharedPreferences.getInstance()
+          .then((storage) => storage.setStringList(searchHistoryKey, history));
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+
+  Future searchPosts({@required String query, BuildContext context}) async {
+    loading = true;
+    try {
+      if (query == null || query.trim() == '') {
+        searchedPosts.clear();
+        return;
+      }
+      await HttpRequest()
+          .get(
+        path: "community/api/v1/posts",
+        queryParams: {"keyword": query},
+        authToken: await _authProvider.getFirebaseIdToken(),
+      ).then((response) async {
+        if (response.statusCode == 200) {
+          final jsonUtf8 = decodeKo(response);
+          final List<dynamic> jsonList = json.decode(jsonUtf8)["content"];
+          searchedPosts = jsonList.map((e) => Post.fromJson(e)).toList();
+          loading = false;
+        } else {
+          final jsonUtf8 = decodeKo(response);
+          final String err = json.decode(jsonUtf8)["message"];
+          showToast(success: false, msg: err);
+        }
+      });
+
+      // Default search with first filter
+      sortSearchedPosts(filters[0]);
+      loading = false;
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+
+  void sortSearchedPosts(Filter f) {
+    searchedPosts.sort((a, b) => b.toJson()[f.key].compareTo(a.toJson()[f.key]));
+    notifyListeners();
+  }
+}
\ No newline at end of file
diff --git a/lib/providers/user_auth/authenticate.dart b/lib/providers/user_auth/authenticate.dart
new file mode 100644
index 00000000..ab5baa8f
--- /dev/null
+++ b/lib/providers/user_auth/authenticate.dart
@@ -0,0 +1,263 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:firebase_auth/firebase_auth.dart';
+import '../../helpers/http_request.dart';
+import '../../helpers/decode_ko.dart';
+import 'dart:convert';
+
+class Authenticate extends ChangeNotifier with Toast {
+  final _kakaoClientId = "367d8cf339e2ba59376ba647c7135dd2";
+  final _kakaoJavascriptClientId = "2edf60d1ebf23061d200cfe4a68a235a";
+
+  FirebaseAuth auth = FirebaseAuth.instance;
+  get kakaoClientId => _kakaoClientId;
+  get kakaoJavascriptClientId => _kakaoJavascriptClientId;
+
+  Profile me;
+  Profile user;
+  bool loading = false;
+
+  Authenticate() {
+    getMyProfile();
+  }
+
+  bool userSignedIn() => auth.currentUser != null && me != null; // 로그인 된 유저 존재 여부
+  bool profileExists() => me != null && me.profileSet; // 프로필까지 만든 정상 유저인지 여부
+  bool isMe(int userId) => me.id == userId;
+
+  void toggleLoading() {
+    loading = !loading;
+    notifyListeners();
+  }
+
+  Future kakaoSignIn(String kakaoAccessToken) async {
+    try {
+      await HttpRequest().get(
+        isHttps: false, // TODO: remove after immigration heads to gateway
+        authority: HttpRequest().immigrationAuthority,
+        path: "/api/v1/user/token",
+        queryParams: {"kakaoToken": kakaoAccessToken},
+      ).then((response) async {
+        if (response.statusCode == 200) {
+          final customToken = jsonDecode(response.body)['customToken'];
+          await auth.signInWithCustomToken(customToken);
+          await getMyProfile();
+          showToast(success: true, msg: "카카오 로그인 성공!");
+        } else {
+          final jsonUtf8 = decodeKo(response);
+          final String err = json.decode(jsonUtf8)["message"];
+          showToast(success: false, msg: err);
+        }
+      });
+    } on FirebaseAuthException {
+      showToast(success: false, msg: "Firebase 인증에 문제가 발생했습니다.");
+    } catch (e) {
+      showToast(success: false, msg: e.message);
+    }
+  }
+
+  Future<String> getFirebaseIdToken() async {
+    String idToken;
+    try {
+      User user = auth.currentUser;
+      idToken = await user.getIdToken();
+    } on NoSuchMethodError {
+      throw new Exception("로그인이 필요합니다.");
+    } catch (e) {
+      throw new Exception(e);
+    }
+    return idToken;
+  }
+
+  Future<void> signOut() async {
+    await auth.signOut();
+    showToast(success: true, msg: "로그아웃 되었습니다.");
+    notifyListeners();
+  }
+
+  Future getMyProfile() async {
+    try {
+      String authToken = await getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest().get(
+          path: "community/api/v1/users/me",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final Map<String, dynamic> jsonData = json.decode(jsonUtf8);
+            me = Profile.fromJson(jsonData);
+          } else {
+            final jsonUtf8 = decodeKo(response);
+            final String err = json.decode(jsonUtf8)["message"];
+            showToast(success: false, msg: err);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+  }
+
+  Future setProfile({Map<String, dynamic> fields, dynamic files}) async {
+    bool successful = false;
+
+    try {
+      toggleLoading();
+      String authToken = await getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest().patchMultipart(
+          path: "community/api/v1/users/${me.id}",
+          fields: fields,
+          files: files,
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            await getMyProfile();
+            successful = true;
+            showToast(success: true, msg: "프로필을 설정했습니다.");
+          } else {
+            final jsonUtf8 = decodeKo(response);
+            final String err = json.decode(jsonUtf8)["message"];
+            showToast(success: false, msg: err);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      toggleLoading();
+      notifyListeners();
+    }
+    return successful;
+  }
+
+  Future<Profile> getUserProfile(int userId) async {
+    try {
+      String authToken = await getFirebaseIdToken();
+      if (authToken.isNotEmpty) {
+        await HttpRequest().get(
+          path: "community/api/v1/users/$userId",
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            final jsonUtf8 = decodeKo(response);
+            final Map<String, dynamic> jsonData = json.decode(jsonUtf8);
+            user = Profile.fromJson(jsonData);
+            // TODO: set fcm token when impl. push notification
+            // setMyFcmToken();
+          } else {
+            final jsonUtf8 = decodeKo(response);
+            final String err = json.decode(jsonUtf8)["message"];
+            showToast(success: false, msg: err);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      notifyListeners();
+    }
+    return user;
+  }
+
+  Future<bool> setInterest({Map<String, dynamic> body}) async {
+    bool successful = false;
+    try {
+      toggleLoading();
+      String authToken = await getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest().post(
+          path: "community/api/v1/users/${me.id}/interest",
+          body: body,
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            await getMyProfile();
+            successful = true;
+            showToast(success: true, msg: "관심사를 등록했습니다.");
+          } else {
+            final jsonUtf8 = decodeKo(response);
+            final String err = json.decode(jsonUtf8)["message"];
+            showToast(success: false, msg: err);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      toggleLoading();
+    }
+    return successful;
+  }
+
+  Future<bool> deleteInterest({dynamic queryParams}) async {
+    bool successful = false;
+    try {
+      toggleLoading();
+      String authToken = await getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest().delete(
+          path: "community/api/v1/users/${me.id}/interest",
+          queryParams: queryParams,
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            await getMyProfile();
+            successful = true;
+            showToast(success: true, msg: "해당 관심사를 삭제했습니다.");
+          } else {
+            final jsonUtf8 = decodeKo(response);
+            final String err = json.decode(jsonUtf8)["message"];
+            showToast(success: false, msg: err);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      toggleLoading();
+    }
+    return successful;
+  }
+
+  Future<bool> blockUser({userId}) async {
+    bool successful = false;
+    try {
+      toggleLoading();
+      String authToken = await getFirebaseIdToken();
+
+      if (authToken.isNotEmpty) {
+        await HttpRequest().post(
+          path: "community/api/v1/block",
+          queryParams: {"targetId": userId.toString()},
+          authToken: authToken,
+        ).then((response) async {
+          if (response.statusCode == 200) {
+            await getMyProfile();
+            successful = true;
+            showToast(success: true, msg: "해당 사용자를 차단했습니다.");
+          } else {
+            String msg = '알 수 없는 오류가 발생했습니다.: ${response.statusCode}';
+            switch (response.statusCode) {
+              case 401: msg = "권한이 없습니다."; break;
+              case 404: msg = "존재하지 않는 유저입니다."; break;
+              case 409: msg = "이미 차단한 유저입니다."; break;
+            }
+            showToast(success: false, msg: msg);
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    } finally {
+      toggleLoading();
+    }
+    return successful;
+  }
+}
diff --git a/lib/screens/app/app.dart b/lib/screens/app/app.dart
new file mode 100644
index 00000000..3a653c6f
--- /dev/null
+++ b/lib/screens/app/app.dart
@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/providers/home/home_provider.dart';
+import 'package:provider/provider.dart';
+import 'bottom_navigation.dart';
+import 'tab_item.dart';
+import 'tab_navigator.dart';
+
+class App extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => AppState();
+}
+
+class AppState extends State<App> {
+  var _currentTab = TabItem.home;
+  final _navigatorKeys = {
+    TabItem.home: GlobalKey<NavigatorState>(),
+    TabItem.search: GlobalKey<NavigatorState>(),
+    TabItem.notification: GlobalKey<NavigatorState>(),
+    TabItem.profile: GlobalKey<NavigatorState>(),
+  };
+
+  void _selectTab(TabItem tabItem) {
+    if (tabItem == _currentTab) {
+      // pop to first route
+      _navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
+    } else {
+      setState(() => _currentTab = tabItem);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    DateTime currentBackPressTime;
+
+    return ChangeNotifierProvider(
+      create: (_) => HomeProvider(),
+      child: WillPopScope(
+        onWillPop: () async {
+          final isFirstRouteInCurrentTab = await _navigatorKeys[_currentTab].currentState.maybePop();
+          if (isFirstRouteInCurrentTab) {
+            // if not on the 'main' tab
+            if (_currentTab == TabItem.home) {
+              // select 'main' tab
+              _selectTab(TabItem.home);
+              // back button handled by app
+              return false;
+            }
+          }
+          DateTime now = DateTime.now();
+          if (currentBackPressTime == null ||
+              now.difference(currentBackPressTime) > Duration(seconds: 2)) {
+            currentBackPressTime = now;
+            // 토스트 넣을 때 '뒤로가기를 한번 더 누르면 앱이 종료 됩니다.' 처리하기
+            // Fluttertoast.showToast(msg: exit_warning);
+            return Future.value(false);
+          }
+          return Future.value(true);
+          // let system handle back button if we're on the first route
+          return isFirstRouteInCurrentTab;
+        },
+        child: Scaffold(
+          body: Stack(children: <Widget>[
+            _buildOffstageNavigator(TabItem.home),
+            _buildOffstageNavigator(TabItem.search),
+            _buildOffstageNavigator(TabItem.notification),
+            _buildOffstageNavigator(TabItem.profile),
+          ]),
+          bottomNavigationBar: BottomNavigation(
+            currentTab: _currentTab,
+            onSelectTab: _selectTab,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildOffstageNavigator(TabItem tabItem) {
+    return Offstage(
+      offstage: _currentTab != tabItem,
+      child: TabNavigator(
+        navigatorKey: _navigatorKeys[tabItem],
+        tabItem: tabItem,
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/app/bottom_navigation.dart b/lib/screens/app/bottom_navigation.dart
new file mode 100644
index 00000000..dac0a8c0
--- /dev/null
+++ b/lib/screens/app/bottom_navigation.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/providers/home/home_provider.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import 'tab_item.dart';
+
+class BottomNavigation extends StatelessWidget {
+  BottomNavigation({@required this.currentTab, @required this.onSelectTab});
+
+  final TabItem currentTab;
+  final ValueChanged<TabItem> onSelectTab;
+
+  @override
+  Widget build(BuildContext context) {
+    final homeProvider = context.read<HomeProvider>();
+
+    return BottomNavigationBar(
+      items: homeProvider.bottomNavItems.map((e) =>
+        BottomNavigationBarItem(
+          label: e['label'],
+          icon: currentTab.index == homeProvider.bottomNavItems.indexOf(e)
+            ? e['selected_icon']
+            : e['unselected_icon'],
+        )
+      ).toList(),
+      selectedFontSize: 10,
+      unselectedFontSize: 10,
+      currentIndex: currentTab.index,
+      type: BottomNavigationBarType.fixed,
+      selectedItemColor: GuamColorFamily.purpleCore,
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      unselectedItemColor: GuamColorFamily.grayscaleGray4,
+      onTap: (index) {
+        onSelectTab(TabItem.values[index]);
+        homeProvider.idx = index;
+      },
+    );
+  }
+}
diff --git a/lib/screens/app/splash/splash_screen.dart b/lib/screens/app/splash/splash_screen.dart
new file mode 100644
index 00000000..d41b578d
--- /dev/null
+++ b/lib/screens/app/splash/splash_screen.dart
@@ -0,0 +1,132 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/screens/app/splash/splash_text.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class SplashScreen extends StatefulWidget {
+  @override _SplashScreenState createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin{
+  AnimationController _animationController;
+
+  _setAnimation(double begin, double end){
+    return CurvedAnimation(
+      parent: _animationController,
+      curve: Interval(begin, end, curve: Curves.fastOutSlowIn)
+    );
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1500),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+
+    return Scaffold(
+      body: Stack(
+        children: [
+          Container(
+            width: double.infinity,
+            height: double.infinity,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                fit: BoxFit.fitWidth,
+                alignment: Alignment.bottomCenter,
+                image: AssetImage('assets/backgrounds/back_0.75x.png'),
+              )
+            ),
+          ),
+          Container(
+            width: double.infinity,
+            height: double.infinity,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                fit: BoxFit.fitWidth,
+                alignment: Alignment.bottomCenter,
+                image: AssetImage('assets/backgrounds/front_0.75x.png'),
+              )
+            ),
+            child: Stack(
+              children: [
+                // 위에서부터 아래로 star 배치
+                _starSplash(
+                  begin: 1/4, end: 1, // animation
+                  width: 26, height: 26, // size of star
+                  top: size.height*0.12, left: size.width*0.24, // position of star (iPhone 13 : 375x812)
+                  color: GuamColorFamily.purpleDark1,
+                ),
+                _starSplash(
+                  begin: 1/20, end: 1,
+                  width: 32, height: 32,
+                  top: size.height*0.19, left: size.width*0.88,
+                  color: GuamColorFamily.purpleCore,
+                ),
+                _starSplash(
+                  begin: 1/10, end: 1,
+                  width: 25, height: 25,
+                  top: size.height*0.32, left: size.width*0.42,
+                  color: GuamColorFamily.purpleLight1,
+                ),
+                _starSplash(
+                  begin: 1/2, end: 1,
+                  width: 25, height: 25,
+                  top: size.height*0.50, left: size.width*0.76,
+                  color: GuamColorFamily.purpleLight2,
+                ),
+                _starSplash(
+                  begin: 1/2, end: 1,
+                  width: 32, height: 32,
+                  top: size.height*0.57, left: size.width*0.16,
+                  color: GuamColorFamily.purpleLight2,
+                ),
+                _starSplash(
+                  begin: 1/30, end: 1,
+                  width: 25, height: 25,
+                  top: size.height*0.68, left: size.width*0.57,
+                  color: GuamColorFamily.purpleLight3,
+                ),
+                SplashText(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _starSplash({double top, double left, double width, double height, double begin, double end, HexColor color}){
+    return Positioned(
+      top: top,
+      left: left,
+      child: ScaleTransition(
+        scale: _setAnimation(begin, end),
+        child: Container(
+          width: width,
+          height: height,
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: SvgProvider(
+                'assets/backgrounds/splash/star_splash.svg',
+                color: color,
+              ),
+            ),
+          )
+        )
+      ),
+    );
+  }
+}
diff --git a/lib/screens/app/splash/splash_text.dart b/lib/screens/app/splash/splash_text.dart
new file mode 100644
index 00000000..9d0226aa
--- /dev/null
+++ b/lib/screens/app/splash/splash_text.dart
@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+
+class SplashText extends StatefulWidget {
+  final bool animation;
+
+  SplashText({this.animation=true});
+
+  @override
+  State<SplashText> createState() => _SplashTextState();
+}
+
+class _SplashTextState extends State<SplashText> with SingleTickerProviderStateMixin {
+  AnimationController _animationController;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1500),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.animation) {
+      return ScaleTransition(
+        scale: CurvedAnimation(
+          parent: _animationController,
+          curve: Interval(1 / 100, 1, curve: Curves.fastOutSlowIn),
+        ),
+        child: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                'IT인들의 커뮤니티',
+                style: TextStyle(
+                  fontSize: 18,
+                  color: GuamColorFamily.purpleLight3,
+                ),
+              ),
+              Text(
+                'Guam',
+                style: TextStyle(
+                  height: 1.3,
+                  fontSize: 56,
+                  fontWeight: FontWeight.w700,
+                  fontFamily: GuamFontFamily.Poppins,
+                  color: GuamColorFamily.purpleDark1,
+                ),
+              )
+            ],
+          ),
+        ),
+      );
+    } else {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              'IT인들의 커뮤니티',
+              style: TextStyle(
+                fontSize: 18,
+                color: GuamColorFamily.purpleLight3,
+              ),
+            ),
+            Text(
+              'Guam',
+              style: TextStyle(
+                height: 1.3,
+                fontSize: 56,
+                fontWeight: FontWeight.w700,
+                fontFamily: GuamFontFamily.Poppins,
+                color: GuamColorFamily.purpleDark1,
+              ),
+            )
+          ],
+        ),
+      );
+    }
+  }
+}
diff --git a/lib/screens/app/tab_item.dart b/lib/screens/app/tab_item.dart
new file mode 100644
index 00000000..b324d3fc
--- /dev/null
+++ b/lib/screens/app/tab_item.dart
@@ -0,0 +1,8 @@
+enum TabItem { home, search, notification, profile }
+
+const Map<TabItem, String> tabName = {
+  TabItem.home: '홈',
+  TabItem.search: '검색',
+  TabItem.notification: '알림',
+  TabItem.profile: '프로필',
+};
diff --git a/lib/screens/app/tab_navigator.dart b/lib/screens/app/tab_navigator.dart
new file mode 100644
index 00000000..2ea22d19
--- /dev/null
+++ b/lib/screens/app/tab_navigator.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/screens/boards/boards_app.dart';
+import 'package:guam_community_client/screens/app/tab_item.dart';
+import 'package:guam_community_client/screens/notifications/notifications_app.dart';
+import 'package:guam_community_client/screens/profiles/profiles_app.dart';
+import 'package:guam_community_client/screens/search/search_app.dart';
+import 'package:jiffy/jiffy.dart';
+
+class TabNavigatorRoutes {
+  static const String root = '/';
+}
+
+class TabNavigator extends StatelessWidget {
+
+  TabNavigator({@required this.navigatorKey, @required this.tabItem});
+  final GlobalKey<NavigatorState> navigatorKey;
+  final TabItem tabItem;
+
+  Map<String, WidgetBuilder> _routeBuilders(BuildContext context) {
+    switch(tabItem){
+      case TabItem.search: return {TabNavigatorRoutes.root: (context) => SearchApp()};
+      case TabItem.notification: return {TabNavigatorRoutes.root: (context) => NotificationsApp()};
+      case TabItem.profile: return {TabNavigatorRoutes.root: (context) => ProfilesApp()};
+      default: return {TabNavigatorRoutes.root: (context) => BoardsApp()};
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    /// The locale affects dateTime of every children to be translated into Korean.
+    Jiffy.locale('ko');
+    final routeBuilders = _routeBuilders(context);
+    return Navigator(
+      key: navigatorKey,
+      initialRoute: TabNavigatorRoutes.root,
+      onGenerateRoute: (routeSettings) {
+        return MaterialPageRoute(
+          builder: (context) => routeBuilders[routeSettings.name](context),
+        );
+      },
+    );
+  }
+}
diff --git a/lib/screens/boards/boards_app.dart b/lib/screens/boards/boards_app.dart
new file mode 100644
index 00000000..d3954193
--- /dev/null
+++ b/lib/screens/boards/boards_app.dart
@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+import 'package:guam_community_client/providers/search/search.dart';
+import 'package:guam_community_client/providers/user_auth/authenticate.dart';
+import 'package:guam_community_client/screens/boards/boards_type.dart';
+import 'package:guam_community_client/screens/boards/posts/post_button.dart';
+import 'package:guam_community_client/screens/messages/message_box.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../commons/custom_app_bar.dart';
+import 'boards_feed.dart';
+import 'boards_type.dart';
+
+class BoardsApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+        ChangeNotifierProvider(create: (_) => Search(authProvider)),
+        ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+      ],
+      child: BoardsAppScaffold(),
+    );
+  }
+}
+
+class BoardsAppScaffold extends StatefulWidget {
+  @override
+  State<BoardsAppScaffold> createState() => _BoardsAppScaffoldState();
+}
+
+class _BoardsAppScaffoldState extends State<BoardsAppScaffold> {
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      length: 6,
+      child: Scaffold(
+        backgroundColor: GuamColorFamily.purpleLight3,
+        appBar: PreferredSize(
+          preferredSize: Size.fromHeight(100),
+          child: CustomAppBar(
+            title: '홈',
+            trailing: MessageBox(),
+            bottom: TabBar(
+              isScrollable: true,
+              physics: BouncingScrollPhysics(),
+              labelColor: GuamColorFamily.grayscaleGray1,
+              unselectedLabelColor: GuamColorFamily.grayscaleGray4,
+              indicatorColor: GuamColorFamily.grayscaleGray1,
+              indicatorWeight: 2,
+              tabs: [
+                ...boardsList.map((board) => Tab(
+                    child: Text(boardsType[board['name']])
+                ))
+              ],
+            ),
+          ),
+        ),
+        body: TabBarView(
+          physics: BouncingScrollPhysics(),
+          children: [
+            ...boardsList.map((board) => BoardsFeed(boardId: board['id']))
+          ],
+        ),
+        floatingActionButton: PostButton()
+      )
+    );
+  }
+}
diff --git a/lib/screens/boards/boards_feed.dart b/lib/screens/boards/boards_feed.dart
new file mode 100644
index 00000000..87ab040b
--- /dev/null
+++ b/lib/screens/boards/boards_feed.dart
@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/screens/boards/posts/post_list.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+
+class BoardsFeed extends StatefulWidget {
+  final int boardId;
+
+  BoardsFeed({this.boardId});
+
+  @override
+  State<BoardsFeed> createState() => _BoardsFeedState();
+}
+
+class _BoardsFeedState extends State<BoardsFeed> {
+  List _posts = [];
+  int _beforePostId;
+  bool _hasNextPage = true;
+  bool _isFirstLoadRunning = false;
+  bool _isLoadMoreRunning = false;
+  ScrollController _scrollController = ScrollController();
+
+  void _firstLoad() async {
+    setState(() => _isFirstLoadRunning = true);
+    try {
+      await context.read<Posts>().fetchPosts(widget.boardId);
+      _posts = context.read<Posts>().posts;
+    } catch (err) {
+      print('알 수 없는 오류가 발생했습니다.');
+    }
+    setState(() => _isFirstLoadRunning = false);
+  }
+
+  void _loadMore() async {
+    if (_hasNextPage == true &&
+        _isFirstLoadRunning == false &&
+        _isLoadMoreRunning == false &&
+        _scrollController.position.extentAfter < 300) {
+      setState(() => _isLoadMoreRunning = true);
+      _beforePostId = _posts.last.id;
+      try {
+        final fetchedPosts = await context.read<Posts>().addPosts(
+          boardId: widget.boardId,
+          beforePostId: _beforePostId,
+        );
+        if (fetchedPosts != null && fetchedPosts.length > 0) {
+          setState(() => _posts.addAll(fetchedPosts));
+        } else {
+          // This means there is no more data
+          // and therefore, we will not send another GET request
+          setState(() => _hasNextPage = false);
+        }
+      } catch (err) {
+        print('알 수 없는 오류가 발생했습니다.');
+      }
+      setState(() => _isLoadMoreRunning = false);
+    }
+  }
+
+  @override
+  void initState() {
+    _firstLoad();
+    _scrollController = ScrollController()..addListener(_loadMore);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _scrollController.removeListener(_loadMore);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _isFirstLoadRunning
+        ? Center(child: guamProgressIndicator())
+        : RefreshIndicator(
+            color: Color(0xF9F8FFF), // GuamColorFamily.purpleLight1
+            onRefresh: () async => _firstLoad(),
+            child: Container(
+              height: double.infinity,
+              child: SingleChildScrollView(
+                controller: _scrollController,
+                physics: AlwaysScrollableScrollPhysics(),
+                child: Column(
+                  children: [
+                    PostList(_posts),
+                    if (_isLoadMoreRunning == true)
+                      Padding(
+                        padding: EdgeInsets.only(top: 10, bottom: 40),
+                        child: guamProgressIndicator(size: 40),
+                      ),
+                    if (_hasNextPage == false)
+                      Container(
+                        color: GuamColorFamily.purpleLight2,
+                        padding: EdgeInsets.only(top: 10, bottom: 10),
+                        child: Center(child: Text(
+                          '모든 게시글을 불러왔습니다!',
+                          style: TextStyle(
+                            fontSize: 13,
+                            color: GuamColorFamily.grayscaleGray2,
+                            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                          ),
+                        )),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+        );
+  }
+}
diff --git a/lib/screens/boards/boards_type.dart b/lib/screens/boards/boards_type.dart
new file mode 100644
index 00000000..7b7e1f64
--- /dev/null
+++ b/lib/screens/boards/boards_type.dart
@@ -0,0 +1,20 @@
+enum BoardsType { feed, anonymous, free, recruit, info, advertisement }
+
+const Map<BoardsType, String> boardsType = {
+  BoardsType.feed: '피드',
+  BoardsType.anonymous: '익명',
+  BoardsType.free: '자유',
+  BoardsType.recruit: '구인',
+  BoardsType.info: '정보공유',
+  BoardsType.advertisement: '홍보',
+};
+
+// TODO: Server로부터 fetchBoardId 받아오면 바뀔 예정
+List<Map<String, dynamic>> boardsList = [
+  {'id': 0, 'name': BoardsType.feed},
+  {'id': 1, 'name': BoardsType.anonymous},
+  {'id': 2, 'name': BoardsType.free},
+  {'id': 3, 'name': BoardsType.recruit},
+  {'id': 4, 'name': BoardsType.info},
+  {'id': 5, 'name': BoardsType.advertisement},
+];
diff --git a/lib/screens/boards/category_type.dart b/lib/screens/boards/category_type.dart
new file mode 100644
index 00000000..0790fcfe
--- /dev/null
+++ b/lib/screens/boards/category_type.dart
@@ -0,0 +1,17 @@
+enum CategoryType { dev, data, design, marketing, etc }
+
+const Map<CategoryType, String> categoryType = {
+  CategoryType.dev: '개발',
+  CategoryType.data: '데이터분석',
+  CategoryType.design: '디자인',
+  CategoryType.marketing: '기획/마케팅',
+  CategoryType.etc: '기타',
+};
+
+List<Map<String, dynamic>> categoryList = [
+  {'id': 1, 'name': CategoryType.dev},
+  {'id': 2, 'name': CategoryType.data},
+  {'id': 3, 'name': CategoryType.design},
+  {'id': 4, 'name': CategoryType.marketing},
+  {'id': 5, 'name': CategoryType.etc},
+];
diff --git a/lib/screens/boards/comments/comment_banner.dart b/lib/screens/boards/comments/comment_banner.dart
new file mode 100644
index 00000000..52da69c5
--- /dev/null
+++ b/lib/screens/boards/comments/comment_banner.dart
@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/common_img_nickname.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import 'package:guam_community_client/screens/boards/comments/comment_more.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import '../../../styles/fonts.dart';
+
+class CommentBanner extends StatelessWidget {
+  final Comment comment;
+  final bool isAuthor;
+  final Function deleteFunc;
+
+  CommentBanner(this.comment, this.isAuthor, this.deleteFunc);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 10),
+      child: Row(
+        children: [
+          CommonImgNickname(
+            userId: comment.profile.id,
+            nickname: comment.profile.nickname,
+            profileClickable: comment.profile.id != 0,
+            imgUrl: comment.profile.profileImg ?? null,
+            nicknameColor: GuamColorFamily.grayscaleGray3,
+          ),
+          if (isAuthor && comment.profile.id != 0) 
+            /// 익명게시판의 경우 id가 모두 0인 것을 이용해 익명게시글 내 댓글에서 '작성자' 표시는 항상 안보이게 만듦.
+            Container(
+              margin: EdgeInsets.only(left: 4),
+              padding: EdgeInsets.symmetric(vertical: 2, horizontal: 8),
+              decoration: BoxDecoration(
+                color: GuamColorFamily.purpleLight3,
+                borderRadius: BorderRadius.all(Radius.circular(15)),
+              ),
+              child: Text(
+                '작성자',
+                style: TextStyle(
+                  fontSize: 10,
+                  fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                  color: GuamColorFamily.purpleLight1,
+                ),
+              ),
+            ),
+          Spacer(),
+          IconButton(
+            iconSize: 20,
+            padding: EdgeInsets.zero,
+            constraints: BoxConstraints(),
+            icon: SvgPicture.asset(
+              'assets/icons/more.svg',
+              color: GuamColorFamily.grayscaleGray5,
+            ),
+            onPressed: () => showMaterialModalBottomSheet(
+              context: context,
+              useRootNavigator: true,
+              backgroundColor: GuamColorFamily.grayscaleWhite,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.only(
+                  topLeft: Radius.circular(20),
+                  topRight: Radius.circular(20),
+                )
+              ),
+              builder: (context) => CommentMore(comment, deleteFunc),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/comments/comment_body.dart b/lib/screens/boards/comments/comment_body.dart
new file mode 100644
index 00000000..1b88c45d
--- /dev/null
+++ b/lib/screens/boards/comments/comment_body.dart
@@ -0,0 +1,157 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:guam_community_client/commons/icon_text.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:jiffy/jiffy.dart';
+import 'package:provider/provider.dart';
+import 'package:url_launcher/url_launcher.dart';
+import '../../../commons/image/image_container.dart';
+import '../../../helpers/http_request.dart';
+import '../../../providers/posts/posts.dart';
+
+class CommentBody extends StatefulWidget {
+  final Comment comment;
+
+  CommentBody(this.comment);
+
+  @override
+  State<CommentBody> createState() => _CommentBodyState();
+}
+
+class _CommentBodyState extends State<CommentBody> {
+  bool isLiked;
+  int likeCount;
+
+  @override
+  void initState() {
+    isLiked = widget.comment.isLiked;
+    likeCount = widget.comment.likeCount;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double maxImgSize = 96;
+    final postsProvider = context.watch<Posts>();
+
+    Future likeOrUnlikeComment() async {
+      try {
+        if (!isLiked) {
+          return await postsProvider.likeComment(
+            postId: widget.comment.postId,
+            commentId: widget.comment.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isLiked = true;
+                likeCount ++;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        } else {
+          return await postsProvider.unlikeComment(
+            postId: widget.comment.postId,
+            commentId: widget.comment.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isLiked = !isLiked;
+                likeCount --;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        }
+      } catch (e) {
+        print(e);
+      }
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: EdgeInsets.only(left: 32, right: 12),
+          child: Linkify(
+            onOpen: (link) async {
+              if (await canLaunch(link.url)) {
+                await launch(link.url);
+              } else {
+                throw 'Could not launch $link';
+              }
+            },
+            text: widget.comment.content,
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 13,
+              color: GuamColorFamily.grayscaleGray2,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+            linkStyle: TextStyle(
+              height: 1.6,
+              fontSize: 14,
+              color: GuamColorFamily.blueCore,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+          ),
+        ),
+        if (widget.comment.imagePaths.isNotEmpty)
+          Container(
+            padding: EdgeInsets.only(left: 23, top: 8, bottom: 8),
+            constraints: BoxConstraints(maxHeight: maxImgSize + 15),
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: widget.comment.imagePaths.length,
+              itemBuilder: (_, idx) => Container(
+                padding: EdgeInsets.only(right: 10),
+                child: ImageThumbnail(
+                  width: maxImgSize,
+                  height: maxImgSize,
+                  image: Image(
+                    image: NetworkImage(HttpRequest().s3BaseAuthority + widget.comment.imagePaths[idx]),
+                    fit: BoxFit.fill,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        Padding(
+          padding: EdgeInsets.only(left: 32, top: 4, bottom: 8),
+          child: Row(
+            children: [
+              IconText(
+                iconSize: 18,
+                fontSize: 10,
+                text: likeCount.toString(),
+                iconPath: isLiked
+                    ? 'assets/icons/like_filled.svg'
+                    : 'assets/icons/like_outlined.svg',
+                onPressed: likeOrUnlikeComment,
+                iconColor: isLiked
+                    ? GuamColorFamily.redCore
+                    : GuamColorFamily.grayscaleGray5,
+                textColor: GuamColorFamily.grayscaleGray5,
+              ),
+              Padding(
+                padding: EdgeInsets.only(left: 10),
+                child: Text(
+                  Jiffy(widget.comment.createdAt).fromNow(),
+                  style: TextStyle(
+                    fontSize: 9,
+                    fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    color: GuamColorFamily.grayscaleGray4,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/comments/comment_more.dart b/lib/screens/boards/comments/comment_more.dart
new file mode 100644
index 00000000..6e7fb803
--- /dev/null
+++ b/lib/screens/boards/comments/comment_more.dart
@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+
+import '../../../commons/bottom_modal/bottom_modal_default.dart';
+import '../../../commons/bottom_modal/bottom_modal_with_alert.dart';
+import '../../../commons/bottom_modal/bottom_modal_with_message.dart';
+import '../../../providers/posts/posts.dart';
+import '../../../providers/user_auth/authenticate.dart';
+import '../posts/post_comment_report.dart';
+
+class CommentMore extends StatelessWidget {
+  final Comment comment;
+  final Function deleteFunc;
+
+  const CommentMore(this.comment, this.deleteFunc);
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+        ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+      ],
+      child: Builder(
+        builder: (context) {
+          Posts postsProvider = context.read<Posts>();
+          return SingleChildScrollView(
+            child: Container(
+              padding: EdgeInsets.only(left: 24, top: 24, bottom: 21),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: comment.isMine ? [
+                  // BottomModalDefault(
+                  //   text: '수정하기',
+                  //   onPressed: () {
+                  //     Navigator.pop(context);
+                  //   },
+                  // ),
+                  BottomModalWithAlert(
+                    funcName: '삭제하기',
+                    title: '댓글을 삭제하시겠어요?',
+                    body: '삭제된 댓글은 복원할 수 없습니다.',
+                    func: () => postsProvider.deleteComment(
+                      postId: comment.postId, commentId: comment.id
+                    ).then((successful) {
+                      if (successful) {
+                        deleteFunc(comment.id);
+                        postsProvider.fetchPosts(postsProvider.boardId);
+                        Navigator.pop(context);
+                        Navigator.pop(context);
+                      }
+                    }),
+                  ),
+                ] : [
+                  BottomModalDefault(
+                    text: '쪽지 보내기',
+                    onPressed: () => showMaterialModalBottomSheet(
+                      context: context,
+                      useRootNavigator: true,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.only(
+                          topLeft: Radius.circular(20),
+                          topRight: Radius.circular(20),
+                        ),
+                      ),
+                      builder: (context) => MultiProvider(
+                        providers: [
+                          ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                        ],
+                        child: SingleChildScrollView(
+                          child: BottomModalWithMessage(
+                            funcName: '보내기',
+                            title: '${comment.profile.nickname} 님에게 쪽지 보내기',
+                            profile: comment.profile,
+                            func: null,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                  // PostCommentReport(comment.profile),
+                  // BottomModalWithAlert(
+                  //   funcName: '차단하기',
+                  //   title: '${comment.profile.nickname} 님을 차단하시겠어요?',
+                  //   body: '사용자를 차단하면, 해당 사용자의 게시글 및 댓글을 확인 할 수 없으며, 서로 쪽지를 주고 받을 수 없습니다.\n\n차단계정 관리는 프로필>계정 설정> 차단 목록 관리 탭에서 확인 가능합니다',
+                  //   func: () {},
+                  // ),
+                ],
+              ),
+            ),
+          );
+        }
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/comments/comments.dart b/lib/screens/boards/comments/comments.dart
new file mode 100644
index 00000000..ca69bc71
--- /dev/null
+++ b/lib/screens/boards/comments/comments.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/models/boards/comment.dart';
+import 'comment_banner.dart';
+import 'comment_body.dart';
+
+class Comments extends StatelessWidget {
+  final Comment comment;
+  final bool isAuthor;
+  final Function deleteFunc;
+
+  Comments({this.comment, this.isAuthor, this.deleteFunc});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        CommentBanner(comment, isAuthor, deleteFunc),
+        CommentBody(comment),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation.dart b/lib/screens/boards/posts/creation/post_creation.dart
new file mode 100644
index 00000000..a8495aa6
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation.dart
@@ -0,0 +1,291 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/custom_app_bar.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/screens/boards/posts/creation/post_creation_board.dart';
+import 'package:guam_community_client/screens/boards/posts/creation/post_creation_content.dart';
+import 'package:guam_community_client/screens/boards/posts/creation/post_creation_image.dart';
+import 'package:guam_community_client/screens/boards/posts/creation/post_creation_category.dart';
+import 'package:guam_community_client/screens/boards/posts/creation/post_creation_title.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+
+import '../../../../commons/functions_category_boardType.dart';
+import '../../../../commons/guam_progress_indicator.dart';
+import '../../../../models/boards/post.dart';
+import '../../../../providers/posts/posts.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+import '../detail/post_detail.dart';
+
+class PostCreation extends StatefulWidget {
+  final bool isEdit;
+  final dynamic editTarget;
+
+  PostCreation({this.isEdit = false, this.editTarget});
+
+  @override
+  State<PostCreation> createState() => _PostCreationState();
+}
+
+class _PostCreationState extends State<PostCreation> with Toast {
+  Map input = {};
+  bool isBoardAnonymous = false;
+
+  @override
+  void initState() {
+    Post editPost = widget.editTarget;
+    if (widget.editTarget != null) {
+      input = {
+        'title': editPost.title,
+        'content': editPost.content,
+        'boardType': editPost.boardType,
+        'boardId': transferBoardType(editPost.boardType),
+        'category': editPost.category != null ? editPost.category.title : "",
+        'categoryId': editPost.category != null ? editPost.category.categoryId : 0,
+        'images': editPost.imagePaths, /// 이미지는 S3 주소 받아와서 그대로 전송 (수정 불가능)
+      };
+    } else {
+      input = {
+        'title': '',
+        'content': '',
+        'boardId': '',
+        'boardType': '',
+        'categoryId': '',
+        'category': '',
+        'images': [],
+      };
+    }
+    super.initState();
+  }
+
+  Future createOrUpdatePost({List<File> files}) async {
+    Posts postProvider = context.read<Posts>();
+    Authenticate authProvider = context.read<Authenticate>();
+
+    bool successful = false;
+    Map<String, dynamic> fields = {
+      'title': input['title'],
+      'content': input['content'],
+      'boardId': input['boardId'].toString(),
+      'categoryId': input['categoryId'].toString(),
+    };
+
+    try {
+      if (widget.isEdit && widget.editTarget != null) {
+        return await postProvider.editPost(
+          postId: widget.editTarget.id,
+          body: fields,
+        ).then((successful) {
+          if (successful) {
+            Navigator.pop(context, fields);
+            successful = true;
+          }
+        });
+      } else {
+        return await postProvider.createPost(
+          fields: fields,
+          files: files,
+        ).then((successful) {
+          if (successful) {
+            Navigator.pop(context);
+            postProvider.fetchPosts(0);
+            /// 게시글 생성 후 getPost(createdPostId) 하여 새로운 게시글로 이동
+            Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) => MultiProvider(
+                  providers: [
+                    ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+                  ],
+                  child: FutureBuilder(
+                      future: postProvider.getPost(postProvider.createdPostId),
+                      builder: (_, AsyncSnapshot<Post> snapshot) {
+                        if (snapshot.hasData) {
+                          return PostDetail(snapshot.data);
+                        } else if (snapshot.hasError) {
+                          Navigator.pop(context);
+                          postProvider.fetchPosts(0);
+                          showToast(success: false, msg: '게시글을 찾을 수 없습니다.');
+                          return null;
+                        } else {
+                          return Center(child: guamProgressIndicator());
+                        }
+                      }
+                  ),
+                ),
+              ),
+            );
+            successful = true;
+          }
+        });
+      }
+    } catch (e) {
+      print(e);
+    }
+    return successful;
+  }
+
+  void setBoardAnonymous(String boardType) {
+    setState(() => boardType == '익명'
+        ? isBoardAnonymous = true
+        : isBoardAnonymous = false
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        leading: Card(
+          elevation: 0,
+          color: GuamColorFamily.grayscaleWhite,
+          margin: EdgeInsets.zero,
+          child: IconButton(
+            icon: SvgPicture.asset('assets/icons/back.svg'),
+            onPressed: () => showMaterialModalBottomSheet(
+              context: context,
+              useRootNavigator: true,
+              backgroundColor: GuamColorFamily.grayscaleWhite,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.only(
+                  topLeft: Radius.circular(20),
+                  topRight: Radius.circular(20),
+                ),
+              ),
+              builder: (context) => SingleChildScrollView(
+                child: Container(
+                  padding: EdgeInsets.only(left: 24, top: 24, right: 18, bottom: 14),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(
+                            '게시글 ${widget.isEdit ? '수정': '작성'}을 취소하시겠어요?',
+                            style: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray2),
+                          ),
+                          TextButton(
+                            child: Text(
+                              '돌아가기',
+                              style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore,
+                              ),
+                            ),
+                            style: TextButton.styleFrom(
+                              padding: EdgeInsets.zero,
+                              minimumSize: Size(30, 26),
+                              alignment: Alignment.centerRight,
+                            ),
+                            onPressed: () => Navigator.of(context).pop(),
+                          ),
+                        ],
+                      ),
+                      CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                      Padding(
+                        padding: EdgeInsets.symmetric(vertical: 20),
+                        child: Text(
+                          widget.isEdit
+                              ? '수정된 내용이 사라집니다.'
+                              : '게시글은 임시저장되지 않습니다.',
+                          style: TextStyle(
+                            fontSize: 14,
+                            height: 1.6,
+                            color: GuamColorFamily.grayscaleGray2,
+                            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                          ),
+                        ),
+                      ),
+                      Center(
+                        child: TextButton(
+                          onPressed: () {
+                            if (widget.isEdit) {
+                              Navigator.pop(context);
+                              Navigator.pop(context);
+                            } else {
+                              Navigator.of(context).pushNamedAndRemoveUntil(
+                                '/', (route) => false
+                              );
+                            }
+                          },
+                          child: Text(
+                            '취소하기',
+                            style: TextStyle(fontSize: 16, color: GuamColorFamily.redCore),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        trailing: Padding(
+          padding: EdgeInsets.only(right: 11),
+          child: TextButton(
+            onPressed: () async {
+              await createOrUpdatePost(
+                  files: (input['images'] != [] && !widget.isEdit)
+                      ? [...input['images'].map((e) => File(e.path))]
+                      : []
+              );
+            },
+            style: TextButton.styleFrom(
+              minimumSize: Size(30, 26),
+              alignment: Alignment.center,
+            ),
+            child: Text(
+              widget.isEdit ? '수정' : '등록',
+              style: TextStyle(
+                color: GuamColorFamily.purpleCore,
+                fontSize: 16,
+              ),
+            ),
+          ),
+        ),
+      ),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            Container(
+              color: GuamColorFamily.grayscaleWhite,
+              padding: EdgeInsets.only(left: 24, top: 10, right: 24),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  PostCreationBoard(input, widget.isEdit, setBoardAnonymous),
+                  PostCreationTitle(input),
+                  CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                  PostCreationContent(input),
+                ],
+              ),
+            ),
+            CustomDivider(
+              height: 12,
+              thickness: 12,
+              color: GuamColorFamily.purpleLight3,
+            ),
+            Container(
+              color: GuamColorFamily.grayscaleWhite,
+              width: double.infinity,
+              padding: EdgeInsets.only(left: 24, top: 20, right: 0, bottom: 42),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // if (!isBoardAnonymous)
+                  PostCreationCategory(input),
+                  if (!widget.isEdit) PostCreationImage(input)
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation_board.dart b/lib/screens/boards/posts/creation/post_creation_board.dart
new file mode 100644
index 00000000..a39e76b2
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation_board.dart
@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_with_choice.dart';
+import 'package:guam_community_client/commons/functions_category_boardType.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+
+import '../../boards_type.dart';
+
+class PostCreationBoard extends StatefulWidget {
+  final Map input;
+  final bool isEdit;
+  final Function setBoardAnonymous;
+
+  PostCreationBoard(this.input, this.isEdit, this.setBoardAnonymous);
+
+  @override
+  _PostCreationBoardState createState() => _PostCreationBoardState();
+}
+
+class _PostCreationBoardState extends State<PostCreationBoard> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void setBoardType(String boardType){
+    setState(() {
+      widget.input['boardType'] = boardType;
+      widget.input['boardId'] = transferBoardType(boardType).toString();
+      widget.setBoardAnonymous(boardType);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    bool isBoardAnonymous = widget.input['boardType'] == '익명';
+
+    return Container(
+      child: TextButton(
+        child: Row(
+          children: [
+            Text(
+              widget.input['boardType'] == ''
+                  ? '게시판을 선택해주세요.'
+                  : widget.input['boardType'] + '게시판',
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(
+                fontSize: 14,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                color: widget.input['boardType'] == '' || (isBoardAnonymous && widget.isEdit)
+                    ? GuamColorFamily.grayscaleGray3
+                    : GuamColorFamily.purpleCore,
+              ),
+            ),
+            if ( !(isBoardAnonymous && widget.isEdit) )
+              IconButton(
+                onPressed: null,
+                padding: EdgeInsets.only(left: 4),
+                constraints: BoxConstraints(),
+                icon: SvgPicture.asset(
+                  'assets/icons/down.svg',
+                  color: widget.input['boardType'] == ''
+                      ? GuamColorFamily.grayscaleGray3
+                      : GuamColorFamily.purpleCore,
+                  width: 20,
+                  height: 20,
+                ),
+              ),
+          ],
+        ),
+        style: TextButton.styleFrom(padding: EdgeInsets.zero, minimumSize: Size(136, 23)),
+        onPressed: (isBoardAnonymous && widget.isEdit)
+            ? null
+            : () => showMaterialModalBottomSheet(
+            context: context,
+            useRootNavigator: true,
+            backgroundColor: GuamColorFamily.grayscaleWhite,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(20),
+                topRight: Radius.circular(20),
+              )
+            ),
+            builder: (context) => SingleChildScrollView(
+              child: Column(
+                children: [
+                  BottomModalWithChoice(
+                    title: '게시판을 선택해주세요.',
+                    back: '완료',
+                    children: [
+                      /// 게시글 생성 시 피드 게시판 제외 위해 1번째 항목부터,
+                      /// 게시글 수정 시 피드&익명 게시판 제외하기 위해 2번째 항목부터 포함
+                      ...boardsList.sublist(widget.isEdit? 2 : 1)
+                          .map((board) => _boardType(boardsType[board['name']])
+                      )
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          )
+      ),
+    );
+  }
+
+  Widget _boardType(String boardType) {
+    return Builder(
+      builder: (context) => InkWell(
+        onTap: () {
+          setBoardType(boardType);
+          Navigator.pop(context);
+        },
+        child: Padding(
+          padding: EdgeInsets.symmetric(vertical: 10),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Container(
+                height: 20,
+                child: Text(
+                  boardType + '게시판',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    color: boardType == widget.input['boardType']
+                        ? GuamColorFamily.purpleCore
+                        : GuamColorFamily.grayscaleGray3,
+                  ),
+                ),
+              ),
+              if (boardType == widget.input['boardType'])
+                IconButton(
+                  padding: EdgeInsets.only(right: 8),
+                  constraints: BoxConstraints(),
+                  icon: SvgPicture.asset('assets/icons/check.svg'),
+                  onPressed: null,
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation_category.dart b/lib/screens/boards/posts/creation/post_creation_category.dart
new file mode 100644
index 00000000..0082dce6
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation_category.dart
@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/screens/boards/category_type.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+import '../../../../commons/functions_category_boardType.dart';
+
+class PostCreationCategory extends StatefulWidget {
+  final Map input;
+
+  PostCreationCategory(this.input);
+
+  @override
+  _PostCreationCategoryState createState() => _PostCreationCategoryState();
+}
+
+class _PostCreationCategoryState extends State<PostCreationCategory> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void setCategory(String category){
+    setState(() {
+      widget.input['category'] = category;
+      widget.input['categoryId'] = transferCategory(category).toString();
+    });
+  }
+
+  void initCategory(){
+    setState(() {
+      widget.input['category'] = '';
+      widget.input['categoryId'] = 0;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(bottom: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            '카테고리를 선택해주세요.',
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              fontSize: 14,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              color: GuamColorFamily.grayscaleGray3,
+            ),
+          ),
+          if (widget.input['category'] == '')
+            SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: [
+                  ...categoryList.map((c) => _categoryChip(categoryType[c['name']])),
+                ],
+              ),
+            ),
+          if (widget.input['category'] != '')
+            Padding(
+              padding: EdgeInsets.only(top: 8),
+              child: Row(
+                children: [
+                  Text(
+                    "#" + widget.input['category'],
+                    style: TextStyle(
+                        fontSize: 16, color: GuamColorFamily.blueCore),
+                  ),
+                  IconButton(
+                    padding: EdgeInsets.zero,
+                    constraints: BoxConstraints(),
+                    onPressed: () => initCategory(),
+                    icon: SvgPicture.asset(
+                      'assets/icons/cancel_outlined.svg',
+                      color: GuamColorFamily.blueCore,
+                      width: 20,
+                      height: 20,
+                    ),
+                  )
+                ],
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _categoryChip(String category) {
+    return Padding(
+      padding: EdgeInsets.only(right: 8),
+      child: ChoiceChip(
+        selected: false,
+        pressElevation: 2,
+        labelPadding: EdgeInsets.symmetric(horizontal: 4),
+        backgroundColor: GuamColorFamily.purpleLight3,
+        onSelected: (e) => setCategory(category),
+        label: Text(
+          "#" + category,
+          style: TextStyle(
+            fontSize: 14,
+            color: GuamColorFamily.purpleLight1,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation_content.dart b/lib/screens/boards/posts/creation/post_creation_content.dart
new file mode 100644
index 00000000..08acd989
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation_content.dart
@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class PostCreationContent extends StatefulWidget {
+  final Map input;
+
+  PostCreationContent(this.input);
+
+  @override
+  _PostCreationContentState createState() => _PostCreationContentState();
+}
+
+class _PostCreationContentState extends State<PostCreationContent> {
+  final _contentTextFieldController = TextEditingController();
+
+  @override
+  void initState() {
+    _contentTextFieldController.text = widget.input['content'];
+    super.initState();
+  }
+
+  void setContent(){
+    setState(() => widget.input['content'] = _contentTextFieldController.text);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.of(context).size.height * 0.45,
+      child: TextField(
+        keyboardType: TextInputType.multiline,
+        controller: _contentTextFieldController,
+        onChanged: (e) => setContent(),
+        maxLines: null,
+        style: TextStyle(fontSize: 14, height: 1.6, color: GuamColorFamily.grayscaleGray2),
+        decoration: InputDecoration(
+          hintText: "내용을 입력해주세요.",
+          hintStyle: TextStyle(fontSize: 14, color: GuamColorFamily.grayscaleGray5),
+          border: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          enabledBorder: InputBorder.none,
+          errorBorder: InputBorder.none,
+          disabledBorder: InputBorder.none,
+          contentPadding: EdgeInsets.only(top: 20),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation_image.dart b/lib/screens/boards/posts/creation/post_creation_image.dart
new file mode 100644
index 00000000..740c1b60
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation_image.dart
@@ -0,0 +1,146 @@
+import 'dart:io';
+
+import 'package:dotted_border/dotted_border.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/image/image_thumbnail.dart';
+import 'package:guam_community_client/helpers/pick_image.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:image_picker/image_picker.dart';
+
+class PostCreationImage extends StatefulWidget {
+  final Map input;
+
+  PostCreationImage(this.input);
+
+  @override
+  _PostCreationImageState createState() => _PostCreationImageState();
+}
+
+class _PostCreationImageState extends State<PostCreationImage> {
+  final double maxImgSize = 80;
+  final double imgSheetHeight = 96;
+  bool sending = false;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.input['images'].clear();
+    super.dispose();
+  }
+
+  void setImageFile(PickedFile val) {
+    setState(() {
+      if (val != null) widget.input['images'].add(val);
+    });
+  }
+
+  void deleteImageFile(int idx) {
+    setState(() => widget.input['images'].removeAt(idx));
+  }
+
+  void toggleSending() {
+    setState(() => sending = !sending);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          padding: EdgeInsets.only(bottom: 10),
+          child: Text(
+            '사진을 첨부해보세요.',
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              fontSize: 14,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              color: GuamColorFamily.grayscaleGray3,
+            )
+          ),
+        ),
+        SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            children: [
+              InkWell(
+                onTap: !sending
+                    ? () => pickImage(type: 'gallery').then((img) => setImageFile(img))
+                    : null,
+                child: SizedBox(
+                  height: 80,
+                  width: 80,
+                  child: DottedBorder(
+                    strokeWidth: 1,
+                    dashPattern: [4, 5],
+                    borderType: BorderType.RRect,
+                    radius: Radius.circular(12),
+                    color: GuamColorFamily.purpleLight2,
+                    child: Center(
+                      child: IconButton(
+                        iconSize: 24,
+                        padding: EdgeInsets.zero,
+                        constraints: BoxConstraints(),
+                        icon: SvgPicture.asset(
+                          'assets/icons/plus.svg',
+                          color: GuamColorFamily.purpleLight1,
+                        ),
+                        onPressed: !sending
+                            ? () => pickImage(type: 'gallery').then((img) => setImageFile(img))
+                            : null,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+              widget.input['images'].isNotEmpty
+                  ? SizedBox(
+                      height: maxImgSize,
+                      width: (maxImgSize + 14.87) * widget.input['images'].length,
+                      child: ListView.builder(
+                        scrollDirection: Axis.horizontal,
+                        itemCount: widget.input['images'].length,
+                        itemBuilder: (_, idx) =>
+                            Stack(
+                              children: [
+                                Container(
+                                  padding: EdgeInsets.only(left: 14.87),
+                                  child: ImageThumbnail(
+                                    width: maxImgSize,
+                                    height: maxImgSize,
+                                    image: Image(
+                                      image: FileImage(File(widget.input['images'][idx].path)),
+                                      fit: BoxFit.fill,
+                                    ),
+                                  ),
+                                ),
+                                Positioned(
+                                  top: 2,
+                                  right: 2,
+                                  child: IconButton(
+                                    iconSize: 23,
+                                    padding: EdgeInsets.zero,
+                                    constraints: BoxConstraints(),
+                                    icon: SvgPicture.asset('assets/icons/cancel_filled.svg'),
+                                    onPressed: () => deleteImageFile(idx),
+                                  ),
+                                )
+                              ],
+                            ),
+                      ),
+                    )
+                  : Container(),
+              Padding(padding: EdgeInsets.only(right: 14.87)),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/creation/post_creation_title.dart b/lib/screens/boards/posts/creation/post_creation_title.dart
new file mode 100644
index 00000000..d7424e06
--- /dev/null
+++ b/lib/screens/boards/posts/creation/post_creation_title.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class PostCreationTitle extends StatefulWidget {
+  final Map input;
+
+  PostCreationTitle(this.input);
+
+  @override
+  _PostCreationTitleState createState() => _PostCreationTitleState();
+}
+
+class _PostCreationTitleState extends State<PostCreationTitle> {
+  final _titleTextFieldController = TextEditingController();
+
+  @override
+  void initState() {
+    _titleTextFieldController.text = widget.input['title'];
+    super.initState();
+  }
+
+  void setTitle(){
+    setState(() {
+      widget.input['title'] = _titleTextFieldController.text;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      keyboardType: TextInputType.multiline,
+      controller: _titleTextFieldController,
+      onChanged: (e) => setTitle(),
+      maxLines: 1,
+      style: TextStyle(fontSize: 18),
+      decoration: InputDecoration(
+        hintText: "제목을 입력해주세요.",
+        hintStyle: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray5),
+        border: InputBorder.none,
+        focusedBorder: InputBorder.none,
+        enabledBorder: InputBorder.none,
+        errorBorder: InputBorder.none,
+        disabledBorder: InputBorder.none,
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/detail/post_detail.dart b/lib/screens/boards/posts/detail/post_detail.dart
new file mode 100644
index 00000000..229d0b4f
--- /dev/null
+++ b/lib/screens/boards/posts/detail/post_detail.dart
@@ -0,0 +1,296 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_mentions/flutter_mentions.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/commons/common_text_field.dart';
+import 'package:guam_community_client/commons/custom_app_bar.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/boards/category.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+import 'package:guam_community_client/screens/boards/comments/comments.dart';
+import 'package:guam_community_client/screens/boards/posts/detail/post_detail_banner.dart';
+import 'package:guam_community_client/screens/boards/posts/detail/post_detail_body.dart';
+import 'package:guam_community_client/screens/boards/posts/detail/post_detail_more.dart';
+import 'package:guam_community_client/screens/boards/posts/post_info.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+
+import '../../../../commons/functions_category_boardType.dart';
+import '../../../../providers/messages/messages.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+
+class PostDetail extends StatefulWidget {
+  final Post post;
+
+  PostDetail(this.post);
+
+  @override
+  State<PostDetail> createState() => _PostDetailState();
+}
+
+class _PostDetailState extends State<PostDetail> with Toast {
+  Post _post;
+  Future comments;
+  bool isScrapped;
+  int scrapCount;
+  bool commentImageExist = false;
+  final int maxRenderImgCnt = 4;
+  Set<int> mentionListId = {};
+  List<Map<String, dynamic>> mentionList = [];
+  List<Map<String, dynamic>> result = [];
+
+  @override
+  void initState() {
+    _post = widget.post;
+    mentionList = [_post.profile.toJson()];
+    mentionListId = {_post.profile.id};
+    comments = context.read<Posts>().fetchComments(_post.id);
+    isScrapped = widget.post.isScrapped;
+    scrapCount = widget.post.scrapCount;
+    super.initState();
+  }
+
+  /// 게시글 수정 시, API의 request는 Client가 들고있다는 원칙 및 서버 통신 성공 가정 하에
+  /// 수정 버튼 클릭하면 사용자에게 수정 내용 바로 반영되도록 만듦.
+  getEditedPost(Map editedPost) {
+    if (editedPost == null) return;
+    int editedBoardId = int.parse(editedPost['boardId']);
+    int editedCategoryId = int.parse(editedPost['categoryId']);
+
+    Category editedCategory = Category(
+      postId: widget.post.id,
+      categoryId: editedCategoryId,
+      title: transferCategoryId(editedCategoryId),
+    );
+
+    setState(() {
+      _post.title = editedPost['title'];
+      _post.content = editedPost['content'];
+      _post.boardType = transferBoardId(editedBoardId);
+      _post.category = editedCategory;
+    });
+  }
+
+  void addCommentImage() {
+    setState(() => commentImageExist = true);
+  }
+
+  void removeCommentImage() {
+    setState(() => commentImageExist = false);
+  }
+
+  @override
+  void dispose() {
+    mentionList.clear();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final postsProvider = context.watch<Posts>();
+    Authenticate authProvider = context.read<Authenticate>();
+
+    void fetchComments() {
+      comments = postsProvider.fetchComments(_post.id);
+    }
+
+    Future createComment({Map<String, dynamic> fields, dynamic files}) async {
+      return await postsProvider.createComment(
+        postId: _post.id,
+        fields: fields,
+        files: files,
+      ).then((successful) {
+        if (successful) fetchComments();
+        return successful;
+      });
+    }
+
+    Future scrapOrUnscrapPost() async {
+      try {
+        if (!isScrapped) {
+          return await postsProvider.scrapPost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isScrapped = true;
+                scrapCount ++;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        } else {
+          return await postsProvider.unscrapPost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isScrapped = !isScrapped;
+                scrapCount --;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        }
+      } catch (e) {
+        print(e);
+      }
+    }
+
+    return Portal(
+      child: Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          leading: Back(),
+          trailing: Padding(
+            padding: EdgeInsets.only(right: 11),
+            child: Row(
+              children: [
+                // IconButton(
+                //   padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
+                //   constraints: BoxConstraints(),
+                //   icon: SvgPicture.asset(isScrapped
+                //       ? 'assets/icons/scrap_filled.svg'
+                //       : 'assets/icons/scrap_outlined.svg'
+                //   ),
+                //   onPressed: scrapOrUnscrapPost,
+                // ),
+                IconButton(
+                  padding: EdgeInsets.zero,
+                  constraints: BoxConstraints(),
+                  icon: SvgPicture.asset('assets/icons/more.svg'),
+                  onPressed: () => showModalBottomSheet(
+                    /// DetailMore에서 Detail로 수정된 게시글 정보 넘기기
+                    context: context,
+                    useRootNavigator: true,
+                    builder: (_) => MultiProvider(
+                        providers: [
+                          ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+                          ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                        ],
+                        child: PostDetailMore(_post, getEditedPost)
+                    ),
+                    backgroundColor: GuamColorFamily.grayscaleWhite,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.only(
+                        topLeft: Radius.circular(20),
+                        topRight: Radius.circular(20),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        body: RefreshIndicator(
+          color: Color(0xF9F8FFF), // GuamColorFamily.purpleLight1
+          onRefresh: () => context.read<Posts>().getPost(widget.post.id),
+          child: SingleChildScrollView(
+            physics: AlwaysScrollableScrollPhysics(),
+            child: Padding(
+              padding: EdgeInsets.only(
+                left: 24,
+                right: 24,
+                bottom: commentImageExist ? 156 : 56,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  PostDetailBanner(_post),
+                  Padding(
+                    padding: EdgeInsets.only(top: 8, bottom: 20),
+                    child: CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                  ),
+                  PostDetailBody(_post),
+                  Padding(
+                    padding: EdgeInsets.only(top: 14, bottom: 8),
+                    child: PostInfo(
+                      post: _post,
+                      iconSize: 24,
+                      showProfile: false,
+                      iconColor: GuamColorFamily.grayscaleGray4,
+                    ),
+                  ),
+                  CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                  Padding(
+                    padding: EdgeInsets.symmetric(vertical: 20),
+                    child: FutureBuilder(
+                      /// FutureBuilder의 future에 명시하는 비동기 함수가 반복해서 실행되는
+                      /// 문제를 해결하고자 initState에서 정의시킨다.
+                      future: comments,
+                      builder: (_, AsyncSnapshot snapshot) {
+                        if (snapshot.hasData) {
+                          if (snapshot.data.isNotEmpty) {
+                            /// FutureBuilder의 snapshot에서 들고 있어 map으로 뿌려주는
+                            /// Comment 인스턴스는 Provider에 속하지 않으므로
+                            /// snapshot에 직접 접근해서 지우는 방식을 택하자.
+                            void deleteComment(int commentId) {
+                              setState(() {
+                                snapshot.data.removeWhere((c) => c.id == commentId);
+                              });
+                            }
+                            Future.delayed(
+                              Duration.zero, () {
+                                if (this.mounted)
+                                  setState(() => snapshot.data.forEach((e) {
+                                    if (!mentionListId.contains(e.profile.id))
+                                      mentionList.add(e.profile.toJson());
+                                    mentionListId.add(e.profile.id);
+                                  }));
+                              }
+                            );
+                            return Column(
+                              children: [
+                                ...snapshot.data.map((comment) => Comments(
+                                  comment: comment,
+                                  deleteFunc: deleteComment,
+                                  isAuthor: _post.profile.id == comment.profile.id,
+                                ))
+                              ],
+                            );
+                          } else {
+                            return Padding(
+                              padding: EdgeInsets.only(top: 24),
+                              child: Center(
+                                child: Text(
+                                  "작성된 댓글이 없습니다.",
+                                  style: TextStyle(fontSize: 13, color: GuamColorFamily.grayscaleGray5),
+                                ),
+                              ),
+                            );
+                          }
+                        } else if (snapshot.hasError) {
+                          showToast(success: true, msg: '알 수 없는 오류가 발생했습니다.');
+                          return null;
+                        } else {
+                          return Center(child: CircularProgressIndicator(
+                            color: GuamColorFamily.purpleLight3,
+                          ));
+                        }
+                      }
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        bottomSheet: Container(
+          color: Colors.black.withOpacity(0.3),
+          child: CommonTextField(
+            editTarget: null,
+            onTap: createComment,
+            mentionList: mentionList,
+            addImage: addCommentImage,
+            removeImage: removeCommentImage,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/detail/post_detail_banner.dart b/lib/screens/boards/posts/detail/post_detail_banner.dart
new file mode 100644
index 00000000..d63b15d5
--- /dev/null
+++ b/lib/screens/boards/posts/detail/post_detail_banner.dart
@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/color_of_category.dart';
+import 'package:guam_community_client/commons/common_img_nickname.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:intl/intl.dart';
+
+class PostDetailBanner extends StatelessWidget {
+  final Post post;
+
+  PostDetailBanner(this.post);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            if (post.category != null)
+              TextButton(
+                onPressed: null,
+                child: Text(
+                  "#" + post.category.title,
+                  style: TextStyle(
+                    fontSize: 16,
+                    color: colorOfCategory(post.category.title),
+                  ),
+                ),
+                style: TextButton.styleFrom(
+                  minimumSize: Size.zero,
+                  padding: EdgeInsets.only(top: 24),
+                  alignment: Alignment.centerLeft,
+                ),
+              ),
+            Padding(
+              padding: EdgeInsets.only(left: post.category == null ? 0 : 8),
+              child: TextButton(
+                onPressed: null,
+                child: Text(
+                  post.boardType + '게시판',
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: colorOfCategory(
+                        post.category != null ? post.category.title : '')
+                        .withOpacity(0.5),
+                  ),
+                ),
+                style: TextButton.styleFrom(
+                  minimumSize: Size.zero,
+                  padding: EdgeInsets.only(top: 24),
+                  alignment: Alignment.centerLeft,
+                ),
+              ),
+            ),
+          ],
+        ),
+        Container(
+          padding: EdgeInsets.only(top: 8),
+          child: Text(post.title, style: TextStyle(fontSize: 18)),
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 8),
+          child: Row(
+            children: [
+              CommonImgNickname(
+                userId: post.profile.id,
+                nickname: post.profile.nickname,
+                profileClickable: post.profile.id != 0,
+                // 익명 프로필은 프로필 열람 불가
+                imgUrl: post.profile.profileImg ?? null,
+                nicknameColor: GuamColorFamily.grayscaleGray3,
+              ),
+              Spacer(),
+              Text(
+                DateFormat('yyyy.MM.dd  HH:mm').format(DateTime.parse(post.createdAt)),
+                style: TextStyle(
+                  fontSize: 12,
+                  color: GuamColorFamily.grayscaleGray5,
+                  fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/detail/post_detail_body.dart b/lib/screens/boards/posts/detail/post_detail_body.dart
new file mode 100644
index 00000000..f8585305
--- /dev/null
+++ b/lib/screens/boards/posts/detail/post_detail_body.dart
@@ -0,0 +1,85 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:guam_community_client/commons/image/image_carousel.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+import 'package:guam_community_client/screens/boards/posts/post_image.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class PostDetailBody extends StatelessWidget {
+  final int maxRenderImgCnt = 4;
+  final Post post;
+
+  PostDetailBody(this.post);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          padding: EdgeInsets.only(bottom: 64),
+          child: Linkify(
+            onOpen: (link) async {
+              if (await canLaunch(link.url)) {
+                await launch(link.url);
+              } else {
+                throw 'Could not launch $link';
+              }
+            },
+            text: post.content,
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 14,
+              color: GuamColorFamily.grayscaleGray2,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+            linkStyle: TextStyle(
+              height: 1.6,
+              fontSize: 14,
+              color: GuamColorFamily.blueCore,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+          ),
+        ),
+        if (post.imagePaths.isNotEmpty)
+          GridView.builder(
+            physics: NeverScrollableScrollPhysics(),
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: min(post.imagePaths.length, maxRenderImgCnt),
+              crossAxisSpacing: 10,
+              childAspectRatio: 1,
+            ),
+            shrinkWrap: true,
+            itemCount: min(post.imagePaths.length, maxRenderImgCnt),
+            itemBuilder: (_, idx) => InkWell(
+              child: PostImage(
+                picture: post.imagePaths[idx],
+                blur: post.imagePaths.length > maxRenderImgCnt && idx == maxRenderImgCnt - 1,
+                hiddenImgCnt: post.imagePaths.length - maxRenderImgCnt,
+              ),
+              onTap: () {
+                Navigator.of(context, rootNavigator: true).push(
+                  MaterialPageRoute(
+                    builder: (_) => ChangeNotifierProvider.value(
+                      value: context.read<Posts>(), // necessary?
+                      child: ImageCarousel(
+                        pictures: [...this.post.imagePaths],
+                        initialPage: idx,
+                        showImageActions: true,
+                      ),
+                    )
+                  )
+                );
+              },
+            ),
+          ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/detail/post_detail_more.dart b/lib/screens/boards/posts/detail/post_detail_more.dart
new file mode 100644
index 00000000..01df2c3e
--- /dev/null
+++ b/lib/screens/boards/posts/detail/post_detail_more.dart
@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+
+import '../../../../commons/bottom_modal/bottom_modal_default.dart';
+import '../../../../commons/bottom_modal/bottom_modal_with_alert.dart';
+import '../../../../commons/bottom_modal/bottom_modal_with_message.dart';
+import '../../../../models/boards/post.dart';
+import '../../../../providers/messages/messages.dart';
+import '../../../../providers/posts/posts.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+import '../creation/post_creation.dart';
+import '../post_comment_report.dart';
+
+class PostDetailMore extends StatelessWidget {
+  final Post post;
+  final Function getEditedPost;
+
+  PostDetailMore(this.post, this.getEditedPost);
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    void _navigatePage(BuildContext context) async {
+      final result = await Navigator.push(
+        context,
+        MaterialPageRoute(
+          builder: (_) => MultiProvider(
+            providers: [
+              ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+              ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+            ],
+            child: PostCreation(isEdit: true, editTarget: post),
+          ),
+        ),
+      );
+      getEditedPost(result);
+    }
+
+    return SingleChildScrollView(
+      child: Container(
+        padding: EdgeInsets.only(left: 24, top: 24, bottom: 21),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: post.isMine ? [
+            BottomModalDefault(
+              text: '수정하기',
+              onPressed: () => _navigatePage(context),
+            ),
+            BottomModalWithAlert(
+              funcName: '삭제하기',
+              title: '게시글을 삭제하시겠어요?',
+              body: '삭제된 게시글은 복원할 수 없습니다.',
+              func: () async {
+                await context.read<Posts>().deletePost(post.id)
+                    .then((successful) {
+                  if (successful) {
+                    Navigator.of(context).pushNamedAndRemoveUntil(
+                        '/', (route) => true
+                    );
+                  }
+                });
+              },
+            ),
+          ] : [
+            BottomModalDefault(
+              text: '쪽지 보내기',
+              onPressed: () => showMaterialModalBottomSheet(
+                context: context,
+                useRootNavigator: true,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(20),
+                    topRight: Radius.circular(20),
+                  ),
+                ),
+                builder: (context) => MultiProvider(
+                  providers: [
+                    ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                  ],
+                  child: SingleChildScrollView(
+                    child: BottomModalWithMessage(
+                      funcName: '보내기',
+                      title: '${post.profile.nickname} 님에게 쪽지 보내기',
+                      profile: post.profile,
+                      func: null,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            // PostCommentReport(post.profile),
+            // BottomModalWithAlert(
+            //   funcName: '차단하기',
+            //   title: '${post.profile.nickname} 님을 차단하시겠어요?',
+            //   body: '사용자를 차단하면, 해당 사용자의 게시글 및 댓글을 확인 할 수 없으며, 서로 쪽지를 주고 받을 수 없습니다.\n\n차단계정 관리는 프로필>계정 설정> 차단 목록 관리 탭에서 확인 가능합니다',
+            //   func: () {},
+            // ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/post_button.dart b/lib/screens/boards/posts/post_button.dart
new file mode 100644
index 00000000..c02dcff7
--- /dev/null
+++ b/lib/screens/boards/posts/post_button.dart
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+
+import '../../../providers/posts/posts.dart';
+import 'creation/post_creation.dart';
+
+class PostButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 56,
+      width: 56,
+      child: FittedBox(
+        child: FloatingActionButton(
+          onPressed: () {},
+          backgroundColor: GuamColorFamily.purpleCore,
+          child: IconButton(
+            icon: SvgPicture.asset(
+              'assets/icons/write.svg',
+              color: GuamColorFamily.grayscaleWhite,
+              width: 30,
+              height: 30,
+            ),
+            onPressed: () => Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (_) => ChangeNotifierProvider.value(
+                  value: context.read<Posts>(),
+                  child: PostCreation(),
+                )
+              )
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/post_comment_report.dart b/lib/screens/boards/posts/post_comment_report.dart
new file mode 100644
index 00000000..dec51108
--- /dev/null
+++ b/lib/screens/boards/posts/post_comment_report.dart
@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_default.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_with_choice.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+
+class PostCommentReport extends StatefulWidget {
+  final Profile profile;
+
+  PostCommentReport(this.profile);
+
+  @override
+  _PostCommentReportState createState() => _PostCommentReportState();
+}
+
+class _PostCommentReportState extends State<PostCommentReport> {
+  String reportReason = '';
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BottomModalDefault(
+      text: '신고하기',
+      onPressed: () => showMaterialModalBottomSheet(
+        context: context,
+        useRootNavigator: true,
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(20),
+            topRight: Radius.circular(20),
+          ),
+        ),
+        builder: (context) => StatefulBuilder(
+          builder: (BuildContext context, StateSetter myState) {
+            return BottomModalWithChoice(
+              title: '사용자 신고하기',
+              back: '취소',
+              body: '${widget.profile.nickname} 님을 신고하는 이유를 알려주세요',
+              alert: '허위 신고자는 서비스 이용에 불이익을 받을 수 있으니 신중하게 신고해주세요. 자세한 사항은 개발자 문의를 이용해주세요.',
+              confirm: '신고하기',
+              children: [
+                _choice(myState, '욕설/비방/음담패설'),
+                _choice(myState, '사행성 게시물'),
+                _choice(myState, '불법 복제/무단 도용'),
+                _choice(myState, '게시글/댓글 도배'),
+                _choice(myState, '기타'),
+              ],
+            );
+          }
+        ),
+      ),
+    );
+  }
+
+  Widget _choice(StateSetter myState, String choice) {
+    return Builder(
+      builder: (context) => InkWell(
+        onTap: () => myState(() => reportReason = choice),
+        child: Padding(
+          padding: EdgeInsets.symmetric(vertical: 10),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Container(
+                height: 24,
+                child: Text(
+                  choice,
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    color: choice == reportReason
+                        ? GuamColorFamily.purpleCore
+                        : GuamColorFamily.grayscaleGray3,
+                  ),
+                ),
+              ),
+              if (choice == reportReason)
+                IconButton(
+                  padding: EdgeInsets.only(right: 8),
+                  constraints: BoxConstraints(),
+                  icon: SvgPicture.asset('assets/icons/check.svg'),
+                  onPressed: null,
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/post_image.dart b/lib/screens/boards/posts/post_image.dart
new file mode 100644
index 00000000..aa189e2a
--- /dev/null
+++ b/lib/screens/boards/posts/post_image.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/image/image_container.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class PostImage extends StatelessWidget {
+  final String picture; /// 추후 String -> Picture model로...
+  final bool blur;
+  final int hiddenImgCnt;
+
+  PostImage({this.picture, this.blur, this.hiddenImgCnt});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Container(
+          height: double.infinity,
+          width: double.infinity,
+          child: IgnorePointer(
+            ignoring: true,
+            child: ImageThumbnail(
+              imagePath: picture, /// 추후 picture.urlPath 로...
+              height: 100,
+              width: 100,
+            ),
+          ),
+        ),
+        if (blur)
+          Container(
+            decoration: BoxDecoration(
+              color: Color.fromRGBO(120, 120, 120, 0.5),
+              borderRadius: BorderRadius.circular(8),
+            ),
+          ),
+        if (blur)
+          Center(
+            child: Text(
+              "+ $hiddenImgCnt",
+              style: TextStyle(
+                fontSize: 12,
+                color: GuamColorFamily.grayscaleWhite,
+              ),
+            ),
+          )
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/post_info.dart b/lib/screens/boards/posts/post_info.dart
new file mode 100644
index 00000000..5b66cf1b
--- /dev/null
+++ b/lib/screens/boards/posts/post_info.dart
@@ -0,0 +1,168 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/icon_text.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+import 'package:provider/provider.dart';
+
+import '../../../commons/common_img_nickname.dart';
+import '../../../providers/posts/posts.dart';
+
+class PostInfo extends StatefulWidget {
+  final Post post;
+  final double iconSize;
+  final bool showProfile;
+  final bool profileClickable;
+  final HexColor iconColor;
+
+  PostInfo({
+    this.post,
+    this.iconSize = 20,
+    this.showProfile = true,
+    this.profileClickable = true,
+    this.iconColor,
+  });
+
+  @override
+  State<PostInfo> createState() => _PostInfoState();
+}
+
+class _PostInfoState extends State<PostInfo> {
+  bool isLiked;
+  bool isScrapped;
+  int likeCount;
+  int scrapCount;
+
+  @override
+  void initState() {
+    isLiked = widget.post.isLiked;
+    isScrapped = widget.post.isScrapped;
+    likeCount = widget.post.likeCount;
+    scrapCount = widget.post.scrapCount;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final postsProvider = context.watch<Posts>();
+
+    Future likeOrUnlikePost() async {
+      try {
+        if (!isLiked) {
+          return await postsProvider.likePost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isLiked = true;
+                likeCount ++;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        } else {
+          return await postsProvider.unlikePost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isLiked = !isLiked;
+                likeCount --;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        }
+      } catch (e) {
+        print(e);
+      }
+    }
+
+    Future scrapOrUnscrapPost() async {
+      try {
+        if (!isScrapped) {
+          return await postsProvider.scrapPost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isScrapped = true;
+                scrapCount ++;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        } else {
+          return await postsProvider.unscrapPost(
+            postId: widget.post.id,
+          ).then((successful) {
+            if (successful) {
+              setState(() {
+                isScrapped = !isScrapped;
+                scrapCount --;
+              });
+            } else {
+              return postsProvider.fetchPosts(postsProvider.boardId);
+            }
+          });
+        }
+      } catch (e) {
+        print(e);
+      }
+    }
+
+    return Padding(
+      padding: EdgeInsets.only(top: 8, bottom: 12),
+      child: Row(
+        children: [
+          if (widget.showProfile)
+            CommonImgNickname(
+              imgUrl: widget.post.profile.profileImg,
+              nickname: widget.post.profile.nickname,
+              profileClickable: widget.profileClickable,
+              nicknameColor: GuamColorFamily.grayscaleGray2,
+            ),
+          if (widget.showProfile) Spacer(),
+          Row(
+            children: [
+              IconText(
+                iconSize: widget.iconSize,
+                text: likeCount.toString(),
+                iconPath: isLiked
+                    ? 'assets/icons/like_filled.svg'
+                    : 'assets/icons/like_outlined.svg',
+                onPressed: likeOrUnlikePost,
+                iconColor: isLiked
+                    ? GuamColorFamily.redCore
+                    : widget.iconColor,
+                textColor: widget.iconColor,
+              ),
+              IconText(
+                iconSize: widget.iconSize,
+                text: widget.post.commentCount.toString(),
+                iconPath: 'assets/icons/comment.svg',
+                iconColor: widget.iconColor,
+                textColor: widget.iconColor,
+              ),
+              IconText(
+                iconSize: widget.iconSize,
+                text: scrapCount.toString(),
+                iconPath: isScrapped
+                    ? 'assets/icons/scrap_filled.svg'
+                    : 'assets/icons/scrap_outlined.svg',
+                onPressed: scrapOrUnscrapPost,
+                iconColor: isScrapped
+                    ? GuamColorFamily.purpleCore
+                    : widget.iconColor,
+                textColor: widget.iconColor,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/post_list.dart b/lib/screens/boards/posts/post_list.dart
new file mode 100644
index 00000000..9ffae438
--- /dev/null
+++ b/lib/screens/boards/posts/post_list.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview.dart';
+
+import '../../../commons/sub_headings.dart';
+import '../../search/search_filter.dart';
+
+class PostList extends StatefulWidget {
+  final List<Post> posts;
+
+  PostList(this.posts);
+
+  @override
+  State<PostList> createState() => _PostListState();
+}
+
+class _PostListState extends State<PostList> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(color: GuamColorFamily.purpleLight3), // backgrounds color
+      child: Column(
+        children: [
+          Padding(
+            padding: EdgeInsets.only(top: 24, left: 22, right: 10, bottom: 12),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                SubHeadings("특별한 일이 있나요? ✨"),
+                SearchFilter(provider: context.read<Posts>()),
+              ],
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(bottom: 10),
+            child: Column(
+              children: [...widget.posts.map((post) => PostPreview(post))]
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview.dart b/lib/screens/boards/posts/preview/post_preview.dart
new file mode 100644
index 00000000..3befe2cc
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/providers/posts/posts.dart';
+import 'package:guam_community_client/screens/app/tab_item.dart';
+import 'package:guam_community_client/screens/boards/posts/detail/post_detail.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview_home_tab.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview_search_tab.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../../../providers/home/home_provider.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+
+class PostPreview extends StatelessWidget with Toast {
+  final Post post;
+
+  PostPreview(this.post);
+
+  @override
+  Widget build(BuildContext context) {
+    Posts postProvider = context.read<Posts>();
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      child: Container(
+        padding: EdgeInsets.only(left: 24, right: 24, top: 12),
+        decoration: BoxDecoration(
+          color: GuamColorFamily.grayscaleWhite,
+          borderRadius: BorderRadius.circular(24),
+        ),
+        child: InkWell(
+          onTap: () {
+            Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) => MultiProvider(
+                  providers: [
+                    ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+                    ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                  ],
+                  child: FutureBuilder(
+                    future: postProvider.getPost(post.id),
+                    builder: (_, AsyncSnapshot<Post> snapshot) {
+                      if (snapshot.hasData) {
+                        return PostDetail(snapshot.data);
+                      } else if (snapshot.hasError) {
+                        Navigator.pop(context);
+                        postProvider.fetchPosts(0);
+                        showToast(success: false, msg: '게시글을 찾을 수 없습니다.');
+                        return null;
+                      } else {
+                        return Center(child: guamProgressIndicator());
+                      }
+                    }
+                  ),
+                ),
+              ),
+            );
+          },
+          child: TabItem.values[context.read<HomeProvider>().idx] == TabItem.search
+              ? PostPreviewSearchTab(post)
+              : PostPreviewHomeTab(post)
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_board_type.dart b/lib/screens/boards/posts/preview/post_preview_board_type.dart
new file mode 100644
index 00000000..f3ecc5b4
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_board_type.dart
@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class PostPreviewBoardType extends StatelessWidget {
+  final String boardType;
+
+  PostPreviewBoardType(this.boardType);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      boardType,
+      style: TextStyle(
+        fontSize: 12,
+        height: 19.2/12,
+        fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+        color: GuamColorFamily.grayscaleGray4,
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_category.dart b/lib/screens/boards/posts/preview/post_preview_category.dart
new file mode 100644
index 00000000..5c811eca
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_category.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/color_of_category.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+
+class PostPreviewCategory extends StatelessWidget {
+  final Post post;
+
+  PostPreviewCategory(this.post);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 17,
+      child: TextButton(
+        onPressed: null,
+        child: Text(
+          "#" + post.category.title,
+          style: TextStyle(
+            fontSize: 12,
+            color: colorOfCategory(post.category.title),
+          ),
+        ),
+        style: TextButton.styleFrom(
+          padding: EdgeInsets.zero,
+          alignment: Alignment.centerLeft,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_content.dart b/lib/screens/boards/posts/preview/post_preview_content.dart
new file mode 100644
index 00000000..d4e1adf1
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_content.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class PostPreviewContent extends StatelessWidget {
+  final String content;
+
+  PostPreviewContent(this.content);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      content,
+      maxLines: 4,
+      overflow: TextOverflow.ellipsis,
+      style: TextStyle(
+        height: 20.8/13,
+        fontSize: 13,
+        fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+        color: GuamColorFamily.grayscaleGray3,
+      ),
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_home_tab.dart b/lib/screens/boards/posts/preview/post_preview_home_tab.dart
new file mode 100644
index 00000000..1779648c
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_home_tab.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview_category.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+import './post_preview_board_type.dart';
+import './post_preview_content.dart';
+import './post_preview_relative_time.dart';
+import './post_preview_title.dart';
+import '../post_info.dart';
+
+class PostPreviewHomeTab extends StatelessWidget {
+  final Post post;
+  final bool isAnonymous;
+
+  PostPreviewHomeTab(this.post) : this.isAnonymous = post.boardType == '익명게시판';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            this.isAnonymous
+                ? PostPreviewBoardType(this.post.boardType)
+                : post.category != null
+                    ? PostPreviewCategory(post)
+                    : Container(),
+            Spacer(),
+            PostPreviewRelativeTime(DateTime.parse(this.post.createdAt)),
+          ],
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(vertical: 8),
+          child: CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        ),
+        Row(
+          children: [
+            if (post.imagePaths.isNotEmpty)
+              IconButton(
+                onPressed: null,
+                padding: EdgeInsets.only(right: 4),
+                constraints: BoxConstraints(),
+                icon: SvgPicture.asset(
+                  'assets/icons/picture.svg',
+                  color: GuamColorFamily.grayscaleGray5,
+                  width: 20,
+                  height: 20,
+                ),
+              ),
+            PostPreviewTitle(this.post.title),
+          ],
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(vertical: 4),
+          child: PostPreviewContent(this.post.content),
+        ),
+        PostInfo(
+          post: post,
+          iconColor: GuamColorFamily.grayscaleGray5,
+          profileClickable: false,
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_relative_time.dart b/lib/screens/boards/posts/preview/post_preview_relative_time.dart
new file mode 100644
index 00000000..c586cc0c
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_relative_time.dart
@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:jiffy/jiffy.dart';
+
+class PostPreviewRelativeTime extends StatelessWidget {
+  final DateTime t;
+
+  PostPreviewRelativeTime(this.t);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      Jiffy(t).fromNow(),
+      style: TextStyle(
+      fontSize: 10,
+      fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+      color: GuamColorFamily.grayscaleGray4,
+      )
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_search_tab.dart b/lib/screens/boards/posts/preview/post_preview_search_tab.dart
new file mode 100644
index 00000000..7ca9c818
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_search_tab.dart
@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/models/boards/post.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview_category.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+import '../post_info.dart';
+import './post_preview_board_type.dart';
+import './post_preview_relative_time.dart';
+import './post_preview_content.dart';
+import './post_preview_title.dart';
+
+class PostPreviewSearchTab extends StatelessWidget {
+  final Post post;
+  final bool isAnonymous;
+
+  PostPreviewSearchTab(this.post):
+        this.isAnonymous = post.boardType == '익명게시판';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            if (post.imagePaths.isNotEmpty)
+              IconButton(
+                onPressed: null,
+                padding: EdgeInsets.only(right: 4),
+                constraints: BoxConstraints(),
+                icon: SvgPicture.asset(
+                  'assets/icons/picture.svg',
+                  color: GuamColorFamily.grayscaleGray5,
+                  width: 20,
+                  height: 20,
+                ),
+              ),
+            PostPreviewTitle(this.post.title),
+          ],
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(vertical: 8),
+          child: CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        ),
+        if (!this.isAnonymous && post.category != null) PostPreviewCategory(post),
+        Padding(
+          padding: EdgeInsets.symmetric(vertical: 4),
+          child: PostPreviewContent(this.post.content),
+        ),
+        Row(
+          children: [
+            PostPreviewBoardType(this.post.boardType),
+            Spacer(),
+            PostPreviewRelativeTime(DateTime.parse(this.post.createdAt)),
+          ],
+        ),
+        PostInfo(
+          post: post,
+          iconColor: GuamColorFamily.grayscaleGray5,
+          profileClickable: false,
+        )
+      ],
+    );
+  }
+}
diff --git a/lib/screens/boards/posts/preview/post_preview_title.dart b/lib/screens/boards/posts/preview/post_preview_title.dart
new file mode 100644
index 00000000..a342e186
--- /dev/null
+++ b/lib/screens/boards/posts/preview/post_preview_title.dart
@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class PostPreviewTitle extends StatelessWidget {
+  final String title;
+
+  PostPreviewTitle(this.title);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      title,
+      style: TextStyle(fontSize: 14),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+    );
+  }
+}
diff --git a/lib/screens/login/login_button.dart b/lib/screens/login/login_button.dart
new file mode 100644
index 00000000..d2095610
--- /dev/null
+++ b/lib/screens/login/login_button.dart
@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class LoginButton extends StatelessWidget {
+  final String logo;
+  final String platform;
+  final HexColor color;
+  final Function onTap;
+
+  LoginButton(this.logo, this.platform, this.color, this.onTap);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(bottom: 16),
+      child: InkWell(
+        // onTap: () => Navigator.of(context).push(
+        //   MaterialPageRoute(builder: (_) => SignUp()),
+        // ),
+        onTap: onTap,
+        child: Container(
+          alignment: Alignment.center,
+          height: 56,
+          width: MediaQuery.of(context).size.width * 0.9,
+          decoration: BoxDecoration(
+            color: color,
+            borderRadius: BorderRadius.all(Radius.circular(10)),
+            border: Border.all(color: GuamColorFamily.grayscaleGray6, width: 1),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              IconButton(
+                onPressed: null,
+                padding: EdgeInsets.only(right: 8),
+                constraints: BoxConstraints(),
+                icon: SvgPicture.asset('assets/logos/$logo.svg'),
+              ),
+              Text(
+                platform,
+                style: TextStyle(
+                  color: GuamColorFamily.grayscaleGray1,
+                  fontSize: 16,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/login/login_buttons.dart b/lib/screens/login/login_buttons.dart
new file mode 100644
index 00000000..c6b1f84d
--- /dev/null
+++ b/lib/screens/login/login_buttons.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'login_button.dart';
+import '../user_auth/kakao_login.dart';
+
+class LoginButtons extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        KakaoLogin(),
+        // LoginButton('google_logo', '구글로 시작하기', GuamColorFamily.grayscaleWhite, () {}),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/login/login_page.dart b/lib/screens/login/login_page.dart
new file mode 100644
index 00000000..13f8a796
--- /dev/null
+++ b/lib/screens/login/login_page.dart
@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/screens/app/splash/splash_text.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:hexcolor/hexcolor.dart';
+import 'login_buttons.dart';
+
+class LoginPage extends StatelessWidget {
+  @override Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+
+    return Scaffold(
+      body: Stack(
+        alignment: Alignment.topCenter,
+        children: [
+          Container(
+            width: double.infinity,
+            height: double.infinity,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                fit: BoxFit.fitWidth,
+                alignment: Alignment.bottomCenter,
+                image: AssetImage('assets/backgrounds/back_0.75x.png'),
+              ),
+            ),
+          ),
+          Container(
+            width: double.infinity,
+            height: double.infinity,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                fit: BoxFit.fitWidth,
+                alignment: Alignment.bottomCenter,
+                image: AssetImage('assets/backgrounds/front_0.75x.png'),
+              ),
+            ),
+            child: Stack(
+              children: [
+                // 위에서부터 아래로 star 배치
+                _star(
+                  width: 26, height: 26, // size of star
+                  top: size.height*0.12, left: size.width*0.24, // position of star (iPhone 13 : 375x812)
+                  color: GuamColorFamily.purpleDark1,
+                ),
+                _star(
+                  width: 32, height: 32,
+                  top: size.height*0.19, left: size.width*0.88,
+                  color: GuamColorFamily.purpleCore,
+                ),
+                _star(
+                  width: 25, height: 25,
+                  top: size.height*0.32, left: size.width*0.42,
+                  color: GuamColorFamily.purpleLight1,
+                ),
+                _star(
+                  width: 25, height: 25,
+                  top: size.height*0.50, left: size.width*0.76,
+                  color: GuamColorFamily.purpleLight2,
+                ),
+                _star(
+                  width: 32, height: 32,
+                  top: size.height*0.57, left: size.width*0.16,
+                  color: GuamColorFamily.purpleLight2,
+                ),
+                _star(
+                  width: 25, height: 25,
+                  top: size.height*0.68, left: size.width*0.57,
+                  color: GuamColorFamily.purpleLight3,
+                ),
+                SplashText(animation: false),
+              ],
+            ),
+          ),
+          Positioned(
+            top: size.height*0.75,
+            child: LoginButtons(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _star({double top, double left, double width, double height, HexColor color}){
+    return Positioned(
+      top: top,
+      left: left,
+      child: Container(
+        width: width,
+        height: height,
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: SvgProvider(
+              'assets/backgrounds/splash/star_splash.svg',
+              color: color,
+            ),
+          ),
+        )
+      ),
+    );
+  }
+}
diff --git a/lib/screens/login/signup/interest_choice_chip.dart b/lib/screens/login/signup/interest_choice_chip.dart
new file mode 100644
index 00000000..287bd539
--- /dev/null
+++ b/lib/screens/login/signup/interest_choice_chip.dart
@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class InterestChoiceChip extends StatefulWidget {
+  final List<String> interestOptions;
+  final List<String> interestList;
+  final Function(List<String>) onSelectionChanged;
+
+  InterestChoiceChip({this.interestOptions, this.interestList, this.onSelectionChanged});
+
+  @override
+  _InterestChoiceChipState createState() => _InterestChoiceChipState();
+}
+
+class _InterestChoiceChipState extends State<InterestChoiceChip> {
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      children: _buildChoiceList(),
+    );
+  }
+
+  _buildChoiceList() {
+    List<Widget> choices = [];
+    List<String> selectedInterests = widget.interestList;
+
+    widget.interestOptions.forEach((interest) {
+      choices.add(
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+          child: ChoiceChip(
+            label: Container(
+              width: double.infinity,
+              padding: EdgeInsets.zero,
+              alignment: Alignment.center,
+              constraints: BoxConstraints(maxHeight: 40),
+              child: Text(
+                interest,
+                style: TextStyle(
+                  fontSize: 16,
+                  color: selectedInterests.contains(interest)
+                      ? GuamColorFamily.purpleCore
+                      : GuamColorFamily.grayscaleGray2,
+                ),
+              ),
+            ),
+            selected: selectedInterests.contains(interest),
+            selectedColor: GuamColorFamily.purpleLight2,
+            backgroundColor: GuamColorFamily.grayscaleWhite,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(30),
+              side: BorderSide(
+                color: selectedInterests.contains(interest)
+                    ? GuamColorFamily.purpleCore
+                    : GuamColorFamily.grayscaleGray6
+              ),
+            ),
+            onSelected: (selected) {
+              setState(() {
+                selectedInterests.contains(interest)
+                    ? selectedInterests.remove(interest)
+                    : selectedInterests.add(interest);
+                widget.onSelectionChanged(selectedInterests);
+              });
+            },
+          ),
+        )
+      );
+    });
+    return choices;
+  }
+}
diff --git a/lib/screens/login/signup/signup.dart b/lib/screens/login/signup/signup.dart
new file mode 100644
index 00000000..6f064283
--- /dev/null
+++ b/lib/screens/login/signup/signup.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/next_button.dart';
+import 'package:guam_community_client/screens/login/signup/signup_nickname.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../../providers/user_auth/authenticate.dart';
+
+class SignUp extends StatefulWidget {
+  @override
+  _SignUpState createState() => _SignUpState();
+}
+
+class _SignUpState extends State<SignUp> {
+  Map<String, dynamic> input = {};
+  int pageIdx = 0;
+
+
+  @override
+  Widget build(BuildContext context) {
+    List pages = [
+      SignupNickname(input)
+    ];
+
+    Size size = MediaQuery.of(context).size;
+
+    Future signUp() async {
+      await context.read<Authenticate>().setProfile(fields: input);
+    }
+
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      body: SingleChildScrollView(
+        child: Container(
+          width: double.infinity,
+          height: size.height,
+          color: GuamColorFamily.grayscaleWhite,
+          padding: EdgeInsets.only(left: 16, top: size.height*0.11, right: 16),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              pages[pageIdx],
+              Padding(
+                padding: EdgeInsets.only(bottom: 40),
+                child: NextButton(
+                  label: pageIdx < pages.length - 1 ? '다음' : '시작',
+                  onTap: pageIdx < pages.length - 1 ? pageIdx++ : signUp
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/login/signup/signup_interest.dart b/lib/screens/login/signup/signup_interest.dart
new file mode 100644
index 00000000..b09e18e9
--- /dev/null
+++ b/lib/screens/login/signup/signup_interest.dart
@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/screens/login/signup/interest_choice_chip.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+
+class SignupInterest extends StatefulWidget {
+  final Map input;
+
+  SignupInterest(this.input);
+
+  @override
+  State<SignupInterest> createState() => _SignupInterestState();
+}
+
+class _SignupInterestState extends State<SignupInterest> {
+  final List<String> interestOptions = [
+    '🛠 개발', '📈 데이터분석', '🎨 디자인','📝 기획/마케팅', '🎁 기타',
+  ];
+  Map results = {};
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        IconButton(
+          onPressed: null,
+          padding: EdgeInsets.all(4.67),
+          constraints: BoxConstraints(),
+          icon: SvgPicture.asset('assets/icons/baloon.svg'),
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 10),
+          child: Text(
+            '관심사를 모두 선택해주세요.',
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 24,
+              color: GuamColorFamily.grayscaleGray1,
+            ),
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 8),
+          child: Text(
+            '맞춤형 피드를 위해 관심사를 알려주세요.',
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 18,
+              color: GuamColorFamily.grayscaleGray3,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+          ),
+        ),
+        _selectInterests(interestOptions, size)
+      ],
+    );
+  }
+
+  Widget _selectInterests(List<String> interestOptions, Size size) {
+    return Container(
+      width: size.width,
+      padding: EdgeInsets.only(top: 80),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          InterestChoiceChip(
+            interestList: widget.input['interest'].cast<String>(), // convert List<dynamic> to List<String>
+            interestOptions: interestOptions,
+            onSelectionChanged: (selectedList) {
+              setState(() => widget.input['interest'] = selectedList);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/login/signup/signup_nickname.dart b/lib/screens/login/signup/signup_nickname.dart
new file mode 100644
index 00000000..244e5976
--- /dev/null
+++ b/lib/screens/login/signup/signup_nickname.dart
@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class SignupNickname extends StatefulWidget {
+  final Map input;
+
+  SignupNickname(this.input);
+
+  @override
+  State<SignupNickname> createState() => _SignupNicknameState();
+}
+
+class _SignupNicknameState extends State<SignupNickname> {
+  final _nicknameTextFieldController = TextEditingController();
+
+  @override
+  void initState() {
+    _nicknameTextFieldController.text = widget.input['nickname'];
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _nicknameTextFieldController.dispose();
+    super.dispose();
+  }
+
+  void _setNickname(String nickname) =>
+      setState(() => widget.input['nickname'] = nickname);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        IconButton(
+          onPressed: null,
+          padding: EdgeInsets.all(4.67),
+          constraints: BoxConstraints(),
+          icon: SvgPicture.asset('assets/icons/baloon.svg'),
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 10),
+          child: Text(
+            'IT인들의 괌에\n오신 것을 환영합니다!',
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 24,
+              color: GuamColorFamily.grayscaleGray1,
+            ),
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 8),
+          child: Text(
+            '사용하실 닉네임을\n10자 이내로 입력해주세요.',
+            style: TextStyle(
+              height: 1.6,
+              fontSize: 18,
+              color: GuamColorFamily.grayscaleGray3,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+          ),
+        ),
+        TextField(
+          style: TextStyle(fontSize: 16),
+          keyboardType: TextInputType.name,
+          controller: _nicknameTextFieldController,
+          minLines: 1,
+          maxLength: widget.input['nickname'] == '' ? null : 10,
+          onChanged: (e) {
+            _setNickname(_nicknameTextFieldController.text);
+            // _checkButtonEnable();
+          },
+          cursorColor: GuamColorFamily.purpleCore,
+          decoration: InputDecoration(
+            hintText: "ex) 크로플보다와플",
+            hintStyle: TextStyle(
+              fontSize: 16,
+              color: GuamColorFamily.grayscaleGray4,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            ),
+            counterStyle: TextStyle(
+              color: GuamColorFamily.purpleCore,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              fontSize: 12,
+            ),
+            errorBorder: InputBorder.none,
+            disabledBorder: InputBorder.none,
+            border: UnderlineInputBorder(borderSide: BorderSide(color: GuamColorFamily.purpleCore)),
+            focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: GuamColorFamily.purpleCore)),
+            enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: GuamColorFamily.grayscaleGray5)),
+            contentPadding: EdgeInsets.only(left: 14, top: 77, bottom: 13),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/messages/message_body.dart b/lib/screens/messages/message_body.dart
new file mode 100644
index 00000000..21abf7fb
--- /dev/null
+++ b/lib/screens/messages/message_body.dart
@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/commons/custom_app_bar.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/screens/messages/message_box_edit.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+
+import '../../commons/guam_progress_indicator.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'message_preview.dart';
+
+class MessageBody extends StatefulWidget {
+  @override
+  State<MessageBody> createState() => _MessageBodyState();
+}
+
+class _MessageBodyState extends State<MessageBody> with Toast {
+  List _messageBoxes = [];
+  bool _isFirstLoadRunning = false;
+  ScrollController _scrollController = ScrollController();
+
+  void _firstLoad() async {
+    setState(() => _isFirstLoadRunning = true);
+    try {
+      await context.read<Messages>().fetchMessageBoxes();
+      _messageBoxes = context.read<Messages>().messageBoxes;
+    } catch (err) {
+      print('알 수 없는 오류가 발생했습니다.');
+    }
+    setState(() => _isFirstLoadRunning = false);
+  }
+
+  @override
+  void initState() {
+    _firstLoad();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        title: '쪽지함',
+        leading: Back(),
+        trailing: Padding(
+          padding: EdgeInsets.only(right: 14),
+          child: IconButton(
+            padding: EdgeInsets.zero,
+            constraints: BoxConstraints(),
+            icon: SvgPicture.asset('assets/icons/delete_outlined.svg'),
+            onPressed: (_messageBoxes == null || _messageBoxes.isEmpty)
+                ? null
+                : () => Navigator.of(context, rootNavigator: true).push(
+                PageRouteBuilder(
+                  pageBuilder: (_, __, ___) => MultiProvider(
+                    providers: [
+                      ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                    ],
+                    child: MessageBoxEdit(onRefresh: _firstLoad),
+                  ),
+                  transitionDuration: Duration(seconds: 0),
+                )
+            ),
+          ),
+        ),
+      ),
+      body: _isFirstLoadRunning
+          ? Center(child: guamProgressIndicator())
+          : RefreshIndicator(
+              onRefresh: () async => _firstLoad(),
+              color: Color(0xF9F8FFF), // GuamColorFamily.purpleLight1
+              child: Container(
+                height: double.infinity,
+                color: GuamColorFamily.grayscaleWhite,
+                padding: EdgeInsets.only(top: 18),
+                child: SingleChildScrollView(
+                  controller: _scrollController,
+                  physics: AlwaysScrollableScrollPhysics(),
+                  child: Column(
+                    children: [
+                      if (_messageBoxes == null || _messageBoxes.isEmpty)
+                        Center(
+                          child: Padding(
+                            padding: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.1),
+                            child: Text(
+                              '쪽지함이 비어있습니다.',
+                              style: TextStyle(
+                                fontSize: 16,
+                                color: GuamColorFamily.grayscaleGray4,
+                                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                              ),
+                            ),
+                          ),
+                        ),
+                      if (_messageBoxes != null && _messageBoxes.isNotEmpty)
+                        ..._messageBoxes.reversed.map((messageBox) => MessagePreview(messageBox, onRefresh: _firstLoad)
+                      )
+                    ]
+                  ),
+                ),
+              ),
+            ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_bottom_modal.dart b/lib/screens/messages/message_bottom_modal.dart
new file mode 100644
index 00000000..259d31bd
--- /dev/null
+++ b/lib/screens/messages/message_bottom_modal.dart
@@ -0,0 +1,132 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/commons/image/image_container.dart';
+import 'package:guam_community_client/helpers/pick_image.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:image_picker/image_picker.dart';
+
+class MessageBottomModal extends StatefulWidget {
+  final Map input;
+
+  MessageBottomModal(this.input);
+
+  @override
+  _MessageBottomModalState createState() => _MessageBottomModalState();
+}
+
+class _MessageBottomModalState extends State<MessageBottomModal> {
+  final _messageTextFieldController = TextEditingController();
+  Map input;
+
+  @override
+  void initState() {
+    super.initState();
+    input = widget.input;
+    input['image'] = [];
+  }
+
+  @override
+  void dispose() {
+    input['image'].clear();
+    _messageTextFieldController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double maxImgSize = 80;
+
+    Future<void> setImageFile(PickedFile val) async {
+      setState(() {
+        if (val != null) widget.input['image'].add(val);
+      });
+    }
+
+    Future<void> deleteImageFile() async {
+      setState(() => widget.input['image'].removeAt(0));
+    }
+
+    return Container(
+      decoration: BoxDecoration(
+        color: GuamColorFamily.grayscaleGray7,
+        borderRadius: BorderRadius.circular(5),
+        border: Border.all(color: GuamColorFamily.grayscaleGray6, width: 1),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          TextField(
+            keyboardType: TextInputType.multiline,
+            controller: _messageTextFieldController,
+            onChanged: (e) => widget.input['text'] = e,
+            maxLines: 4,
+            maxLength: 200,
+            style: TextStyle(fontSize: 14, height: 1.6, color: GuamColorFamily.grayscaleGray2),
+            decoration: InputDecoration(
+              hintText: "내용을 입력해주세요.",
+              hintStyle: TextStyle(fontSize: 14, color: GuamColorFamily.grayscaleGray5),
+              border: InputBorder.none,
+              focusedBorder: InputBorder.none,
+              enabledBorder: InputBorder.none,
+              errorBorder: InputBorder.none,
+              disabledBorder: InputBorder.none,
+              contentPadding: EdgeInsets.all(16),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(left: 16, bottom: 16),
+            child: widget.input['image'].length == 0
+                ? SizedBox(
+              height: maxImgSize,
+              width: maxImgSize,
+              child: Container(
+                decoration: BoxDecoration(
+                  color: GuamColorFamily.grayscaleGray6,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: IconButton(
+                  iconSize: 24,
+                  padding: EdgeInsets.zero,
+                  constraints: BoxConstraints(),
+                  icon: SvgPicture.asset(
+                    'assets/icons/plus.svg',
+                    color: GuamColorFamily.purpleLight1,
+                  ),
+                  onPressed: () => pickImage(type: 'gallery')
+                      .then((img) => setImageFile(img)),
+                ),
+              ),
+            )
+                : Stack(
+              children: [
+                Container(
+                  child: ImageThumbnail(
+                    width: maxImgSize,
+                    height: maxImgSize,
+                    image: Image(
+                      image: FileImage(File(widget.input['image'][0].path)),
+                      fit: BoxFit.fill,
+                    ),
+                  ),
+                ),
+                Positioned(
+                  top: 2,
+                  right: 2,
+                  child: IconButton(
+                    iconSize: 23,
+                    padding: EdgeInsets.zero,
+                    constraints: BoxConstraints(),
+                    icon: SvgPicture.asset('assets/icons/cancel_filled.svg'),
+                    onPressed: () => deleteImageFile(),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_box.dart b/lib/screens/messages/message_box.dart
new file mode 100644
index 00000000..7e2880f5
--- /dev/null
+++ b/lib/screens/messages/message_box.dart
@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../../providers/user_auth/authenticate.dart';
+import 'message_body.dart';
+
+class MessageBox extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+      ],
+      child: MessageBoxScaffold(),
+    );
+  }
+}
+
+class MessageBoxScaffold extends StatefulWidget {
+  @override
+  State<MessageBoxScaffold> createState() => _MessageBoxScaffoldState();
+}
+
+class _MessageBoxScaffoldState extends State<MessageBoxScaffold> {
+  final bool newMessage = true;
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+    Messages msgProvider = context.read<Messages>();
+
+    return Padding(
+      padding: EdgeInsets.only(right: 4),
+      child: IconButton(
+        icon: SvgPicture.asset(
+          newMessage
+            ? 'assets/icons/message_new.svg'
+            : 'assets/icons/message_default.svg'
+        ),
+        onPressed: () async {
+          await msgProvider.fetchMessageBoxes();
+          Navigator.of(context, rootNavigator: true).push(
+            MaterialPageRoute(builder: (_) => MultiProvider(
+              providers: [
+                ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+              ],
+              child: MessageBody(),
+            ))
+          );
+        }
+      ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_box_edit.dart b/lib/screens/messages/message_box_edit.dart
new file mode 100644
index 00000000..601fecc7
--- /dev/null
+++ b/lib/screens/messages/message_box_edit.dart
@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/custom_app_bar.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import '../../commons/guam_progress_indicator.dart';
+import '../../providers/messages/messages.dart';
+import 'message_preview.dart';
+
+class MessageBoxEdit extends StatefulWidget {
+  final Function onRefresh;
+
+  MessageBoxEdit({this.onRefresh});
+
+  @override
+  State<MessageBoxEdit> createState() => _MessageBoxEditState();
+}
+
+class _MessageBoxEditState extends State<MessageBoxEdit> {
+  List _messageBoxes = [];
+  bool _isFirstLoadRunning = false;
+
+  void _firstLoad() async {
+    setState(() => _isFirstLoadRunning = true);
+    try {
+      await context.read<Messages>().fetchMessageBoxes();
+      _messageBoxes = context.read<Messages>().messageBoxes;
+    } catch (err) {
+      print(err);
+      print('알 수 없는 오류가 발생했습니다.');
+    }
+    setState(() => _isFirstLoadRunning = false);
+  }
+
+  @override
+  void initState() {
+    _firstLoad();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        title: '쪽지함',
+        leading: null,
+        trailing: Padding(
+          padding: EdgeInsets.only(right: 11),
+          child: TextButton(
+            child: Text(
+              '완료',
+              style: TextStyle(
+                fontSize: 16,
+                color: GuamColorFamily.purpleCore,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+              ),
+            ),
+            onPressed: () {
+              widget.onRefresh();
+              Navigator.pop(context);
+            },
+          )
+        ),
+      ),
+      body: _isFirstLoadRunning ? Container(
+        color: GuamColorFamily.grayscaleWhite,
+        child: Center(child: guamProgressIndicator()),
+      ) : Container(
+        color: GuamColorFamily.grayscaleWhite,
+        padding: EdgeInsets.only(top: 18),
+        child: Column(
+          children: [
+            ..._messageBoxes.reversed.map((messageBox) => MessagePreview(
+              messageBox,
+              onRefresh: widget.onRefresh,
+              editable: true,
+            ))
+          ]
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_detail.dart b/lib/screens/messages/message_detail.dart
new file mode 100644
index 00000000..0aa7c0cd
--- /dev/null
+++ b/lib/screens/messages/message_detail.dart
@@ -0,0 +1,191 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_mentions/flutter_mentions.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_default.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_with_alert.dart';
+import 'package:guam_community_client/commons/common_text_field.dart';
+import 'package:guam_community_client/commons/custom_app_bar.dart';
+import 'package:guam_community_client/models/messages/message.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+
+import '../../commons/guam_progress_indicator.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'message_detail_body.dart';
+
+class MessageDetail extends StatefulWidget {
+  final List<Message> messages;
+  final Profile otherProfile;
+  final Function onRefresh;
+
+  MessageDetail(this.messages, this.otherProfile, this.onRefresh);
+
+  @override
+  State<MessageDetail> createState() => _MessageDetailState();
+}
+
+class _MessageDetailState extends State<MessageDetail> {
+  List<Message> _messages;
+  bool commentImageExist = false;
+  bool _isFirstLoadRunning = false;
+
+  void addMessageImage() {
+    setState(() => commentImageExist = true);
+  }
+
+  void removeMessageImage() {
+    setState(() => commentImageExist = false);
+  }
+
+  void _refreshMsg() async {
+    setState(() => _isFirstLoadRunning = true);
+    await context.read<Messages>().getMessages(widget.otherProfile.id);
+    _messages = context.read<Messages>().messages;
+    setState(() => _isFirstLoadRunning = false);
+  }
+
+  @override
+  void initState() {
+    _refreshMsg();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Messages msgProvider = context.read<Messages>();
+    Authenticate authProvider = context.read<Authenticate>();
+
+    Future sendMessage({Map<String, dynamic> fields, List<File> files}) async {
+      bool msgSended = false;
+      try {
+        await msgProvider.sendMessage(
+          fields: fields,
+          files: files,
+        ).then((successful) {
+          if (successful) {
+            msgSended = true;
+            _refreshMsg(); /// 쪽지 페이지 갱신
+            widget.onRefresh(); /// 쪽지함 페이지 갱신
+          } else {
+            print("Error!");
+          }
+        });
+      } catch (e) {
+        print(e);
+      }
+      return msgSended;
+    }
+
+    return _isFirstLoadRunning ? Container(
+      color: GuamColorFamily.grayscaleWhite,
+      child: Center(child: guamProgressIndicator()),
+    ) : Portal(
+      child: Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          title: widget.otherProfile.nickname,
+          leading: Back(),
+          trailing: Padding(
+            padding: EdgeInsets.only(right: 11),
+            child: IconButton(
+              padding: EdgeInsets.zero,
+              constraints: BoxConstraints(),
+              icon: SvgPicture.asset('assets/icons/more.svg'),
+              onPressed: () => showMaterialModalBottomSheet(
+                context: context,
+                useRootNavigator: true,
+                backgroundColor: GuamColorFamily.grayscaleWhite,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(20),
+                    topRight: Radius.circular(20),
+                  )
+                ),
+                builder: (context) => MultiProvider(
+                  providers: [
+                    ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                  ],
+                  child: Builder(
+                    builder: (context) {
+                      return SingleChildScrollView(
+                        child: Container(
+                          padding: EdgeInsets.only(left: 24, top: 24, bottom: 21),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              BottomModalWithAlert(
+                                funcName: '삭제하기',
+                                title: '쪽지함을 삭제하시겠어요?',
+                                body: '삭제된 쪽지는 복원할 수 없습니다.',
+                                func: () async => await context.read<Messages>()
+                                    .deleteMessageBox(widget.otherProfile.id)
+                                    .then((successful) async {
+                                  if (successful) {
+                                    widget.onRefresh(); /// 쪽지함 페이지 갱신
+                                    Navigator.pop(context);
+                                    Navigator.pop(context);
+                                    Navigator.pop(context);
+                                    await context.read<Messages>().fetchMessageBoxes();
+                                  }
+                                }),
+                              ),
+                              // BottomModalDefault(
+                              //   text: '신고하기',
+                              //   onPressed: (){},
+                              // ),
+                              // BottomModalDefault(
+                              //   text: '차단하기',
+                              //   onPressed: (){},
+                              // ),
+                            ],
+                          ),
+                        ),
+                      );
+                    }
+                  )
+                )
+              ),
+            ),
+          ),
+        ),
+        body: RefreshIndicator(
+          color: Color(0xF9F8FFF), // GuamColorFamily.purpleLight1
+          onRefresh: () async => _refreshMsg(),
+          child: Container(
+            height: double.infinity,
+            child: SingleChildScrollView(
+              physics: AlwaysScrollableScrollPhysics(),
+              child: Padding(
+                padding: EdgeInsets.only(bottom: 70),
+                child: Column(
+                  children: [
+                    ..._messages.map((msg) => MessageDetailBody(msg, widget.otherProfile))
+                  ]
+                ),
+              ),
+            ),
+          ),
+        ),
+        bottomSheet: Container(
+          padding: EdgeInsets.only(bottom: 10),
+          color: GuamColorFamily.grayscaleWhite,
+          child: CommonTextField(
+            messageTo: widget.otherProfile.id,
+            sendButton: '전송',
+            onTap: sendMessage,
+            mentionList: [],
+            addImage: addMessageImage,
+            removeImage: removeMessageImage,
+            editTarget: null,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_detail_body.dart b/lib/screens/messages/message_detail_body.dart
new file mode 100644
index 00000000..812c57df
--- /dev/null
+++ b/lib/screens/messages/message_detail_body.dart
@@ -0,0 +1,121 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/models/messages/message.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:jiffy/jiffy.dart';
+import 'package:provider/provider.dart';
+
+import '../../commons/custom_divider.dart';
+import '../../commons/image/image_carousel.dart';
+import '../../models/profiles/profile.dart';
+import '../../providers/user_auth/authenticate.dart';
+
+class MessageDetailBody extends StatelessWidget {
+  final Message message;
+  final Profile otherProfile;
+
+  MessageDetailBody(this.message, this.otherProfile);
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+    bool isMe = message.sentBy == authProvider.me.id;
+    Profile sentBy = isMe ? authProvider.me : otherProfile;
+
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Container(
+                width: 24,
+                height: 24,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  image: DecorationImage(
+                    fit: BoxFit.cover,
+                    image: sentBy.profileImg != null
+                        ? NetworkImage(HttpRequest().s3BaseAuthority + sentBy.profileImg)
+                        : SvgProvider('assets/icons/profile_image.svg')
+                  ),
+                ),
+              ),
+              Padding(
+                padding: EdgeInsets.only(left: 6),
+                child: Text(
+                  isMe ? sentBy.nickname + ' (나)': sentBy.nickname,
+                  style: TextStyle(
+                    fontSize: 12,
+                    fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    color: isMe
+                        ? GuamColorFamily.purpleCore
+                        : GuamColorFamily.grayscaleGray2,
+                  ),
+                ),
+              ),
+              Spacer(),
+              Text(
+                Jiffy(message.createdAt).fromNow(),
+                style: TextStyle(
+                  fontSize: 12,
+                  fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                  color: GuamColorFamily.grayscaleGray4,
+                ),
+              ),
+            ],
+          ),
+          Padding(
+            padding: EdgeInsets.only(left: 10, top: 8, bottom: 10),
+            child: Text(
+              message.text,
+              style: TextStyle(
+                height: 1.6,
+                fontSize: 13,
+                color: GuamColorFamily.grayscaleGray2,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              ),
+            ),
+          ),
+          if (message.imagePath != null)
+            InkWell(
+              child: Padding(
+                padding: EdgeInsets.only(left: 5),
+                child: Container(
+                  width: 80,
+                  height: 80,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(8),
+                    image: DecorationImage(
+                      fit: BoxFit.cover,
+                      image: NetworkImage(
+                          HttpRequest().s3BaseAuthority + message.imagePath),
+                    ),
+                  ),
+                ),
+              ),
+              onTap: () {
+                Navigator.of(context, rootNavigator: true).push(
+                  MaterialPageRoute(
+                    builder: (_) => ImageCarousel(
+                      pictures: [message.imagePath],
+                      initialPage: 0,
+                      showImageCount: false,
+                      showImageActions: true,
+                    ),
+                  ),
+                );
+              },
+            ),
+          Padding(
+            padding: EdgeInsets.only(top: 8),
+            child: CustomDivider(color: GuamColorFamily.grayscaleGray7),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/messages/message_preview.dart b/lib/screens/messages/message_preview.dart
new file mode 100644
index 00000000..72b7b07e
--- /dev/null
+++ b/lib/screens/messages/message_preview.dart
@@ -0,0 +1,196 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/messages/message.dart' as Message;
+import 'package:guam_community_client/models/messages/message_box.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:jiffy/jiffy.dart';
+import 'package:provider/provider.dart';
+
+import '../../commons/bottom_modal/bottom_modal_with_alert.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'message_detail.dart';
+
+class MessagePreview extends StatefulWidget {
+  final MessageBox messageBox;
+  final Function onRefresh;
+  final bool editable;
+
+  MessagePreview(this.messageBox, {this.onRefresh, this.editable=false});
+
+  @override
+  State<MessagePreview> createState() => _MessagePreviewState();
+}
+
+class _MessagePreviewState extends State<MessagePreview> with Toast {
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 6),
+      child: Card(
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+          side: BorderSide(color: GuamColorFamily.grayscaleGray7, width: 1.5),
+        ),
+        child: Container(
+          padding: EdgeInsets.only(left: 12, top: 6, bottom: 6),
+          child: InkWell(
+            onTap: !widget.editable ? () => Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) => MultiProvider(
+                  providers: [
+                    ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                  ],
+                  child: FutureBuilder(
+                    future: context.read<Messages>().getMessages(widget.messageBox.otherProfile.id),
+                    builder: (_, AsyncSnapshot<List<Message.Message>> snapshot) {
+                      if (snapshot.hasData) {
+                        return MessageDetail(snapshot.data, widget.messageBox.otherProfile, widget.onRefresh);
+                      } else if (snapshot.hasError) {
+                        Navigator.pop(context);
+                        showToast(success: false, msg: '해당 쪽지를 찾을 수 없습니다.');
+                        return null;
+                      } else {
+                        return Container(
+                          color: GuamColorFamily.grayscaleWhite,
+                          child: Center(child: guamProgressIndicator()),
+                        );
+                      }
+                    },
+                  ),
+                ),
+              ),
+            ) : null,
+            child: Row(
+              children: [
+                Stack(
+                  children: [
+                    Container(
+                      width: 40,
+                      height: 40,
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        image: DecorationImage(
+                          fit: BoxFit.cover,
+                          image: widget.messageBox.otherProfile.profileImg != null
+                              ? NetworkImage(HttpRequest().s3BaseAuthority + widget.messageBox.otherProfile.profileImg)
+                              : SvgProvider('assets/icons/profile_image.svg')
+                        ),
+                      ),
+                    ),
+                    if (!widget.messageBox.lastLetter.isRead)
+                      Positioned(
+                        top: 0,
+                        child: CircleAvatar(
+                          backgroundColor: GuamColorFamily.fuchsiaCore,
+                          radius: 6,
+                        )
+                      ),
+                  ],
+                ),
+                Expanded(
+                  child: Container(
+                    padding: EdgeInsets.only(left: 16),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          widget.messageBox.otherProfile.nickname,
+                          style: TextStyle(
+                            fontSize: 12,
+                            height: 1.6,
+                            fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+                            color: GuamColorFamily.grayscaleGray2,
+                          ),
+                        ),
+                        Text(
+                          widget.messageBox.lastLetter.text,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: TextStyle(
+                            fontSize: 12,
+                            height: 1.6,
+                            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                            color: widget.messageBox.lastLetter.isRead
+                                ? GuamColorFamily.grayscaleGray4
+                                : GuamColorFamily.grayscaleGray2,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                Spacer(),
+                if (widget.editable)
+                  MultiProvider(
+                    providers: [
+                      ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+                    ],
+                    child: Builder(
+                      builder: (context) {
+                        return TextButton(
+                          style: TextButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            minimumSize: Size(23, 20),
+                            textStyle: TextStyle(
+                              fontSize: 12,
+                              fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+                              color: GuamColorFamily.redCore,
+                            ),
+                          ),
+                          child: BottomModalWithAlert(
+                            funcName: '삭제',
+                            title: '쪽지함을 삭제하시겠어요?',
+                            body: '삭제된 쪽지는 복원할 수 없습니다.',
+                            func: () async => await context.read<Messages>()
+                                .deleteMessageBox(widget.messageBox.otherProfile.id)
+                                .then((successful) async {
+                                  context.read<Messages>().fetchMessageBoxes();
+                                  if (successful) {
+                                    // Navigator.pop(context);
+                                    Navigator.pop(context);
+                                    widget.onRefresh();
+                                    await context.read<Messages>().fetchMessageBoxes();
+                                  }
+                              })
+                          ),
+                        );
+                      }
+                    ),
+                  ),
+                if (!widget.editable)
+                Padding(
+                  padding: EdgeInsets.only(right: 10, top: 14, bottom: 15),
+                  child: Text(
+                    Jiffy(widget.messageBox.lastLetter.createdAt).fromNow(),
+                    style: TextStyle(
+                      fontSize: 12,
+                      height: 1.6,
+                      fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                      color: GuamColorFamily.grayscaleGray4,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/notifications/notifications_app.dart b/lib/screens/notifications/notifications_app.dart
new file mode 100644
index 00000000..41ec209a
--- /dev/null
+++ b/lib/screens/notifications/notifications_app.dart
@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/providers/notifications/notifications.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+import '../../providers/posts/posts.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'notifications_body.dart';
+import '../../commons/custom_app_bar.dart';
+
+class NotificationsApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+        ChangeNotifierProvider(create: (_) => Notifications(authProvider)),
+      ],
+      child: NotificationsAppScaffold(),
+    );
+  }
+}
+
+
+class NotificationsAppScaffold extends StatefulWidget {
+  @override
+  State<NotificationsAppScaffold> createState() => _NotificationsAppScaffoldState();
+}
+
+class _NotificationsAppScaffoldState extends State<NotificationsAppScaffold> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: NotificationsBody(),
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        title: '알림',
+        // trailing: Padding(
+        //   padding: EdgeInsets.only(right: 14),
+        //   child: IconButton(
+        //     padding: EdgeInsets.zero,
+        //     constraints: BoxConstraints(),
+        //     icon: SvgPicture.asset('assets/icons/delete_outlined.svg'),
+        //     onPressed: () => showMaterialModalBottomSheet(
+        //       context: context,
+        //       useRootNavigator: true,
+        //       backgroundColor: GuamColorFamily.grayscaleWhite,
+        //       shape: RoundedRectangleBorder(
+        //         borderRadius: BorderRadius.only(
+        //           topLeft: Radius.circular(20),
+        //           topRight: Radius.circular(20),
+        //         )
+        //       ),
+        //       builder: (context) => SingleChildScrollView(
+        //         child: Container(
+        //           padding: EdgeInsets.only(left: 24, top: 24, right: 14, bottom: 21),
+        //           child: Column(
+        //             crossAxisAlignment: CrossAxisAlignment.start,
+        //             children: [
+        //               Row(
+        //                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        //                 children: [
+        //                   Text(
+        //                     '알림을 모두 삭제하시겠어요?',
+        //                     style: TextStyle(
+        //                       fontSize: 18,
+        //                       color: GuamColorFamily.grayscaleGray2,
+        //                     ),
+        //                   ),
+        //                   TextButton(
+        //                     child: Text(
+        //                       '취소',
+        //                       style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore),
+        //                     ),
+        //                     style: TextButton.styleFrom(
+        //                       padding: EdgeInsets.zero,
+        //                       minimumSize: Size(30, 26),
+        //                       alignment: Alignment.centerRight,
+        //                     ),
+        //                     onPressed: () => Navigator.pop(context)
+        //                   ),
+        //                 ],
+        //               ),
+        //               CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        //               Padding(
+        //                 padding: EdgeInsets.symmetric(vertical: 20),
+        //                 child: Text(
+        //                   '알림을 삭제하면 다시 되돌릴 수 없습니다.',
+        //                   style: TextStyle(
+        //                     fontSize: 14,
+        //                     color: GuamColorFamily.grayscaleGray2,
+        //                     fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+        //                   ),
+        //                 ),
+        //               ),
+        //               Center(
+        //                 child: TextButton(
+        //                   onPressed: (){},
+        //                   child: Text(
+        //                     '삭제하기',
+        //                     style: TextStyle(fontSize: 16, color: GuamColorFamily.redCore),
+        //                   )
+        //                 ),
+        //               ),
+        //             ],
+        //           ),
+        //         ),
+        //       )
+        //     )
+        //   ),
+        // )
+      ),
+    );
+  }
+}
diff --git a/lib/screens/notifications/notifications_body.dart b/lib/screens/notifications/notifications_body.dart
new file mode 100644
index 00000000..444e378d
--- /dev/null
+++ b/lib/screens/notifications/notifications_body.dart
@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/providers/notifications/notifications.dart';
+import 'package:guam_community_client/screens/notifications/notifications_preview.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+
+class NotificationsBody extends StatefulWidget {
+  @override
+  State<NotificationsBody> createState() => _NotificationsBodyState();
+}
+
+class _NotificationsBodyState extends State<NotificationsBody> {
+  List _notifications = [];
+  int _currentPage = 1;
+  bool _hasNextPage = true;
+  bool _isFirstLoadRunning = false;
+  bool _isLoadMoreRunning = false;
+  ScrollController _scrollController = ScrollController();
+
+  void _firstLoad() async {
+    setState(() => _isFirstLoadRunning = true);
+    try {
+      await context.read<Notifications>().fetchNotifications();
+      _notifications = context.read<Notifications>().notifications;
+    } catch (err) {
+      print('알 수 없는 오류가 발생했습니다.');
+    }
+    setState(() => _isFirstLoadRunning = false);
+  }
+
+  void _loadMore() async {
+    if (_hasNextPage == true &&
+        _isFirstLoadRunning == false &&
+        _isLoadMoreRunning == false &&
+        _scrollController.position.extentAfter < 300) {
+      setState(() => _isLoadMoreRunning = true);
+      try {
+        _currentPage ++;
+        final fetchedNotifications = await context.read<Notifications>().addNotifications(
+          page: _currentPage,
+        );
+        if (fetchedNotifications != null && fetchedNotifications.length > 0) {
+          setState(() => _notifications.addAll(fetchedNotifications));
+        } else {
+          // This means there is no more data
+          // and therefore, we will not send another GET request
+          setState(() => _hasNextPage = false);
+        }
+      } catch (err) {
+        print('알 수 없는 오류가 발생했습니다.');
+      }
+      setState(() => _isLoadMoreRunning = false);
+    }
+  }
+
+  @override
+  void initState() {
+    _firstLoad();
+    _scrollController = ScrollController()..addListener(_loadMore);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _scrollController.removeListener(_loadMore);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _isFirstLoadRunning
+    ? Center(child: guamProgressIndicator())
+    : Container(
+        color: GuamColorFamily.grayscaleWhite,
+        padding: EdgeInsets.only(top: 18),
+        child: RefreshIndicator(
+          color: Color(0xF9F8FFF), // GuamColorFamily.purpleLight1
+          onRefresh: () => context.read<Notifications>().fetchNotifications(),
+          child: Container(
+            height: double.infinity,
+            child: SingleChildScrollView(
+              controller: _scrollController,
+              physics: AlwaysScrollableScrollPhysics(),
+              child: Column(children: [
+                if (_notifications.isEmpty)
+                  Center(
+                    child: Padding(
+                      padding: EdgeInsets.only(
+                          top: MediaQuery.of(context).size.height * 0.1),
+                      child: Text(
+                        '새로운 알림이 없습니다.',
+                        style: TextStyle(
+                          fontSize: 16,
+                          color: GuamColorFamily.grayscaleGray4,
+                          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                        ),
+                      ),
+                    ),
+                  ),
+                if (_notifications.isNotEmpty)
+                  ..._notifications.map((noti) => NotificationsPreview(noti, onRefresh: _firstLoad)),
+                if (_isLoadMoreRunning == true)
+                  Padding(
+                    padding: EdgeInsets.only(top: 10, bottom: 40),
+                    child: guamProgressIndicator(size: 40),
+                  ),
+                if (_hasNextPage == false)
+                  Container(
+                    color: GuamColorFamily.purpleLight2,
+                    padding: EdgeInsets.only(top: 10, bottom: 10),
+                    child: Center(child: Text(
+                      '모든 알림을 불러왔습니다!',
+                      style: TextStyle(
+                        fontSize: 13,
+                        color: GuamColorFamily.grayscaleGray2,
+                        fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                      ),
+                    )),
+                  ),
+              ]),
+            ),
+          ),
+        ),
+      );
+  }
+}
diff --git a/lib/screens/notifications/notifications_preview.dart b/lib/screens/notifications/notifications_preview.dart
new file mode 100644
index 00000000..97c06eaa
--- /dev/null
+++ b/lib/screens/notifications/notifications_preview.dart
@@ -0,0 +1,178 @@
+import 'dart:ffi';
+
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:guam_community_client/models/notification.dart' as Notification;
+import 'package:guam_community_client/providers/notifications/notifications.dart';
+import 'package:guam_community_client/screens/notifications/notifications_type.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:jiffy/jiffy.dart';
+import 'package:provider/provider.dart';
+
+import '../../models/boards/post.dart';
+import '../../providers/posts/posts.dart';
+import '../../providers/user_auth/authenticate.dart';
+import '../boards/posts/detail/post_detail.dart';
+
+class NotificationsPreview extends StatelessWidget with Toast {
+  final Notification.Notification notification;
+  final Function onRefresh;
+
+  NotificationsPreview(this.notification, {this.onRefresh});
+
+  @override
+  Widget build(BuildContext context) {
+    Posts postProvider = context.read<Posts>();
+    Authenticate authProvider = context.read<Authenticate>();
+    Notifications notiProvider = context.read<Notifications>();
+
+    void readNotifications() async {
+      await notiProvider.readNotifications(
+        userId: authProvider.me.id,
+        pushEventIds: [notification.id.toString()],
+      );
+      await Future.delayed(Duration(seconds: 1));
+      onRefresh();
+    }
+
+    return Column(
+      children: [
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 6),
+          child: Container(
+            padding: EdgeInsets.only(left: 12, top: 4, bottom: 4),
+            child: InkWell(
+              onTap: () {
+                readNotifications();
+                Navigator.of(context).push(
+                  MaterialPageRoute(
+                    builder: (_) => MultiProvider(
+                      providers: [
+                        ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+                      ],
+                      child: FutureBuilder(
+                        /// todo: linkUrl 을 '/'로 split 하여 postId 추출 => postId 값만 보내주기
+                        future: postProvider.getPost(int.parse(notification.linkUrl.split('/')[4])),
+                        builder: (_, AsyncSnapshot<Post> snapshot) {
+                          if (snapshot.hasData) {
+                            return PostDetail(snapshot.data);
+                          } else if (snapshot.hasError) {
+                            Navigator.pop(context);
+                            postProvider.fetchPosts(0);
+                            showToast(success: false, msg: '게시글을 찾을 수 없습니다.');
+                            return null;
+                          } else {
+                            return Center(child: guamProgressIndicator());
+                          }
+                        },
+                      ),
+                    ),
+                  ),
+                );
+              },
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Stack(
+                    children: [
+                      Container(
+                        width: 36,
+                        height: 36,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          image: DecorationImage(
+                              fit: BoxFit.cover,
+                              image: notification.writer.profileImg != null
+                                  ? NetworkImage(HttpRequest().s3BaseAuthority +  notification.writer.profileImg)
+                                  : SvgProvider('assets/icons/profile_image.svg')
+                          ),
+                        ),
+                      ),
+                      if (!notification.isRead)
+                        Positioned(
+                          top: 0,
+                          child: CircleAvatar(
+                            backgroundColor: GuamColorFamily.fuchsiaCore,
+                            radius: 4,
+                          )
+                        ),
+                    ],
+                  ),
+                  Container(
+                    width: MediaQuery.of(context).size.width * 0.79,
+                    padding: EdgeInsets.only(left: 12),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Text(
+                              notification.writer.nickname,
+                              style: TextStyle(
+                                fontSize: 13,
+                                color: notification.isRead
+                                    ? GuamColorFamily.grayscaleGray3
+                                    : GuamColorFamily.grayscaleGray1,
+                              ),
+                            ),
+                            Text(
+                              notificationsType(notification.kind),
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(
+                                fontSize: 13,
+                                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                                color: notification.isRead
+                                    ? GuamColorFamily.grayscaleGray3
+                                    : GuamColorFamily.grayscaleGray1,
+                              ),
+                            ),
+                          ],
+                        ),
+                        if (notification.body != null)
+                          Text(
+                            notification.body,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            style: TextStyle(
+                              fontSize: 12,
+                              height: 1.6,
+                              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                              color: notification.isRead
+                                  ? GuamColorFamily.grayscaleGray4
+                                  : GuamColorFamily.grayscaleGray3,
+                            ),
+                          ),
+                        Padding(
+                          padding: EdgeInsets.only(top: 4),
+                          child: Text(
+                            Jiffy(notification.createdAt).fromNow(),
+                            style: TextStyle(
+                              fontSize: 12,
+                              height: 1.6,
+                              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                              color: GuamColorFamily.grayscaleGray4,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 28),
+          child: CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        )
+      ],
+    );
+  }
+}
diff --git a/lib/screens/notifications/notifications_type.dart b/lib/screens/notifications/notifications_type.dart
new file mode 100644
index 00000000..b86022a8
--- /dev/null
+++ b/lib/screens/notifications/notifications_type.dart
@@ -0,0 +1,12 @@
+notificationsType(String kind) {
+  String description;
+  switch (kind) {
+    case 'POST_COMMENT': description = ' 님이 댓글을 남겼습니다.'; break;
+    case 'POST_COMMENT_MENTION': description = ' 님이 댓글에서 언급했습니다.'; break;
+    case 'POST_SCRAP': description = ' 님이 게시글을 스크랩했습니다.'; break;
+    case 'POST_LIKE': description = ' 님이 게시글을 좋아합니다.'; break;
+    case 'POST_COMMENT_LIKE': description = ' 님이 댓글을 좋아합니다.'; break;
+    default: description = ''; break;
+  }
+  return description;
+}
diff --git a/lib/screens/profiles/buttons/blacklist_remove_button.dart b/lib/screens/profiles/buttons/blacklist_remove_button.dart
new file mode 100644
index 00000000..29282d02
--- /dev/null
+++ b/lib/screens/profiles/buttons/blacklist_remove_button.dart
@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import '../../../commons/common_text_button.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class BlackListRemoveButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return CommonTextButton(
+      text: '해제',
+      fontSize: 14,
+      fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+      textColor: GuamColorFamily.grayscaleGray4,
+      onPressed: () {},
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/interest_button.dart b/lib/screens/profiles/buttons/interest_button.dart
new file mode 100644
index 00000000..f55264c2
--- /dev/null
+++ b/lib/screens/profiles/buttons/interest_button.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class InterestButton extends StatelessWidget {
+  final String interest;
+  final bool deletable;
+
+  InterestButton(this.interest, {this.deletable = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      label: Text('#$interest'),
+      labelStyle: TextStyle(
+        fontFamily: deletable ? GuamFontFamily.SpoqaHanSansNeoRegular : GuamFontFamily.SpoqaHanSansNeoMedium,
+        fontSize: 14,
+        color: deletable ? GuamColorFamily.grayscaleGray2 : GuamColorFamily.purpleLight1,
+        height: 22/14,
+      ),
+      onDeleted: deletable ? () {} : null,
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      backgroundColor: GuamColorFamily.purpleLight3,
+      side: deletable ? BorderSide(width: 0.5, color: GuamColorFamily.grayscaleGray6) : null,
+      padding: EdgeInsets.symmetric(vertical: 2, horizontal: 8),
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/long_button.dart b/lib/screens/profiles/buttons/long_button.dart
new file mode 100644
index 00000000..6090988d
--- /dev/null
+++ b/lib/screens/profiles/buttons/long_button.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/icon_text.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class LongButton extends StatelessWidget {
+  final String label;
+  final Function onPressed;
+
+  LongButton({this.label, this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+        side: BorderSide(color: GuamColorFamily.grayscaleGray6),
+        backgroundColor: Colors.transparent,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            label,
+              style: TextStyle(
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                fontSize: 14,
+                color: GuamColorFamily.grayscaleGray2,
+              )
+          ),
+          IconText(
+            iconSize: 18,
+            iconColor: GuamColorFamily.grayscaleGray5,
+            paddingBtw: 0,
+            iconPath: 'assets/icons/right.svg',
+          )
+        ],
+      ),
+      onPressed: onPressed,
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/message_send_button.dart b/lib/screens/profiles/buttons/message_send_button.dart
new file mode 100644
index 00000000..535f54d4
--- /dev/null
+++ b/lib/screens/profiles/buttons/message_send_button.dart
@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/commons/bottom_modal/bottom_modal_with_message.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+
+import '../../../providers/user_auth/authenticate.dart';
+
+class MessageSendButton extends StatelessWidget {
+  final Profile otherProfile;
+
+  MessageSendButton(this.otherProfile);
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return Padding(
+      padding: EdgeInsets.only(bottom: 24),
+      child: InkWell(
+        child: Container(
+          width: 103,
+          height: 31,
+          decoration: BoxDecoration(
+            color: GuamColorFamily.purpleLight3,
+            borderRadius: BorderRadius.all(Radius.circular(8)),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              IconButton(
+                constraints: BoxConstraints(),
+                padding: EdgeInsets.only(right: 4),
+                icon: SvgPicture.asset(
+                  'assets/icons/message_default.svg',
+                  color: GuamColorFamily.purpleCore,
+                ),
+                onPressed: null,
+              ),
+              Text(
+                '쪽지 보내기',
+                style: TextStyle(
+                  color: GuamColorFamily.purpleCore,
+                  fontSize: 13,
+                ),
+              ),
+            ],
+          ),
+        ),
+        onTap: () => showMaterialModalBottomSheet(
+          context: context,
+          useRootNavigator: true,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.only(
+              topLeft: Radius.circular(20),
+              topRight: Radius.circular(20),
+            ),
+          ),
+          builder: (context) => MultiProvider(
+            providers: [
+              ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+            ],
+            child: SingleChildScrollView(
+              child: BottomModalWithMessage(
+                funcName: '보내기',
+                title: '${otherProfile.nickname} 님에게 쪽지 보내기',
+                profile: otherProfile,
+                func: null,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/profile_edit_button.dart b/lib/screens/profiles/buttons/profile_edit_button.dart
new file mode 100644
index 00000000..de4e0a3d
--- /dev/null
+++ b/lib/screens/profiles/buttons/profile_edit_button.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/providers/user_auth/authenticate.dart';
+import 'package:provider/provider.dart';
+import 'package:guam_community_client/commons/icon_text.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../pages/profiles_edit.dart';
+
+class ProfileEditButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final myProfile = context.read<Authenticate>().me;
+
+    return IconText(
+      iconSize: 18,
+      iconPath: 'assets/icons/write.svg',
+      iconColor: GuamColorFamily.purpleLight1,
+      paddingBtw: 0,
+      onPressed: () => Navigator.of(context).push(
+          MaterialPageRoute(
+              builder: (_) => ProfilesEdit(myProfile)
+          )
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/profile_img_edit_button.dart b/lib/screens/profiles/buttons/profile_img_edit_button.dart
new file mode 100644
index 00000000..e28d90aa
--- /dev/null
+++ b/lib/screens/profiles/buttons/profile_img_edit_button.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import '../../../commons/common_text_button.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'dart:io' show Platform;
+import '../edit/profile_edit_img_modal.dart';
+
+class ProfileImgEditButton extends StatelessWidget {
+  final Function setImageFile;
+  final Function resetImageFile;
+
+  ProfileImgEditButton(this.setImageFile, this.resetImageFile);
+
+  @override
+  Widget build(BuildContext context) {
+    return CommonTextButton(
+      text: '프로필 사진 변경',
+      fontSize: 12,
+      fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+      textColor: GuamColorFamily.purpleCore,
+      onPressed: () {
+        if (Platform.isAndroid) {
+          showMaterialModalBottomSheet(
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                topLeft: const Radius.circular(20),
+                topRight: const Radius.circular(20),
+              )
+            ),
+            context: context,
+            useRootNavigator: true,
+            builder: (_) => ProfileEditImgModal(setImageFile, resetImageFile)
+          );
+        } else {
+        showCupertinoModalBottomSheet(
+            context: context,
+            useRootNavigator: true,
+            builder: (_) => ProfileEditImgModal(setImageFile, resetImageFile)
+          );
+        }
+      },
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/profile_interest_button.dart b/lib/screens/profiles/buttons/profile_interest_button.dart
new file mode 100644
index 00000000..82ec7d87
--- /dev/null
+++ b/lib/screens/profiles/buttons/profile_interest_button.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import '../../../models/profiles/interest.dart';
+import '../../../providers/user_auth/authenticate.dart';
+
+class ProfileInterestButton extends StatefulWidget {
+  final Interest interest;
+  final int index;
+  final bool deletable;
+  final Function removeInterest;
+
+  ProfileInterestButton(this.interest, {this.index, this.removeInterest, this.deletable = false});
+
+  @override
+  State<ProfileInterestButton> createState() => _ProfileInterestButtonState();
+}
+
+class _ProfileInterestButtonState extends State<ProfileInterestButton> {
+  bool sending = false;
+
+  void toggleSending() {
+    setState(() => sending = !sending);
+  }
+
+  Future deleteInterest() async {
+    toggleSending();
+    try {
+      await context.read<Authenticate>().deleteInterest(
+        queryParams: {"name": widget.interest.name},
+      ).then((successful) {
+        toggleSending();
+        if (successful) {
+          widget.removeInterest(widget.index);
+        } else {
+          print("Error!");
+        }
+      });
+    } catch (e) {
+      print(e);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      padding: EdgeInsets.all(4),
+      label: Text(widget.interest.name),
+      labelStyle: TextStyle(
+        fontSize: 12,
+        height: 19.2/12,
+        fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+        color: widget.deletable ? GuamColorFamily.grayscaleGray2 : GuamColorFamily.grayscaleGray4,
+      ),
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      onDeleted: widget.deletable ? deleteInterest : null,
+      side: BorderSide(color: GuamColorFamily.grayscaleGray6),
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+    );
+  }
+}
diff --git a/lib/screens/profiles/buttons/web_button.dart b/lib/screens/profiles/buttons/web_button.dart
new file mode 100644
index 00000000..9ee4319a
--- /dev/null
+++ b/lib/screens/profiles/buttons/web_button.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../../commons/icon_text.dart';
+
+class WebButton extends StatelessWidget {
+  final String url;
+  final String iconPath;
+
+  WebButton(this.url, this.iconPath);
+
+  @override
+  Widget build(BuildContext context) {
+    return IconText(
+      iconSize: 24,
+      iconPath: iconPath,
+      iconColor: GuamColorFamily.grayscaleGray5,
+      paddingBtw: 0,
+      onPressed: _launchURL,
+    );
+  }
+
+  void _launchURL() async {
+    if (!await launch(url)) throw 'Could not launch $url';
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/profiles/edit/interests/profile_edit_interests.dart b/lib/screens/profiles/edit/interests/profile_edit_interests.dart
new file mode 100644
index 00000000..0005c026
--- /dev/null
+++ b/lib/screens/profiles/edit/interests/profile_edit_interests.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+import '../profile_edit_label.dart';
+import '../../../../commons/next.dart';
+import '../../profile/profile_interests.dart';
+import 'profile_edit_interests_detail.dart';
+import '../../../../models/profiles/interest.dart';
+
+class ProfileEditInterests extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final List<Interest> interests = context.read<Authenticate>().me.interests;
+
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            ProfileEditLabel('관심사'),
+            Next(onPressed: () => Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) => ProfileEditInterestsDetail(interests)
+              )
+            )),
+          ],
+        ),
+        if (interests.isNotEmpty)
+          Padding(padding: EdgeInsets.only(bottom: 8)),
+        ProfileInterests(interests)
+      ],
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/interests/profile_edit_interests_detail.dart b/lib/screens/profiles/edit/interests/profile_edit_interests_detail.dart
new file mode 100644
index 00000000..ef60acb4
--- /dev/null
+++ b/lib/screens/profiles/edit/interests/profile_edit_interests_detail.dart
@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:collection/collection.dart';
+import 'package:guam_community_client/screens/profiles/buttons/profile_interest_button.dart';
+import './profile_edit_interests_label.dart';
+import './profile_edit_interests_textfield.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../../../commons/custom_app_bar.dart';
+import 'package:guam_community_client/commons/back.dart';
+import '../../../../models/profiles/interest.dart';
+
+class ProfileEditInterestsDetail extends StatefulWidget {
+  final List<Interest> interests;
+
+  ProfileEditInterestsDetail(this.interests);
+
+  @override
+  State<ProfileEditInterestsDetail> createState() => _ProfileEditInterestsDetailState();
+}
+
+class _ProfileEditInterestsDetailState extends State<ProfileEditInterestsDetail> {
+  List<Interest> _interests;
+
+  @override
+  void initState() {
+    _interests = widget.interests;
+    super.initState();
+  }
+
+  void addInterest(String interest) {
+    setState(() => _interests.add(Interest(name: interest)));
+  }
+
+  removeInterest(int idx) {
+    setState(() => _interests.removeAt(idx)
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        leading: Back(),
+        title: '프로필 수정',
+      ),
+      body: SingleChildScrollView(
+        child: Container(
+          width: double.infinity,
+          padding: EdgeInsets.all(24),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ProfileEditInterestsLabel(_interests.length),
+              ProfileEditInterestsTextField(addInterest),
+              Wrap(
+                spacing: 8,
+                runSpacing: 5,
+                children: [..._interests.mapIndexed((idx, i) => ProfileInterestButton(
+                  i,
+                  index: idx,
+                  deletable: true,
+                  removeInterest: removeInterest,
+                ))],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/interests/profile_edit_interests_label.dart b/lib/screens/profiles/edit/interests/profile_edit_interests_label.dart
new file mode 100644
index 00000000..6328ce04
--- /dev/null
+++ b/lib/screens/profiles/edit/interests/profile_edit_interests_label.dart
@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class ProfileEditInterestsLabel extends StatelessWidget {
+  final int nInterests;
+
+  ProfileEditInterestsLabel(this.nInterests);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(bottom: 12),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: TextBaseline.alphabetic,
+        children: [
+          Text(
+            '내 관심사',
+            style: TextStyle(
+              fontSize: 16,
+              height: 25.6/16,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              color: GuamColorFamily.grayscaleGray1,
+            ),
+          ),
+          Padding(padding: EdgeInsets.only(right: 4)),
+          Text(
+            '$nInterests',
+            style: TextStyle(
+              fontSize: 12,
+              height: 19.2/12,
+              fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              color: GuamColorFamily.purpleCore,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/interests/profile_edit_interests_textfield.dart b/lib/screens/profiles/edit/interests/profile_edit_interests_textfield.dart
new file mode 100644
index 00000000..fba8beae
--- /dev/null
+++ b/lib/screens/profiles/edit/interests/profile_edit_interests_textfield.dart
@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import '../../../../commons/button_size_circular_progress_indicator.dart';
+import '../../../../providers/user_auth/authenticate.dart';
+
+class ProfileEditInterestsTextField extends StatefulWidget {
+  final void Function(String interest) addInterest;
+
+  ProfileEditInterestsTextField(this.addInterest);
+
+  @override
+  State<StatefulWidget> createState() => ProfileEditInterestsTextFieldState();
+}
+
+class ProfileEditInterestsTextFieldState extends State<ProfileEditInterestsTextField> {
+  bool sending = false;
+  final _interestFieldController = TextEditingController();
+
+  void toggleSending() {
+    setState(() => sending = !sending);
+  }
+
+  Future createInterest() async {
+    toggleSending();
+    try {
+      await context.read<Authenticate>().setInterest(
+        body: {"name": _interestFieldController.text},
+      ).then((successful) {
+        toggleSending();
+        if (successful) {
+          widget.addInterest(_interestFieldController.text);
+          _interestFieldController.clear();
+        } else {
+          print("Error!");
+        }
+      });
+    } catch (e) {
+      print(e);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Expanded(
+            child: TextField(
+              maxLines: 1,
+              keyboardType: TextInputType.text,
+              controller: _interestFieldController,
+              cursorColor: GuamColorFamily.purpleCore,
+              style: TextStyle(
+                fontSize: 14,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                color: GuamColorFamily.grayscaleGray1,
+                height: 22.4/14
+              ),
+              decoration: InputDecoration(
+                hintText: "관심사를 입력해주세요",
+                hintStyle: TextStyle(fontSize: 14, color: GuamColorFamily.grayscaleGray5),
+                border: InputBorder.none,
+                focusedBorder: InputBorder.none,
+                enabledBorder: InputBorder.none,
+                errorBorder: InputBorder.none,
+                disabledBorder: InputBorder.none,
+                contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 16),
+              ),
+            ),
+          ),
+          !sending ? TextButton(
+            onPressed: () => createInterest(),
+            style: TextButton.styleFrom(
+              padding: EdgeInsets.only(right: 6),
+              minimumSize: Size(30, 26),
+              alignment: Alignment.center,
+            ),
+            child: Text(
+              '등록',
+              style: TextStyle(
+                color: GuamColorFamily.purpleCore,
+                fontSize: 14,
+              ),
+            ),
+          ) : ButtonSizeCircularProgressIndicator()
+        ],
+      ),
+      margin: EdgeInsets.only(bottom: 12),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(5),
+        border: Border.all(color: GuamColorFamily.grayscaleGray6, width: 1),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_blog.dart b/lib/screens/profiles/edit/profile_edit_blog.dart
new file mode 100644
index 00000000..c3cdff5f
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_blog.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'profile_edit_label.dart';
+import 'profile_edit_textfield.dart';
+
+class ProfileEditBlog extends StatelessWidget {
+  final String blogUrl;
+  final Function setInput;
+
+  ProfileEditBlog(this.blogUrl, this.setInput);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(bottom: 24),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ProfileEditLabel('블로그'),
+          ProfileEditTextField(input: blogUrl, isBlogUrl: true, func: setInput, funcKey: 'blogUrl')
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_github.dart b/lib/screens/profiles/edit/profile_edit_github.dart
new file mode 100644
index 00000000..f996dfd2
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_github.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'profile_edit_label.dart';
+import 'profile_edit_textfield.dart';
+
+class ProfileEditGithub extends StatelessWidget {
+  final String githubId;
+  final Function setInput;
+
+  ProfileEditGithub(this.githubId, this.setInput);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(bottom: 24),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ProfileEditLabel('github ID'),
+          ProfileEditTextField(input: githubId, func: setInput, funcKey: 'githubId')
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_img_modal.dart b/lib/screens/profiles/edit/profile_edit_img_modal.dart
new file mode 100644
index 00000000..466aeb2a
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_img_modal.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:guam_community_client/commons/common_text_button.dart';
+
+import '../../../helpers/pick_image.dart';
+
+class ProfileEditImgModal extends StatelessWidget {
+  final Function setImageFile;
+  final Function resetImageFile;
+
+  const ProfileEditImgModal(this.setImageFile, this.resetImageFile);
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      children: [
+        Container(
+          padding: const EdgeInsets.all(24),
+          width: double.infinity,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.only(
+              topLeft: const Radius.circular(20),
+              topRight: const Radius.circular(20),
+            ),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              CommonTextButton(
+                text: '사진 가져오기',
+                fontSize: 16,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                textColor: GuamColorFamily.grayscaleGray1,
+                onPressed: () => pickImage(type: 'gallery').then((img) {
+                  setImageFile(img);
+                }),
+              ),
+              Padding(padding: EdgeInsets.only(bottom: 20)),
+              CommonTextButton(
+                text: '기본 사진으로 설정',
+                fontSize: 16,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                textColor: GuamColorFamily.grayscaleGray1,
+                onPressed: () => resetImageFile(),
+              ),
+            ],
+          ),
+        )
+      ],
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_intro.dart b/lib/screens/profiles/edit/profile_edit_intro.dart
new file mode 100644
index 00000000..3fc91eab
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_intro.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'profile_edit_label.dart';
+import 'profile_edit_textfield.dart';
+
+class ProfileEditIntro extends StatelessWidget {
+  final String intro;
+  final Function setInput;
+
+  ProfileEditIntro(this.intro, this.setInput);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.only(bottom: 44),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ProfileEditLabel('소개'),
+          Padding(padding: EdgeInsets.only(bottom: 16)),
+          Row(  // Essential to fit in the whole space
+            children: [
+              ProfileEditTextField(input: intro, maxLength: 150, func: setInput, funcKey: 'introduction')
+            ],
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_label.dart b/lib/screens/profiles/edit/profile_edit_label.dart
new file mode 100644
index 00000000..06b1aff7
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_label.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class ProfileEditLabel extends StatelessWidget {
+  final String label;
+  final HexColor textColor;
+
+  ProfileEditLabel(this.label, {this.textColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 84,
+      child: Text(
+        label,
+        style: TextStyle(
+          fontSize: 14,
+          height: 22/14,
+          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+          color: textColor == null ? GuamColorFamily.grayscaleGray1 : textColor,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_nickname.dart b/lib/screens/profiles/edit/profile_edit_nickname.dart
new file mode 100644
index 00000000..07828ecd
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_nickname.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'profile_edit_label.dart';
+import 'profile_edit_textfield.dart';
+
+class ProfileEditNickname extends StatelessWidget {
+  final String nickname;
+  final Function setInput;
+
+  ProfileEditNickname(this.nickname, this.setInput);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(0, 24, 0, 44),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ProfileEditLabel('이름'),
+          ProfileEditTextField(input: nickname, maxLength: 10, func: setInput, funcKey: 'nickname')
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_optional.dart b/lib/screens/profiles/edit/profile_edit_optional.dart
new file mode 100644
index 00000000..8ea91532
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_optional.dart
@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/screens/profiles/edit/interests/profile_edit_interests.dart';
+import 'profile_edit_label.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'profile_edit_github.dart';
+import 'profile_edit_blog.dart';
+import 'interests/profile_edit_interests.dart';
+
+class ProfileEditOptional extends StatelessWidget {
+  final Map<String, dynamic> input;
+  final Function setInput;
+
+  ProfileEditOptional(this.input, this.setInput);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        ProfileEditLabel(
+          '선택사항',
+          textColor: GuamColorFamily.purpleCore,
+        ),
+        Padding(padding: EdgeInsets.only(bottom: 8)),
+        ProfileEditGithub(input['githubId'], setInput),
+        ProfileEditBlog(input['blogUrl'], setInput),
+        ProfileEditInterests(),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/profiles/edit/profile_edit_textfield.dart b/lib/screens/profiles/edit/profile_edit_textfield.dart
new file mode 100644
index 00000000..4b04486e
--- /dev/null
+++ b/lib/screens/profiles/edit/profile_edit_textfield.dart
@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class ProfileEditTextField extends StatefulWidget {
+  final String input;
+  final int maxLength;
+  final bool isBlogUrl;
+  final Function func; /// request body 에 쓰일 setInput 함수
+  final String funcKey; /// nickname, introduction, blogUrl 이 위 func 에 사용되는 argument
+
+  ProfileEditTextField({this.input, this.maxLength, this.isBlogUrl=false, this.func, this.funcKey});
+
+  @override
+  State<ProfileEditTextField> createState() => _ProfileEditTextFieldState();
+}
+
+class _ProfileEditTextFieldState extends State<ProfileEditTextField> {
+  final _textFieldController = TextEditingController();
+
+  @override
+  void initState() {
+    _textFieldController.text = widget.input;
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _textFieldController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: TextField(
+        maxLength: widget.maxLength,
+        controller: _textFieldController,
+        onChanged: (e) => widget.func(widget.funcKey, _textFieldController.text),
+        style: TextStyle(
+          fontSize: 14,
+          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+          color: GuamColorFamily.grayscaleGray1,
+          height: 22.4/14
+        ),
+        cursorColor: GuamColorFamily.purpleCore,
+        decoration: InputDecoration(
+          counterStyle: TextStyle(
+            color: GuamColorFamily.purpleCore,
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            fontSize: 12
+          ),
+          border: UnderlineInputBorder(
+              borderSide: BorderSide(color: GuamColorFamily.purpleLight2)
+          ),
+          focusedBorder: UnderlineInputBorder(
+              borderSide: BorderSide(color: GuamColorFamily.purpleLight2)
+          ),
+          enabledBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: GuamColorFamily.purpleLight2)
+          ),
+          errorBorder: InputBorder.none,
+          disabledBorder: InputBorder.none,
+          isDense: true,
+          contentPadding: EdgeInsets.only(bottom: 8),
+          hintText: widget.isBlogUrl
+            ? 'https://guam.com'
+            : '',
+          hintStyle: TextStyle(
+            color: GuamColorFamily.grayscaleGray4,
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+            fontSize: 13,
+          ),
+        ),
+      )
+    );
+  }
+}
diff --git a/lib/screens/profiles/my_profiles_body.dart b/lib/screens/profiles/my_profiles_body.dart
new file mode 100644
index 00000000..268a03f7
--- /dev/null
+++ b/lib/screens/profiles/my_profiles_body.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/screens/profiles/buttons/profile_edit_button.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_bottom_buttons.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_img.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_intro.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_nickname.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_interests.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_web_buttons.dart';
+import 'package:provider/provider.dart';
+import '../../providers/user_auth/authenticate.dart';
+
+class MyProfilesBody extends StatelessWidget {
+  MyProfilesBody();
+
+  @override
+  Widget build(BuildContext context) {
+    final Profile me = context.read<Authenticate>().me;
+
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.fromLTRB(24, 40, 24, 24),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ProfileImg(profileImg: me.profileImg, height: 144, width: 144),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              ProfileNickname(nickname: me.nickname),
+              ProfileEditButton(),
+            ],
+          ),
+          ProfileIntro(me.intro),
+          ProfileWebButtons(githubId: me.githubId, blogUrl: me.blogUrl),
+          ProfileInterests(me.interests),
+          ProfileBottomButtons(),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/other_profiles_body.dart b/lib/screens/profiles/other_profiles_body.dart
new file mode 100644
index 00000000..38766efe
--- /dev/null
+++ b/lib/screens/profiles/other_profiles_body.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/screens/profiles/buttons/message_send_button.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_img.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_intro.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_nickname.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_interests.dart';
+import 'package:guam_community_client/screens/profiles/profile/profile_web_buttons.dart';
+import 'package:provider/provider.dart';
+
+import '../../providers/user_auth/authenticate.dart';
+
+class OtherProfilesBody extends StatelessWidget {
+  final Profile profile;
+
+  OtherProfilesBody({this.profile});
+
+  @override
+  Widget build(BuildContext context) {
+    bool isMe = context.read<Authenticate>().isMe(profile.id);
+
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.fromLTRB(24, 40, 24, 24),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ProfileImg(profileImg: profile.profileImg, height: 144, width: 144),
+          ProfileNickname(nickname: profile.nickname, editable: false),
+          ProfileIntro(profile.intro ?? ""),
+          ProfileWebButtons(
+            githubId: profile.githubId ?? "",
+            blogUrl: profile.blogUrl ?? "",
+            isMe: isMe,
+          ),
+          // 추후 MyProfile의 id랑 비교해서 본인임이 확인되면 프로필 탭으로 이동하도록 하겠습니다.
+          if (!isMe) MessageSendButton(profile),
+          ProfileInterests(profile.interests),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/pages/blacklist_edit.dart b/lib/screens/profiles/pages/blacklist_edit.dart
new file mode 100644
index 00000000..ccf72e65
--- /dev/null
+++ b/lib/screens/profiles/pages/blacklist_edit.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../../commons/custom_app_bar.dart';
+import '../../../commons/common_img_nickname.dart';
+import '../buttons/blacklist_remove_button.dart';
+
+class BlackListEdit extends StatelessWidget {
+  final List<Map> blacklist = [
+    {
+      'id': 4,
+      'nickname': 'marcelko',
+      'profileImageUrl': 'https://t1.daumcdn.net/cfile/tistory/99A97E4C5D25E9C226',
+    },
+    {
+      'id': 5,
+      'nickname': 'chadan1',
+      'profileImageUrl': 'https://w.namu.la/s/40de86374ddd74756b31d4694a7434ee9398baa51fa5ae72d28f2eeeafdadf0c475c55c58e29a684920e0d6a42602b339f8aaf6d19764b04405a0f8bee7f598d2922db9475579419aac4635d0a71fdb8a4b2343cb550e6ed93e13c1a05cede75',
+    },
+    {
+      'id': 6,
+      'nickname': 'marcelkor',
+      'profileImageUrl': null,
+    },
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          leading: Back(),
+          title: '차단 목록 관리',
+        ),
+        body: SingleChildScrollView(
+          child: Padding(
+            padding: EdgeInsets.all(24),
+            child: Wrap(
+              runSpacing: 12,
+              children: [...blacklist.map((e) => Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  CommonImgNickname(
+                    userId: e['id'],
+                    imgUrl: e['profileImageUrl'],
+                    nickname: e['nickname'],
+                  ),
+                  BlackListRemoveButton()
+                ],
+              ))],
+            ),
+          ),
+        )
+    );
+  }
+}
diff --git a/lib/screens/profiles/pages/my_posts.dart b/lib/screens/profiles/pages/my_posts.dart
new file mode 100644
index 00000000..dfa41e1a
--- /dev/null
+++ b/lib/screens/profiles/pages/my_posts.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../../commons/custom_app_bar.dart';
+
+
+class MyPosts extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          leading: Back(),
+          title: '내가 쓴 글',
+        ),
+        body: SingleChildScrollView(
+          child: Padding(
+            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+            child: Column(
+              children: []
+            ),
+          ),
+        )
+    );
+  }
+}
diff --git a/lib/screens/profiles/pages/profiles_edit.dart b/lib/screens/profiles/pages/profiles_edit.dart
new file mode 100644
index 00000000..d78a1b81
--- /dev/null
+++ b/lib/screens/profiles/pages/profiles_edit.dart
@@ -0,0 +1,219 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:guam_community_client/mixins/toast.dart';
+import 'package:path_provider/path_provider.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/screens/profiles/buttons/profile_img_edit_button.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+import 'package:provider/provider.dart';
+import '../../../commons/custom_app_bar.dart';
+import '../../../commons/common_text_button.dart';
+import '../../../commons/custom_divider.dart';
+import '../../../providers/user_auth/authenticate.dart';
+import '../profile/profile_img.dart';
+import '../edit/profile_edit_nickname.dart';
+import '../edit/profile_edit_intro.dart';
+import '../edit/profile_edit_optional.dart';
+
+class ProfilesEdit extends StatefulWidget {
+  final Profile profile;
+
+  ProfilesEdit(this.profile);
+
+  @override
+  State<ProfilesEdit> createState() => _ProfilesEditState();
+}
+
+class _ProfilesEditState extends State<ProfilesEdit> with Toast {
+  bool sending = false;
+  Map<String, dynamic> input = {};
+  List<dynamic> profileImage = [];
+  String profileImg;
+
+  @override
+  void initState() {
+    input['nickname'] = widget.profile.nickname;
+    input['introduction'] = widget.profile.intro;
+    input['githubId'] = widget.profile.githubId;
+    input['blogUrl'] = widget.profile.blogUrl;
+    profileImg = widget.profile.profileImg;
+    super.initState();
+  }
+
+  void toggleSending() {
+    setState(() => sending = !sending);
+  }
+
+  void setInput(String _key, String _value) {
+    setState(() => input[_key] = _value);
+  }
+
+  Future<void> setImageFile(PickedFile val) async {
+    setState(() {
+      if (profileImage.isNotEmpty) profileImage.clear();
+      if (val != null) profileImage.add(val);
+    });
+  }
+
+  Future<void> resetImageFile() async {
+    setState(() {
+      profileImg = null;
+      if (profileImage.isNotEmpty) profileImage.clear();
+    });
+  }
+
+  /// import the path of images from assets directory
+  Future<File> getImageFileFromAssets(String path) async {
+    final byteData = await rootBundle.load('assets/$path');
+    final buffer = byteData.buffer;
+    Directory tempDir = await getTemporaryDirectory();
+    var filePath = tempDir.path + '/tmp.png'; /// arbitrary name & extension
+    return File(filePath).writeAsBytes(buffer.asUint8List(
+      byteData.offsetInBytes, byteData.lengthInBytes,
+    ));
+  }
+
+  Future setProfile() async {
+    toggleSending();
+    try {
+      return showToast(success: false, msg: '프로필 수정 디버깅 중입니다...');
+
+      if (input['nickname'] == '') {
+        return showToast(success: false, msg: '닉네임을 설정해주세요.');
+      }
+      // if (profileImage.isEmpty && profileImg == null) {
+      //   return showToast(success: false, msg: '프로필 사진을 설정해주세요.');
+      // }
+      await context.read<Authenticate>().setProfile(
+        fields: input,
+        files: profileImage.isNotEmpty
+            ? [File(profileImage[0].path)] /// 프사 새롭게 추가
+            : profileImg != null /// 프사 유지하거나 기본 프사로 바꾸거나
+                ? null
+                : [await getImageFileFromAssets('images/profile_image.png')],
+      ).then((successful) {
+        toggleSending();
+        if (successful) {
+          Navigator.maybePop(context);
+        } else {
+          print("Error!");
+        }
+      });
+    } catch (e) {
+      print(e);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      appBar: CustomAppBar(
+        leading: IconButton(
+          icon: SvgPicture.asset('assets/icons/back.svg'),
+          onPressed: () => showMaterialModalBottomSheet(
+            context: context,
+            useRootNavigator: true,
+            backgroundColor: GuamColorFamily.grayscaleWhite,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(20),
+                topRight: Radius.circular(20),
+              ),
+            ),
+            builder: (context) => SingleChildScrollView(
+              child: Container(
+                padding: EdgeInsets.only(left: 24, top: 24, right: 18, bottom: 14),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          '프로필 수정을 취소하시겠어요?',
+                          style: TextStyle(fontSize: 18, color: GuamColorFamily.grayscaleGray2),
+                        ),
+                        TextButton(
+                          onPressed: () => Navigator.of(context).pop(),
+                          child: Text(
+                            '돌아가기',
+                            style: TextStyle(fontSize: 16, color: GuamColorFamily.purpleCore,
+                            ),
+                          ),
+                          style: TextButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            minimumSize: Size(30, 26),
+                            alignment: Alignment.centerRight,
+                          ),
+                        ),
+                      ],
+                    ),
+                    CustomDivider(color: GuamColorFamily.grayscaleGray7),
+                    Padding(
+                      padding: EdgeInsets.symmetric(vertical: 20),
+                      child: Text(
+                        '수정된 내용이 사라집니다.',
+                        style: TextStyle(
+                          fontSize: 14,
+                          height: 1.6,
+                          color: GuamColorFamily.grayscaleGray2,
+                          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                        ),
+                      ),
+                    ),
+                    Center(
+                      child: TextButton(
+                        onPressed: () {
+                          Navigator.pop(context);
+                          Navigator.maybePop(context);
+                        },
+                        child: Text(
+                          '취소하기',
+                          style: TextStyle(fontSize: 16, color: GuamColorFamily.redCore),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+        title: '프로필 수정',
+        trailing: Padding(
+          padding: EdgeInsets.only(right: 8),
+          child: CommonTextButton(
+            text: '완료',
+            fontSize: 16,
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+            textColor: GuamColorFamily.purpleCore,
+            onPressed: () async => await setProfile(),
+          ),
+        ),
+      ),
+      body: SingleChildScrollView(
+        child: Container(
+          width: double.infinity,
+          padding: EdgeInsets.all(24),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              ProfileImg(newImage: profileImage, profileImg: profileImg, height: 96, width: 96),
+              ProfileImgEditButton(setImageFile, resetImageFile),
+              ProfileEditNickname(input['nickname'], setInput),
+              ProfileEditIntro(input['introduction'], setInput),
+              ProfileEditOptional(input, setInput),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/pages/saved_posts.dart b/lib/screens/profiles/pages/saved_posts.dart
new file mode 100644
index 00000000..46818d6b
--- /dev/null
+++ b/lib/screens/profiles/pages/saved_posts.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../../commons/custom_app_bar.dart';
+
+class SavedPosts extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          leading: Back(),
+          title: '저장한 글',
+        ),
+        body: SingleChildScrollView(
+          child: Padding(
+            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+            child: Column(
+              children: []
+            ),
+          ),
+        )
+    );
+  }
+}
diff --git a/lib/screens/profiles/pages/settings.dart b/lib/screens/profiles/pages/settings.dart
new file mode 100644
index 00000000..0291c373
--- /dev/null
+++ b/lib/screens/profiles/pages/settings.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../../commons/custom_app_bar.dart';
+import '../../../providers/user_auth/authenticate.dart';
+import '../buttons/long_button.dart';
+import 'blacklist_edit.dart';
+
+class Settings extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          leading: Back(),
+          title: '계정 설정',
+        ),
+        body: SingleChildScrollView(
+          child: Padding(
+            padding: EdgeInsets.all(24),
+            child: Wrap(
+              runSpacing: 12,
+              children: [
+                // LongButton(
+                //   label: '차단 목록 관리',
+                //   onPressed: () => Navigator.push(
+                //     context,
+                //     MaterialPageRoute(
+                //       builder: (_) => BlackListEdit()
+                //     )
+                //   )
+                // ),
+                LongButton(
+                  label: '로그아웃',
+                  onPressed: () async => context.read<Authenticate>().signOut()
+                ),
+              ],
+            ),
+          ),
+        )
+    );
+  }
+}
diff --git a/lib/screens/profiles/profile/profile_bottom_buttons.dart b/lib/screens/profiles/profile/profile_bottom_buttons.dart
new file mode 100644
index 00000000..49697a6e
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_bottom_buttons.dart
@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import '../buttons/long_button.dart';
+import '../pages/my_posts.dart';
+import '../pages/saved_posts.dart';
+import '../pages/settings.dart';
+
+class ProfileBottomButtons extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 24),
+      child: Wrap(
+        runSpacing: 12,
+        children: [
+          // LongButton(
+          //   label: '내가 쓴 글',
+          //   onPressed: () => Navigator.push(
+          //     context,
+          //     MaterialPageRoute(
+          //       builder: (_) => MyPosts()
+          //     )
+          //   )
+          // ),
+          // LongButton(
+          //   label: '저장한 글',
+          //   onPressed: () => Navigator.push(
+          //     context,
+          //     MaterialPageRoute(
+          //       builder: (_) => SavedPosts()
+          //     )
+          //   )
+          // ),
+          LongButton(
+            label: '계정 설정',
+            onPressed: () => Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (_) => Settings()
+              )
+            )
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/profile/profile_img.dart b/lib/screens/profiles/profile/profile_img.dart
new file mode 100644
index 00000000..7dbae535
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_img.dart
@@ -0,0 +1,79 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/image/closable_image_expanded.dart';
+import 'package:guam_community_client/helpers/http_request.dart';
+import 'package:guam_community_client/helpers/svg_provider.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+import '../../../commons/image/image_container.dart';
+
+class ProfileImg extends StatefulWidget {
+  final String profileImg;
+  final double height;
+  final double width;
+  final List<dynamic> newImage;
+
+  ProfileImg({this.profileImg, this.height, this.width, this.newImage});
+
+  @override
+  State<ProfileImg> createState() => _ProfileImgState();
+}
+
+class _ProfileImgState extends State<ProfileImg> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: widget.height,
+      width: widget.width,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: widget.profileImg != null ? Colors.transparent : Colors.grey,
+      ),
+      child: ClipOval(
+        child: widget.profileImg == null
+            ? widget.newImage != null && widget.newImage.isNotEmpty
+                ? Container( /// 프사 설정 안 된 상태에서 사진첩에서 사진 불러옴.
+                    child: ImageThumbnail(
+                      width: widget.width,
+                      height: widget.height,
+                      image: Image(
+                        image: FileImage(File(widget.newImage[0].path)),
+                        fit: BoxFit.fill,
+                      ),
+                    ),
+                  )
+                : Image( /// 프사가 아예 없거나 기본 사진으로 설정 버튼 누름.
+                    image: SvgProvider('assets/icons/profile_image.svg'),
+                    width: widget.width,
+                    height: widget.height,
+                  )
+            : widget.newImage != null && widget.newImage.isNotEmpty
+                ? Container( /// 프사 설정된 상태에서 사진첩에서 사진 불러옴.
+                    child: ImageThumbnail(
+                      width: widget.width,
+                      height: widget.height,
+                      image: Image(
+                        image: FileImage(File(widget.newImage[0].path)),
+                        fit: BoxFit.fill,
+                      ),
+                    ),
+                  )
+                : InkWell( /// 프사 설정된 상태에서 아무 작업도 안 함.
+                    child: FadeInImage(
+                      placeholder: MemoryImage(kTransparentImage),
+                      image: NetworkImage(HttpRequest().s3BaseAuthority + widget.profileImg),
+                      fit: BoxFit.cover,
+                    ),
+                    onTap: () {
+                      Navigator.of(context, rootNavigator: true).push(
+                        MaterialPageRoute(builder: (_) => ClosableImageExpanded(
+                          imagePath: widget.profileImg,
+                        )),
+                      );
+                    }
+                  )
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/profile/profile_interests.dart b/lib/screens/profiles/profile/profile_interests.dart
new file mode 100644
index 00000000..d79d5b4f
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_interests.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import '../buttons/profile_interest_button.dart';
+import '../../../models/profiles/interest.dart';
+
+class ProfileInterests extends StatelessWidget {
+  final List<Interest> interests;
+
+  ProfileInterests(this.interests);
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      alignment: WrapAlignment.start,
+      spacing: 8,
+      runSpacing: 5,
+      children: [...interests.map((i) => ProfileInterestButton(i))],
+    );
+  }
+}
diff --git a/lib/screens/profiles/profile/profile_intro.dart b/lib/screens/profiles/profile/profile_intro.dart
new file mode 100644
index 00000000..540d0c66
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_intro.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class ProfileIntro extends StatelessWidget {
+  final String intro;
+
+  ProfileIntro(this.intro);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      intro ?? '',
+      textAlign: TextAlign.center,
+      style: TextStyle(
+          fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+          fontSize: 14,
+          color: GuamColorFamily.grayscaleGray3,
+          height: 22.4/14
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/profiles/profile/profile_nickname.dart b/lib/screens/profiles/profile/profile_nickname.dart
new file mode 100644
index 00000000..dd98c79f
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_nickname.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+
+class ProfileNickname extends StatelessWidget {
+  final String nickname;
+  final bool editable;
+
+  ProfileNickname({this.nickname, this.editable = true});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      child: Text(
+        nickname,
+        textAlign: TextAlign.center,
+        style: TextStyle(
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+            fontSize: 18,
+            color: GuamColorFamily.grayscaleGray2,
+            height: 28.8/18
+        ),
+      ),
+      // left 26 of icon text width to align nickname at center
+      // 수정 가능한 경우는 edit icon 때문에 padding 조절함.
+      padding: EdgeInsets.fromLTRB((editable ? 26+8 : 8).toDouble(), 16, 8, 16),
+    );
+  }
+}
diff --git a/lib/screens/profiles/profile/profile_web_buttons.dart b/lib/screens/profiles/profile/profile_web_buttons.dart
new file mode 100644
index 00000000..6ee1ffcc
--- /dev/null
+++ b/lib/screens/profiles/profile/profile_web_buttons.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import '../buttons/web_button.dart';
+
+class ProfileWebButtons extends StatelessWidget {
+  final String githubId;
+  final String blogUrl;
+  final bool isMe;
+  static const String githubUrl = 'https://github.com/';
+
+  ProfileWebButtons({this.githubId, this.blogUrl, this.isMe=true});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.fromLTRB(8, 5, 0, isMe ? 24 : 12),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        // crossAxisAlignment: CrossAxisAlignment.,
+        children: [
+          if(githubId != null) WebButton(githubUrl+githubId, 'assets/icons/github.svg'),
+          if(blogUrl != null) WebButton(blogUrl, 'assets/icons/blog.svg'),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/profiles/profiles_app.dart b/lib/screens/profiles/profiles_app.dart
new file mode 100644
index 00000000..575b93ad
--- /dev/null
+++ b/lib/screens/profiles/profiles_app.dart
@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/back.dart';
+import 'package:guam_community_client/commons/guam_progress_indicator.dart';
+import 'package:guam_community_client/models/profiles/profile.dart';
+import 'package:guam_community_client/providers/messages/messages.dart';
+import 'package:guam_community_client/providers/user_auth/authenticate.dart';
+import 'package:guam_community_client/screens/messages/message_box.dart';
+import 'package:guam_community_client/screens/profiles/other_profiles_body.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+
+import '../../commons/custom_app_bar.dart';
+import 'my_profiles_body.dart';
+
+class ProfilesApp extends StatelessWidget {
+  final int userId;
+
+  ProfilesApp({this.userId});
+
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Messages(authProvider)),
+      ],
+      child: ProfilesAppScaffold(userId),
+    );
+  }
+}
+
+class ProfilesAppScaffold extends StatefulWidget {
+  final int userId;
+
+  ProfilesAppScaffold(this.userId);
+
+  @override
+  State<ProfilesAppScaffold> createState() => _ProfilesAppScaffoldState();
+}
+
+class _ProfilesAppScaffoldState extends State<ProfilesAppScaffold> {
+  Future<Profile> otherProfile;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.userId != null)
+      otherProfile = Future.delayed(
+        Duration.zero,
+        () async => context.read<Authenticate>().getUserProfile(widget.userId),
+      );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // 특정 userId를 받아 otherProfile 위젯 호출하는 경우.
+    if (widget.userId != null){
+      return FutureBuilder(
+        future: otherProfile,
+        builder: (_, AsyncSnapshot<Profile> snapshot) {
+          // FutureBuilder에서 받아오는 otherProfile 존재 여부에 따라 위젯 변경
+          if (snapshot.hasData){
+            return Scaffold(
+              backgroundColor: GuamColorFamily.grayscaleWhite,
+              appBar: CustomAppBar(
+                title: '프로필',
+                leading: Back(),
+              ),
+              body: SingleChildScrollView(
+                child: OtherProfilesBody(profile: snapshot.data)
+              ),
+            );
+          } else if (snapshot.hasError) {
+            // 에러 메시지 띄워주기
+            return Center(child: guamProgressIndicator());
+          } else {
+            return Container(
+              color: GuamColorFamily.grayscaleWhite,
+              child: Center(
+                child: CircularProgressIndicator(
+                  color: GuamColorFamily.purpleCore,
+                ),
+              ),
+            );
+          }
+        }
+      );
+    } else {
+      // 특정 유저 id를 받지 않아 프로필 탭으로 이동하는 경우
+      return Scaffold(
+        backgroundColor: GuamColorFamily.grayscaleWhite,
+        appBar: CustomAppBar(
+          title: '프로필',
+          trailing: MessageBox(),
+        ),
+        body: SingleChildScrollView(child: MyProfilesBody()),
+      );
+    }
+  }
+}
diff --git a/lib/screens/search/search_app.dart b/lib/screens/search/search_app.dart
new file mode 100644
index 00000000..eb69da0b
--- /dev/null
+++ b/lib/screens/search/search_app.dart
@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/screens/search/search_feed.dart';
+import 'package:guam_community_client/screens/search/search_history.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../commons/guam_progress_indicator.dart';
+import '../../providers/posts/posts.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'search_app_bar.dart';
+import 'search_app_textfield.dart';
+import '../../providers/search/search.dart';
+
+class SearchApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Authenticate authProvider = context.read<Authenticate>();
+
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Search(authProvider)),
+        ChangeNotifierProvider(create: (_) => Posts(authProvider)),
+      ],
+      child: SearchAppScaffold(),
+    );
+  }
+}
+
+class SearchAppScaffold extends StatefulWidget {
+  @override
+  State<SearchAppScaffold> createState() => _SearchAppScaffoldState();
+}
+
+class _SearchAppScaffoldState extends State<SearchAppScaffold> {
+  bool showHistory = true;
+
+  void showSearchHistory(bool) {
+    setState(() => showHistory = bool);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final searchProvider = context.watch<Search>();
+
+    return Scaffold(
+      backgroundColor: GuamColorFamily.purpleLight3,
+      appBar: SearchAppBar(
+        title: SearchAppTextField(showHistory, showSearchHistory),
+      ),
+      body: Container(
+          width: double.infinity,
+          child: searchProvider.searchedPosts.isEmpty
+              ? showHistory
+                ? SearchHistory(
+                    searchList: [...searchProvider.history.reversed],
+                    showSearchHistory: showSearchHistory,
+                  )
+                : searchProvider.loading
+                    ? Center(child: guamProgressIndicator())
+                    : Center(child: Text('검색 결과가 없습니다.', style: TextStyle(fontSize: 16)))
+              : showHistory
+                ? SearchHistory(
+                    searchList: [...searchProvider.history.reversed],
+                    showSearchHistory: showSearchHistory,
+                  )
+                : searchProvider.loading
+                    ? Center(child: guamProgressIndicator())
+                    : SearchFeed()
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_app_bar.dart b/lib/screens/search/search_app_bar.dart
new file mode 100644
index 00000000..4504d672
--- /dev/null
+++ b/lib/screens/search/search_app_bar.dart
@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+
+class SearchAppBar extends StatelessWidget with PreferredSizeWidget {
+  final Widget title;
+  final dynamic trailing;
+  final dynamic bottom;
+
+  SearchAppBar({this.title, this.trailing, this.bottom});
+
+  @override
+  Size get preferredSize => Size.fromHeight(AppBar().preferredSize.height);
+
+  @override
+  Widget build(BuildContext context) {
+    var iconColor = GuamColorFamily.grayscaleGray1;
+
+    return AppBar(
+      elevation: 0,
+      title: title,
+      automaticallyImplyLeading: false,
+      bottom: bottom,
+      actions: trailing == null
+          ? []
+          : [Material(color: Colors.transparent, child: trailing)],
+      backgroundColor: GuamColorFamily.grayscaleWhite,
+      iconTheme: IconThemeData(
+        color: iconColor,
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_app_textfield.dart b/lib/screens/search/search_app_textfield.dart
new file mode 100644
index 00000000..bfee6c49
--- /dev/null
+++ b/lib/screens/search/search_app_textfield.dart
@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:provider/provider.dart';
+import '../../commons/common_text_button.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import '../../providers/search/search.dart';
+
+class SearchAppTextField extends StatefulWidget {
+  final bool showHistory;
+  final Function showSearchHistory;
+
+  SearchAppTextField(this.showHistory, this.showSearchHistory);
+
+  @override
+  State<StatefulWidget> createState() => SearchAppTextFieldState();
+}
+
+class SearchAppTextFieldState extends State<SearchAppTextField> {
+  static final controller = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    final searchProvider = context.read<Search>();
+    bool isTextEmpty = controller.text.trim() == '';
+
+    return Container(
+      height: 40,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+            child: TextField(
+              maxLines: 1,
+              autofocus: false,
+              controller: controller,
+              keyboardType: TextInputType.multiline,
+              textInputAction: TextInputAction.search,
+              cursorColor: GuamColorFamily.purpleCore,
+              style: TextStyle(
+                fontSize: 14,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                color: GuamColorFamily.grayscaleGray1,
+                height: 22/14,
+              ),
+              decoration: InputDecoration(
+                hintText: "검색어를 입력해주세요.",
+                prefixIcon: Icon(
+                  Icons.search_outlined,
+                  color: GuamColorFamily.purpleCore,
+                  size: 20,
+                ),
+                suffixIcon: !isTextEmpty
+                    ? IconButton(
+                        padding: EdgeInsets.zero,
+                        constraints: BoxConstraints(),
+                        onPressed: () {
+                          controller.clear();
+                          isTextEmpty = true;
+                        },
+                        icon: SvgPicture.asset(
+                          'assets/icons/cancel_filled_x_transparent.svg',
+                          color: GuamColorFamily.grayscaleGray6,
+                          width: 18,
+                          height: 18,
+                        ),
+                      )
+                    : null,
+                contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(10),
+                  borderSide: BorderSide(color: GuamColorFamily.purpleLight2),
+                ),
+                enabledBorder: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(10),
+                  borderSide: BorderSide(color: GuamColorFamily.purpleLight2),
+                ),
+                focusedBorder: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(10),
+                  borderSide: BorderSide(color: GuamColorFamily.purpleCore),
+                ),
+              ),
+              onChanged: (e) => isTextEmpty = controller.text.trim() == '',
+              onSubmitted: (word) {
+                if (!isTextEmpty) {
+                  searchProvider.searchPosts(query: word, context: context);
+                  widget.showSearchHistory(false); // 검색 시 히스토리 안보여줌.
+                  searchProvider.saveHistory(word);
+                  FocusScope.of(context).unfocus();
+                }
+              },
+            ),
+          ),
+          Padding(padding: EdgeInsets.only(right: 4)),
+          // '취소' 키 누르면 'x'키 및 '취소' 키 사라짐.
+          if (!isTextEmpty || searchProvider.searchedPosts.isNotEmpty)
+            CommonTextButton(
+              text: '취소',
+              fontSize: 14,
+              textColor: GuamColorFamily.purpleCore,
+              onPressed: () {
+                isTextEmpty = true;
+                widget.showSearchHistory(true); // 취소하면 history 보여줌.
+                FocusScope.of(context).unfocus();
+                controller.clear();
+              }
+            ),
+        ],
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_feed.dart b/lib/screens/search/search_feed.dart
new file mode 100644
index 00000000..fb7b3bfc
--- /dev/null
+++ b/lib/screens/search/search_feed.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/sub_headings.dart';
+import 'package:guam_community_client/screens/boards/posts/preview/post_preview.dart';
+import 'package:guam_community_client/screens/search/search_filter.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import '../../providers/search/search.dart';
+
+class SearchFeed extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final searchProvider = context.watch<Search>();
+
+    return SingleChildScrollView(
+      child: Container(
+        color: GuamColorFamily.purpleLight3,
+        child: Column(
+          children: [
+            Padding(
+              padding: EdgeInsets.fromLTRB(24, 12, 24, 0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  SubHeadings(
+                    '검색결과 ${searchProvider.searchedPosts.length}건',
+                    fontColor: GuamColorFamily.grayscaleGray1,
+                    fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+                    fontSize: 14,
+                  ),
+                  SearchFilter(provider: context.read<Search>()),
+                ],
+              ),
+            ),
+            Column(
+              children: [...searchProvider.searchedPosts.map((p) => PostPreview(p))],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_filter.dart b/lib/screens/search/search_filter.dart
new file mode 100644
index 00000000..2b3d5ced
--- /dev/null
+++ b/lib/screens/search/search_filter.dart
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/common_text_button.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import '../../providers/search/search.dart';
+
+class SearchFilter extends StatefulWidget {
+  final provider;
+
+  SearchFilter({this.provider});
+
+  @override
+  State<StatefulWidget> createState() => SearchFilterState();
+}
+
+class SearchFilterState extends State<SearchFilter> {
+  var filter;
+
+  @override
+  void initState() {
+    filter = Search.filters.first;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [...Search.filters.map((f) => CommonTextButton(
+        text: f.label,
+        fontSize: 14,
+        fontFamily: filter == f ? GuamFontFamily.SpoqaHanSansNeoMedium : GuamFontFamily.SpoqaHanSansNeoRegular,
+        textColor: filter == f ? GuamColorFamily.purpleDark1 : GuamColorFamily.grayscaleGray4,
+        onPressed: () {
+          setState(() => filter = f);
+          widget.provider.sortSearchedPosts(f);
+        },
+      ))],
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_history.dart b/lib/screens/search/search_history.dart
new file mode 100644
index 00000000..e4d10105
--- /dev/null
+++ b/lib/screens/search/search_history.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/custom_divider.dart';
+import 'package:guam_community_client/screens/search/search_word.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import '../../commons/sub_headings.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+
+class SearchHistory extends StatelessWidget {
+  final List<String> searchList;
+  final Function showSearchHistory;
+
+  SearchHistory({this.searchList, this.showSearchHistory});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        Container(
+          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+          decoration: BoxDecoration(color: GuamColorFamily.grayscaleGray8),
+          child: SubHeadings(
+            '최근 검색어',
+            fontSize: 14,
+            fontFamily: GuamFontFamily.SpoqaHanSansNeoMedium,
+            fontColor: GuamColorFamily.grayscaleGray4,
+          ),
+        ),
+        CustomDivider(color: GuamColorFamily.grayscaleGray7),
+        if (searchList.isNotEmpty)
+          Container(
+            color: GuamColorFamily.grayscaleWhite,
+            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+            child: Column(
+              children: [...searchList.map((w) => Padding(
+                child: SearchWord(w, showSearchHistory),
+                padding: EdgeInsets.only(bottom: 16),
+              ))],
+            ),
+          ),
+      ],
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/search/search_word.dart b/lib/screens/search/search_word.dart
new file mode 100644
index 00000000..8f1beb1d
--- /dev/null
+++ b/lib/screens/search/search_word.dart
@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/commons/icon_text.dart';
+import 'package:guam_community_client/screens/search/search_app_textfield.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:guam_community_client/styles/fonts.dart';
+import 'package:provider/provider.dart';
+import '../../providers/search/search.dart';
+
+class SearchWord extends StatelessWidget {
+  final String word;
+  final Function showSearchHistory;
+
+  SearchWord(this.word, this.showSearchHistory);
+
+  @override
+  Widget build(BuildContext context) {
+    final searchProvider = context.read<Search>();
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Expanded(
+          child: InkWell(
+            child: Text(
+              word,
+              style: TextStyle(
+                fontSize: 14,
+                height: 22.4/14,
+                overflow: TextOverflow.ellipsis,
+                color: GuamColorFamily.grayscaleGray2,
+                fontFamily: GuamFontFamily.SpoqaHanSansNeoRegular,
+              ),
+            ),
+            onTap: () {
+              searchProvider.searchPosts(query: word);
+              showSearchHistory(false);
+              SearchAppTextFieldState.controller.text = word;
+              searchProvider.saveHistory(word);
+            },
+          ),
+        ),
+        IconText(
+          iconSize: 18,
+          iconColor: GuamColorFamily.grayscaleGray6,
+          iconPath: 'assets/icons/cancel_filled_x_transparent.svg',
+          paddingBtw: 0,
+          onPressed: () => searchProvider.removeHistory(word),
+        ),
+      ],
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/user_auth/auth.dart b/lib/screens/user_auth/auth.dart
new file mode 100644
index 00000000..e0c74fd2
--- /dev/null
+++ b/lib/screens/user_auth/auth.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/screens/login/signup/signup.dart';
+import 'package:provider/provider.dart';
+import '../../providers/home/home_provider.dart';
+import '../app/app.dart';
+import '../login/login_page.dart';
+import '../../providers/user_auth/authenticate.dart';
+
+class Auth extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final authProvider = context.watch<Authenticate>();
+
+    return authProvider.userSignedIn()
+        ? authProvider.profileExists()
+          ? ChangeNotifierProvider(
+            create: (_) => HomeProvider(),
+            child: App(),
+          )
+          : SignUp()
+        : LoginPage();
+  }
+}
diff --git a/lib/screens/user_auth/kakao_login.dart b/lib/screens/user_auth/kakao_login.dart
new file mode 100644
index 00000000..72334e02
--- /dev/null
+++ b/lib/screens/user_auth/kakao_login.dart
@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:guam_community_client/styles/colors.dart';
+import 'package:kakao_flutter_sdk/all.dart';
+import '../../providers/user_auth/authenticate.dart';
+import 'package:provider/provider.dart';
+import '../login/login_button.dart';
+
+class KakaoLogin extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return KakaoLoginState();
+  }
+}
+
+class KakaoLoginState extends State<KakaoLogin> {
+  Authenticate authProvider;
+  bool _isKakaoTalkInstalled;
+
+  @override
+  void initState() {
+    authProvider = context.read<Authenticate>();
+    KakaoContext.clientId = authProvider.kakaoClientId;
+    KakaoContext.javascriptClientId = authProvider.kakaoJavascriptClientId;
+    _initKakaoTalkInstalled();
+    super.initState();
+  }
+
+  void _initKakaoTalkInstalled() async {
+    final installed = await isKakaoTalkInstalled();
+    setState(() => _isKakaoTalkInstalled = installed);
+  }
+
+  _issueAccessToken(String authCode) async {
+    try {
+      final token = await AuthApi.instance.issueAccessToken(authCode);
+      final tokenManager = new DefaultTokenManager();
+      tokenManager.setToken(token); // Store access token in TokenManager for future API requests.
+      return token;
+    } catch (e) {
+      print(e.toString());
+    }
+  }
+
+  /*
+  * Kakao login via browser
+  */
+  _loginWithKakao() async {
+    try {
+      authProvider.toggleLoading();
+
+      final authCode = await AuthCodeClient.instance.request();
+      final token = await _issueAccessToken(authCode);
+      await authProvider.kakaoSignIn(token.accessToken);
+    } on KakaoAuthException catch (e) {
+      print("Kakao Auth Exception:\n$e");
+    } on KakaoClientException catch (e) {
+      print("Kakao Client Exception:\n$e");
+    } catch (e) {
+      print(e);
+    } finally {
+      authProvider.toggleLoading();
+    }
+  }
+
+  /*
+  * Kakao login via KakaoTalk
+  */
+  _loginWithTalk() async {
+    try {
+      authProvider.toggleLoading();
+
+      final authCode = await AuthCodeClient.instance.requestWithTalk();
+      final token = await _issueAccessToken(authCode);
+      await authProvider.kakaoSignIn(token.accessToken);
+    } on KakaoAuthException catch (e) {
+      print("Kakao Auth Exception:\n$e");
+    } on KakaoClientException catch (e) {
+      print("Kakao Client Exception:\n$e");
+    } catch (e) {
+      print(e);
+    } finally {
+      authProvider.toggleLoading();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LoginButton(
+      'kakao_logo',
+      '카카오톡으로 시작하기',
+      GuamColorFamily.kakaoYellow,
+      () => _isKakaoTalkInstalled ? _loginWithTalk() : _loginWithKakao()
+    );
+  }
+}
diff --git a/lib/screens/user_auth/sign_in.dart b/lib/screens/user_auth/sign_in.dart
new file mode 100644
index 00000000..b91bc49a
--- /dev/null
+++ b/lib/screens/user_auth/sign_in.dart
@@ -0,0 +1,58 @@
+// import 'package:flutter/material.dart';
+// import 'package:flutter_form_builder/flutter_form_builder.dart';
+// import '../../commons/custom_app_bar.dart';
+// import 'package:provider/provider.dart';
+// import '../../providers/user_auth/authenticate.dart';
+//
+// class SignIn extends StatelessWidget {
+//   final _formKey = GlobalKey<FormBuilderState>();
+//
+//   @override
+//   Widget build(BuildContext context) {
+//     return Scaffold(
+//         appBar: CustomAppBar(title: '로그인'),
+//         body: Column(
+//           children: [
+//             FormBuilder(
+//               key: _formKey,
+//               child: Column(
+//                 children: [
+//                   FormBuilderTextField(
+//                     name: 'email',
+//                     decoration: InputDecoration(
+//                       labelText: '이메일',
+//                     ),
+//                     valueTransformer: (text) => text.trim(),
+//                     validator: FormBuilderValidators.compose([
+//                       FormBuilderValidators.required(context),
+//                     ]),
+//                     keyboardType: TextInputType.text,
+//                   ),
+//                   FormBuilderTextField(
+//                     name: 'password',
+//                     decoration: InputDecoration(
+//                       labelText: '비밀번호',
+//                     ),
+//                     obscureText: true,
+//                     valueTransformer: (text) => text.trim(),
+//                     validator: FormBuilderValidators.compose([
+//                       FormBuilderValidators.required(context),
+//                     ]),
+//                     keyboardType: TextInputType.text,
+//                   ),
+//                   FlatButton(
+//                       onPressed: () {
+//                         if (_formKey.currentState.saveAndValidate()) {
+//                           // context.read<Authenticate>()
+//                           //     .signIn(params: _formKey.currentState.value)
+//                           //     .then((val) => Navigator.of(context).popUntil((route) => route.isFirst));
+//                         }
+//                       },
+//                       child: const Text('확인'))
+//                 ],
+//               ),
+//             )
+//           ],
+//         ));
+//   }
+// }
diff --git a/lib/screens/user_auth/sign_out.dart b/lib/screens/user_auth/sign_out.dart
new file mode 100644
index 00000000..3c604691
--- /dev/null
+++ b/lib/screens/user_auth/sign_out.dart
@@ -0,0 +1,14 @@
+// import 'package:flutter/material.dart';
+// import 'package:provider/provider.dart';
+// import '../../providers/user_auth/authenticate.dart';
+// import '../../commons/buttons/common_outlined_button.dart';
+//
+// class SignOut extends StatelessWidget {
+//   @override
+//   Widget build(BuildContext context) {
+//     return commonOutlinedButton(
+//       text: "로그아웃",
+//       onPressed: () => context.read<Authenticate>().signOut()
+//     );
+//   }
+// }
diff --git a/lib/screens/user_auth/sign_up.dart b/lib/screens/user_auth/sign_up.dart
new file mode 100644
index 00000000..96271b91
--- /dev/null
+++ b/lib/screens/user_auth/sign_up.dart
@@ -0,0 +1,70 @@
+// import 'package:flutter/material.dart';
+// import 'package:flutter_form_builder/flutter_form_builder.dart';
+// import '../../commons/custom_app_bar.dart';
+// import 'package:provider/provider.dart';
+// import '../../providers/user_auth/authenticate.dart';
+//
+// class SignUp extends StatelessWidget {
+//   final _formKey = GlobalKey<FormBuilderState>();
+//
+//   @override
+//   Widget build(BuildContext context) {
+//     return Scaffold(
+//         appBar: CustomAppBar(title: '회원가입'),
+//         body: Column(
+//           children: [
+//             FormBuilder(
+//               key: _formKey,
+//               child: Column(
+//                 children: [
+//                   FormBuilderTextField(
+//                     name: 'name',
+//                     decoration: InputDecoration(
+//                       labelText: '이름',
+//                     ),
+//                     valueTransformer: (text) => text.trim(),
+//                     validator: FormBuilderValidators.compose([
+//                       FormBuilderValidators.required(context),
+//                     ]),
+//                     keyboardType: TextInputType.text,
+//                   ),
+//                   FormBuilderTextField(
+//                     name: 'email',
+//                     decoration: InputDecoration(
+//                       labelText: '이메일',
+//                     ),
+//                     valueTransformer: (text) => text.trim(),
+//                     validator: FormBuilderValidators.compose([
+//                       FormBuilderValidators.required(context),
+//                     ]),
+//                     keyboardType: TextInputType.text,
+//                   ),
+//                   FormBuilderTextField(
+//                     name: 'password',
+//                     decoration: InputDecoration(
+//                       labelText: '비밀번호',
+//                     ),
+//                     obscureText: true,
+//                     valueTransformer: (text) => text.trim(),
+//                     validator: FormBuilderValidators.compose([
+//                       FormBuilderValidators.required(context),
+//                     ]),
+//                     keyboardType: TextInputType.text,
+//                   ),
+//                   FlatButton(
+//                       onPressed: () {
+//                         // if (_formKey.currentState.saveAndValidate()) {
+//                         //   context.read<Authenticate>().signUp(params: _formKey.currentState.value)
+//                         //       .then((val) => Navigator.of(context).popUntil((route) => route.isFirst));
+//                         // }
+//                       },
+//                       child: const Text('확인')
+//                   )
+//                 ],
+//               ),
+//             )
+//           ],
+//         )
+//     );
+//   }
+// }
diff --git a/lib/styles/colors.dart b/lib/styles/colors.dart
new file mode 100644
index 00000000..3f34cef1
--- /dev/null
+++ b/lib/styles/colors.dart
@@ -0,0 +1,42 @@
+import 'dart:ui';
+
+import 'package:hexcolor/hexcolor.dart';
+
+class HexColorToColor extends Color {
+  static int _getColorFromHex(String hexColor) {
+    return int.parse(hexColor, radix: 16);
+  }
+  HexColorToColor(final String hexColor) : super(_getColorFromHex(hexColor));
+}
+
+class GuamColorFamily {
+  static HexColor grayscaleGray1 = HexColor('#1D1D1D');
+  static HexColor grayscaleGray2 = HexColor('#4E4E4E');
+  static HexColor grayscaleGray3 = HexColor('#767676');
+  static HexColor grayscaleGray4 = HexColor('#A0A0A0');
+  static HexColor grayscaleGray5 = HexColor('#C5C5C5');
+  static HexColor grayscaleGray6 = HexColor('#E1E1E1');
+  static HexColor grayscaleGray7 = HexColor('#F2F2F2');
+  static HexColor grayscaleGray8 = HexColor('#FDFDFD');
+  static HexColor grayscaleWhite = HexColor('#FFFFFF');
+
+  static HexColor purpleCore = HexColor('#6951FF');
+  static HexColor purpleDark1 = HexColor('#5038E3');
+  static HexColor purpleLight1 = HexColor('#9F8FFF');
+  static HexColor purpleLight2 = HexColor('#E5E1FF');
+  static HexColor purpleLight3 = HexColor('#F9F8FF');
+
+  static HexColor blueCore = HexColor('#5483F1');
+
+  static HexColor pinkCore = HexColor('#E874F2');
+
+  static HexColor greenCore = HexColor('#75D973');
+
+  static HexColor orangeCore = HexColor('#F3B962');
+
+  static HexColor redCore = HexColor('#F37462');
+
+  static HexColor fuchsiaCore = HexColor('#EF5DA8');
+
+  static HexColor kakaoYellow = HexColor('#FFCD00');
+}
diff --git a/lib/styles/fonts.dart b/lib/styles/fonts.dart
new file mode 100644
index 00000000..2cde99d9
--- /dev/null
+++ b/lib/styles/fonts.dart
@@ -0,0 +1,5 @@
+class GuamFontFamily {
+  static const SpoqaHanSansNeoMedium = "SpoqaHanSansNeoMedium";
+  static const SpoqaHanSansNeoRegular = "SpoqaHanSansNeoRegular";
+  static const Poppins = "Poppins";
+}
diff --git a/pubspec.lock b/pubspec.lock
index 7ffced4e..ce190f05 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.6.1"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -15,20 +15,34 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  bot_toast:
+    dependency: "direct main"
+    description:
+      name: bot_toast
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.2"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.1"
   characters:
     dependency: transitive
     description:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -36,6 +50,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  cloud_firestore:
+    dependency: "direct main"
+    description:
+      name: cloud_firestore
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.17"
+  cloud_firestore_platform_interface:
+    dependency: transitive
+    description:
+      name: cloud_firestore_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.5.7"
+  cloud_firestore_web:
+    dependency: transitive
+    description:
+      name: cloud_firestore_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.6.16"
   collection:
     dependency: transitive
     description:
@@ -43,13 +78,48 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.15.0"
+  conditional_builder:
+    dependency: "direct main"
+    description:
+      name: conditional_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
+  cross_file:
+    dependency: transitive
+    description:
+      name: cross_file
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.3+1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.2"
   cupertino_icons:
     dependency: "direct main"
     description:
       name: cupertino_icons
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
+  dio:
+    dependency: "direct main"
+    description:
+      name: dio
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.6"
+  dotted_border:
+    dependency: "direct main"
+    description:
+      name: dotted_border
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0+1"
   fake_async:
     dependency: transitive
     description:
@@ -57,30 +127,376 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.0"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.1"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.2"
+  firebase_analytics:
+    dependency: "direct main"
+    description:
+      name: firebase_analytics
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "9.1.9"
+  firebase_analytics_platform_interface:
+    dependency: transitive
+    description:
+      name: firebase_analytics_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.7"
+  firebase_analytics_web:
+    dependency: transitive
+    description:
+      name: firebase_analytics_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0+14"
+  firebase_auth:
+    dependency: "direct main"
+    description:
+      name: firebase_auth
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.3.19"
+  firebase_auth_platform_interface:
+    dependency: transitive
+    description:
+      name: firebase_auth_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.2.7"
+  firebase_auth_web:
+    dependency: transitive
+    description:
+      name: firebase_auth_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.3.16"
+  firebase_core:
+    dependency: "direct main"
+    description:
+      name: firebase_core
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.17.1"
+  firebase_core_platform_interface:
+    dependency: transitive
+    description:
+      name: firebase_core_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
+  firebase_core_web:
+    dependency: transitive
+    description:
+      name: firebase_core_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.6.4"
+  firebase_messaging:
+    dependency: "direct main"
+    description:
+      name: firebase_messaging
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "11.4.1"
+  firebase_messaging_platform_interface:
+    dependency: transitive
+    description:
+      name: firebase_messaging_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.5.1"
+  firebase_messaging_web:
+    dependency: transitive
+    description:
+      name: firebase_messaging_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.4.1"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_form_builder:
+    dependency: "direct main"
+    description:
+      name: flutter_form_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.2.0"
+  flutter_linkify:
+    dependency: "direct main"
+    description:
+      name: flutter_linkify
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.2"
+  flutter_localizations:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_mentions:
+    dependency: "direct main"
+    description:
+      name: flutter_mentions
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
+  flutter_plugin_android_lifecycle:
+    dependency: transitive
+    description:
+      name: flutter_plugin_android_lifecycle
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  flutter_portal:
+    dependency: "direct main"
+    description:
+      name: flutter_portal
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0"
+  flutter_secure_storage:
+    dependency: "direct main"
+    description:
+      name: flutter_secure_storage
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.2"
+  flutter_secure_storage_linux:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
+  flutter_secure_storage_macos:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
+  flutter_secure_storage_platform_interface:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
+  flutter_secure_storage_web:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
+  flutter_secure_storage_windows:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.2"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.23.0+1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  hexcolor:
+    dependency: "direct main"
+    description:
+      name: hexcolor
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.7"
+  http:
+    dependency: "direct main"
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.13.4"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.1"
+  image_picker:
+    dependency: "direct main"
+    description:
+      name: image_picker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.5+4"
+  image_picker_for_web:
+    dependency: transitive
+    description:
+      name: image_picker_for_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.8"
+  image_picker_platform_interface:
+    dependency: transitive
+    description:
+      name: image_picker_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.5.0"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.17.0"
+  jiffy:
+    dependency: "direct main"
+    description:
+      name: jiffy
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.3"
+  json_annotation:
+    dependency: "direct main"
+    description:
+      name: json_annotation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.5.0"
+  kakao_flutter_sdk:
+    dependency: "direct main"
+    description:
+      name: kakao_flutter_sdk
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.0"
+  linkify:
+    dependency: transitive
+    description:
+      name: linkify
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.0"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
+    version: "1.7.0"
+  modal_bottom_sheet:
+    dependency: "direct main"
+    description:
+      name: modal_bottom_sheet
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
+  package_info:
+    dependency: "direct main"
+    description:
+      name: package_info
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
+  package_info_plus:
+    dependency: transitive
+    description:
+      name: package_info_plus
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.4.2"
+  package_info_plus_linux:
+    dependency: transitive
+    description:
+      name: package_info_plus_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5"
+  package_info_plus_macos:
+    dependency: transitive
+    description:
+      name: package_info_plus_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
     version: "1.3.0"
+  package_info_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: package_info_plus_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
+  package_info_plus_web:
+    dependency: transitive
+    description:
+      name: package_info_plus_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5"
+  package_info_plus_windows:
+    dependency: transitive
+    description:
+      name: package_info_plus_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5"
   path:
     dependency: transitive
     description:
@@ -88,6 +504,160 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.1+1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.1"
+  path_provider:
+    dependency: "direct main"
+    description:
+      name: path_provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.10"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.14"
+  path_provider_ios:
+    dependency: transitive
+    description:
+      name: path_provider_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.9"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.6"
+  path_provider_macos:
+    dependency: transitive
+    description:
+      name: path_provider_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  path_provider_platform_interface:
+    dependency: transitive
+    description:
+      name: path_provider_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.4"
+  path_provider_windows:
+    dependency: transitive
+    description:
+      name: path_provider_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
+  platform:
+    dependency: "direct main"
+    description:
+      name: platform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.2"
+  process:
+    dependency: transitive
+    description:
+      name: process
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.4"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.0"
+  shared_preferences:
+    dependency: "direct main"
+    description:
+      name: shared_preferences
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.15"
+  shared_preferences_android:
+    dependency: transitive
+    description:
+      name: shared_preferences_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.12"
+  shared_preferences_ios:
+    dependency: transitive
+    description:
+      name: shared_preferences_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  shared_preferences_linux:
+    dependency: transitive
+    description:
+      name: shared_preferences_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  shared_preferences_macos:
+    dependency: transitive
+    description:
+      name: shared_preferences_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.4"
+  shared_preferences_platform_interface:
+    dependency: transitive
+    description:
+      name: shared_preferences_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
+  shared_preferences_web:
+    dependency: transitive
+    description:
+      name: shared_preferences_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.4"
+  shared_preferences_windows:
+    dependency: transitive
+    description:
+      name: shared_preferences_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -134,7 +704,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0"
+    version: "0.4.8"
+  transparent_image:
+    dependency: "direct main"
+    description:
+      name: transparent_image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   typed_data:
     dependency: transitive
     description:
@@ -142,12 +719,90 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  url_launcher:
+    dependency: "direct main"
+    description:
+      name: url_launcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.2"
+  url_launcher_android:
+    dependency: transitive
+    description:
+      name: url_launcher_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.17"
+  url_launcher_ios:
+    dependency: transitive
+    description:
+      name: url_launcher_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.17"
+  url_launcher_linux:
+    dependency: transitive
+    description:
+      name: url_launcher_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
+  url_launcher_macos:
+    dependency: transitive
+    description:
+      name: url_launcher_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
+  url_launcher_platform_interface:
+    dependency: transitive
+    description:
+      name: url_launcher_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.5"
+  url_launcher_web:
+    dependency: transitive
+    description:
+      name: url_launcher_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.11"
+  url_launcher_windows:
+    dependency: transitive
+    description:
+      name: url_launcher_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.5.2"
+  xdg_directories:
+    dependency: transitive
+    description:
+      name: xdg_directories
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.0+1"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.3.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.16.0 <3.0.0"
+  flutter: ">=2.10.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 066484de..b7373d6c 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,5 +1,5 @@
 name: guam_community_client
-description: Connect Developers
+description: We connect developers.
 
 # The following line prevents the package from being accidentally published to
 # pub.dev using `pub publish`. This is preferred for private packages.
@@ -15,19 +15,52 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 1.0.0+1
+version: 1.0.3
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.10.0 <3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
+  http: ^0.13.1
+  provider: ^5.0.0
+  cupertino_icons: ^1.0.2
+  hexcolor: ^2.0.3
+  modal_bottom_sheet: ^2.0.0
+  conditional_builder: ^1.0.2
+  flutter_form_builder: ^6.0.0-nullsafety.1
+  intl: ^0.17.0
+  bot_toast: ^4.0.1
+  dotted_border: ^2.0.0+1
+  url_launcher: ^6.0.5
+  flutter_secure_storage: ^5.0.2
+  flutter_portal: ^0.4.0
+  flutter_mentions: 2.0.1
+  jiffy: ^5.0.0
+  flutter_linkify: ^5.0.2
+  path_provider: ^2.0.9
 
+  # Image
+  flutter_svg: ^0.23.0+1
+  transparent_image: ^2.0.0
+  image_picker: ^0.7.4
+  carousel_slider: ^4.0.0
 
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.2
+  # FlutterFire
+  firebase_core: ^1.12.0
+  firebase_analytics: ^9.1.0
+  firebase_auth: ^3.3.6
+  cloud_firestore: ^3.1.7
+  firebase_messaging: ^11.2.6
+
+  # Kakao Login Dependency
+  kakao_flutter_sdk: ^0.9.0
+  dio: ^4.0.4
+  json_annotation: ^4.4.0
+  shared_preferences: ^2.0.13
+  platform: ^3.1.0
+  package_info: ^2.0.2
 
 dev_dependencies:
   flutter_test:
@@ -38,17 +71,14 @@ dev_dependencies:
 
 # The following section is specific to Flutter.
 flutter:
-
-  # The following line ensures that the Material Icons font is
-  # included with your application, so that you can use the icons in
-  # the material Icons class.
   uses-material-design: true
-
-  # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
-
+  assets:
+    - assets/icons/
+    - assets/logos/
+    - assets/images/
+    - assets/gifs/
+    - assets/backgrounds/
+    - assets/backgrounds/splash/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.
 
@@ -60,17 +90,15 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
+  fonts:
+    - family: SpoqaHanSansNeoMedium
+      fonts:
+        - asset: assets/fonts/SpoqaHanSansNeo-Medium.ttf
+          weight: 400
+    - family: SpoqaHanSansNeoRegular
+      fonts:
+        - asset: assets/fonts/SpoqaHanSansNeo-Regular.ttf
+          weight: 400
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages