diff --git a/firka/lib/helpers/extensions.dart b/firka/lib/helpers/extensions.dart
index 4d993408..70f2fcb4 100644
--- a/firka/lib/helpers/extensions.dart
+++ b/firka/lib/helpers/extensions.dart
@@ -84,6 +84,7 @@ enum FormatMode {
   dd,
   yyyymmddwedd,
   yyyymmmm,
+  yyyymmdd,
   yyyymmddhhmmss
 }
 
@@ -135,6 +136,8 @@ extension DateExtension on DateTime {
         return "${DateFormat('yyyy MMM. dd', l10n.localeName).format(weekStart).toLowerCase()}-${DateFormat('dd', l10n.localeName).format(weekEnd)}";
       case FormatMode.yyyymmmm:
         return DateFormat('yyyy MMMM', l10n.localeName).format(this);
+      case FormatMode.yyyymmdd:
+        return DateFormat('yyyy. MM. dd.', l10n.localeName).format(this);
       case FormatMode.yyyymmddhhmmss:
         return DateFormat('yyyy-MM-dd hh:mm:ss', l10n.localeName).format(this);
     }
diff --git a/firka/lib/helpers/ui/common_bottom_sheets.dart b/firka/lib/helpers/ui/common_bottom_sheets.dart
index f4750ad6..f169d328 100644
--- a/firka/lib/helpers/ui/common_bottom_sheets.dart
+++ b/firka/lib/helpers/ui/common_bottom_sheets.dart
@@ -10,6 +10,7 @@ import '../../main.dart';
 import '../../ui/model/style.dart';
 import '../../ui/phone/widgets/lesson.dart';
 import '../../ui/widget/class_icon.dart';
+import '../api/model/notice_board.dart';
 import '../api/model/timetable.dart';
 import 'firka_card.dart';
 import 'grade.dart';
@@ -173,7 +174,6 @@ Future<void> showLessonBottomSheet(
 
 Future<void> showGradeBottomSheet(
     BuildContext context, AppInitialization data, Grade grade) async {
-  // grade.recordDate
   showModalBottomSheet(
     context: context,
     elevation: 100,
@@ -278,3 +278,137 @@ Future<void> showGradeBottomSheet(
     },
   );
 }
+
+Future<void> showAnnouncementBottomSheet(
+    BuildContext context, AppInitialization data, InfoBoardItem info) async {
+  showModalBottomSheet(
+    context: context,
+    elevation: 100,
+    isScrollControlled: true,
+    enableDrag: true,
+    backgroundColor: Colors.transparent,
+    barrierColor: appStyle.colors.a15p,
+    constraints: BoxConstraints(
+      maxHeight: MediaQuery.of(context).size.height * 0.9,
+    ),
+    builder: (BuildContext context) {
+      return Stack(
+        children: [
+          Positioned.fill(
+            child: GestureDetector(
+              onTap: () => Navigator.pop(context),
+              behavior: HitTestBehavior.opaque,
+              child: Container(color: Colors.transparent),
+            ),
+          ),
+          Align(
+            alignment: Alignment.bottomCenter,
+            child: Container(
+              decoration: BoxDecoration(
+                color: appStyle.colors.background,
+                borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.85,
+                          child: Text(
+                            info.title,
+                            textAlign: TextAlign.center,
+                            style: appStyle.fonts.H_H2
+                                .apply(color: appStyle.colors.textPrimary),
+                          ),
+                        ),
+                      ],
+                    ),
+                    SizedBox(height: 8),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Text(
+                          info.date.format(data.l10n, FormatMode.yyyymmdd),
+                          textAlign: TextAlign.center,
+                          style: appStyle.fonts.B_14R
+                              .apply(color: appStyle.colors.textSecondary),
+                        ),
+                      ],
+                    ),
+                    SizedBox(height: 56),
+                    Row(
+                      children: [
+                        Container(
+                          decoration: ShapeDecoration(
+                              color: appStyle.colors.accent,
+                              shape: CircleBorder(
+                                eccentricity: 1,
+                              )),
+                          child: SizedBox(
+                            width: 28,
+                            height: 28,
+                            child: Row(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Padding(
+                                  padding: const EdgeInsets.only(bottom: 6),
+                                  child: Text(
+                                    info.author[0],
+                                    style: appStyle.fonts.H_18px.copyWith(
+                                        fontSize: 20,
+                                        color: appStyle.colors.textPrimary),
+                                  ),
+                                )
+                              ],
+                            ),
+                          ),
+                        ),
+                        SizedBox(width: 8),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            SizedBox(
+                              width: MediaQuery.of(context).size.width / 1.4,
+                              child: Text(
+                                info.author,
+                                style: appStyle.fonts.B_14SB
+                                    .apply(color: appStyle.colors.textPrimary),
+                              ),
+                            )
+                          ],
+                        ),
+                      ],
+                    ),
+                    SizedBox(height: 20),
+                    Padding(
+                      padding: const EdgeInsets.all(4),
+                      child: Container(
+                        decoration: BoxDecoration(
+                            color: appStyle.colors.card,
+                            borderRadius:
+                                BorderRadius.all(Radius.circular(16))),
+                        child: Padding(
+                          padding: const EdgeInsets.all(12),
+                          child: Text(
+                            info.contentText,
+                            style: appStyle.fonts.B_16R
+                                .apply(color: appStyle.colors.textPrimary),
+                            textAlign: TextAlign.start,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
+      );
+    },
+  );
+}
diff --git a/firka/lib/ui/phone/pages/home/home_main.dart b/firka/lib/ui/phone/pages/home/home_main.dart
index 11ef765b..8b765593 100644
--- a/firka/lib/ui/phone/pages/home/home_main.dart
+++ b/firka/lib/ui/phone/pages/home/home_main.dart
@@ -218,10 +218,17 @@ class _HomeMainScreen extends FirkaState<HomeMainScreen> {
         noticeBoard != null &&
         lessons != null) {
       List<(Widget, DateTime)> noticeBoardWidgets = List.empty(growable: true);
-      // TODO: Add notice board items once we actually have those
 
       for (final item in infoBoard!) {
-        noticeBoardWidgets.add((InfoBoardItemWidget(item), item.date));
+        noticeBoardWidgets.add((
+          GestureDetector(
+            child: InfoBoardItemWidget(item),
+            onTap: () {
+              showAnnouncementBottomSheet(context, widget.data, item);
+            },
+          ),
+          item.date
+        ));
       }
 
       for (final grade in grades!) {