diff --git a/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsGroup.kt b/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsGroup.kt
new file mode 100644
index 0000000..e2d04dd
--- /dev/null
+++ b/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsGroup.kt
@@ -0,0 +1,66 @@
+package de.pawcode.cardstore.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Web
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SettingsGroup(modifier: Modifier = Modifier, title: String, content: @Composable () -> Unit) {
+  Column(modifier = modifier) {
+    Text(
+      text = title,
+      style = MaterialTheme.typography.titleMedium,
+      color = MaterialTheme.colorScheme.primary,
+      modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+    )
+
+    Surface(
+      modifier = Modifier.fillMaxWidth(),
+      color = MaterialTheme.colorScheme.surface,
+      shape = MaterialTheme.shapes.extraLarge,
+    ) {
+      Column(verticalArrangement = Arrangement.spacedBy(2.dp)) { content() }
+    }
+  }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewSettingsGroup() {
+  SettingsGroup(title = "About") {
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.primaryContainer,
+      iconBackground = MaterialTheme.colorScheme.onPrimaryContainer,
+      title = "pawcode Development",
+      subtitle = "View website",
+      onClick = {},
+    )
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.secondaryContainer,
+      iconBackground = MaterialTheme.colorScheme.onSecondaryContainer,
+      title = "pawcode Development",
+      subtitle = "View website",
+      onClick = {},
+    )
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.tertiaryContainer,
+      iconBackground = MaterialTheme.colorScheme.onTertiaryContainer,
+      title = "pawcode Development",
+      subtitle = "View website",
+      onClick = {},
+    )
+  }
+}
diff --git a/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsItem.kt b/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsItem.kt
new file mode 100644
index 0000000..819ac9b
--- /dev/null
+++ b/app/src/main/java/de/pawcode/cardstore/ui/components/SettingsItem.kt
@@ -0,0 +1,101 @@
+package de.pawcode.cardstore.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Web
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SettingsItem(
+  icon: ImageVector,
+  iconColor: Color,
+  iconBackground: Color,
+  title: String,
+  subtitle: String? = null,
+  onClick: (() -> Unit)? = null,
+) {
+  Row(
+    modifier =
+      Modifier.fillMaxWidth()
+        .background(
+          color = MaterialTheme.colorScheme.surfaceContainer,
+          shape = MaterialTheme.shapes.extraSmall,
+        )
+        .then(if (onClick != null) Modifier.clickable { onClick() } else Modifier)
+        .padding(16.dp),
+    verticalAlignment = Alignment.CenterVertically,
+  ) {
+    Box(
+      modifier = Modifier.size(40.dp).clip(CircleShape).background(iconBackground),
+      contentAlignment = Alignment.Center,
+    ) {
+      Icon(
+        imageVector = icon,
+        contentDescription = null,
+        tint = iconColor,
+        modifier = Modifier.size(20.dp),
+      )
+    }
+
+    Column(modifier = Modifier.weight(1f).padding(horizontal = 16.dp)) {
+      Text(
+        text = title,
+        style = MaterialTheme.typography.bodyLarge,
+        color = MaterialTheme.colorScheme.onSurface,
+      )
+      subtitle?.let {
+        Text(
+          text = it,
+          style = MaterialTheme.typography.bodyMedium,
+          color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+      }
+    }
+  }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewSettingsItem() {
+  Column {
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.primaryFixed,
+      iconBackground = MaterialTheme.colorScheme.onPrimaryFixedVariant,
+      title = "pawcode Development",
+      subtitle = "View website",
+      onClick = {},
+    )
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.secondaryFixed,
+      iconBackground = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+      title = "pawcode Development",
+    )
+    SettingsItem(
+      icon = Icons.Default.Web,
+      iconColor = MaterialTheme.colorScheme.tertiaryFixed,
+      iconBackground = MaterialTheme.colorScheme.onTertiaryFixedVariant,
+      title = "pawcode Development",
+      subtitle = "View website",
+    )
+  }
+}
diff --git a/app/src/main/java/de/pawcode/cardstore/ui/screens/AboutScreen.kt b/app/src/main/java/de/pawcode/cardstore/ui/screens/AboutScreen.kt
index 012f986..40dc00d 100644
--- a/app/src/main/java/de/pawcode/cardstore/ui/screens/AboutScreen.kt
+++ b/app/src/main/java/de/pawcode/cardstore/ui/screens/AboutScreen.kt
@@ -2,7 +2,7 @@ package de.pawcode.cardstore.ui.screens
 
 import android.content.Intent
 import android.content.pm.PackageInfo
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -11,16 +11,26 @@ import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.NavigateNext
-import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
+import androidx.compose.material.icons.filled.Android
+import androidx.compose.material.icons.filled.BugReport
+import androidx.compose.material.icons.filled.CameraAlt
+import androidx.compose.material.icons.filled.Code
+import androidx.compose.material.icons.filled.Colorize
+import androidx.compose.material.icons.filled.DataObject
+import androidx.compose.material.icons.filled.Gesture
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Palette
+import androidx.compose.material.icons.filled.QrCode
+import androidx.compose.material.icons.filled.Scanner
+import androidx.compose.material.icons.filled.Storage
+import androidx.compose.material.icons.filled.Store
+import androidx.compose.material.icons.filled.Web
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -29,23 +39,54 @@ import androidx.core.net.toUri
 import androidx.navigation.NavController
 import de.pawcode.cardstore.R
 import de.pawcode.cardstore.ui.components.AppBar
