diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 00c37d6..97bb380 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -13,8 +13,8 @@ android {
         applicationId = "com.haodustudio.DailyNotes"
         minSdk = 24
         targetSdk = 33
-        versionCode = 3
-        versionName = "1.0.2"
+        versionCode = 4
+        versionName = "1.0.3"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
 
diff --git a/app/src/main/java/com/haodustudio/DailyNotes/view/activities/AboutSoftware.kt b/app/src/main/java/com/haodustudio/DailyNotes/view/activities/AboutSoftware.kt
index a2141b8..a761af1 100644
--- a/app/src/main/java/com/haodustudio/DailyNotes/view/activities/AboutSoftware.kt
+++ b/app/src/main/java/com/haodustudio/DailyNotes/view/activities/AboutSoftware.kt
@@ -1,102 +1,123 @@
 package com.haodustudio.DailyNotes.view.activities
 
-import android.content.BroadcastReceiver
-import android.content.Context
 import android.content.Intent
-import android.content.IntentFilter
+import android.content.pm.PackageManager
 import android.net.Uri
 import android.os.Bundle
-import android.os.Handler
-import android.util.Log
-import android.view.View
-import androidx.appcompat.app.AppCompatActivity
-import androidx.core.content.edit
-import androidx.lifecycle.ViewModelProvider
-import com.bumptech.glide.Glide
-import com.bumptech.glide.load.engine.DiskCacheStrategy
+import android.os.Build
 import com.haodustudio.DailyNotes.BaseApplication
 import com.haodustudio.DailyNotes.R
 import com.haodustudio.DailyNotes.databinding.ActivityAboutSoftwareBinding
 import com.haodustudio.DailyNotes.helper.makeToast
-import com.haodustudio.DailyNotes.utils.ViewUtils
+import com.haodustudio.DailyNotes.view.activities.ViewImage
 import com.haodustudio.DailyNotes.view.activities.base.BaseActivity
-import com.haodustudio.DailyNotes.viewModel.viewModels.GlobalViewModel
-
 
 class AboutSoftware : BaseActivity() {
     private val binding by lazy { ActivityAboutSoftwareBinding.inflate(layoutInflater) }
-    private val appViewModel = ViewModelProvider(
-        BaseApplication.instance,
-        ViewModelProvider.AndroidViewModelFactory.getInstance(BaseApplication.instance)
-    )[GlobalViewModel::class.java]
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(binding.root)
 
-        binding.openSourceText.setOnClickListener {
-            makeToast("视频加载中\n改编自：@我家邻居全是猫")
-            val mIntent = Intent(this, ViewImage::class.java)
-            val videoUrl = BaseApplication.buildServerUrl("/static/about_eggshell_video.mp4")
-            if (videoUrl == null) {
-                makeToast("无网络连接")
+        configureBanner()
+        configureCards()
+    }
+
+    private fun configureBanner() {
+        binding.bannerBadge.text = getString(R.string.about_codename_label)
+        binding.bannerTitle.text = getString(R.string.about_banner_title)
+        binding.bannerSubtitle.text = getString(R.string.about_banner_subtitle)
+    }
+
+    private fun configureCards() {
+        val versionName = runCatching {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                packageManager.getPackageInfo(
+                    packageName,
+                    PackageManager.PackageInfoFlags.of(0)
+                ).versionName
             } else {
-                mIntent.putExtra("isVideo", true)
-                mIntent.putExtra("path", videoUrl)
-                startActivity(mIntent)
+                @Suppress("DEPRECATION")
+                packageManager.getPackageInfo(packageName, 0).versionName
+            }
+        }.getOrNull()
+
+        binding.cardSoftwareVersion.apply {
+            title.text = getString(R.string.about_section_version_title)
+            subtitle.text = versionName?.let {
+                getString(R.string.about_section_version_subtitle, it)
+            } ?: getString(R.string.about_section_version_placeholder)
+            icon.setImageResource(R.drawable.info)
+            root.contentDescription = getString(R.string.about_section_version_desc)
+            root.setOnClickListener {
+                makeToast(subtitle.text.toString())
             }
         }
 
-        binding.artPeopleInfo.setOnClickListener {
-            val mIntent = Intent(this, ViewImage::class.java)
-            val imageUrl = BaseApplication.buildServerUrl("/static/about_thanks_img.png")
-            if (imageUrl == null) {
-                makeToast("无网络连接")
-            } else {
-                mIntent.putExtra("path", imageUrl)
-                mIntent.putExtra("zoomEnabled", false)
-                startActivity(mIntent)
+        binding.cardContributors.apply {
+            title.text = getString(R.string.about_section_contributors_title)
+            subtitle.text = getString(R.string.about_section_contributors_subtitle)
+            icon.setImageResource(R.drawable.usergroup)
+            root.contentDescription = getString(R.string.about_section_contributors_desc)
+            root.setOnClickListener {
+                openRemoteAsset("/static/about_thanks_img.png", zoomEnabled = false)
             }
         }
 
-        binding.haodusWindow.setOnClickListener {
-            makeToast("诶哟你干嘛 (")
+        binding.cardRepository.apply {
+            title.text = getString(R.string.about_section_repo_title)
+            subtitle.text = getString(R.string.about_section_repo_subtitle)
+            icon.setImageResource(R.drawable.ic_about_github)
+            root.contentDescription = getString(R.string.about_section_repo_desc)
+            root.setOnClickListener {
+                openExternalUrl("https://github.com/HaoduStudio/DailyNotes")
+            }
+        }
+
+        binding.cardPolicy.apply {
+            title.text = getString(R.string.about_section_policy_title)
+            subtitle.text = getString(R.string.about_section_policy_subtitle)
+            icon.setImageResource(R.drawable.ic_about_policy)
+            root.contentDescription = getString(R.string.about_section_policy_desc)
+            root.setOnClickListener {
+                openRemoteAsset("/static/about_user_privacy_policy.png", zoomEnabled = true)
+            }
         }
 
-        binding.mengxisWindow.setOnClickListener {
-            makeToast("WebStorm，启动！")
+        binding.cardPrivacy.apply {
+            title.text = getString(R.string.about_section_privacy_title)
+            subtitle.text = getString(R.string.about_section_privacy_subtitle)
+            icon.setImageResource(R.drawable.ic_about_privacy)
+            root.contentDescription = getString(R.string.about_section_privacy_desc)
+            root.setOnClickListener {
+                makeToast(getString(R.string.about_feature_placeholder))
+            }
         }
+    }
 
-        val verName = packageManager.
-            getPackageInfo(packageName, 0).versionName
-        binding.versionInfo.text = "Version $verName"
+    private fun openRemoteAsset(path: String, zoomEnabled: Boolean) {
+        val assetUrl = BaseApplication.buildServerUrl(path)
+        if (assetUrl == null) {
+            makeToast(getString(R.string.about_network_unavailable))
+            return
+        }
 
-        // tot = 2.5, ge ge ge (?
-        ViewUtils.fadeIn(binding.aboutForeground, 1000) {
-            binding.aboutForeground.postDelayed({
-                ViewUtils.fadeOut(binding.aboutForeground, 500) {
-                    startMainPage()
-                }
-            }, 1000)
+        val viewerIntent = Intent(this, ViewImage::class.java).apply {
+            putExtra("path", assetUrl)
+            putExtra("zoomEnabled", zoomEnabled)
+            if (path.endsWith(".mp4")) {
+                putExtra("isVideo", true)
+            }
         }
+        startActivity(viewerIntent)
     }
 
-    private fun startMainPage() {
-        binding.videoView.visibility = View.GONE
-        binding.aboutForeground.visibility = View.GONE
-        binding.aboutRoot.visibility = View.VISIBLE
-//        Glide.with(this).asGif().load(R.drawable.ic_cute_loading).into(binding.userPpImg)
-        val policyUrl = BaseApplication.buildServerUrl("/static/about_user_privacy_policy.png")
-        if (policyUrl == null) {
-            makeToast("无网络连接")
+    private fun openExternalUrl(url: String) {
+        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
+        if (intent.resolveActivity(packageManager) != null) {
+            startActivity(intent)
         } else {
-            Glide
-                .with(this)
-                .load(policyUrl)
-                .placeholder(R.drawable.ic_cute_loading)
-                .skipMemoryCache(true) // 不使用内存缓存
-                .diskCacheStrategy(DiskCacheStrategy.NONE)
-                .into(binding.userPpImg)
+            makeToast(url)
         }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/res/drawable/about_banner.png b/app/src/main/res/drawable/about_banner.png
new file mode 100644
index 0000000..ddf5c48
Binary files /dev/null and b/app/src/main/res/drawable/about_banner.png differ
diff --git a/app/src/main/res/drawable/bg_about_badge.xml b/app/src/main/res/drawable/bg_about_badge.xml
new file mode 100644
index 0000000..6de6a74
--- /dev/null
+++ b/app/src/main/res/drawable/bg_about_badge.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#80000000" />
+    <corners android:radius="16dp" />
+</shape>
diff --git a/app/src/main/res/drawable/bg_about_banner_gradient.xml b/app/src/main/res/drawable/bg_about_banner_gradient.xml
new file mode 100644
index 0000000..64df939
--- /dev/null
+++ b/app/src/main/res/drawable/bg_about_banner_gradient.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:startColor="#00000000"
+        android:centerColor="#66000000"
+        android:endColor="#CC000000"
+        android:angle="270" />
+</shape>
diff --git a/app/src/main/res/drawable/bg_about_banner_placeholder.xml b/app/src/main/res/drawable/bg_about_banner_placeholder.xml
new file mode 100644
index 0000000..e25ae72
--- /dev/null
+++ b/app/src/main/res/drawable/bg_about_banner_placeholder.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#222229" />
+</shape>
diff --git a/app/src/main/res/drawable/bg_about_icon_container.xml b/app/src/main/res/drawable/bg_about_icon_container.xml
new file mode 100644
index 0000000..1e06be5
--- /dev/null
+++ b/app/src/main/res/drawable/bg_about_icon_container.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/about_icon_background" />
+    <corners android:radius="22dp" />
+</shape>
diff --git a/app/src/main/res/drawable/ic_about_github.png b/app/src/main/res/drawable/ic_about_github.png
new file mode 100644
index 0000000..051500a
Binary files /dev/null and b/app/src/main/res/drawable/ic_about_github.png differ
diff --git a/app/src/main/res/drawable/ic_about_policy.png b/app/src/main/res/drawable/ic_about_policy.png
new file mode 100644
index 0000000..9bf6e4b
Binary files /dev/null and b/app/src/main/res/drawable/ic_about_policy.png differ
diff --git a/app/src/main/res/drawable/ic_about_privacy.png b/app/src/main/res/drawable/ic_about_privacy.png
new file mode 100644
index 0000000..404d37e
Binary files /dev/null and b/app/src/main/res/drawable/ic_about_privacy.png differ
diff --git a/app/src/main/res/drawable/info.png b/app/src/main/res/drawable/info.png
new file mode 100644
index 0000000..70ad045
Binary files /dev/null and b/app/src/main/res/drawable/info.png differ
diff --git a/app/src/main/res/drawable/usergroup.png b/app/src/main/res/drawable/usergroup.png
new file mode 100644
index 0000000..5e8c0e6
Binary files /dev/null and b/app/src/main/res/drawable/usergroup.png differ
diff --git a/app/src/main/res/layout/activity_about_software.xml b/app/src/main/res/layout/activity_about_software.xml
index 2a03b9e..a6890c4 100644
--- a/app/src/main/res/layout/activity_about_software.xml
+++ b/app/src/main/res/layout/activity_about_software.xml
@@ -1,376 +1,198 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:background="#F2000000"
+    android:background="@color/about_background"
     tools:context=".view.activities.AboutSoftware">
 
-    <VideoView
-        android:id="@+id/video_view"
-        android:visibility="gone"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"/>
+    <androidx.core.widget.NestedScrollView
+        android:id="@+id/about_scroll"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:clipToPadding="false"
+        android:fillViewport="true"
+        android:paddingStart="24dp"
+        android:paddingTop="32dp"
+        android:paddingEnd="24dp"
+        android:paddingBottom="32dp"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent">
 
-    <RelativeLayout
-        android:id="@+id/about_foreground"
-        android:background="#FFF"
-        android:visibility="gone"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent">
-
-        <ImageView
-            android:layout_width="100dp"
-            android:layout_height="100dp"
-            android:layout_centerHorizontal="true"
-            android:layout_marginTop="10dp"
-            android:src="@mipmap/ic_launcher_foreground" />
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentBottom="true"
-            android:layout_centerHorizontal="true"
-            android:layout_marginBottom="35dp"
-            android:textSize="18sp"
-            android:text="@string/app_name"
-            android:textStyle="bold"
-            android:textColor="#2C2C2C"/>
-
-        <TextView
-            android:id="@+id/version_info"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentBottom="true"
-            android:layout_centerHorizontal="true"
-            android:text="Version X.X"
-            android:layout_marginBottom="15dp"
-            android:textColor="#2C2C2C"
-            android:textSize="12sp"/>
-    </RelativeLayout>
-
-    <ScrollView
-        android:visibility="gone"
-        android:id="@+id/about_root"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent">
         <LinearLayout
+            android:id="@+id/about_content"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="vertical">
+
             <TextView
+                android:id="@+id/about_title"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:textStyle="bold"
-                android:layout_marginTop="5dp"
-                android:textSize="18sp"
-                android:text="作者"
-                android:textColor="#FF9800"/>
-
-            <RelativeLayout
-                android:id="@+id/haodus_window"
-                android:layout_width="match_parent"
-                android:layout_height="50dp"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:layout_marginTop="10dp"
-                android:background="@drawable/about_author_style">
-                <de.hdodenhof.circleimageview.CircleImageView
-                    android:layout_width="45dp"
-                    android:layout_height="45dp"
-                    android:layout_centerVertical="true"
-                    android:src="@drawable/ic_user_img_haoduyoudu"/>
-
-                <LinearLayout
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_centerHorizontal="true"
-                    android:layout_alignParentEnd="true"
-                    android:layout_marginEnd="5dp"
-                    android:orientation="vertical">
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="好读游独"
-                        android:textStyle="bold"
-                        android:textColor="#FFF"
-                        android:textSize="15sp"
-                        android:layout_gravity="end" />
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="首席开发人员"
-                        android:layout_marginTop="2dp"
-                        android:layout_gravity="end"
-                        android:textColor="#FFF"
-                        android:textSize="10sp"/>
-                </LinearLayout>
-            </RelativeLayout>
+                android:text="@string/about"
+                android:textColor="@color/white"
+                android:textSize="26sp"
+                android:fontFamily="sans-serif-medium"
+                tools:text="关于软件" />
 
-            <RelativeLayout
-                android:id="@+id/mengxis_window"
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/bannerCard"
                 android:layout_width="match_parent"
-                android:layout_height="50dp"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:layout_marginTop="3dp"
-                android:background="@drawable/about_author_style">
-                <de.hdodenhof.circleimageview.CircleImageView
-                    android:layout_width="45dp"
-                    android:layout_height="45dp"
-                    android:layout_centerVertical="true"
-                    android:src="@drawable/ic_user_img_mengxi"/>
+                android:layout_height="wrap_content"
+                android:layout_marginTop="24dp"
+                android:clickable="false"
+                android:focusable="false"
+                app:cardBackgroundColor="@android:color/transparent"
+                app:cardCornerRadius="24dp"
+                app:cardUseCompatPadding="false"
+                app:strokeColor="@color/about_card_stroke"
+                app:strokeWidth="1dp">
 
-                <LinearLayout
+                <androidx.constraintlayout.widget.ConstraintLayout
                     android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_centerHorizontal="true"
-                    android:layout_alignParentEnd="true"
-                    android:layout_marginEnd="5dp"
-                    android:orientation="vertical">
-
-                    <TextView
-                        android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <ImageView
+                        android:id="@+id/bannerImage"
+                        android:layout_width="0dp"
+                        android:layout_height="0dp"
+                        android:adjustViewBounds="true"
+                        android:contentDescription="@string/about_banner_content_description"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/about_banner"
+                        app:layout_constraintTop_toTopOf="parent"
+                        app:layout_constraintBottom_toBottomOf="parent"
+                        app:layout_constraintStart_toStartOf="parent"
+                        app:layout_constraintEnd_toEndOf="parent"
+                        app:layout_constraintDimensionRatio="280:158"
+                        tools:srcCompat="@drawable/about_banner" />
+
+                    <View
+                        android:id="@+id/bannerGradient"
+                        android:layout_width="0dp"
+                        android:layout_height="0dp"
+                        android:background="@drawable/bg_about_banner_gradient"
+                        app:layout_constraintTop_toTopOf="@id/bannerImage"
+                        app:layout_constraintBottom_toBottomOf="@id/bannerImage"
+                        app:layout_constraintStart_toStartOf="@id/bannerImage"
+                        app:layout_constraintEnd_toEndOf="@id/bannerImage" />
+
+                    <LinearLayout
+                        android:id="@+id/bannerFooter"
+                        android:layout_width="0dp"
                         android:layout_height="wrap_content"
-                        android:text="MengXi"
-                        android:textStyle="bold"
-                        android:textColor="#FFF"
-                        android:textSize="15sp"
-                        android:layout_gravity="end" />
+                        android:orientation="vertical"
+                        android:paddingStart="20dp"
+                        android:paddingEnd="20dp"
+                        android:paddingBottom="20dp"
+                        app:layout_constraintBottom_toBottomOf="@id/bannerImage"
+                        app:layout_constraintStart_toStartOf="@id/bannerImage"
+                        app:layout_constraintEnd_toEndOf="@id/bannerImage">
+
+                        <TextView
+                            android:id="@+id/bannerTitle"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/about_banner_title"
+                            android:textColor="@color/white"
+                            android:textSize="22sp"
+                            android:fontFamily="sans-serif-medium"
+                            tools:text="DailyNotes" />
+
+                        <TextView
+                            android:id="@+id/bannerSubtitle"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginTop="4dp"
+                            android:text="@string/about_banner_subtitle"
+                            android:textColor="@color/about_secondary_text"
+                            android:textSize="14sp"
+                            android:fontFamily="sans-serif-light"
+                            tools:text="Community Edition" />
+                    </LinearLayout>
 
                     <TextView
+                        android:id="@+id/bannerBadge"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:text="运营人员"
-                        android:layout_marginTop="2dp"
-                        android:layout_gravity="end"
-                        android:textColor="#FFF"
-                        android:textSize="10sp"/>
-                </LinearLayout>
-            </RelativeLayout>
-
-            <RelativeLayout
-                android:id="@+id/art_people_info"
+                        android:layout_marginTop="16dp"
+                        android:layout_marginEnd="16dp"
+                        android:background="@drawable/bg_about_badge"
+                        android:fontFamily="sans-serif-medium"
+                        android:paddingStart="12dp"
+                        android:paddingTop="6dp"
+                        android:paddingEnd="12dp"
+                        android:paddingBottom="6dp"
+                        android:text="@string/about_codename_label"
+                        android:textColor="@color/white"
+                        android:textSize="12sp"
+                        app:layout_constraintEnd_toEndOf="@id/bannerImage"
+                        app:layout_constraintTop_toTopOf="@id/bannerImage"
+                        tools:text="代号：Isla" />
+                </androidx.constraintlayout.widget.ConstraintLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <TextView
+                android:id="@+id/about_quote_line1"
                 android:layout_width="match_parent"
-                android:layout_height="50dp"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:layout_marginTop="3dp"
-                android:background="@drawable/about_author_style">
-                <de.hdodenhof.circleimageview.CircleImageView
-                    android:layout_width="45dp"
-                    android:layout_height="45dp"
-                    android:layout_centerVertical="true"
-                    android:src="@drawable/ic_user_img_arts"/>
-
-                <LinearLayout
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_centerHorizontal="true"
-                    android:layout_alignParentEnd="true"
-                    android:layout_marginEnd="5dp"
-                    android:orientation="vertical">
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="美工们"
-                        android:textStyle="bold"
-                        android:textColor="#FFF"
-                        android:textSize="15sp"
-                        android:layout_gravity="end" />
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="点击查看"
-                        android:layout_marginTop="2dp"
-                        android:layout_gravity="end"
-                        android:textColor="#FFF"
-                        android:textSize="10sp"/>
-                </LinearLayout>
-            </RelativeLayout>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:textStyle="bold"
-                android:layout_marginTop="5dp"
-                android:textSize="18sp"
-                android:text="邮箱 &amp;\n反馈通道"
-                android:textColor="#FF9800"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="Michael的电子邮箱"
-                android:textStyle="bold"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="15sp"
-                android:layout_marginTop="3dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="michaelzhtiger@outloo\nk.com"
-                android:textStyle="italic"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="14.5sp"
-                android:layout_marginTop="1dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="MengXi的电子邮箱"
-                android:textStyle="bold"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="15sp"
-                android:layout_marginTop="3dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="me@zhunote.cn"
-                android:textStyle="italic"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="14.5sp"
-                android:layout_marginTop="1dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="QQ反馈群号"
-                android:textStyle="bold"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="15sp"
-                android:layout_marginTop="3dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="721731698"
-                android:textStyle="italic"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="14.5sp"
-                android:layout_marginTop="1dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="我们的站点"
-                android:textStyle="bold"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="15sp"
-                android:layout_marginTop="3dp"/>
+                android:layout_marginTop="20dp"
+                android:gravity="center"
+                android:text="正因为会失去，所以才要去珍惜"
+                android:textAlignment="center"
+                android:textColor="@color/about_secondary_text"
+                android:textSize="14sp"
+                android:fontFamily="sans-serif" />
 
             <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="dailynotes.top"
-                android:textStyle="italic"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="14.5sp"
-                android:layout_marginTop="1dp"/>
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:textStyle="bold"
-                android:layout_marginTop="5dp"
-                android:textSize="18sp"
-                android:text="开源信息"
-                android:textColor="#FF9800"/>
-
-            <TextView
-                android:id="@+id/open_source_text"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:layout_marginTop="5dp"
-                android:textSize="12sp"
-                android:text="你可以在Github上下载并编译我们的源码\n\n网址: github.com/HaoduStudio/DailyNotes"
-                android:textColor="#FFF"/>
-
-            <TextView
-                android:layout_width="wrap_content"
+                android:id="@+id/about_quote_line2"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:layout_marginTop="5dp"
-                android:textSize="12sp"
-                android:text="你必须遵循Apache2.0开源协议，我们将保留一切追究权利"
-                android:textColor="#FFF"/>
-
-            <TextView
-                android:layout_width="wrap_content"
+                android:layout_marginTop="4dp"
+                android:gravity="center"
+                android:text="希望你能好好利用本软件"
+                android:textAlignment="center"
+                android:textColor="@color/about_secondary_text"
+                android:textSize="14sp"
+                android:fontFamily="sans-serif" />
+
+            <include
+                android:id="@+id/cardSoftwareVersion"
+                layout="@layout/layout_about_item"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:textStyle="bold"
-                android:layout_marginTop="5dp"
-                android:textSize="18sp"
-                android:text="隐私政策"
-                android:textColor="#FF9800"/>
+                android:layout_marginTop="16dp" />
 
-            <ImageView
-                android:id="@+id/user_pp_img"
-                android:layout_width="wrap_content"
+            <include
+                android:id="@+id/cardContributors"
+                layout="@layout/layout_about_item"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:adjustViewBounds="true"
-                android:layout_gravity="center_horizontal"
-                android:src="@drawable/ic_cute_loading"/>
+                android:layout_marginTop="16dp" />
 
-            <TextView
-                android:layout_width="wrap_content"
+            <include
+                android:id="@+id/cardRepository"
+                layout="@layout/layout_about_item"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:textStyle="bold"
-                android:layout_marginTop="5dp"
-                android:textSize="18sp"
-                android:text="版权声明"
-                android:textColor="#FF9800"/>
+                android:layout_marginTop="16dp" />
 
-            <TextView
-                android:layout_width="wrap_content"
+            <include
+                android:id="@+id/cardPolicy"
+                layout="@layout/layout_about_item"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="本软件不涉及盈利，内嵌网络视频和图片均已标明出处。如有侵权，请联系我们，我们将马上删除。\n\n本软件中大部分使用的图标来自iconfont.cn。\n"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:textColor="#FFF"
-                android:textSize="12sp"
-                android:layout_marginTop="4dp"/>
+                android:layout_marginTop="16dp" />
 
-            <TextView
-                android:layout_width="wrap_content"
+            <include
+                android:id="@+id/cardPrivacy"
+                layout="@layout/layout_about_item"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="HaoduStudio版权所有"
-                android:layout_marginStart="6dp"
-                android:layout_marginEnd="6dp"
-                android:layout_marginBottom="5dp"
-                android:textStyle="bold"
-                android:textColor="#FFF"
-                android:textSize="12sp" />
+                android:layout_marginTop="16dp" />
         </LinearLayout>
-    </ScrollView>
-</FrameLayout>
\ No newline at end of file
+    </androidx.core.widget.NestedScrollView>
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/layout_about_item.xml b/app/src/main/res/layout/layout_about_item.xml
new file mode 100644
index 0000000..50dea14
--- /dev/null
+++ b/app/src/main/res/layout/layout_about_item.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:clickable="true"
+    android:focusable="true"
+    android:foreground="?attr/selectableItemBackground"
+    app:cardBackgroundColor="@color/about_card_background"
+    app:cardCornerRadius="20dp"
+    app:cardElevation="0dp"
+    app:strokeColor="@color/about_card_stroke"
+    app:strokeWidth="0.5dp">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        android:gravity="center_vertical"
+        android:paddingStart="20dp"
+        android:paddingTop="18dp"
+        android:paddingEnd="20dp"
+        android:paddingBottom="18dp">
+
+        <FrameLayout
+            android:layout_width="44dp"
+            android:layout_height="44dp"
+            android:background="@drawable/bg_about_icon_container">
+
+            <ImageView
+                android:id="@+id/icon"
+                android:layout_width="33dp"
+                android:layout_height="33dp"
+                android:layout_gravity="center"
+                android:contentDescription="@null"
+                tools:srcCompat="@drawable/ic_launcher_foreground" />
+        </FrameLayout>
+
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
+            android:layout_weight="1"
+            android:orientation="vertical">
+
+            <TextView
+                android:id="@+id/title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="sans-serif-medium"
+                android:textColor="@color/white"
+                android:textSize="16sp"
+                tools:text="主标题" />
+
+            <TextView
+                android:id="@+id/subtitle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="4dp"
+                android:fontFamily="sans-serif-thin"
+                android:textColor="@color/about_secondary_text"
+                android:textSize="14sp"
+                tools:text="副文本" />
+        </LinearLayout>
+
+    </LinearLayout>
+</com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f508e8c..4453401 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -24,4 +24,10 @@
 
 
     <color name="dialog_background">#4D000000</color>
+
+    <color name="about_background">#101013</color>
+    <color name="about_secondary_text">#B3FFFFFF</color>
+    <color name="about_card_background">#18181C</color>
+    <color name="about_card_stroke">#26FFFFFF</color>
+    <color name="about_icon_background">#1FFFFFFF</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index b990269..ce4daeb 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -8,6 +8,30 @@
     <string name="personalize">个性化</string>
     <string name="guide">使用指南</string>
     <string name="about">关于软件</string>
+    <string name="about_banner_content_description">关于软件展示图</string>
+    <string name="about_banner_title">DailyNotes</string>
+    <string name="about_banner_subtitle">Community Edition</string>
+    <string name="about_codename_label">代号：Isla</string>
+    <string name="about_quote">正因为会失去，所以才要去珍惜
+希望你能好好利用本软件</string>
+    <string name="about_section_version_title">软件版本</string>
+    <string name="about_section_version_placeholder">v—</string>
+    <string name="about_section_version_subtitle">v%1$s</string>
+    <string name="about_section_version_desc">软件版本卡片</string>
+    <string name="about_section_contributors_title">贡献者</string>
+    <string name="about_section_contributors_subtitle">原作者/开发者/美工们</string>
+    <string name="about_section_contributors_desc">贡献者卡片</string>
+    <string name="about_section_repo_title">开源仓库</string>
+    <string name="about_section_repo_subtitle">在 Github 上查看</string>
+    <string name="about_section_repo_desc">开源仓库卡片</string>
+    <string name="about_section_policy_title">EULA与隐私协议</string>
+    <string name="about_section_policy_subtitle">阅读协议全文</string>
+    <string name="about_section_policy_desc">EULA与隐私协议卡片</string>
+    <string name="about_section_privacy_title">隐私设置</string>
+    <string name="about_section_privacy_subtitle">管理隐私相关选项</string>
+    <string name="about_section_privacy_desc">隐私设置卡片</string>
+    <string name="about_network_unavailable">无网络连接</string>
+    <string name="about_feature_placeholder">敬请期待</string>
 
     <string name="please_write_one_note_at_least">请至少写一篇手帐</string>
     <string name="update_complete">更新完成</string>