+import de.pawcode.cardstore.ui.components.SettingsGroup
+import de.pawcode.cardstore.ui.components.SettingsItem
 
-data class Technology(val name: String, val url: String)
+data class Technology(val name: String, val url: String, val icon: ImageVector)
 
 val TECHNOLOGIES =
-  listOf<Technology>(
-    Technology(name = "Kotlin", url = "https://kotlinlang.org/"),
-    Technology(name = "Jetpack Compose", url = "https://developer.android.com/jetpack/compose"),
-    Technology(name = "Room", url = "https://developer.android.com/jetpack/androidx/releases/room"),
-    Technology(name = "Material Design 3", url = "https://m3.material.io/"),
-    Technology(name = "ML Kit", url = "https://developers.google.com/ml-kit"),
+  listOf(
+    Technology(name = "Kotlin", url = "https://kotlinlang.org/", icon = Icons.Filled.DataObject),
+    Technology(
+      name = "Jetpack Compose",
+      url = "https://developer.android.com/jetpack/compose",
+      icon = Icons.Filled.Android,
+    ),
+    Technology(
+      name = "Room",
+      url = "https://developer.android.com/jetpack/androidx/releases/room",
+      icon = Icons.Filled.Storage,
+    ),
+    Technology(
+      name = "Material Design 3",
+      url = "https://m3.material.io/",
+      icon = Icons.Filled.Palette,
+    ),
+    Technology(
+      name = "ML Kit",
+      url = "https://developers.google.com/ml-kit",
+      icon = Icons.Filled.Scanner,
+    ),
     Technology(
       name = "Google Code-Scanner",
       url = "https://developers.google.com/ml-kit/vision/barcode-scanning/code-scanner",
+      icon = Icons.Filled.CameraAlt,
+    ),
+    Technology(
+      name = "ColorPickerView",
+      url = "https://github.com/skydoves/ColorPickerView",
+      icon = Icons.Filled.Colorize,
+    ),
+    Technology(
+      name = "ComposedBarcodes",
+      url = "https://github.com/simonsickle/ComposedBarcodes",
+      icon = Icons.Filled.QrCode,
+    ),
+    Technology(
+      name = "RevealSwipe",
+      url = "https://github.com/ch4rl3x/RevealSwipe",
+      icon = Icons.Filled.Gesture,
     ),
-    Technology(name = "ColorPickerView", url = "https://github.com/skydoves/ColorPickerView"),
-    Technology(name = "ComposedBarcodes", url = "https://github.com/simonsickle/ComposedBarcodes"),
-    Technology(name = "RevealSwipe", url = "https://github.com/ch4rl3x/RevealSwipe"),
   )
 
 @Composable
@@ -84,108 +125,79 @@ fun AboutScreenComponent(
       modifier = Modifier.padding(innerPadding).fillMaxSize().verticalScroll(rememberScrollState()),
       horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-      Column(modifier = Modifier.widthIn(max = 500.dp).fillMaxWidth()) {
-        Text(
-          text = stringResource(R.string.about),
-          style = MaterialTheme.typography.headlineSmall,
-          modifier = Modifier.padding(top = 24.dp, start = 16.dp, bottom = 16.dp, end = 16.dp),
-        )
-
-        HorizontalDivider()
-
-        ListItem(
-          headlineContent = {
-            Text(stringResource(R.string.version) + if (isDebug) " (debug)" else "")
-          },
-          supportingContent = { Text(versionName + " (${packageInfo.longVersionCode})") },
-          trailingContent = {
-            if (hasVersionName) {
-              Icon(
-                Icons.AutoMirrored.Filled.NavigateNext,
-                contentDescription = stringResource(R.string.changelog_view),
-              )
-            } else {
-              null
-            }
-          },
-          modifier =
-            if (hasVersionName) {
-              Modifier.clickable {
+      Column(
+        modifier = Modifier.widthIn(max = 500.dp).fillMaxWidth().padding(8.dp),
+        verticalArrangement = Arrangement.spacedBy(24.dp),
+      ) {
+        // App Information Group
+        SettingsGroup(title = stringResource(R.string.about)) {
+          SettingsItem(
+            icon = Icons.Filled.Info,
+            iconColor = MaterialTheme.colorScheme.primaryFixed,
+            iconBackground = MaterialTheme.colorScheme.onPrimaryFixedVariant,
+            title = stringResource(R.string.version) + if (isDebug) " (debug)" else "",
+            subtitle = versionName + " (${packageInfo.longVersionCode})",
+            onClick = {
+              if (hasVersionName) {
                 onOpenWebsite("https://github.com/pawcoding/card-store/releases/tag/v$versionName")
               }
-            } else {
-              Modifier
             },
-        )
-
-        HorizontalDivider()
-
-        ListItem(
-          headlineContent = { Text("pawcode Development") },
-          supportingContent = { Text(stringResource(R.string.website)) },
-          trailingContent = {
-            Icon(Icons.AutoMirrored.Filled.NavigateNext, contentDescription = null)
-          },
-          modifier = Modifier.clickable { onOpenWebsite(context.getString(R.string.website_link)) },
-        )
-
-        HorizontalDivider()
-
-        ListItem(
-          headlineContent = { Text(stringResource(R.string.source_code)) },
-          supportingContent = { Text(stringResource(R.string.github_repository)) },
-          trailingContent = {
-            Icon(Icons.AutoMirrored.Filled.NavigateNext, contentDescription = null)
-          },
-          modifier = Modifier.clickable { onOpenWebsite("https://github.com/pawcoding/card-store") },
-        )
-
-        HorizontalDivider()
-
-        ListItem(
-          headlineContent = { Text(stringResource(R.string.playstore)) },
-          supportingContent = { Text(stringResource(R.string.playstore_description)) },
-          trailingContent = {
-            Icon(Icons.AutoMirrored.Filled.NavigateNext, contentDescription = null)
-          },
-          modifier =
-            Modifier.clickable {
+          )
+        }
+
+        // Links Group
+        SettingsGroup(title = stringResource(R.string.links)) {
+          SettingsItem(
+            icon = Icons.Filled.Web,
+            iconColor = MaterialTheme.colorScheme.secondaryFixed,
+            iconBackground = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+            title = "pawcode Development",
+            subtitle = stringResource(R.string.website),
+            onClick = { onOpenWebsite(context.getString(R.string.website_link)) },
+          )
+
+          SettingsItem(
+            icon = Icons.Filled.Code,
+            iconColor = MaterialTheme.colorScheme.secondaryFixed,
+            iconBackground = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+            title = stringResource(R.string.source_code),
+            subtitle = stringResource(R.string.github_repository),
+            onClick = { onOpenWebsite("https://github.com/pawcoding/card-store") },
+          )
+
+          SettingsItem(
+            icon = Icons.Filled.Store,
+            iconColor = MaterialTheme.colorScheme.secondaryFixed,
+            iconBackground = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+            title = stringResource(R.string.playstore),
+            subtitle = stringResource(R.string.playstore_description),
+            onClick = {
               onOpenWebsite("https://play.google.com/store/apps/details?id=de.pawcode.cardstore")
             },
-        )
-
-        HorizontalDivider()
-
-        ListItem(
-          headlineContent = { Text(stringResource(R.string.report_issue)) },
-          supportingContent = { Text(stringResource(R.string.github_issues)) },
-          trailingContent = {
-            Icon(Icons.AutoMirrored.Filled.NavigateNext, contentDescription = null)
-          },
-          modifier =
-            Modifier.clickable { onOpenWebsite("https://github.com/pawcoding/card-store/issues") },
-        )
-
-        HorizontalDivider()
-
-        Text(
-          text = stringResource(R.string.technologies),
-          style = MaterialTheme.typography.headlineSmall,
-          modifier = Modifier.padding(top = 24.dp, start = 16.dp, bottom = 16.dp, end = 16.dp),
-        )
-
-        HorizontalDivider()
-
-        TECHNOLOGIES.forEach { technology ->
-          ListItem(
-            headlineContent = { Text(technology.name) },
-            trailingContent = {
-              Icon(Icons.AutoMirrored.Filled.NavigateNext, contentDescription = null)
-            },
-            modifier = Modifier.clickable { onOpenWebsite(technology.url) },
           )
 
-          HorizontalDivider()
+          SettingsItem(
+            icon = Icons.Filled.BugReport,
+            iconColor = MaterialTheme.colorScheme.secondaryFixed,
+            iconBackground = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+            title = stringResource(R.string.report_issue),
+            subtitle = stringResource(R.string.github_issues),
+            onClick = { onOpenWebsite("https://github.com/pawcoding/card-store/issues") },
+          )
+        }
+
+        // Technologies Group
+        SettingsGroup(title = stringResource(R.string.technologies)) {
+          TECHNOLOGIES.forEach { technology ->
+            SettingsItem(
+              icon = technology.icon,
+              iconColor = MaterialTheme.colorScheme.tertiaryFixed,
+              iconBackground = MaterialTheme.colorScheme.onTertiaryFixedVariant,
+              title = technology.name,
+              subtitle = null,
+              onClick = { onOpenWebsite(technology.url) },
+            )
+          }
         }
       }
     }
diff --git a/app/src/main/res/values-de/strings.xml b/app/src/main/res/values-de/strings.xml
index e2f09cd..c7d7059 100644
--- a/app/src/main/res/values-de/strings.xml
+++ b/app/src/main/res/values-de/strings.xml
@@ -59,6 +59,7 @@
     <string name="labels_new">Neues Label hinzufügen</string>
     <string name="labels_none">Keine Labels</string>
     <string name="labels_options">Optionen</string>
+    <string name="links">Links</string>
     <string name="playstore">Im Play Store anzeigen</string>
     <string name="playstore_description">App bewerten und rezensieren</string>
     <string name="report_issue">Ein Problem entdeckt?</string>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index faef364..1032864 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -58,6 +58,7 @@
     <string name="labels_new">Add new label</string>
     <string name="labels_none">No labels</string>
     <string name="labels_options">Options</string>
+    <string name="links">Links</string>
     <string name="playstore">View in Play Store</string>
     <string name="playstore_description">Rate and review the app</string>
     <string name="report_issue">Report an issue</string>